文章以微信為案例，談?wù)劗a(chǎn)品設(shè)計(jì)的四大基本原則、十大可用性原則、情感化設(shè)計(jì)。

產(chǎn)品設(shè)計(jì)的類別

用戶看重的是產(chǎn)品的概念模型，強(qiáng)調(diào)用戶體驗(yàn)，即產(chǎn)品如何設(shè)計(jì)，為用戶體驗(yàn)服務(wù)。用戶體驗(yàn)就是產(chǎn)品的核心競爭力，就是產(chǎn)品的生命力。

所以，要想懂得如何產(chǎn)品設(shè)計(jì)，需要了解用戶體驗(yàn)主要有哪些分類，才能更好地根據(jù)每個(gè)用戶體驗(yàn)的分類進(jìn)行相應(yīng)的產(chǎn)品設(shè)計(jì)。

用戶體驗(yàn)分類

感觀體驗(yàn)：呈現(xiàn)給用戶視聽上的體驗(yàn)，強(qiáng)調(diào)舒適性。一般在色彩、聲音、圖像、文字內(nèi)容、網(wǎng)站布局等呈現(xiàn)。

交互用戶體驗(yàn)：界面給用戶使用、交流過程的體驗(yàn)，強(qiáng)調(diào)互動(dòng)、交互特性。交互體驗(yàn)的過程貫穿瀏覽、點(diǎn)擊、輸入、輸出等過程給訪客產(chǎn)生的體驗(yàn)。

情感用戶體驗(yàn)：給用戶心理上的體驗(yàn)，強(qiáng)調(diào)心理認(rèn)可度。讓用戶通過站點(diǎn)能認(rèn)同、抒發(fā)自己的內(nèi)在情感，那說明用戶體驗(yàn)效果較深。情感體驗(yàn)的升華是口碑的傳播，形成一種高度的情感認(rèn)可效應(yīng)。

用戶體驗(yàn)分類對(duì)應(yīng)的產(chǎn)品設(shè)計(jì)

1. 強(qiáng)調(diào)舒適性，主要是色彩、布局等呈現(xiàn)。色彩主要是UI設(shè)計(jì)師設(shè)計(jì)，布局主要是控件的對(duì)齊等基本設(shè)計(jì)，即產(chǎn)品設(shè)計(jì)的四大基本原則。
2. 強(qiáng)調(diào)交互性，主要是人機(jī)的互動(dòng)反饋過程，即產(chǎn)品設(shè)計(jì)的十大可用性原則。
3. 強(qiáng)調(diào)心理認(rèn)可，主要是情感認(rèn)可，即產(chǎn)品設(shè)計(jì)的情感化設(shè)計(jì)。

四大基本原則

產(chǎn)品設(shè)計(jì)的四大基本原則：親密性、對(duì)齊、重復(fù)、對(duì)比。

四大基本原則的應(yīng)用思路：把信息歸入邏輯親密性，利用對(duì)齊，找到并制造重復(fù)元素，加入對(duì)比。

親密性（Proximity）

彼此相關(guān)的項(xiàng)應(yīng)當(dāng)靠近，歸組在一起，建立更近的親密性。親密性的根本目的是實(shí)現(xiàn)組織性。

如果多個(gè)項(xiàng)相互之間存在很近的親密性（親密性意味著存在關(guān)聯(lián)），他們就會(huì)成為一個(gè)視覺單元，而不是多個(gè)孤立的元素。這有助于組織信息，減少混亂，為讀者提供清晰的結(jié)構(gòu)，這樣頁面的理解和視覺上都變得更有條理，更能表達(dá)信息。另外，親密性原則可以使頁面產(chǎn)生相應(yīng)的空白，空白既可以表達(dá)關(guān)系（說明項(xiàng)與項(xiàng)的關(guān)系），也可以使頁面看上去有更多的空間，頁面不會(huì)顯得擁擠（眼睛得到休息），頁面更美觀（有條理），這樣頁面的布局會(huì)變得更有組織。

案例：微信的發(fā)現(xiàn)頁面，掃一掃主要是二維碼/條碼、街景、翻譯的掃描上的識(shí)別，搖一搖主要是人、歌曲的搖一搖上的識(shí)別，存在著識(shí)別的關(guān)聯(lián)，所以歸組在一起，形成一個(gè)視覺單元。頁面上的空白條，使得每個(gè)視覺單元更加清晰，頁面更有組織性。如下圖所示：

