頁(yè)面設(shè)計(jì)元素太多太雜，會(huì)讓用戶產(chǎn)生疲憊感。筆者認(rèn)為，按照這四個(gè)基本原則——“親密性”、“秩序性”、“一致性”、“差異性”來(lái)進(jìn)行頁(yè)面設(shè)計(jì)，能提高用戶使用頁(yè)面的舒適感，減少用戶閱讀疲憊。

頁(yè)面的布局“內(nèi)容為王“：布局優(yōu)雅的網(wǎng)頁(yè)需要內(nèi)容的支撐，混亂無(wú)章的表達(dá)內(nèi)容使用優(yōu)美的布局也只會(huì)給人空洞無(wú)用的感覺(jué)。

在選好配色后，對(duì)元素的布局要考慮到用戶的學(xué)習(xí)成本（操作習(xí)慣、邏輯判斷等），與顏色配置相似的一點(diǎn)，設(shè)計(jì)師對(duì)元素進(jìn)行有效處理，使之符合用戶的習(xí)慣，多方面降低用戶的學(xué)習(xí)成本，使得用戶更不易“疲憊”。大多數(shù)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)都是通過(guò)減輕用戶的疲憊感來(lái)提高頁(yè)面的使用效率。

人類的認(rèn)知秩序是從特殊到普遍再到特殊，而屏幕傳遞信息的方式是線性的，遵循人類的認(rèn)知秩序，利用線性傳遞信息的特性就需要對(duì)信息進(jìn)行有效處理。本篇我將會(huì)從布局方面著重闡述如何減輕用戶“疲憊感”。

?為什么用戶不喜歡你的頁(yè)面？

——設(shè)計(jì)造成的疲憊感。

頁(yè)面元素過(guò)雜過(guò)多，布局亂七八糟，色彩駁雜，主次不分等等，第一眼就已經(jīng)給用戶造成視覺(jué)壓力，使得用戶從內(nèi)心開(kāi)始抗拒使用，自然收不到用戶好評(píng)。

1. 沉浸式短視頻app，簡(jiǎn)單操作進(jìn)行內(nèi)容切換，相似內(nèi)容推薦吸引用戶無(wú)間斷使用。
2. 方便快捷的購(gòu)物網(wǎng)站，一鍵購(gòu)買極簡(jiǎn)操作，相似好物推薦減少用戶搜索行為。

以上兩種應(yīng)用場(chǎng)景都是通過(guò)減少了用戶動(dòng)作，提前預(yù)測(cè)用戶行為，在視覺(jué)，動(dòng)作方面減少用戶疲憊感，增加視覺(jué)刺激，提高產(chǎn)品可用性。

四大基本原則

考慮到用戶使用產(chǎn)品過(guò)程中疲憊感的來(lái)源，我們可以通過(guò)減少視線移動(dòng)、增強(qiáng)視覺(jué)刺激來(lái)進(jìn)行元素設(shè)計(jì)。設(shè)計(jì)主要遵循以下四個(gè)基本原則：“親密性”、“秩序性”、“一致性”、“差異性”。（親密性、對(duì)齊、重復(fù)、對(duì)比）

1. 親密性

為了減少用戶視線移動(dòng)，相關(guān)的元素（操作相關(guān)、功能邏輯相關(guān)、響應(yīng)邏輯相關(guān)）應(yīng)當(dāng)放置在一起組成視覺(jué)單元（物理位置相近）；邏輯聯(lián)系較弱，彼此無(wú)關(guān)的元素則不應(yīng)該靠近，使得整個(gè)頁(yè)面的邏輯層次清晰。

元素相關(guān)性強(qiáng)弱和物理位置遠(yuǎn)近的適當(dāng)設(shè)計(jì)，便于用戶理解元素邏輯內(nèi)容，減少混亂干擾。

1）用戶行為操作相關(guān)的，例如：選購(gòu)、結(jié)算、付款，一系列相關(guān)邏輯的操作功能按鈕需要保持在同一物理位置，避免視線上下移動(dòng)，造成混亂。

如：支付寶轉(zhuǎn)賬，視覺(jué)及操作區(qū)域保持在頁(yè)面上半部分，驗(yàn)證密碼從底部彈出則屬于另一套邏輯操作，屬于對(duì)比的原則，下文中詳述。

支付寶app：搜索賬號(hào)、輸入金額

2）元素邏輯聯(lián)系緊密的，例如：導(dǎo)航條內(nèi)容都組合在一個(gè)區(qū)域，操作區(qū)的布局同樣保持在一個(gè)部分。

如Apple官網(wǎng)，操作導(dǎo)航、產(chǎn)品分類、網(wǎng)頁(yè)介紹、背景通過(guò)親密性組合在一起，使得網(wǎng)頁(yè)邏輯清晰。

Apple網(wǎng)站

一般來(lái)說(shuō)，人眼會(huì)不自覺(jué)捕捉運(yùn)動(dòng)的物品，突兀的改變位置需要人腦進(jìn)行一個(gè)搜索畫(huà)面的過(guò)程，邏輯相近的元素分開(kāi)讓用戶視線搜索判斷的設(shè)計(jì)是有問(wèn)題的。而相近位置的組合展現(xiàn)則去掉了該過(guò)程。減輕觀眾處理信息的負(fù)擔(dān)。

2. 對(duì)齊

元素的擺放另一個(gè)重要原則就是對(duì)齊。對(duì)齊，不是說(shuō)橫平豎直，九宮格式的簡(jiǎn)單排列，而是在保證親密性原則下，打亂無(wú)關(guān)元素的物理位置位置，保持各部分對(duì)齊，即所謂“亂中有序”。

