如何避免頁面設計讓用戶產(chǎn)生疲憊感?

作者：admin 來源：互聯(lián)網(wǎng) 發(fā)布時間： 2019/7/19 9:51:04 瀏覽：

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

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

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

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

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

　　——設計造成的疲憊感。

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

　　沉浸式短視頻app，簡單操作進行內(nèi)容切換，相似內(nèi)容推薦吸引用戶無間斷使用。

　　方便快捷的購物網(wǎng)站，一鍵購買極簡操作，相似好物推薦減少用戶搜索行為。

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

　　四大基本原則

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

　　1. 親密性

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

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

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

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

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

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

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

　　Apple網(wǎng)站

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

　　2. 對齊

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

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

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

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

　　3. 重復

　　3.1 為什么重復?

　　對于類似的設計元素，要保持復用設計，保持整體設計的風格一致。

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

　　3.2 重復什么?

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

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

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

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

　　4. 對比

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

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

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

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

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

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

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