中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

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

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

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

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

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

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

因此設(shè)計(jì)師在對(duì)該頁(yè)面優(yōu)化時(shí)，可以重點(diǎn)突出序號(hào) 3 這類(lèi)常變且用戶(hù)關(guān)注的核心內(nèi)容上，以此來(lái)調(diào)整頁(yè)面布局，更高效的向用戶(hù)傳達(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ò)整理后的頁(yè)面布局，會(huì)使頁(yè)面變得更為易讀：

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

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

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

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

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

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

2. 使用對(duì)比手法

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

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

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

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

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

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

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

界面的信息層級(jí)可以通過(guò)陰影效果體現(xiàn)層級(jí)的高低，不同層級(jí)的元素陰影效果不同。用戶(hù)通常會(huì)先看到最頂層的內(nèi)容。我們?cè)谥暗奈恼翸aterialDesign全面解析中，詳細(xì)介紹過(guò)陰影對(duì)于界面元素層級(jí)的影響，戳下圖可回顧文章：

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

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

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

作者：元堯；微信公眾號(hào)：長(zhǎng)弓小子。

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

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