編輯導(dǎo)語：一個(gè)好的頁面的信息層級能夠提升用戶的體驗(yàn)感和減少用戶獲取信息的成本，本篇文章作者分享了頁面信息層級優(yōu)化的相關(guān)方法，從內(nèi)容層面和視覺層面總結(jié)了其方法，干貨滿滿，一起來學(xué)習(xí)一下吧，希望對你有幫助。

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

如何巧妙的引導(dǎo)用戶閱讀信息？如何準(zhǔn)確快速的傳達(dá)信息并減少用戶獲取信息的成本？本文從內(nèi)容層面和視覺層面總結(jié)了頁面信息層級的優(yōu)化方法，希望會對你有所啟發(fā)。

一、從內(nèi)容層面做優(yōu)化

頁面的優(yōu)化應(yīng)該先從分析頁面的功能和內(nèi)容出發(fā)，通常有以下幾種方法：

1. 根據(jù)內(nèi)容的優(yōu)先級進(jìn)行優(yōu)化

在信息量較大的頁面中，設(shè)計(jì)師需要充分了解產(chǎn)品功能和用戶所需，對頁面的內(nèi)容進(jìn)行劃分，明確各部分內(nèi)容的優(yōu)先級，建立信息層級。可以從產(chǎn)品和用戶兩個(gè)角度思考頁面信息的優(yōu)先級：

• 產(chǎn)品 / 頁面的核心功能和輔助功能；
• 產(chǎn)品/ 頁面最希望用戶看到的信息；
• 頁面中的固定（不變的）信息和動(dòng)態(tài)（常變的）信息；
• 用戶的瀏覽習(xí)慣和使用行為；
• 用戶最想看到的信息；
• 用戶需要的功能和信息。

舉個(gè)例子，下圖為某投資類 App 每周發(fā)給用戶的報(bào)告。你會先看到哪些內(nèi)容？

分析一下頁面信息內(nèi)容，我們會發(fā)現(xiàn)：

上圖中序號 1 和 2 這兩部分內(nèi)容是固定信息，序號 1 是該 App 品牌識別的一部分，序號 2 的內(nèi)容則會在此類型的報(bào)告中重復(fù)出現(xiàn)，老用戶一般不會在意。

序號 3 是唯一的動(dòng)態(tài)的、常變的信息，是報(bào)告要傳達(dá)的核心信息，也是用戶最關(guān)注的信息內(nèi)容。

因此設(shè)計(jì)師在對該頁面優(yōu)化時(shí)，可以重點(diǎn)突出序號 3 這類常變且用戶關(guān)注的核心內(nèi)容上，以此來調(diào)整頁面布局，更高效的向用戶傳達(dá)信息，如下右圖：

2. 根據(jù)內(nèi)容的親密性進(jìn)行優(yōu)化

親密性原則是設(shè)計(jì)師應(yīng)該掌握的基本設(shè)計(jì)原則之一，其宗旨是：彼此相關(guān)的內(nèi)容應(yīng)該適當(dāng)靠近，形成一組。下圖中右邊是經(jīng)過整理后的頁面布局，會使頁面變得更為易讀：

親密性原則可以使有關(guān)聯(lián)的信息呈現(xiàn)得更有組織性，如下圖兩款 App 中的內(nèi)容布局：

二、從視覺層面做優(yōu)化

從視覺層面對頁面進(jìn)行優(yōu)化的效果會更為直接，通常用以下幾種方法：

1. 將頁面黃金位置留給主要內(nèi)容

通常情況下，用戶瀏覽頁面會按照從左上至右下的順序，而且一般先看到水平方向的內(nèi)容，后看到豎直方向的內(nèi)容。

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

2. 使用對比手法

視覺效果中的對比手法體現(xiàn)在很多方面，如大小對比，色彩對比，動(dòng)靜對比等等：

大小對比：通過界面元素的大小對比凸顯信息層次，信息內(nèi)容越重要，體量占比越大，次要的內(nèi)容則適當(dāng)縮?。?/p>

在做文字的排版時(shí)，也要注意字號之間的大小和色彩對比，如下圖豆瓣 App 中的電影推薦內(nèi)容的標(biāo)題、評分、短評、標(biāo)簽的字號各不相同，有清晰的層次感：

顏色對比：界面中使用大面積的色塊背景，襯托主要內(nèi)容，與其他內(nèi)容形成強(qiáng)烈對比，吸引用戶的注意力：

也可以用不同顏色的小面積色塊，形成對比，區(qū)分內(nèi)容板塊：

動(dòng)靜對比：想要突出的內(nèi)容采用適當(dāng)?shù)膭?dòng)畫效果，吸引用戶的注意力，比如支付寶界面按鈕的變化、banner 的切換：

3. 使用陰影區(qū)分層次

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

下圖中的滴滴 App 和相遇 App，用陰影強(qiáng)調(diào)用戶應(yīng)該填寫或需要注意的內(nèi)容信息：

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

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

作者：元堯；微信公眾號：長弓小子。

本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。