用經(jīng)典的設(shè)計原則，深度解析閑魚的用戶體驗設(shè)計
2025-7-4 濤濤 交互設(shè)計及用戶體驗
今天我們主要從用戶體驗的部分原則來看閑魚，主要以產(chǎn)品視覺設(shè)計四大原則、交互設(shè)計十大可用性原則、情感化設(shè)計來看閑魚
今天我們主要從用戶體驗的部分原則來看閑魚，主要以產(chǎn)品視覺設(shè)計四大原則、交互設(shè)計十大可用性原則、情感化設(shè)計來看閑魚
其實主要是因為用戶體驗分為這個幾個方面：
1、 視覺的感官體驗，給用戶帶來的是視覺表現(xiàn)層的體驗，所以我們把產(chǎn)品視覺設(shè)計四大原則來對照用戶的感官體驗。
2、 交互的用戶體驗，也就是產(chǎn)品設(shè)計中給用戶使用過程產(chǎn)生交互互動，比如點擊效果、輸入、彈出、切換等等。所以我們用交互設(shè)計尼爾森十大可用性原則來對照交互的用戶體驗。
3、 情感用戶體驗，這是由外而內(nèi)的心理作用，給用戶帶來心理認同，增加滿足和愉悅感。所以我們用情感化設(shè)計原則來對照我們的情感用戶體驗。
產(chǎn)品視覺設(shè)計四大原則
在產(chǎn)品視覺的設(shè)計中我們可以用四大原則來滿足用戶感官體驗的優(yōu)化，主要是
一.對齊
頁面信息對齊，左對齊、右對齊、居中對齊，保持頁面視覺統(tǒng)一
移動端的閱讀習慣是從左往右的，因此我們也是遵循向左對齊，或者尾部信息向右對齊。居中對齊在整體信息排列中較少使用，除非是比較正規(guī)、傳統(tǒng)的產(chǎn)品設(shè)計使用居中對齊的大關(guān)系。而在小細節(jié)的對齊中居中對齊應(yīng)對logo/頭像等也有使用。從開發(fā)的成本上，對齊的設(shè)計也是方便了他們的開發(fā)。
舉例子
閑魚消息頁面頂部功能區(qū)域采用居中對齊方式，比較正式一些，突出顯示引導用戶點擊；個人頭像和消息左對齊顯示，發(fā)布圖片右對齊顯示。
閑魚我的頁面，功能圖標和信息左對齊顯示，消息和進入按鈕右對齊顯示；贊賞、關(guān)注、粉絲居中顯示。
重點突出的信息，居中顯示，引導用戶瀏覽路徑。常規(guī)列表左對齊、右對齊顯示，滿足用戶瀏覽習慣，提升用戶體驗。
二.重復
重復比較簡單的理解為一致性，顏色、形狀、材質(zhì)、空間關(guān)系、線寬、材質(zhì)、空間等等。我們常說視覺規(guī)范的一致性就是這樣，保持這些單元的統(tǒng)一，貫穿始終這樣我們的頁面排版才會整體、產(chǎn)品設(shè)計才會整體。
舉例子
閑魚消息頁面，頭部功能區(qū)域圓形圖標重復，字體重復。消息列表頭像、名稱、消息、圖片重復，保持一致性，和統(tǒng)一。
首頁部分功能區(qū)域圖標重復、風格重復一致?；顒訁^(qū)域標題和圖片保持重復性原則。在類別篩選部分，每個類別瀑布流展現(xiàn)，宮格重復，保證頁面篩選一致性。
三.親密
如果多個項相互之間存在很近的親密性，它們就會成為一個視覺整體。因此我們在設(shè)計時候往往需要將信息整合把有親密組織關(guān)系的內(nèi)容整合一起。減少了混亂不堪的信息內(nèi)容排列，整合框架，這也是方便用戶瀏覽，滿足了易讀性、易用性。個人觀點（在產(chǎn)品設(shè)計中親密度的把控，要多學理論、然后理論實踐結(jié)合，多多體證，才能更好的滿足用戶體驗）
舉例子
閑魚首頁分為4大部分，功能區(qū)域、活動區(qū)域、閑置區(qū)域、分類區(qū)域，每個區(qū)域相互親密，形成一個整體，通過間距分割，滿足用戶的易讀性，降低學習記憶負擔。
消息頁面就更明顯了，主要分為功能操作區(qū)域和消息列表區(qū)域，每個區(qū)域相互親密通過間隔和表現(xiàn)形式區(qū)分。（這類需求就沒有基本需求那樣必備，是產(chǎn)品中期望需求體驗越多越好，用戶越滿意，反之用戶滿意度也會下降）。
四.對比
對比的通俗來說就是要有對比性、不同點，就是要避免頁面上的元素太過相似，這樣那既要避免了同質(zhì)化也強調(diào)了差異化的節(jié)奏感，突出重點信息傳遞。當然這個度需要我們在日常工作中多多積累。比較常見的對比有方向?qū)Ρ取⑿畔Ρ?、顏色對比、對稱對比、比例對比等等。
舉例子
閑魚聊天頁面，雙方消息顏色對比，色彩的對比更加強的雙方聊天的視覺效果，對比也是比較明顯。
閑魚的兌換詳情頁面，文字和信息的對比，突出展示內(nèi)容信息，讓用戶一目了然區(qū)分內(nèi)容和圖片，多重信息對比，也增加了信息獲取的質(zhì)量，提升用戶體驗。
交互設(shè)計十大可用性原則
尼爾森（Jakob Nielsen）是一位人機交互學博士，于1995年1月1日發(fā)表了「十大可用性原則」。尼爾森的十大可用性原則是尼爾森博士分析了兩百多個可用性問題而提煉出的十項通用型原則。它是產(chǎn)品設(shè)計與用戶體驗設(shè)計的重要參考標準，值得深入研究與運用。
這是一套實用性的原則，無論是產(chǎn)品開發(fā)還是落地，都能夠很好的幫助我們提升用戶體驗和設(shè)計質(zhì)量。以人為本，以用戶為中心，讓我們設(shè)計師能夠很好的明確設(shè)計方向和用戶需求的科學方法論。
一、狀態(tài)可見性原則
解讀狀態(tài)可見原則，我們將會從實際的案例中挑選，結(jié)合原則進行說明，方便大家更好的理解和把控狀態(tài)可見性原則。
就是在產(chǎn)品設(shè)計過程中，像用戶展示系統(tǒng)進行的操作狀態(tài)。
舉個例子
比如當頁面刷新過程中，告知用戶加載進度。當系統(tǒng)進行判斷操作過程中告知用戶當前操作狀態(tài)。當用戶清除緩存時告知用戶產(chǎn)品怎么清除緩存。等等
2.讓用戶知道自己處于系統(tǒng)的什么位置
其實就是我是在哪里呀，我要去哪呀，從哪去呀，讓用戶一目了然，不用太多學習成本。這是在頁面元素中的核心，一旦用戶不知道自己處于系統(tǒng)什么位置，就會容易操作失誤或者放棄產(chǎn)品。失去了設(shè)計為用戶服務(wù)的本質(zhì)。
舉個例子
在閑魚頁面我們系統(tǒng)的標題欄、TAB欄的提示貫穿整體，用戶知道我們所處的什么頁面。比如認證提示，每一步告知用戶進行到哪里了。
3.讓用戶知道系統(tǒng)做了什么
讓用戶知道產(chǎn)品做了什么，明確了知道下一步如何操作。
舉個例子
在閑魚登錄時當你輸入密碼錯誤等，系統(tǒng)提示密碼輸入錯誤，可以重新輸入。
當你退出登錄，系統(tǒng)提示保存了當前數(shù)據(jù)，下次可繼續(xù)登錄。
當你清除緩存時，產(chǎn)品展示已清除置灰，數(shù)量變化等。
4.讓用戶知道自己在做什么
當用戶進行操作時，產(chǎn)品及時反饋，用戶做了什么。
舉個例子
在閑魚中最簡單的例子就是當我們聊天時候，我們輸入信息發(fā)送，顯示在我們跟對方的聊天頁面中。
作為我們的新用戶是承載整個產(chǎn)品流量的口子，新手的提示關(guān)系著我們運營中的留存，這個方面做好，也是對運營業(yè)務(wù)鏈路有著很大的幫助。
舉個例子
在新手提示中，有一個設(shè)計要點就是可以采用趣味性設(shè)計，更好的與用戶情感交流。
二、環(huán)境貼切原則
簡單的理解就是產(chǎn)品設(shè)計要跟現(xiàn)實相互結(jié)合，產(chǎn)品設(shè)計要符合用戶認知，不能做個我認為用戶是這樣理解的產(chǎn)品哈哈哈。
1.圖片、圖標與現(xiàn)實相互結(jié)合
舉個例子
在閑魚首頁功能頁面，二手手機圖標采用現(xiàn)實生活手機作為造型，游戲交易采用游戲手柄作為造型，二手圖書采用圖書翻頁形式作為造型，珠寶文玩采用珠寶玉器作為造型，符合用戶在現(xiàn)實生活中熟悉的東西，滿足認知，有良好體驗。
2.文字表達滿足用戶認知
舉個例子
在魚塘頁面，文藝書畫、樂器等興趣魚塘，我們叫品質(zhì)文青聚集地，文藝青年在當下比較火的網(wǎng)絡(luò)名詞，喜歡文化藝術(shù)的青年哈哈。符合用戶年齡人群的環(huán)境認知。
三、撤銷重做原則
這個比較好理解就是產(chǎn)品設(shè)計滿足撤銷重做原則，防止用戶出現(xiàn)后悔操作或者誤操作等等，滿足用戶體驗?zāi)嫦虿僮?/section>
舉個例子
閑魚頁面常見的返回操作就是撤銷的一個例子
就是用戶撤銷上一步，又反悔了要到之前哪一步；或者用戶操作完成發(fā)布又反悔了重新發(fā)布，滿足用戶充足的反悔余地，給予用戶對產(chǎn)品的信心和控制感。
舉個例子
閑魚發(fā)布閑置后后悔了要重新發(fā)布，可以在管理頁面進行編輯或者刪除重發(fā)操作。
四、一致性原則
一致性原則主要包含顏色、字體、圖標、圖片、功能、提示等等全局的一致性，給用戶帶來全局一致的舒適體驗。由于一致性包含內(nèi)容較多，所以下面就舉幾個主要例子來進行說明一致性原則。
顏色一致性是全局操作的重要一點，也是符合品牌基因貫通產(chǎn)品的重要體現(xiàn)。
舉個例子
顏色一致性在我的頁面和首頁頭部有了明顯體現(xiàn)
提示一致性只要是提示操作一致性，包含設(shè)計的圓角、字體層級、顏色等融合一起的一致性。
舉個例子
這次例子是不一致性的例子，取消保存、刪除、退出等操作一個彈窗一個設(shè)計樣式，不符合基本的提示一致性設(shè)計。當然這也是我們設(shè)計師在自己產(chǎn)品體驗設(shè)計中需要改進優(yōu)化的地方。
五、防錯原則
簡單意思防止用戶出錯，在用戶錯誤操作或者可能因為誤操作引起不必要的操作損失時，給以用戶提示，防止用戶出錯。這里主要舉兩個比較常見類型的例子，幫助設(shè)計師理解放錯原則。
1.退出操作提示
退出登錄退出保存時提示操作，防止用戶丟失數(shù)據(jù)出錯
舉個例子
在退出登錄提示是否要注銷登錄，把確認層級加大，放在右邊，清晰提示用戶，防止用戶出錯
2.登錄操作
登錄操作時，滿足登錄操作條件后才會顯示按鈕高亮，其他情況下置灰操作，防止用戶錯誤點擊。
舉個例子
閑魚登錄操作輸入驗證碼后，按鈕高亮可以進行登錄（登錄操作不能截圖，大家可以自己下載閑魚去體驗一下哈哈）
六、減少記憶負擔
系統(tǒng)主動識別，減少用戶記憶負擔，常見有掃碼識別、語音識別、
指紋識別、掃臉識別等等系統(tǒng)操作。
舉個例子
閑魚掃碼識別用戶，識別條形碼商品等等
七、靈活高效原則
簡單理解就是靈活高效設(shè)計，滿足大多數(shù)用戶操作需求，操作高效便捷。因為不同產(chǎn)品類型不同，這里舉幾個常見類型說明，如自動回復，表情包預覽、常用表情包 等。
1.自動回復
比較典型的靈活高效設(shè)置，用戶不在線直接自動回復，選擇不同回復語
舉個例子
閑魚我的頁面設(shè)置自動回復，靈活高效
2.表情包預覽
聊天時選擇自己的表情包，預覽，選擇適合自己的表情發(fā)送
舉個例子
聊天頁面表情包預覽，可愛的閑魚表情切換，滿足用戶操作需求
八、易掃原則
簡單理解就是用戶掃描產(chǎn)品信息時，能夠容易獲取信息。因此需要突出層級強化主要部分。
閑魚的我的頁面，每個區(qū)塊進行功能區(qū)分，分為買、賣、玩、其他4個主要部分。降調(diào)層級，同時在區(qū)塊內(nèi)每個功能圖標宮格顯示，也易于用戶查找，滿足了易掃原則，提示了用戶體驗。
九、容錯原則
簡單理解就是靈活高效設(shè)計，滿足大多數(shù)用戶操作需求，操作高效便捷。因為不同產(chǎn)品類型不同，這里舉幾個常見類型說明，如自動回復，表情包預覽、常用表情包 等。
1.反饋幫助
產(chǎn)品出現(xiàn)問題或者用戶出現(xiàn)問題，給予反饋提示或者幫助
舉個例子
網(wǎng)絡(luò)無法打開時，提示開小差了，可以刷新一下試試。
2.限制操作
防止產(chǎn)品出現(xiàn)一些問題，可以進行提前限制操作來避免。
舉個例子
下載圖片有時候流量太少了，怎么辦，可以通過對圖像下載限制，避免用戶損失
十、人性化幫助
簡單理解就是幫助用戶操作，幫助用戶解決問題，給予提示、引導、建議、反饋等。這里主要說明2個主要常見的人性化幫助，信息提示和幫助說明。
1.信息提示
產(chǎn)品新增功能或者復雜功能時，浮窗提示操作
舉個例子
新手撈魚互動，提示點擊引導信息，幫助用戶更好的操作
2.幫助說明
APP常用功能，用戶有疑問或者不懂得操作時，查看幫助說明，也能進行及時反饋。方便用戶更好的使用產(chǎn)品。
舉個例子
閑魚的幫助說明功能更加全面，滿足不用用戶場景的問題需求，也能及時和客戶進行咨詢反饋信息。
本來想從諾曼的情感化設(shè)計中來闡述，但是仔細考慮它分為本能、行為、反思層，在用戶體驗的設(shè)計中比較概括和全面，在我們初中級產(chǎn)品設(shè)計中不適合具體應(yīng)用。Aarron Walter(瓦爾特）在為情感而設(shè)計中將情感化設(shè)計要素具體化，給用戶帶來愉悅感可以從可控感、參與感、情感共鳴、信任、從眾心理來進行把控，方便我們設(shè)計師在用戶體驗情感化設(shè)計中具體的應(yīng)用實踐更好的服務(wù)于用戶。
情感用戶體驗，這是由外而內(nèi)的心理作用，給用戶帶來心理認同，增加滿足和愉悅感。所以我們用情感化設(shè)計原則來對照我們的情感用戶體驗。
情感化設(shè)計原則
產(chǎn)品設(shè)計中把控情感化設(shè)計，給用戶帶來愉悅感：可控感、參與感、情感共鳴、信任感、從眾心理。
1.可控感
用戶使用產(chǎn)品過程中操作可控。可控感其實比較好理解的是盡量不脫離用戶控制，讓用戶可把控自己的產(chǎn)品。當產(chǎn)品不可控時，比如操作提示不可控、信息瀏覽不可控、操作權(quán)限不可控、頁面條狀不可控等等，用戶就會恐慌、焦慮，不會選擇繼續(xù)使用這個產(chǎn)品。
舉個例子
閑魚用戶登錄之后需要獲取權(quán)限，告知用戶選擇是否授權(quán)于產(chǎn)品這些權(quán)限，讓用戶操作可控。
2.參與感
提示參與感設(shè)計能更好的提升用戶體驗和用戶留存等，設(shè)計參與感的引導路徑或者獨特體驗，滿足用戶愉悅度，讓用戶沉浸其中。
舉個例子
個性化設(shè)計，為用戶提供獨一無二的個性化設(shè)計，帶來個性化服務(wù)，滿足用戶對閑置產(chǎn)品的需求，也同時滿足用戶發(fā)布閑置同類商品可參考的需求。當用戶想購買閑置植物盆栽比較多時，首頁就會出現(xiàn)推薦的盆栽商品。
目標引導設(shè)計，劃定規(guī)則和目標路徑，引導用戶參與其中，在簽到活動頁面一個小路徑，用戶點擊撈魚，撈上來之后，就可以兌換閑魚幣了，讓用戶趣味游戲同時獲得閑魚幣，提升參與感，增強了用戶體驗。
3.情感共鳴
產(chǎn)品體驗過程中的情感共鳴，是用戶和產(chǎn)品之前的互動聯(lián)系，當用戶被產(chǎn)品有意思的點打動時候，產(chǎn)生情感互動。
當頁面趣味加載，顯示可愛表情時候，用戶被打動，不感覺加載時間過長，提升用戶體驗。
當頁面缺失時，畫面出現(xiàn)可愛的卡通缺失頁，產(chǎn)生情感共鳴，同時減少了用戶的認知負擔，讓用戶知道了所處位置和過程。
4.信任感
信任感對于用戶而言，值得信賴產(chǎn)品，并加以使用。信任感在用戶體驗中占據(jù)重要地位，也是對于用戶使用產(chǎn)品前期的重要保障，當用戶對產(chǎn)品產(chǎn)生信任，就會放心使用產(chǎn)品。當產(chǎn)品出現(xiàn)信任危機，用戶就會放棄使用產(chǎn)品。如何提高產(chǎn)品的信任感那，我們可以從產(chǎn)品專業(yè)度、品牌備書、滿足用戶需求、減輕用戶使用負擔等等方面來進行提升產(chǎn)品的信任感。
閑魚的啟動頁面是用戶進入產(chǎn)品的第一環(huán)節(jié)，所以增加阿里的品牌背書，提升用戶信任感。
我的頁面有安全中心，可以購買欺詐保障，了解安全知識和安全操作，減輕用戶交流，提升信任感。
5.從眾心理
從眾心理是大多數(shù)人都存在的心理，個人受到多數(shù)人群影響，表現(xiàn)出符合公眾輿論或者多數(shù)人的行為方式。是一種非理性的行為方式，通俗來講叫“隨大流”。
閑魚首頁，什么值得買模塊，提示510人求購，告知用戶大家都在買，你在等什么。
結(jié)尾
希望能幫助大家在設(shè)計自家產(chǎn)品時候，運用這些法則原理去進行設(shè)計思考，希望能給你帶來一定的幫助，謝謝。
作者：阿韓設(shè)計
鏈接：https://www.zcool.com.cn/article/ZMTIwMTIwOA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微（藍藍設(shè)計）m.cqzjtgb.com 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。