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