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

其實(shí)主要是因?yàn)橛脩趔w驗(yàn)分為這個(gè)幾個(gè)方面：

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

產(chǎn)品視覺(jué)設(shè)計(jì)四大原則

在產(chǎn)品視覺(jué)的設(shè)計(jì)中我們可以用四大原則來(lái)滿足用戶感官體驗(yàn)的優(yōu)化，主要是：對(duì)齊、重復(fù)、親密、 對(duì)比。

1. 對(duì)齊

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

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

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

2. 重復(fù)

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

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

3. 親密

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

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

4. 對(duì)比

對(duì)比的通俗來(lái)說(shuō)就是要有對(duì)比性、不同點(diǎn)，就是要避免頁(yè)面上的元素太過(guò)相似，這樣那既要避免了同質(zhì)化也強(qiáng)調(diào)了差異化的節(jié)奏感，突出重點(diǎn)信息傳遞。當(dāng)然這個(gè)度需要我們?cè)谌粘９ぷ髦卸喽喾e累。比較常見(jiàn)的對(duì)比有方向?qū)Ρ?、信息?duì)比、顏色對(duì)比、對(duì)稱對(duì)比、比例對(duì)比等等。

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

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

交互設(shè)計(jì)十大可用性原則

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

——百度百科

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

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

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

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

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

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

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

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

舉個(gè)例子在閑魚頁(yè)面我們系統(tǒng)的標(biāo)題欄、TAB欄的提示貫穿整體，用戶知道我們所處的什么頁(yè)面。比如認(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è)例子：在閑魚中最簡(jiǎn)單的例子就是當(dāng)我們聊天時(shí)候，我們輸入信息發(fā)送，顯示在我們跟對(duì)方的聊天頁(yè)面中。

（5）新手提示

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

舉個(gè)例子：在新手提示中，有一個(gè)設(shè)計(jì)要點(diǎn)就是可以采用趣味性設(shè)計(jì)，更好的與用戶情感交流。

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

簡(jiǎ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é)合

符合用戶對(duì)描述圖標(biāo)功能的認(rèn)證。

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

（2）文字表達(dá)滿足用戶認(rèn)知

符合用戶自己現(xiàn)實(shí)生活的認(rèn)證場(chǎng)景。

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

3. 撤銷重做原則

這個(gè)比較好理解就是產(chǎn)品設(shè)計(jì)滿足撤銷重做原則，防止用戶出現(xiàn)后悔操作或者誤操作等等，滿足用戶體驗(yàn)?zāi)嫦虿僮鳌?/p>

（1）撤銷

瀏覽操作可以撤銷到前一步，舉個(gè)例子：閑魚頁(yè)面常見(jiàn)的返回操作就是撤銷的一個(gè)例子。

（2）重做

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

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

4. 一致性原則

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

（1）顏色一致性

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

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

（2）提示一致性

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

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

5. 防錯(cuò)原則

簡(jiǎn)單意思防止用戶出錯(cuò)，在用戶錯(cuò)誤操作或者可能因?yàn)檎`操作引起不必要的操作損失時(shí)，給以用戶提示，防止用戶出錯(cuò)。這里主要舉兩個(gè)比較常見(jiàn)類型的例子，幫助設(shè)計(jì)師理解放錯(cuò)原則。

（1）退出操作提示

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

舉個(gè)例子：在退出登錄提示是否要注銷登錄，把確認(rèn)層級(jí)加大，放在右邊，清晰提示用戶，防止用戶出錯(cuò)。

（2）登錄操作

登錄操作時(shí)，滿足登錄操作條件后才會(huì)顯示按鈕高亮，其他情況下置灰操作，防止用戶錯(cuò)誤點(diǎn)擊。

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

6. 減少記憶負(fù)擔(dān)

系統(tǒng)主動(dòng)識(shí)別，減少用戶記憶負(fù)擔(dān)，常見(jiàn)有掃碼識(shí)別、語(yǔ)音識(shí)別、指紋識(shí)別、掃臉識(shí)別等等系統(tǒng)操作。

舉個(gè)例子：閑魚掃碼識(shí)別用戶，識(shí)別條形碼商品等等。

7. 靈活高效原則

簡(jiǎn)單理解就是靈活高效設(shè)計(jì)，滿足大多數(shù)用戶操作需求，操作高效便捷。因?yàn)椴煌a(chǎn)品類型不同，這里舉幾個(gè)常見(jiàn)類型說(shuō)明，如自動(dòng)回復(fù)，表情包預(yù)覽、常用表情包等。

（1）自動(dòng)回復(fù)

比較典型的靈活高效設(shè)置，用戶不在線直接自動(dòng)回復(fù)，選擇不同回復(fù)語(yǔ)。

舉個(gè)例子：閑魚我的頁(yè)面設(shè)置自動(dòng)回復(fù)，靈活高效。

（2）表情包預(yù)覽

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

舉個(gè)例子：聊天頁(yè)面表情包預(yù)覽，可愛(ài)的閑魚表情切換，滿足用戶操作需求。

8. 易掃原則

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

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

9. 容錯(cuò)原則

簡(jiǎn)單理解就是靈活高效設(shè)計(jì)，滿足大多數(shù)用戶操作需求，操作高效便捷。因?yàn)椴煌a(chǎn)品類型不同，這里舉幾個(gè)常見(jiàn)類型說(shuō)明，如：自動(dòng)回復(fù)、表情包預(yù)覽、常用表情包等。

（1）反饋幫助

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

舉個(gè)例子：網(wǎng)絡(luò)無(wú)法打開(kāi)時(shí)，提示開(kāi)小差了，可以刷新一下試試。

（2）限制操作

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

舉個(gè)例子：下載圖片有時(shí)候流量太少了，怎么辦，可以通過(guò)對(duì)圖像下載限制，避免用戶損失。

10. 人性化幫助

簡(jiǎn)單理解就是幫助用戶操作，幫助用戶解決問(wèn)題，給予提示、引導(dǎo)、建議、反饋等。這里主要說(shuō)明2個(gè)主要常見(jiàn)的人性化幫助，信息提示和幫助說(shuō)明。

（1）信息提示

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

?

（2）幫助說(shuō)明

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

舉個(gè)例子：閑魚的幫助說(shuō)明功能更加全面，滿足不用用戶場(chǎng)景的問(wèn)題需求，也能及時(shí)和客戶進(jìn)行咨詢反饋信息。

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

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