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

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

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

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

?為什么用戶不喜歡你的頁面？

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

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

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

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

四大基本原則

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

1. 親密性

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

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

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

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

支付寶app：搜索賬號、輸入金額

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

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

Apple網(wǎng)站

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

2. 對齊

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

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

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

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

3. 重復(fù)

3.1 為什么重復(fù)？

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

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

3.2 重復(fù)什么？

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

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

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

這就引出了最后一個原則：對比。

4. 對比

上面說過，含義不同，外觀雷同的元素設(shè)計會使用戶多加判斷，這也是用戶疲勞的來源之一。

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

拿一個現(xiàn)實的例子：

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

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

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

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

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

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

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

總結(jié)

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

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

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

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

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