詳解丨頁面的信息層級,這樣優(yōu)化更有效!

2 評論 7133 瀏覽 60 收藏 8 分鐘

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

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

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

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

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

頁面的優(yōu)化應該先從分析頁面的功能和內容出發(fā),通常有以下幾種方法:

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

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

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

舉個例子,下圖為某投資類 App 每周發(fā)給用戶的報告。你會先看到哪些內容?

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

分析一下頁面信息內容,我們會發(fā)現(xiàn):

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

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

序號 3 是唯一的動態(tài)的、常變的信息,是報告要傳達的核心信息,也是用戶最關注的信息內容。

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

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

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

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

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

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

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

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

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

1. 將頁面黃金位置留給主要內容

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

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

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

2. 使用對比手法

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

大小對比:通過界面元素的大小對比凸顯信息層次,信息內容越重要,體量占比越大,次要的內容則適當縮?。?/p>

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

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

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

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

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

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

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

動靜對比:想要突出的內容采用適當?shù)膭赢嬓Ч?,吸引用戶的注意力,比如支付寶界面按鈕的變化、banner 的切換:

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

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

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

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

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

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

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

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

詳解丨頁面的信息層級,這樣優(yōu)化更有效!

 

作者:元堯;微信公眾號:長弓小子。

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

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

更多精彩內容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. mark

    來自北京 回復
  2. 作者在文章提到的優(yōu)化技巧很實用,感覺這么優(yōu)化了以后用戶的體驗感也會更好

    來自山東 回復