編輯導語：一個好的頁面的信息層級能夠提升用戶的體驗感和減少用戶獲取信息的成本，本篇文章作者分享了頁面信息層級優化的相關方法，從内容層面和視覺層面總結了其方法，幹貨滿滿，一起來學習一下吧，希望對你有幫助。

先來看看下面這張圖。你大概率會按照文字所寫的閱讀順序進行閱讀，這也是本圖的設計師所希望的。

如何巧妙的引導用戶閱讀信息？如何準确快速的傳達信息并減少用戶獲取信息的成本？本文從内容層面和視覺層面總結了頁面信息層級的優化方法，希望會對你有所啟發。

一、從内容層面做優化

頁面的優化應該先從分析頁面的功能和内容出發，通常有以下幾種方法：

1. 根據内容的優先級進行優化

在信息量較大的頁面中，設計師需要充分了解産品功能和用戶所需，對頁面的内容進行劃分，明确各部分内容的優先級，建立信息層級。可以從産品和用戶兩個角度思考頁面信息的優先級：

• 産品 / 頁面的核心功能和輔助功能；
• 産品/ 頁面最希望用戶看到的信息；
• 頁面中的固定（不變的）信息和動态（常變的）信息；
• 用戶的浏覽習慣和使用行為；
• 用戶最想看到的信息；
• 用戶需要的功能和信息。

舉個例子，下圖為某投資類 App 每周發給用戶的報告。你會先看到哪些内容？

分析一下頁面信息内容，我們會發現：

上圖中序号 1 和 2 這兩部分内容是固定信息，序号 1 是該 App 品牌識别的一部分，序号 2 的内容則會在此類型的報告中重複出現，老用戶一般不會在意。

序号 3 是唯一的動态的、常變的信息，是報告要傳達的核心信息，也是用戶最關注的信息内容。

因此設計師在對該頁面優化時，可以重點突出序号 3 這類常變且用戶關注的核心内容上，以此來調整頁面布局，更高效的向用戶傳達信息，如下右圖：

2. 根據内容的親密性進行優化

親密性原則是設計師應該掌握的基本設計原則之一，其宗旨是：彼此相關的内容應該适當靠近，形成一組。下圖中右邊是經過整理後的頁面布局，會使頁面變得更為易讀：

親密性原則可以使有關聯的信息呈現得更有組織性，如下圖兩款 App 中的内容布局：

二、從視覺層面做優化

從視覺層面對頁面進行優化的效果會更為直接，通常用以下幾種方法：

1. 将頁面黃金位置留給主要内容

通常情況下，用戶浏覽頁面會按照從左上至右下的順序，而且一般先看到水平方向的内容，後看到豎直方向的内容。

下圖的天貓 App 中，用戶最常用的訂單相關的功能被放在整個頁面中部偏上的黃金位置：

2. 使用對比手法

視覺效果中的對比手法體現在很多方面，如大小對比，色彩對比，動靜對比等等：

大小對比：通過界面元素的大小對比凸顯信息層次，信息内容越重要，體量占比越大，次要的内容則适當縮小：

在做文字的排版時，也要注意字号之間的大小和色彩對比，如下圖豆瓣 App 中的電影推薦内容的标題、評分、短評、标簽的字号各不相同，有清晰的層次感：

顔色對比：界面中使用大面積的色塊背景，襯托主要内容，與其他内容形成強烈對比，吸引用戶的注意力：

也可以用不同顔色的小面積色塊，形成對比，區分内容闆塊：

動靜對比：想要突出的内容采用适當的動畫效果，吸引用戶的注意力，比如支付寶界面按鈕的變化、banner 的切換：

3. 使用陰影區分層次

界面的信息層級可以通過陰影效果體現層級的高低，不同層級的元素陰影效果不同。用戶通常會先看到最頂層的内容。我們在之前的文章MaterialDesign全面解析中，詳細介紹過陰影對于界面元素層級的影響，戳下圖可回顧文章：

下圖中的滴滴 App 和相遇 App，用陰影強調用戶應該填寫或需要注意的内容信息：

4. 使用不同的元素組合方式

界面的元素有多種排列的方式，文字和圖片也有不同的組合方式，不同的排版方式可以有效的區分信息版塊，比如下圖中口碑 App 中呈現美食就有很多種不同的排版方式，用來區分不同的内容版塊：

作者：元堯；長弓小子。

本文由@ 元堯 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部