對(duì)齊（Alignment）

任何東西都不能在頁面隨意安放。每個(gè)元素都應(yīng)當(dāng)與頁面上的另一個(gè)元素有某種視覺聯(lián)系，這樣能建立一種清晰、精巧而且清爽的外觀。對(duì)齊的根本目的是使頁面統(tǒng)一而且有條理。

如果頁面上的一些項(xiàng)是對(duì)齊的，這會(huì)得到一個(gè)更內(nèi)聚的單元，即使對(duì)齊的元素物理位置是彼此分離的，但在你眼里，他們之間也會(huì)有一條看不見的線把彼此連在一起。

對(duì)齊主要有左對(duì)齊、居中對(duì)齊、右對(duì)齊。居中對(duì)齊的線條比較“軟”，會(huì)創(chuàng)建一種更正式、更穩(wěn)重的外觀，顯得更為中規(guī)中矩，但通常會(huì)乏味；左對(duì)齊或者右對(duì)齊的線條比較“硬”，線條更明確，這樣外觀會(huì)更清晰、效果更分明。所以我們可以看到頁面上的對(duì)齊主要采用左右對(duì)齊。

注意：一定要堅(jiān)持一個(gè)原則：只使用一種對(duì)齊方式。因?yàn)槲覀冄劬Χ枷矚g看有序的事物，這會(huì)給人一種平靜、安全的感覺。此外有助于表達(dá)信息。另外，避免居中對(duì)齊（除非有意而為）。

案例：微信強(qiáng)調(diào)熟人社交關(guān)系、安全，但居中對(duì)齊強(qiáng)調(diào)的是正式且乏味，與微信的定位違背，所以微信每個(gè)頁面都采用左對(duì)齊（左對(duì)齊符合閱讀習(xí)慣，更能便捷找到閱讀的起點(diǎn)）。

微信的發(fā)現(xiàn)頁面的左對(duì)齊，如下圖所示：

重復(fù)（Repetition）

讓設(shè)計(jì)中的視覺要素在整個(gè)作品中重復(fù)出現(xiàn)。可以重復(fù)顏色、形狀、材質(zhì)、空間關(guān)系、線寬、字體、大小和圖片，等等。這樣一來，要素都一致，各個(gè)部分看起來都是一體的，即能增加條理性，還可以加強(qiáng)統(tǒng)一性。重復(fù)的根本目的是統(tǒng)一，并增強(qiáng)視覺效果。

重復(fù)會(huì)為產(chǎn)品帶來一種專業(yè)性和權(quán)威性，會(huì)使用戶感覺有人在負(fù)責(zé)，因?yàn)橹貜?fù)顯然是一種經(jīng)過深思熟慮的設(shè)計(jì)決策。

案例：微信每個(gè)頁面上，左對(duì)齊的重復(fù)、字體的樣式的重復(fù)、線條的樣式的重復(fù)、空白條的樣式的重復(fù)…… 注意，重復(fù)并不代表完全相同，而是存在明確關(guān)聯(lián)的緊密相關(guān)的對(duì)象。

微信首頁列表中，朋友聊天列表和服務(wù)號(hào)的字體相同，但顏色不同（多樣性的統(tǒng)一）。

微信的發(fā)現(xiàn)頁面，各個(gè)視覺要素的重復(fù)，如下圖所示：

對(duì)比（Contrast）

頁面上的不同元素之間要有對(duì)比效果，達(dá)到吸引讀者的對(duì)比效果。要避免頁面上的元素太過相似。如果元素（字體、顏色、大小、線寬、形狀、空間等）不相同，那就干脆讓它們截然不同。要讓頁面引人注目，對(duì)比通常是最重要的一個(gè)因素，正是它能使讀者首先看這個(gè)頁面。

對(duì)比的根本目的是增強(qiáng)頁面的效果（更有可讀性），有助于信息的組織（防止混淆）。

對(duì)比不僅可以用來吸引眼球，還可以用來組織信息、清晰層級(jí)、在頁面上指引用戶，并且制造焦點(diǎn)。

