李笑來說過一句話：審美常常并不需要知道原理，但創造美的人必須有方法論，否則不可能持續創造。但是很多人總覺得背方法論是笨工夫，高手難道不應該根據場上局面隨機應變嗎？但事實是，隨機應變才是笨辦法，方法論和成語典故、數學定理一樣，是人腦思維中的快捷方式，「聰明人」之所以能做到隨機應變，是因為他們腦中存有足夠多方法論，當遇到事情時，這些方法論像神經一樣互相連接，給出最優的解決方案。

今天就跟大家分享設計的方法論 ── 設計原則。在方案輸出時，可以將設計原則作為方案的自檢工具，這樣在方案內審時，面對領導和同事的質疑，除了說「大廠都是這么做的」這樣蒼白無力的解釋外，還有更多的設計原則做支撐。

一致性

一致性的益處：對用戶來說，一致性可以降低學習成本。對開發團隊來說，可以減少錯誤，降低產品的維護成本，提高代碼和設計的復用率。對企業來說，一致性意味著產品的不同模塊要有相似的外觀、感覺和行為，這種特性會被擴展到企業其他產品中，有利于強化用戶對品牌的認知，建立品牌忠誠度。比如 Adobe 旗下的產品都嚴格保持著相同的標準。

一致性的弊端：很多設計師容易被這一原則而禁錮，進而成為設計師偷懶的借口，設計師有時為了強調一致性而忽略了特定情境下的用戶行為和使用模式，所以在設計時不能只關注用戶的感覺和品牌認知，要根據特定場景敢于創新。

一致性可以從以下幾個維度分析。

1. 交互行為一致性

交互行為一致性又包括操作方式，控件，控件位置等。拿最近做的項目舉例，「轉到銀行卡」和「信用卡還款」雖然是兩個不同功能，但盡量使模塊內控件，控件位置及操作方式保持統一。

2.?視覺表現一致性

視覺表現一致性，包括風格，色彩，文字，圖標，圖片等。風格和色彩的統一比較容易理解，這里詳細說一下圖標和圖片如何保持統一。

圖標的統一性

一款產品在各個平臺上的圖標要一致。

多款產品在一個平臺上的圖標之間的風格或規范要一致。

一款產品的每個圖標的風格、細節、體量感上要一致。

如何做到每個圖標風格，細節，體量感上的統一？

• 保持圖標的復雜程度或簡約程度統一
• 不使用潦草、手繪的造型，幾何形更容易達到統一
• 保持圖標的維度統一（二維/三維）
• 保持圖標陰影、漸變等樣式統一或均無樣式
• 保持圖標顏色或圖標背景的顏色統一
• 保持圖標的尺寸和比例統一（體量感）
• 保持圖標線的粗細統一
• 保持圖標圓角大小統一

如何做到圖片的一致性？

• 圖片的處理方式一致（尺寸比例，圓角，投影）
• 圖片的風格一致，圖片風格是否保持統一視產品屬性而定，像淘寶這樣的電商平臺想要保持圖片風格的統一性對商家要求較高，但是圖片的處理方式可以做到統一，比如淘寶的商品圖大部分是灰色背景等。
• 文案的一致性，文案的人稱，風格保持一致，網易云音樂的文案都是用的第二人稱，且具有很強的趣味性。

優先級

優先級可以從以下幾個維度分析：

1. 功能優先級

把握核心需求，突出亮點功能。拿最近做的項目舉例：轉賬主頁面功能優先級最高的是「轉到銀行卡」「微轉賬」，所以在頁面布局、所占比重上強調這兩個功能，同時上滑時兩個按鈕變小凍結在頁面頂部，方便用戶快捷使用。

2. 內容優先級

內容分級，突出核心內容。拿最近做的項目舉例：代金券詳情頁，根據用戶使用卡券的場景，以及數據分析得出的內容優先級對內容進行布局與設計。將優先級最高的代金券二維碼放在用戶視線最先觸達的位置，當用戶上滑時，底部出現全局浮動的按鈕，可快速顯示二維碼。

再比如，轉賬后的狀態頁面，用戶最關心的內容是轉賬后的狀態及轉賬金額，其次是收款方信息以及轉賬備注，將信息進行整理、歸類、隱藏、刪減，避免不重要信息對用戶獲取重要信息時的干擾。點擊箭頭可查看更詳細的轉賬信息，最后的頁面設計如下：

3. 交互優先級

主要路徑清晰，減少干擾和分支。如下轉賬流程中，根據用戶每一步驟的目的與使用場景進行信息呈現，該出現的時候出現，不該出現時隱藏，分步驟進行，使轉賬這一主路徑清晰明了，減少其他信息對用戶的干擾。

4. 視覺優先級

