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

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

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

産品視覺設計四大原則

在産品視覺的設計中我們可以用四大原則來滿足用戶感官體驗的優化，主要是：對齊、重複、親密、 對比。

1. 對齊

頁面信息對齊，左對齊、右對齊、居中對齊，保持頁面視覺統一。

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

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

2. 重複

重複比較簡單的理解為一緻性，顔色、形狀、材質、空間關系、線寬、材質、空間等等。我們常說視覺規範的一緻性就是這樣，保持這些單元的統一，貫穿始終這樣我們的頁面排版才會整體、産品設計才會整體。

舉例子：閑魚消息頁面，頭部功能區域圓形圖标重複，字體重複。消息列表頭像、名稱、消息、圖片重複，保持一緻性，和統一。首頁部分功能區域圖标重複、風格重複一緻；活動區域标題和圖片保持重複性原則；在類别篩選部分，每個類别瀑布流展現，宮格重複，保證頁面篩選一緻性。

3. 親密

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

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

4. 對比

對比的通俗來說就是要有對比性、不同點，就是要避免頁面上的元素太過相似，這樣那既要避免了同質化也強調了差異化的節奏感，突出重點信息傳遞。當然這個度需要我們在日常工作中多多積累。比較常見的對比有方向對比、信息對比、顔色對比、對稱對比、比例對比等等。

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

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

交互設計十大可用性原則

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

——百度百科

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

1. 狀态可見性原則

解讀狀态可見原則，我們将會從實際的案例中挑選，結合原則進行說明，方便大家更好的理解和把控狀态可見性原則。

（1）讓用戶知道系統在做什麼

就是在産品設計過程中，像用戶展示系統進行的操作狀态。

舉個例子：:比如當頁面刷新過程中，告知用戶加載進度。當系統進行判斷操作過程中告知用戶當前操作狀态。當用戶清除緩存時告知用戶産品怎麼清除緩存，等等。

（2）讓用戶知道自己處于系統的什麼位置

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

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

（3）讓用戶知道系統做了什麼

讓用戶知道産品做了什麼，明确了知道下一步如何操作。

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

當你退出登錄，系統提示保存了當前數據，下次可繼續登錄。當你清除緩存時，産品展示已清除置灰，數量變化等。

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

當用戶進行操作時，産品及時反饋，用戶做了什麼。

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

（5）新手提示

作為我們的新用戶是承載整個産品流量的口子，新手的提示關系着我們運營中的留存，這個方面做好，也是對運營業務鍊路有着很大的幫助。

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

2. 環境貼切原則

簡單的理解就是産品設計要跟現實相互結合，産品設計要符合用戶認知，不能做個我認為用戶是這樣理解的産品哈哈哈。

（1）圖片、圖标與現實相互結合

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

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

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

符合用戶自己現實生活的認證場景。

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

3. 撤銷重做原則

這個比較好理解就是産品設計滿足撤銷重做原則，防止用戶出現後悔操作或者誤操作等等，滿足用戶體驗逆向操作。

（1）撤銷

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

（2）重做

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

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

4. 一緻性原則

一緻性原則主要包含顔色、字體、圖标、圖片、功能、提示等等全局的一緻性，給用戶帶來全局一緻的舒适體驗。由于一緻性包含内容較多，所以下面就舉幾個主要例子來進行說明一緻性原則。

（1）顔色一緻性

顔色一緻性是全局操作的重要一點，也是符合品牌基因貫通産品的重要體現。

舉個例子：顔色一緻性在我的頁面和首頁頭部有了明顯體現。

（2）提示一緻性

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

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

5. 防錯原則

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

（1）退出操作提示

退出登錄退出保存時提示操作，防止用戶丢失數據出錯。

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

（2）登錄操作

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

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

6. 減少記憶負擔

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

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

7. 靈活高效原則

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

（1）自動回複

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

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

（2）表情包預覽

聊天時選擇自己的表情包，預覽，選擇适合自己的表情發送。

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

8. 易掃原則

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

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

9. 容錯原則

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

（1）反饋幫助

産品出現問題或者用戶出現問題，給予反饋提示或者幫助。

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

（2）限制操作

防止産品出現一些問題，可以進行提前限制操作來避免。

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

10. 人性化幫助

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

（1）信息提示

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

‍

（2）幫助說明

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

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

本文由 @阿韓設計 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部