運用視覺表現(xiàn)建立網(wǎng)頁的信息層級發(fā)布者：本站     時間：2021-12-21 15:12:56

作為視覺設計師，我們的作用除了最基本的滿足用戶審美需求，還會有品牌傳達，信息傳達，功能傳達等，其中想要信息有效的傳達給用戶，需要我們建立信息層級，而不是一股腦的丟給用戶自己理解，要做到這點有哪些視覺方法，這些方法的背后是否有理論依據(jù)，是本文的主題。

首先看下面兩張圖，左圖為相機拍攝的效果，右圖為人眼不移動時看到的效果，可以發(fā)現(xiàn)人眼對信息的獲取并不是一次性完成的，它不能同時產(chǎn)生多個焦點從而把視線停留在更多的地方，設計師需要考慮的是讓用戶通過眼球移動，按照一定的順序獲取信息，幫助獲取和理解的過程高效自然。

運用視覺表現(xiàn)建立網(wǎng)頁的信息層級,PS教程,

這個設計方法希望解決的主要是兩個問題：

1、用戶獲取和理解信息的效率

建立良好的信息層級，能讓用戶在有限的時間里，快速獲取和理解有用、感興趣的信息，并產(chǎn)生下一步行為;

2、設計師的專業(yè)性

設計師有意識的分析信息優(yōu)先級，了解哪些視覺表現(xiàn)手法可以建立信息層級及每一種方法背后的理論依據(jù)，不僅僅憑感覺做設計。

一、前期了解&分析

在開始設計前，除了對項目本身的背景目標有所了解外，視覺設計師針對具體的頁面也需要了解一些內(nèi)容以幫助后面的設計有指導方向，包括頁面定位、氛圍營造、信息優(yōu)先級和用戶核心行為。

1.1、頁面定位是幫助分析頁面信息優(yōu)先級、核心行為的前提

通常有：

用戶是誰

用戶來自哪里，即從什么渠道來到該頁面

頁面內(nèi)容定位，提供什么、不提供什么

頁面作用

舉個例子：

我們在設計采購直達市場新首頁時，交互通過對頁面的用戶對服務的熟知度進行分析，確定首頁的最核心目標用戶是新買家;頁面內(nèi)容定位是展示市場的價值點，用戶產(chǎn)生的數(shù)據(jù)讓新買家對采購直達形成品牌的認知;

運用視覺表現(xiàn)建立網(wǎng)頁的信息層級,PS教程,

1.2、了解頁面需要營造的氛圍，能幫助我們判斷哪些元素能幫助達到目標，氛圍可以是內(nèi)容本身，也可以通過視覺元素設計來營造，但必須注意氛圍營造不應強過用戶關注的內(nèi)容本身

氛圍可能有：

新年主題大促

低折扣

信息鮮活

用戶活躍等等

以下是大促活動正式頁面，左圖延續(xù)了預熱期嘉年華的氛圍，但到活動開始階段氛圍已經(jīng)不是重點，用戶更關心商品及折扣本身，右圖為調(diào)整后將氛圍的營造和類目圖片相結合，很好的解決了氛圍和內(nèi)容的關系問題。

運用視覺表現(xiàn)建立網(wǎng)頁的信息層級,PS教程,

1.3、分析信息優(yōu)先級

1)一級信息吸引用戶：假設用戶只會在這個頁面停留3-5秒，最能夠吸引用戶繼續(xù)瀏覽的是頁面的核心賣點，是一級信息，它必須少而精，在設計上要重點展示

2)二級信息幫助理解：有了一級信息的吸引，用戶進一步了解內(nèi)容而可能停留3-5分鐘，這時展示二級信息即提煉的精華內(nèi)容，幫助用戶在盡量短時間內(nèi)理解信息

3)三級信息詳細了解：前兩類信息基本上能幫助用戶獲取足夠的信息，用戶如果繼續(xù)停留更長的時間去詳細了解，這類信息量會更多，在設計上視覺層級會靠后，或通過交互方式展示、提供入口跳轉

運用視覺表現(xiàn)建立網(wǎng)頁的信息層級,PS教程,

1.4、分析用戶核心行為

不同類型用戶會在不同階段產(chǎn)生行為，我們要判斷這些行為最終導向是什么?

比如商品詳情頁面，有些用戶在決定購買之前，會查看用戶評價、歷史交易等內(nèi)容，但這些查看的行為，最終是幫助用戶判斷是否購買這個商品，所以核心行為是最終導向的購買。

運用視覺表現(xiàn)建立網(wǎng)頁的信息層級,PS教程,

有了這些分析，交互產(chǎn)出物文檔中會給予大模塊的信息優(yōu)先級和用戶行為優(yōu)先級，如下圖：

運用視覺表現(xiàn)建立網(wǎng)頁的信息層級,PS教程,

視覺在進行細節(jié)設計前，需要對每個模塊內(nèi)的具體內(nèi)容進行優(yōu)先級的分析并產(chǎn)出如下示意圖并和交互和業(yè)務方確認，這些都是幫助視覺設計過程不偏離方向的重要產(chǎn)出物。