今天我們主要從用戶體驗的部分原則來看閑魚，主要以產(chǎn)品視覺設計四大原則、交互設計十大可用性原則、情感化設計來看閑魚，今天那先講兩個部分視覺和交互的用戶體驗。

其實主要是因為用戶體驗分為這個幾個方面：

1. 視覺的感官體驗，給用戶帶來的是視覺表現(xiàn)層的體驗，所以我們把產(chǎn)品視覺設計四大原則來對照用戶的感官體驗。
2. 交互的用戶體驗，也就是產(chǎn)品設計中給用戶使用過程產(chǎn)生交互互動，比如點擊效果、輸入、彈出、切換等等。所以我們用交互設計尼爾森十大可用性原則來對照交互的用戶體驗。
3. 情感用戶體驗，這是由外而內(nèi)的心理作用，給用戶帶來心理認同，增加滿足和愉悅感。所以我們用情感化設計原則來對照我們的情感用戶體驗。

產(chǎn)品視覺設計四大原則

在產(chǎn)品視覺的設計中我們可以用四大原則來滿足用戶感官體驗的優(yōu)化，主要是：對齊、重復、親密、 對比。

1. 對齊

頁面信息對齊，左對齊、右對齊、居中對齊，保持頁面視覺統(tǒng)一。

移動端的閱讀習慣是從左往右的，因此我們也是遵循向左對齊，或者尾部信息向右對齊。居中對齊在整體信息排列中較少使用，除非是比較正規(guī)、傳統(tǒng)的產(chǎn)品設計使用居中對齊的大關(guān)系，而在小細節(jié)的對齊中居中對齊應對logo/頭像等也有使用。從開發(fā)的成本上，對齊的設計也是方便了他們的開發(fā)。

舉例子：閑魚消息頁面頂部功能區(qū)域采用居中對齊方式，比較正式一些，突出顯示引導用戶點擊；個人頭像和消息左對齊顯示，發(fā)布圖片右對齊顯示。閑魚我的頁面，功能圖標和信息左對齊顯示，消息和進入按鈕右對齊顯示；贊賞、關(guān)注、粉絲居中顯示。重點突出的信息，居中顯示，引導用戶瀏覽路徑。常規(guī)列表左對齊、右對齊顯示，滿足用戶瀏覽習慣，提升用戶體驗。

2. 重復

重復比較簡單的理解為一致性，顏色、形狀、材質(zhì)、空間關(guān)系、線寬、材質(zhì)、空間等等。我們常說視覺規(guī)范的一致性就是這樣，保持這些單元的統(tǒng)一，貫穿始終這樣我們的頁面排版才會整體、產(chǎn)品設計才會整體。

舉例子：閑魚消息頁面，頭部功能區(qū)域圓形圖標重復，字體重復。消息列表頭像、名稱、消息、圖片重復，保持一致性，和統(tǒng)一。首頁部分功能區(qū)域圖標重復、風格重復一致；活動區(qū)域標題和圖片保持重復性原則；在類別篩選部分，每個類別瀑布流展現(xiàn)，宮格重復，保證頁面篩選一致性。

3. 親密

如果多個項相互之間存在很近的親密性，它們就會成為一個視覺整體。因此我們在設計時候往往需要將信息整合把有親密組織關(guān)系的內(nèi)容整合一起。減少了混亂不堪的信息內(nèi)容排列，整合框架，這也是方便用戶瀏覽，滿足了易讀性、易用性。個人觀點（在產(chǎn)品設計中親密度的把控，要多學理論、然后理論實踐結(jié)合，多多體證，才能更好的滿足用戶體驗）

舉例子：閑魚首頁分為4大部分，功能區(qū)域、活動區(qū)域、閑置區(qū)域、分類區(qū)域，每個區(qū)域相互親密，形成一個整體，通過間距分割，滿足用戶的易讀性，降低學習記憶負擔。消息頁面就更明顯了，主要分為功能操作區(qū)域和消息列表區(qū)域，每個區(qū)域相互親密通過間隔和表現(xiàn)形式區(qū)分。（這類需求就沒有基本需求那樣必備，是產(chǎn)品中期望需求體驗越多越好，用戶越滿意，反之用戶滿意度也會下降）。

4. 對比

對比的通俗來說就是要有對比性、不同點，就是要避免頁面上的元素太過相似，這樣那既要避免了同質(zhì)化也強調(diào)了差異化的節(jié)奏感，突出重點信息傳遞。當然這個度需要我們在日常工作中多多積累。比較常見的對比有方向?qū)Ρ取⑿畔Ρ?、顏色對比、對稱對比、比例對比等等。

舉例子：閑魚聊天頁面，雙方消息顏色對比，色彩的對比更加強的雙方聊天的視覺效果，對比也是比較明顯。閑魚的兌換詳情頁面，文字和信息的對比，突出展示內(nèi)容信息，讓用戶一目了然區(qū)分內(nèi)容和圖片，多重信息對比，也增加了信息獲取的質(zhì)量，提升用戶體驗。