案例：微信的聊天窗口，對(duì)話信息文本的底色的對(duì)比，信息文本與背景的底色的對(duì)比。如下圖所示：

需要注意的是，這些設(shè)計(jì)原則需要合理搭配才會(huì)有好的整理效果，設(shè)計(jì)頁面時(shí)很少只使用某一種原則。

而且，需要注意四大原則的應(yīng)用思路：把信息歸入邏輯親密性，利用對(duì)齊，找到并制造重復(fù)元素，加入對(duì)比。

案例：微信的發(fā)現(xiàn)頁面，使用了親密性形成多個(gè)視覺單元，實(shí)現(xiàn)組織性；再利用左對(duì)齊，形成清晰的外觀，使得頁面統(tǒng)一且有條理；再利用重復(fù)，使得頁面專業(yè)，增強(qiáng)視覺效果；最后再利用對(duì)比，即空白條和視覺單元的底色的對(duì)比，使得頁面更有可讀性。

十大可用性原則

尼爾森的十大可用性原則，強(qiáng)調(diào)易用性，是交互設(shè)計(jì)的重要參考標(biāo)準(zhǔn)。

狀態(tài)可見原則（Visibility of system status）

用戶在系統(tǒng)上的任何操作，不論是單擊、滾動(dòng)還是按下鍵盤，系統(tǒng)應(yīng)即時(shí)給出反饋?！凹磿r(shí)”是指用戶可以接受的等待時(shí)間（reasonable time）。

案例：微信的發(fā)送信息時(shí)，信息文本左邊有個(gè)半透明白灰色的轉(zhuǎn)輪給出發(fā)送中的反饋，發(fā)送失敗時(shí)會(huì)出現(xiàn)紅色感嘆圓給出發(fā)送失敗的反饋。

點(diǎn)擊微信右上角+，即時(shí)給出顯示相應(yīng)的操作按鈕的反饋。如下圖所示：

環(huán)境貼切原則（Match between system and the real world）

系統(tǒng)的一切表現(xiàn)和表述，應(yīng)該盡可能貼近用戶所在的環(huán)境，而不要使用系統(tǒng)的語言?！秈Phone人機(jī)交互指南》里提到的隱喻與擬物化是很好的實(shí)踐。此外，還應(yīng)該使用易懂和約定俗成的表達(dá)。

案例：微信的發(fā)現(xiàn)頁面，每個(gè)子功能的圖標(biāo)和表述都貼切用戶的環(huán)境，圖標(biāo)采用擬物化，表述采用用戶熟悉的語言。如下圖所示：

撤銷重做原則（User control and freedom）

為了避免用戶的誤用和誤擊，系統(tǒng)應(yīng)提供撤銷和重做功能。

案例：微信的導(dǎo)航欄切換、頁面返回。

聊天窗口誤發(fā)信息，支持撤回信息。如下圖所示：

一致性原則（Consistency and standards）

同一用語、功能、操作保持一致。

案例：微信的搖一搖功能，打開搖一搖的頁面，icon保持一致。如下圖所示：

防錯(cuò)原則（Error prevention）

通過系統(tǒng)的設(shè)計(jì)、重組或特別安排，防止用戶出錯(cuò)。

案例：微信的附近的人功能，使用會(huì)彈窗提示，提示用戶位置信息會(huì)泄漏，防止用戶出錯(cuò)。如下圖所示：

易取原則（Recognition rather than recall）?

盡可能減少用戶對(duì)操作的回憶負(fù)擔(dān)，功能選項(xiàng)應(yīng)該是可見的，使用說明都是可預(yù)見的。

案例：微信的發(fā)現(xiàn)頁面，每個(gè)子功能的圖標(biāo)全部采用擬物化（參考環(huán)境貼切原則的圖示），每個(gè)操作都是可預(yù)見的。

靈活高效原則（Flexibility and efficiency of use）

中級(jí)用戶的數(shù)量遠(yuǎn)高于初級(jí)和高級(jí)用戶數(shù)。為大多數(shù)用戶設(shè)計(jì)，不要低估，也不可輕視，保持靈活高效。

