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

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

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

運用視覺(jué)表現建立網(wǎng)頁(yè)的信息層級,PS教程,

這個(gè)設計方法希望解決的主要是兩個(gè)問(wèn)題：

1、用戶(hù)獲取和理解信息的效率

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

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

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

一、前期了解&分析

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

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

通常有：

用戶(hù)是誰(shuí)

用戶(hù)來(lái)自哪里，即從什么渠道來(lái)到該頁(yè)面

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

頁(yè)面作用

舉個(gè)例子：

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

運用視覺(jué)表現建立網(wǎng)頁(yè)的信息層級,PS教程,

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

氛圍可能有：

新年主題大促

低折扣

信息鮮活

用戶(hù)活躍等等

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

運用視覺(jué)表現建立網(wǎng)頁(yè)的信息層級,PS教程,

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

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

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

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

運用視覺(jué)表現建立網(wǎng)頁(yè)的信息層級,PS教程,

1.4、分析用戶(hù)核心行為

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

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

運用視覺(jué)表現建立網(wǎng)頁(yè)的信息層級,PS教程,

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

運用視覺(jué)表現建立網(wǎng)頁(yè)的信息層級,PS教程,

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