產(chǎn)品設計的四大原則是一位美國設計師Robin Williams歸納整理的，文章中也有許多排版中案例說明，如果想進一步了解排版設計四大原則，可以看看這本書《寫給大家看的設計書》。

交互設計十大可用性原則

尼爾森（Jakob Nielsen）是一位人機交互學博士，于1995年1月1日發(fā)表了「十大可用性原則」。尼爾森的十大可用性原則是尼爾森博士分析了兩百多個可用性問題而提煉出的十項通用型原則。它是產(chǎn)品設計與用戶體驗設計的重要參考標準，值得深入研究與運用。

——百度百科

這是一套實用性的原則，無論是產(chǎn)品開發(fā)還是落地，都能夠很好的幫助我們提升用戶體驗和設計質(zhì)量。以人為本，以用戶為中心，讓我們設計師能夠很好的明確設計方向和用戶需求的科學方法論。

1. 狀態(tài)可見性原則

解讀狀態(tài)可見原則，我們將會從實際的案例中挑選，結(jié)合原則進行說明，方便大家更好的理解和把控狀態(tài)可見性原則。

（1）讓用戶知道系統(tǒng)在做什么

就是在產(chǎn)品設計過程中，像用戶展示系統(tǒng)進行的操作狀態(tài)。

舉個例子：:比如當頁面刷新過程中，告知用戶加載進度。當系統(tǒng)進行判斷操作過程中告知用戶當前操作狀態(tài)。當用戶清除緩存時告知用戶產(chǎn)品怎么清除緩存，等等。

（2）讓用戶知道自己處于系統(tǒng)的什么位置

其實就是我是在哪里呀，我要去哪呀，從哪去呀，讓用戶一目了然，不用太多學習成本。這是在頁面元素中的核心，一旦用戶不知道自己處于系統(tǒng)什么位置，就會容易操作失誤或者放棄產(chǎn)品。失去了設計為用戶服務的本質(zhì)。

舉個例子在閑魚頁面我們系統(tǒng)的標題欄、TAB欄的提示貫穿整體，用戶知道我們所處的什么頁面。比如認證提示，每一步告知用戶進行到哪里了。

（3）讓用戶知道系統(tǒng)做了什么

讓用戶知道產(chǎn)品做了什么，明確了知道下一步如何操作。

舉個例子：在閑魚登錄時當你輸入密碼錯誤等，系統(tǒng)提示密碼輸入錯誤，可以重新輸入。

當你退出登錄，系統(tǒng)提示保存了當前數(shù)據(jù)，下次可繼續(xù)登錄。當你清除緩存時，產(chǎn)品展示已清除置灰，數(shù)量變化等。

（4）讓用戶知道自己在做什么

當用戶進行操作時，產(chǎn)品及時反饋，用戶做了什么。

舉個例子：在閑魚中最簡單的例子就是當我們聊天時候，我們輸入信息發(fā)送，顯示在我們跟對方的聊天頁面中。

（5）新手提示

作為我們的新用戶是承載整個產(chǎn)品流量的口子，新手的提示關(guān)系著我們運營中的留存，這個方面做好，也是對運營業(yè)務鏈路有著很大的幫助。

舉個例子：在新手提示中，有一個設計要點就是可以采用趣味性設計，更好的與用戶情感交流。

2. 環(huán)境貼切原則

簡單的理解就是產(chǎn)品設計要跟現(xiàn)實相互結(jié)合，產(chǎn)品設計要符合用戶認知，不能做個我認為用戶是這樣理解的產(chǎn)品哈哈哈。

（1）圖片、圖標與現(xiàn)實相互結(jié)合

符合用戶對描述圖標功能的認證。

舉個例子：在閑魚首頁功能頁面，二手手機圖標采用現(xiàn)實生活手機作為造型，游戲交易采用游戲手柄作為造型，二手圖書采用圖書翻頁形式作為造型，珠寶文玩采用珠寶玉器作為造型，符合用戶在現(xiàn)實生活中熟悉的東西，滿足認知，有良好體驗。?

（2）文字表達滿足用戶認知

符合用戶自己現(xiàn)實生活的認證場景。

舉個例子：在魚塘頁面，文藝書畫、樂器等興趣魚塘，我們叫品質(zhì)文青聚集地，文藝青年在當下比較火的網(wǎng)絡名詞，喜歡文化藝術(shù)的青年，符合用戶年齡人群的環(huán)境認知。

3. 撤銷重做原則

這個比較好理解就是產(chǎn)品設計滿足撤銷重做原則，防止用戶出現(xiàn)后悔操作或者誤操作等等，滿足用戶體驗逆向操作。

（1）撤銷

瀏覽操作可以撤銷到前一步，舉個例子：閑魚頁面常見的返回操作就是撤銷的一個例子。

（2）重做

就是用戶撤銷上一步，又反悔了要到之前哪一步；或者用戶操作完成發(fā)布又反悔了重新發(fā)布，滿足用戶充足的反悔余地，給予用戶對產(chǎn)品的信心和控制感。