隨意擺放的元素在視覺(jué)上會(huì)造成混亂，同時(shí)在邏輯上也不易理解，因此在布局設(shè)計(jì)時(shí)，應(yīng)當(dāng)保證元素對(duì)齊，建立視覺(jué)聯(lián)系。一般來(lái)說(shuō)，不建議采用居中對(duì)齊的方式。

Apple 開(kāi)發(fā)者網(wǎng)站，頂部導(dǎo)航條、產(chǎn)品分類、標(biāo)題、介紹內(nèi)容等在邏輯聯(lián)系上親密，根據(jù)親密性原則物理位置相近，為了避免視覺(jué)混亂，將元素對(duì)齊，使得元素更具有秩序性。

Apple網(wǎng)站原型對(duì)齊分析

3. 重復(fù)

3.1 為什么重復(fù)？

對(duì)于類似的設(shè)計(jì)元素，要保持復(fù)用設(shè)計(jì)，保持整體設(shè)計(jì)的風(fēng)格一致。

書(shū)籍的文章標(biāo)題使用一樣的字體、大小，使得整本書(shū)脈絡(luò)清晰。

3.2 重復(fù)什么？

重復(fù)元素包含很多，符號(hào)、顏色、線條、字體甚至字間距等，組織重復(fù)信息利于幫助用戶理清頁(yè)面的層次邏輯，將設(shè)計(jì)中一致的元素統(tǒng)一起來(lái)，在外觀上即可作為整體元素進(jìn)行展示。

如下圖中一級(jí)導(dǎo)航與二級(jí)導(dǎo)航的重復(fù)樣式，視覺(jué)上相同，便于用戶理解不同頁(yè)面間的邏輯設(shè)置。

出現(xiàn)重復(fù)的元素，即提示用戶上一段的結(jié)束和新一段的開(kāi)始，免去用戶判斷過(guò)程。但要注意，沒(méi)有邏輯相關(guān)的元素需要避免相同的設(shè)計(jì)，人的直觀認(rèn)知中，外觀類似的元素會(huì)被自覺(jué)歸為一類，如果沒(méi)有邏輯相關(guān)的元素設(shè)計(jì)雷同，會(huì)讓用戶存在認(rèn)知錯(cuò)誤，增加其判斷過(guò)程。

這就引出了最后一個(gè)原則：對(duì)比。

4. 對(duì)比

上面說(shuō)過(guò)，含義不同，外觀雷同的元素設(shè)計(jì)會(huì)使用戶多加判斷，這也是用戶疲勞的來(lái)源之一。

元素的對(duì)比設(shè)計(jì)，可以是顏色也可以是粗細(xì)，有鮮明的對(duì)比可以在視覺(jué)上形成層次效果。

拿一個(gè)現(xiàn)實(shí)的例子：

平時(shí)我們吃旺旺仙貝經(jīng)常吃了就停不下來(lái)，為什么呢？

這是因?yàn)閮蓚€(gè)仙貝上面的調(diào)味粉是不一樣的，一個(gè)少，一個(gè)多。當(dāng)你先吃了調(diào)味粉少的，會(huì)覺(jué)得調(diào)味粉多的更好吃；先吃了調(diào)味粉多的，再吃少的會(huì)有味覺(jué)失落感，會(huì)讓你更期待下一包仙貝。如此往復(fù)，通過(guò)調(diào)味粉的多少對(duì)比，形成味覺(jué)的刺激循環(huán)，當(dāng)你意識(shí)到的時(shí)候，你已經(jīng)吃了很多仙貝了。

頁(yè)面的布局也一樣，差異元素的鮮明對(duì)比刺激用戶，使得用戶不易疲勞。

支付寶付款輸入密碼屬于轉(zhuǎn)賬環(huán)節(jié)“輸入賬戶-輸入金額-輸入密碼”中最后、最重要的一步操作，從底部彈窗，視線移動(dòng)刺激視覺(jué)，與以上兩步驟形成對(duì)比，將轉(zhuǎn)賬這一操作分解成了兩個(gè)有對(duì)比效果的視覺(jué)內(nèi)容。

支付寶轉(zhuǎn)賬操作

導(dǎo)航條之間的對(duì)比、標(biāo)題與內(nèi)容的對(duì)比、文字與圖片的對(duì)比，而iPhone和iPad顯示同樣的墻紙則是遵循了重復(fù)的原則，包括前面的親密性、對(duì)齊原則，因此可以說(shuō)這是一個(gè)優(yōu)雅的網(wǎng)頁(yè)。

優(yōu)雅網(wǎng)頁(yè)

總結(jié)

元素的布局要考慮視覺(jué)疲勞，盡量降低用戶學(xué)習(xí)成本，在布局上對(duì)場(chǎng)景進(jìn)行邏輯處理，符合用戶習(xí)慣的邏輯設(shè)計(jì)能夠降低用戶學(xué)習(xí)成本。

空間對(duì)于表達(dá)的重要性不言而喻，網(wǎng)頁(yè)的布局屬于美學(xué)的范疇，同時(shí)也隱藏著用戶邏輯判斷，視覺(jué)效果的引導(dǎo)減輕用戶負(fù)擔(dān)。進(jìn)一步優(yōu)化網(wǎng)頁(yè)，使網(wǎng)頁(yè)本身表達(dá)內(nèi)容，與用戶進(jìn)行交互，自然用戶的使用興趣會(huì)被調(diào)動(dòng)起來(lái)。

當(dāng)然上面的原則并非是一成不變的，根據(jù)現(xiàn)實(shí)場(chǎng)景，進(jìn)行判斷合理使用才是使網(wǎng)頁(yè)優(yōu)雅的終極奧義。

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

題圖來(lái)自Unspalsh, 基于CC0協(xié)議