起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識以微信為例，談談產品設計的四大基本原則、十大可用性原則、情感化設計
文章以微信為案例，談談產品設計的四大基本原則、十大可用性原則、情感化設計。
產品設計的類別
用戶看重的是產品的概念模型，強調用戶體驗，即產品如何設計，為用戶體驗服務。用戶體驗就是產品的核心競爭力，就是產品的生命力。
所以，要想懂得如何產品設計，需要了解用戶體驗主要有哪些分類，才能更好地根據每個用戶體驗的分類進行相應的產品設計。
用戶體驗分類
感觀體驗：呈現給用戶視聽上的體驗，強調舒適性。一般在色彩、聲音、圖像、文字內容、網站布局等呈現。
交互用戶體驗：界面給用戶使用、交流過程的體驗，強調互動、交互特性。交互體驗的過程貫穿瀏覽、點擊、輸入、輸出等過程給訪客產生的體驗。
情感用戶體驗：給用戶心理上的體驗，強調心理認可度。讓用戶通過站點能認同、抒發自己的內在情感，那說明用戶體驗效果較深。情感體驗的升華是口碑的傳播，形成一種高度的情感認可效應。
用戶體驗分類對應的產品設計
- 強調舒適性，主要是色彩、布局等呈現。色彩主要是UI設計師設計，布局主要是控件的對齊等基本設計，即產品設計的四大基本原則。
- 強調交互性，主要是人機的互動反饋過程，即產品設計的十大可用性原則。
- 強調心理認可，主要是情感認可，即產品設計的情感化設計。
四大基本原則
產品設計的四大基本原則：親密性、對齊、重復、對比。
四大基本原則的應用思路：把信息歸入邏輯親密性，利用對齊，找到并制造重復元素，加入對比。
親密性（Proximity）
彼此相關的項應當靠近，歸組在一起，建立更近的親密性。親密性的根本目的是實現組織性。
如果多個項相互之間存在很近的親密性（親密性意味著存在關聯），他們就會成為一個視覺單元，而不是多個孤立的元素。這有助于組織信息，減少混亂，為讀者提供清晰的結構，這樣頁面的理解和視覺上都變得更有條理，更能表達信息。另外，親密性原則可以使頁面產生相應的空白，空白既可以表達關系（說明項與項的關系），也可以使頁面看上去有更多的空間，頁面不會顯得擁擠（眼睛得到休息），頁面更美觀（有條理），這樣頁面的布局會變得更有組織。
案例：微信的發現頁面，掃一掃主要是二維碼/條碼、街景、翻譯的掃描上的識別，搖一搖主要是人、歌曲的搖一搖上的識別，存在著識別的關聯，所以歸組在一起，形成一個視覺單元。頁面上的空白條，使得每個視覺單元更加清晰，頁面更有組織性。如下圖所示：
對齊（Alignment）
任何東西都不能在頁面隨意安放。每個元素都應當與頁面上的另一個元素有某種視覺聯系，這樣能建立一種清晰、精巧而且清爽的外觀。對齊的根本目的是使頁面統一而且有條理。
如果頁面上的一些項是對齊的，這會得到一個更內聚的單元，即使對齊的元素物理位置是彼此分離的，但在你眼里，他們之間也會有一條看不見的線把彼此連在一起。
對齊主要有左對齊、居中對齊、右對齊。居中對齊的線條比較“軟”，會創建一種更正式、更穩重的外觀，顯得更為中規中矩，但通常會乏味；左對齊或者右對齊的線條比較“硬”，線條更明確，這樣外觀會更清晰、效果更分明。所以我們可以看到頁面上的對齊主要采用左右對齊。
注意：一定要堅持一個原則：只使用一種對齊方式。因為我們眼睛都喜歡看有序的事物，這會給人一種平靜、安全的感覺。此外有助于表達信息。另外，避免居中對齊（除非有意而為）。
案例：微信強調熟人社交關系、安全，但居中對齊強調的是正式且乏味，與微信的定位違背，所以微信每個頁面都采用左對齊（左對齊符合閱讀習慣，更能便捷找到閱讀的起點）。
微信的發現頁面的左對齊，如下圖所示：
重復（Repetition）
讓設計中的視覺要素在整個作品中重復出現?？梢灾貜皖伾?、形狀、材質、空間關系、線寬、字體、大小和圖片，等等。這樣一來，要素都一致，各個部分看起來都是一體的，即能增加條理性，還可以加強統一性。重復的根本目的是統一，并增強視覺效果。
重復會為產品帶來一種專業性和權威性，會使用戶感覺有人在負責，因為重復顯然是一種經過深思熟慮的設計決策。
案例：微信每個頁面上，左對齊的重復、字體的樣式的重復、線條的樣式的重復、空白條的樣式的重復…… 注意，重復并不代表完全相同，而是存在明確關聯的緊密相關的對象。
微信首頁列表中，朋友聊天列表和服務號的字體相同，但顏色不同（多樣性的統一）。
微信的發現頁面，各個視覺要素的重復，如下圖所示：
對比（Contrast）
頁面上的不同元素之間要有對比效果，達到吸引讀者的對比效果。要避免頁面上的元素太過相似。如果元素（字體、顏色、大小、線寬、形狀、空間等）不相同，那就干脆讓它們截然不同。要讓頁面引人注目，對比通常是最重要的一個因素，正是它能使讀者首先看這個頁面。
對比的根本目的是增強頁面的效果（更有可讀性），有助于信息的組織（防止混淆）。
對比不僅可以用來吸引眼球，還可以用來組織信息、清晰層級、在頁面上指引用戶，并且制造焦點。
案例：微信的聊天窗口，對話信息文本的底色的對比，信息文本與背景的底色的對比。如下圖所示：
需要注意的是，這些設計原則需要合理搭配才會有好的整理效果，設計頁面時很少只使用某一種原則。
而且，需要注意四大原則的應用思路：把信息歸入邏輯親密性，利用對齊，找到并制造重復元素，加入對比。
案例：微信的發現頁面，使用了親密性形成多個視覺單元，實現組織性；再利用左對齊，形成清晰的外觀，使得頁面統一且有條理；再利用重復，使得頁面專業，增強視覺效果；最后再利用對比，即空白條和視覺單元的底色的對比，使得頁面更有可讀性。
十大可用性原則
尼爾森的十大可用性原則，強調易用性，是交互設計的重要參考標準。
狀態可見原則（Visibility of system status）
用戶在系統上的任何操作，不論是單擊、滾動還是按下鍵盤，系統應即時給出反饋?！凹磿r”是指用戶可以接受的等待時間（reasonable time）。
案例：微信的發送信息時，信息文本左邊有個半透明白灰色的轉輪給出發送中的反饋，發送失敗時會出現紅色感嘆圓給出發送失敗的反饋。
點擊微信右上角+，即時給出顯示相應的操作按鈕的反饋。如下圖所示：
環境貼切原則（Match between system and the real world）
系統的一切表現和表述，應該盡可能貼近用戶所在的環境，而不要使用系統的語言?！秈Phone人機交互指南》里提到的隱喻與擬物化是很好的實踐。此外，還應該使用易懂和約定俗成的表達。
案例：微信的發現頁面，每個子功能的圖標和表述都貼切用戶的環境，圖標采用擬物化，表述采用用戶熟悉的語言。如下圖所示：
撤銷重做原則（User control and freedom）
為了避免用戶的誤用和誤擊，系統應提供撤銷和重做功能。
案例：微信的導航欄切換、頁面返回。
聊天窗口誤發信息，支持撤回信息。如下圖所示：
一致性原則（Consistency and standards）
同一用語、功能、操作保持一致。
案例：微信的搖一搖功能，打開搖一搖的頁面，icon保持一致。如下圖所示：
防錯原則（Error prevention）
通過系統的設計、重組或特別安排，防止用戶出錯。
案例：微信的附近的人功能，使用會彈窗提示，提示用戶位置信息會泄漏，防止用戶出錯。如下圖所示：
易取原則（Recognition rather than recall）?
盡可能減少用戶對操作的回憶負擔，功能選項應該是可見的，使用說明都是可預見的。
案例：微信的發現頁面，每個子功能的圖標全部采用擬物化（參考環境貼切原則的圖示），每個操作都是可預見的。
靈活高效原則（Flexibility and efficiency of use）
中級用戶的數量遠高于初級和高級用戶數。為大多數用戶設計，不要低估，也不可輕視，保持靈活高效。
案例：微信的發現頁面的子功能默認全部顯示，但在設置中可以對每個子功能的啟用停用，滿足不同用戶的需求，保持靈活高效原則。如下圖所示：
易掃原則（Aesthetic and minimalist design）
互聯網用戶瀏覽網頁的動作不是讀，不是看，而是掃。易掃，意味著突出重點，弱化和剔除無關信息。
案例：微信對信息詳細分類在不同的頁面，每個頁面只顯示相關的功能。
微信的發現頁面，只顯示存在著探索關聯的功能（參考環境貼切原則的圖示）。
容錯原則（Help users recognize, diagnose, and recover from errors）
幫助用戶從錯誤中恢復，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導方向，而非代碼，比如404。
案例：微信用戶誤刪好友后，直接通過群找到好友，添加到通訊錄，不用好友通過驗證，恢復好友。
微信誤發紅包，對方也不接收紅包，超過24小時后自動退回到用戶錢包，避免用戶的損失。
用戶誤打開附近的人，位置信息泄漏，用戶可以點擊頁面右上角的清除功能可隨時手動清除位置信息。如下圖所示：
人性化幫助原則（Help and documentation）
如果系統不使用文檔是最好的，但是有必要提供幫助和文檔.
幫助性提示最好的方式是：1、無需提示；2、一次性提示；3、常駐提示；4；幫助文檔。
案例：微信發朋友圈的狀態時，文字文本會出現“這一刻的想法…”提示幫助。
微信的幫助與反饋，提供常見問題、相應功能的快捷幫助以及意見反饋。如下圖所示：
5、情感化設計
用戶購買產品大多源于情感需求，優秀的產品經理都懂得產品應該如何滿足用戶的情感需求，比如，用戶使用陌陌的增值服務，可以得到對方更多的信息和青睞，滿足交友和愛的需求。
當產品滿足用戶的情感需求，用戶很樂意為產品買單。在蘋果公司中，產品硬件為軟件服務，軟件為用戶體驗服務，用戶體驗為情感服務，做到產品為真正的需求服務，這就是為什么蘋果能夠引導行業。
只有從情感的角度重新觀察市場上的產品和服務，你才能體會用戶的真實感受。他們通過什么途徑滿足這些情感需求？哪種視覺設計更能抓住這些情感？哪些功能更能滿足這些情感需求？哪些產品特性阻礙用戶宣泄情感？
情感化設計的目標是在人格層面與用戶建立關聯，形成認同，即滿足用戶的情感需求，引發用戶共鳴，使用戶在與產品互動的過程中產生積極正面的情緒。這種情緒會逐步使用戶產生愉悅的記憶，從而更加樂于使用你的產品。另外，在正面情緒的作用下，用戶會處于相對愉悅與放松的狀態，這使得他們對于使用過程中遇到的小困難與細節問題的容忍能力也變得更強。
《情感化設計》告訴我們，產品情感化設計具備三種水平的設計：本能水平、行為水平、反思水平。三種水平分別對應產品的不同特點，如下：
- 本能水平的設計——>外形
- 行為水平的設計——>使用的樂趣和效率
- 反思水平的設計——>自我形象、個人滿意、記憶
微信情感化設計的案例
美好的事物更好用
UI清晰簡潔，色調綠色健康，給予舒服的情緒，更加能容忍產品出錯的問題。
孤獨
啟動頁，充滿情懷的設計，彰顯孤獨感，引發用戶共鳴。如下圖所示：
微笑
聊天窗口貼圖表情加載不成功，表情顯示為大大的笑臉，模仿人類的情緒，產生正面積極情緒，用戶更能容忍加載失敗。如下圖所示：
驚喜
微信聊天窗口，發送“我想你了”，窗口頁面落下滿屏星星，提供一些用戶想不到的東西，超出期望，讓用戶覺得很有趣快樂。如下圖所示：
暗示
發現頁面的功能停用按鈕為紅色，警告暗示，使得注意力更集中，點擊按鈕彈窗提示用戶停用該功能后將會發生什么，利用恐懼心理（損失比收益更在意），防止用戶停用。如下圖所示：
專享&個性
向某個群體的用戶提供一些專享個性化的東西。
微信運動，當用戶運動步數為第一名，運動封面將顯示用戶封面照片，專享，獲得成就感。
用戶朋友圈的封面，用戶自定義，個性化。
微信的搖一搖頁面，男用戶的icon與女用戶的icon不一樣，男女用戶專享個性化的icon。如下圖所示：
娛樂
提供游戲，好友排名，增加用戶成就感。
吸引力
朋友圈的色環轉輪，吸引用戶的注意，減少用戶對朋友圈的刷新響應時間。
擬物化
微信發現頁面的功能icon的擬物化，減少回憶，使得用戶可預期下一步的操作或者發生的事情。
效率
集社交、閱讀、服務一體，滿足生活不同的場景，比如付款紅包。
用戶發送圖片，讀取最近使用的圖片彈出快捷發送。
微信聊天窗口，發送“//multiwebview”，實現多個微信頁面，可以邊聊天邊閱讀的多任務并行，互不影響，提高用戶體驗。如下圖所示：
積極響應
對用戶的行為進行積極的響應。
微信用戶發送朋友圈后，狀態直接生成縮略圖在timeline顯示，后臺采用隊列技術悄悄上傳發送，對用戶進行積極響應，讓用戶誤以為直接就發送成功。
炫耀&認同
朋友圈滿足用戶炫耀和尋求認同。
自我價值
推出公眾號，個人與企業都能建立自身品牌，實現自我價值。
需要注意的是，一個頁面的情感化設計會合理地綜合使用情感化的設計要素。比如，微信朋友圈的頁面，色環轉動吸引注意力，減弱用戶對朋友圈刷新響應時間的感知，發表狀態時，采用隊列技術后臺悄悄上傳發送，積極響應用戶。
作者：鉛筆小葵（微信號：gaokaikui ?知乎專欄：鉛筆小葵），產品經理，負責產品從0到1的開發，曾任Java工程師，參與后臺開發。歡迎大家互相交流關注。
本文由 @鉛筆小葵 原創發布于人人都是產品經理。未經許可，禁止轉載。
真的非常棒的，用了微信這么多年，你不講，完全不知道有這些設計的技巧。超棒的
收獲不少,感謝~
搖一搖icon那里我拿起手來搖,恩,微信少考慮了女漢子 ??
仔細拜讀了 覺得很棒，不過“情感化設計”前面的那個“五”是哪來的呀，并沒有看到“一二三四”點 ??
/#翻白眼/
寫的不錯，有個小建議，那四大原則其實是從平面排版傳過來的，所以不是產品設計的四大基本原則，因為產品設計含義太廣泛了，你可以解釋成產品視覺設計(排版)的四大原則
謝謝指教