舉個例子：閑魚發(fā)布閑置后后悔了要重新發(fā)布，可以在管理頁面進行編輯或者刪除重發(fā)操作。

4. 一致性原則

一致性原則主要包含顏色、字體、圖標、圖片、功能、提示等等全局的一致性，給用戶帶來全局一致的舒適體驗。由于一致性包含內(nèi)容較多，所以下面就舉幾個主要例子來進行說明一致性原則。

（1）顏色一致性

顏色一致性是全局操作的重要一點，也是符合品牌基因貫通產(chǎn)品的重要體現(xiàn)。

舉個例子：顏色一致性在我的頁面和首頁頭部有了明顯體現(xiàn)。

（2）提示一致性

提示一致性只要是提示操作一致性，包含設計的圓角、字體層級、顏色等融合一起的一致性。

舉個例子：這次例子是不一致性的例子，取消保存、刪除、退出等操作一個彈窗一個設計樣式，不符合基本的提示一致性設計，當然這也是我們設計師在自己產(chǎn)品體驗設計中需要改進優(yōu)化的地方。

5. 防錯原則

簡單意思防止用戶出錯，在用戶錯誤操作或者可能因為誤操作引起不必要的操作損失時，給以用戶提示，防止用戶出錯。這里主要舉兩個比較常見類型的例子，幫助設計師理解放錯原則。

（1）退出操作提示

退出登錄退出保存時提示操作，防止用戶丟失數(shù)據(jù)出錯。

舉個例子：在退出登錄提示是否要注銷登錄，把確認層級加大，放在右邊，清晰提示用戶，防止用戶出錯。

（2）登錄操作

登錄操作時，滿足登錄操作條件后才會顯示按鈕高亮，其他情況下置灰操作，防止用戶錯誤點擊。

舉個例子：閑魚登錄操作輸入驗證碼后，按鈕高亮可以進行登錄（登錄操作不能截圖，大家可以自己下載閑魚去體驗一下）

6. 減少記憶負擔

系統(tǒng)主動識別，減少用戶記憶負擔，常見有掃碼識別、語音識別、指紋識別、掃臉識別等等系統(tǒng)操作。

舉個例子：閑魚掃碼識別用戶，識別條形碼商品等等。

7. 靈活高效原則

簡單理解就是靈活高效設計，滿足大多數(shù)用戶操作需求，操作高效便捷。因為不同產(chǎn)品類型不同，這里舉幾個常見類型說明，如自動回復，表情包預覽、常用表情包等。

（1）自動回復

比較典型的靈活高效設置，用戶不在線直接自動回復，選擇不同回復語。

舉個例子：閑魚我的頁面設置自動回復，靈活高效。

（2）表情包預覽

聊天時選擇自己的表情包，預覽，選擇適合自己的表情發(fā)送。

舉個例子：聊天頁面表情包預覽，可愛的閑魚表情切換，滿足用戶操作需求。

8. 易掃原則

簡單理解就是用戶掃描產(chǎn)品信息時，能夠容易獲取信息。因此需要突出層級強化主要部分。

舉個例子：閑魚的我的頁面，每個區(qū)塊進行功能區(qū)分，分為買、賣、玩、其他4個主要部分。降調(diào)層級，同時在區(qū)塊內(nèi)每個功能圖標宮格顯示，也易于用戶查找，滿足了易掃原則，提示了用戶體驗。

9. 容錯原則

簡單理解就是靈活高效設計，滿足大多數(shù)用戶操作需求，操作高效便捷。因為不同產(chǎn)品類型不同，這里舉幾個常見類型說明，如：自動回復、表情包預覽、常用表情包等。

（1）反饋幫助

產(chǎn)品出現(xiàn)問題或者用戶出現(xiàn)問題，給予反饋提示或者幫助。

舉個例子：網(wǎng)絡無法打開時，提示開小差了，可以刷新一下試試。

（2）限制操作

防止產(chǎn)品出現(xiàn)一些問題，可以進行提前限制操作來避免。

舉個例子：下載圖片有時候流量太少了，怎么辦，可以通過對圖像下載限制，避免用戶損失。

10. 人性化幫助

簡單理解就是幫助用戶操作，幫助用戶解決問題，給予提示、引導、建議、反饋等。這里主要說明2個主要常見的人性化幫助，信息提示和幫助說明。

（1）信息提示

產(chǎn)品新增功能或者復雜功能時，浮窗提示操作。舉個例子：新手撈魚互動，提示點擊引導信息，幫助用戶更好的操作。

?

（2）幫助說明

APP常用功能，用戶有疑問或者不懂得操作時，查看幫助說明，也能進行及時反饋:，方便用戶更好的使用產(chǎn)品。

舉個例子：閑魚的幫助說明功能更加全面，滿足不用用戶場景的問題需求，也能及時和客戶進行咨詢反饋信息。

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

題圖來自Unsplash，基于CC0協(xié)議