案例：微信的發(fā)現(xiàn)頁面的子功能默認(rèn)全部顯示，但在設(shè)置中可以對(duì)每個(gè)子功能的啟用停用，滿足不同用戶的需求，保持靈活高效原則。如下圖所示：

易掃原則（Aesthetic and minimalist design）

互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的動(dòng)作不是讀，不是看，而是掃。易掃，意味著突出重點(diǎn)，弱化和剔除無關(guān)信息。

案例：微信對(duì)信息詳細(xì)分類在不同的頁面，每個(gè)頁面只顯示相關(guān)的功能。

微信的發(fā)現(xiàn)頁面，只顯示存在著探索關(guān)聯(lián)的功能（參考環(huán)境貼切原則的圖示）。

容錯(cuò)原則（Help users recognize, diagnose, and recover from errors）

幫助用戶從錯(cuò)誤中恢復(fù)，將損失降到最低。如果無法自動(dòng)挽回，則提供詳盡的說明文字和指導(dǎo)方向，而非代碼，比如404。

案例：微信用戶誤刪好友后，直接通過群找到好友，添加到通訊錄，不用好友通過驗(yàn)證，恢復(fù)好友。

微信誤發(fā)紅包，對(duì)方也不接收紅包，超過24小時(shí)后自動(dòng)退回到用戶錢包，避免用戶的損失。

用戶誤打開附近的人，位置信息泄漏，用戶可以點(diǎn)擊頁面右上角的清除功能可隨時(shí)手動(dòng)清除位置信息。如下圖所示：

人性化幫助原則（Help and documentation）

如果系統(tǒng)不使用文檔是最好的，但是有必要提供幫助和文檔.

幫助性提示最好的方式是：1、無需提示；2、一次性提示；3、常駐提示；4；幫助文檔。

案例：微信發(fā)朋友圈的狀態(tài)時(shí)，文字文本會(huì)出現(xiàn)“這一刻的想法…”提示幫助。

微信的幫助與反饋，提供常見問題、相應(yīng)功能的快捷幫助以及意見反饋。如下圖所示：

5、情感化設(shè)計(jì)

用戶購買產(chǎn)品大多源于情感需求，優(yōu)秀的產(chǎn)品經(jīng)理都懂得產(chǎn)品應(yīng)該如何滿足用戶的情感需求，比如，用戶使用陌陌的增值服務(wù)，可以得到對(duì)方更多的信息和青睞，滿足交友和愛的需求。

當(dāng)產(chǎn)品滿足用戶的情感需求，用戶很樂意為產(chǎn)品買單。在蘋果公司中，產(chǎn)品硬件為軟件服務(wù)，軟件為用戶體驗(yàn)服務(wù)，用戶體驗(yàn)為情感服務(wù)，做到產(chǎn)品為真正的需求服務(wù)，這就是為什么蘋果能夠引導(dǎo)行業(yè)。

只有從情感的角度重新觀察市場上的產(chǎn)品和服務(wù)，你才能體會(huì)用戶的真實(shí)感受。他們通過什么途徑滿足這些情感需求？哪種視覺設(shè)計(jì)更能抓住這些情感？哪些功能更能滿足這些情感需求？哪些產(chǎn)品特性阻礙用戶宣泄情感？

情感化設(shè)計(jì)的目標(biāo)是在人格層面與用戶建立關(guān)聯(lián)，形成認(rèn)同，即滿足用戶的情感需求，引發(fā)用戶共鳴，使用戶在與產(chǎn)品互動(dòng)的過程中產(chǎn)生積極正面的情緒。這種情緒會(huì)逐步使用戶產(chǎn)生愉悅的記憶，從而更加樂于使用你的產(chǎn)品。另外，在正面情緒的作用下，用戶會(huì)處于相對(duì)愉悅與放松的狀態(tài)，這使得他們對(duì)于使用過程中遇到的小困難與細(xì)節(jié)問題的容忍能力也變得更強(qiáng)。

《情感化設(shè)計(jì)》告訴我們，產(chǎn)品情感化設(shè)計(jì)具備三種水平的設(shè)計(jì)：本能水平、行為水平、反思水平。三種水平分別對(duì)應(yīng)產(chǎn)品的不同特點(diǎn)，如下：