重要的視覺信息第一眼看到，主要次要信息有所區分。如微信錢包頁面，收付款和錢包的視覺優先級明顯高于下方的騰訊服務。美團首頁上方雖都是功能按鈕，通過圖標的體量、大小、位置拉開彼此層級，突出展示「掃一掃」「付款碼」「紅包/卡券」「騎單車」這些功能，很好的引導了用戶視線，完成產品目標和用戶目標。

易讀性

易讀性可以從以下幾個維度分析：

1. 使用用戶語言而不是開發者語言，貼近生活實際而不是學術概念

圖1是改版前的頁面，頁面的核心目的是通過圖表、止鼾次數、分貝向用戶傳達止鼾器的止鼾效果，呈現方式不直觀，且用戶對分貝并沒有確切的概念。圖二將分貝巧妙的轉化成蜜蜂的聲音，增強了易讀性，在這里蜜蜂的聲音就是用戶語言，分貝即開發語言。

2. 符合用戶認知與心智，延續約定俗成概念

蘋果的首席設計師喬納森·艾弗說：「好的設計無需認知門檻」，好的設計不需要任何指示用戶就知道如何操作。如下圖蘋果系統的亮度設置，向上滑動是提高亮度，向下滑動是降低亮度，而不是向下是提高，向上是降低。

再比如，根據我們的正常認知，下一步應該在右，上一步在左。

3. 保持簡潔，不給用戶造成困擾與疑惑

還是拿之前做的項目舉例：微轉賬不同于普通的銀行卡轉賬，需要給用戶進行解釋說明，改版前的說明直接將大段的解釋文字展示給用戶，可讀性差，改版后將大段的解釋轉化成 4 個直觀的步驟，對用戶來說更容易理解。

容錯性

容錯性可以從以下幾個維度分析：

1. 操作前可預知

有預防用戶出錯的措施，關鍵操作有確認提示，及早消除誤操作。如圖1輸入轉賬金額時提前告知用戶銀行卡余額，避免余額不足讓用戶重復輸入；圖2提前告知用戶提取的金額是 50 的倍數，避免用戶出錯。

分期還款時，提前告知用戶一個賬單周期只能申請一次分期，且在用戶二次確認的彈出框再次提示。

2. 操作中有反饋

給用戶明確的錯誤信息，并協助用戶方便從錯誤中恢復工作。如在分期金額輸入錯誤時及時告訴用戶出錯的原因。

3. 操作后可撤消

允許用戶撤消錯誤操作，如 mac 系統垃圾箱中「放回原處」功能：

微信對話中的「撤回」功能，這些都體現了系統的容錯性。

可控性

可控性可以從以下幾個維度分析：

1. 記憶及預測用戶行為，幫助用戶做些事情，減輕用戶記憶負擔

如 mac 系統的密碼管理可以幫助用戶記住常用的賬戶密碼：

郵件中，輸入收件人的姓，軟件能自動檢索出該姓下曾出現過的所有用戶的郵件地址。

2. 對操作給予及時反饋，用戶能了解操作是否已生效

用戶在界面上的任何操作，不論是單擊、滾動還是按下鍵盤，或者操作狀態變化，界面應及時給出反饋。

3. 將操作狀態或進度顯示出來，用戶能了解當前系統狀況

如讓用戶實時了解貨物的物流信息，會減輕用戶等待的煩躁感，同時增加可控感。

4. 用戶清楚知道自己當前在哪里，退路在哪里，可以去哪里

如分頁控件就能明確地告訴用戶自己在哪，退路在哪，還能去哪。

5. 提供適時幫助、必要的信息提示，如最常見的功能引導

總結

1. 一致性

• 交互行為一致性：操作，控件，位置。
• 視覺表現一致性：風格，色彩，文字，圖標，圖片。
• 文案措辭一致性：提示語，功能按鈕等。

2. 優先級

• 功能優先級：把握核心需求，突出亮點功能。
• 內容優先級：內容分級，突出核心內容。
• 交互優先級：主要路徑清晰，減少干擾和分支。
• 視覺優先級：重要的視覺信息第一眼看到，主要次要信息有所區分。

3. 易讀性

• 使用用戶語言而不是開發者語言，貼近生活實際而不是學術概念。
• 符合用戶認知與心智，延續約定俗成的概念。
• 保持簡潔，不給用戶造成困擾與疑惑。

4. 容錯性

• 操作前可預知：有預防用戶出錯的措施，關鍵操作有確認提示，及早消除誤操作。
• 操作有反饋：給用戶明確的錯誤信息，并協助用戶方便從錯誤中恢復工作。
• 操作后可撤銷：允許用戶撤銷錯誤操作。

5. 可控性

• 記憶及預測用戶行為，幫助用戶做些事情，減輕用戶記憶負擔。
• 對操作給予及時反饋，用戶能了解操作是否生效。
• 將操作狀態或進度顯示出來，用戶能了解當前系統狀況。
• 用戶清楚知道自己當前在哪里，退路在哪里，可以去哪里。
• 提供適時幫助、必要的信息提示。

歡迎關注作者的微信公眾號：「設宴」