• 本能水平的設(shè)計(jì)——>外形
• 行為水平的設(shè)計(jì)——>使用的樂趣和效率
• 反思水平的設(shè)計(jì)——>自我形象、個(gè)人滿意、記憶

微信情感化設(shè)計(jì)的案例

美好的事物更好用

UI清晰簡潔，色調(diào)綠色健康，給予舒服的情緒，更加能容忍產(chǎn)品出錯(cuò)的問題。

孤獨(dú)

啟動(dòng)頁，充滿情懷的設(shè)計(jì)，彰顯孤獨(dú)感，引發(fā)用戶共鳴。如下圖所示：

微笑

聊天窗口貼圖表情加載不成功，表情顯示為大大的笑臉，模仿人類的情緒，產(chǎn)生正面積極情緒，用戶更能容忍加載失敗。如下圖所示：

驚喜

微信聊天窗口，發(fā)送“我想你了”，窗口頁面落下滿屏星星，提供一些用戶想不到的東西，超出期望，讓用戶覺得很有趣快樂。如下圖所示：

暗示

發(fā)現(xiàn)頁面的功能停用按鈕為紅色，警告暗示，使得注意力更集中，點(diǎn)擊按鈕彈窗提示用戶停用該功能后將會(huì)發(fā)生什么，利用恐懼心理（損失比收益更在意），防止用戶停用。如下圖所示：

專享&個(gè)性

向某個(gè)群體的用戶提供一些專享個(gè)性化的東西。

微信運(yùn)動(dòng)，當(dāng)用戶運(yùn)動(dòng)步數(shù)為第一名，運(yùn)動(dòng)封面將顯示用戶封面照片，專享，獲得成就感。

用戶朋友圈的封面，用戶自定義，個(gè)性化。

微信的搖一搖頁面，男用戶的icon與女用戶的icon不一樣，男女用戶專享個(gè)性化的icon。如下圖所示：

娛樂

提供游戲，好友排名，增加用戶成就感。

吸引力

朋友圈的色環(huán)轉(zhuǎn)輪，吸引用戶的注意，減少用戶對(duì)朋友圈的刷新響應(yīng)時(shí)間。

擬物化

微信發(fā)現(xiàn)頁面的功能icon的擬物化，減少回憶，使得用戶可預(yù)期下一步的操作或者發(fā)生的事情。

效率

集社交、閱讀、服務(wù)一體，滿足生活不同的場景，比如付款紅包。

用戶發(fā)送圖片，讀取最近使用的圖片彈出快捷發(fā)送。

微信聊天窗口，發(fā)送“//multiwebview”，實(shí)現(xiàn)多個(gè)微信頁面，可以邊聊天邊閱讀的多任務(wù)并行，互不影響，提高用戶體驗(yàn)。如下圖所示：

積極響應(yīng)

對(duì)用戶的行為進(jìn)行積極的響應(yīng)。

微信用戶發(fā)送朋友圈后，狀態(tài)直接生成縮略圖在timeline顯示，后臺(tái)采用隊(duì)列技術(shù)悄悄上傳發(fā)送，對(duì)用戶進(jìn)行積極響應(yīng)，讓用戶誤以為直接就發(fā)送成功。

炫耀&認(rèn)同

朋友圈滿足用戶炫耀和尋求認(rèn)同。

自我價(jià)值

推出公眾號(hào)，個(gè)人與企業(yè)都能建立自身品牌，實(shí)現(xiàn)自我價(jià)值。

需要注意的是，一個(gè)頁面的情感化設(shè)計(jì)會(huì)合理地綜合使用情感化的設(shè)計(jì)要素。比如，微信朋友圈的頁面，色環(huán)轉(zhuǎn)動(dòng)吸引注意力，減弱用戶對(duì)朋友圈刷新響應(yīng)時(shí)間的感知，發(fā)表狀態(tài)時(shí)，采用隊(duì)列技術(shù)后臺(tái)悄悄上傳發(fā)送，積極響應(yīng)用戶。

作者：鉛筆小葵（微信號(hào)：gaokaikui ?知乎專欄：鉛筆小葵），產(chǎn)品經(jīng)理，負(fù)責(zé)產(chǎn)品從0到1的開發(fā)，曾任Java工程師，參與后臺(tái)開發(fā)。歡迎大家互相交流關(guān)注。

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