編者按：本文來自微信公眾號“設宴”（ID：sheyandesign）,，作者 poppy，36氪經(jīng)授權(quán)發(fā)布,。

李笑來說過一句話：審美常常并不需要知道原理,，但創(chuàng)造美的人必須有方法論，否則不可能持續(xù)創(chuàng)造,。但是很多人總覺得背方法論是笨工夫,，高手難道不應該根據(jù)場上局面隨機應變嗎？

但事實是,，隨機應變才是笨辦法,，方法論和成語典故、數(shù)學定理一樣,，是人腦思維中的快捷方式,，“聰明人”之所以能做到隨機應變，是因為他們腦中存有足夠多方法論,，當遇到事情時,，這些方法論像神經(jīng)一樣互相連接，給出最優(yōu)的解決方案,。

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

一致性

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

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

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

1,、交互行為一致性,，交互行為一致性又包括操作方式，控件,，控件位置等,。拿最近做的項目舉例，「轉(zhuǎn)到銀行卡」和「信用卡還款」雖兩個不同功能,，但盡量使模塊內(nèi)控件,，控件位置及操作方式保持統(tǒng)一。

2,、視覺表現(xiàn)一致性，包括風格,，色彩,，文字，圖標,，圖片等,。風格和色彩的統(tǒng)一比較容易理解，這里詳細說一下圖標和圖片如何保持統(tǒng)一,。

圖標的統(tǒng)一性：

1）一款產(chǎn)品在各個平臺上的圖標要一致

2）多款產(chǎn)品在一個平臺上的圖標之間的風格或規(guī)范要一致

3）一款產(chǎn)品的每個圖標的風格,、細節(jié)、體量感上要一致

如何做到每個圖標風格,，細節(jié)，體量感上的統(tǒng)一,？

1）保持圖標的復雜程度或簡約程度統(tǒng)一

2）不使用潦草,、手繪的造型，幾何形更容易達到統(tǒng)一

3）保持圖標的維度統(tǒng)一（二維/三維）

4）保持圖標陰影,、漸變等樣式統(tǒng)一或均無樣式

5）保持圖標顏色或圖標背景的顏色統(tǒng)一

6）保持圖標的尺寸和比例統(tǒng)一（體量感）

7）保持圖標線的粗細統(tǒng)一

8）保持圖標圓角大小統(tǒng)一

如何做到圖片的一致性：

1）圖片的處理方式一致（尺寸比例,，圓角，投影）

2）圖片的風格一致,，圖片風格是否保持統(tǒng)一視產(chǎn)品屬性而定,，像淘寶這樣的電商平臺想要保持圖片風格的統(tǒng)一性簡直要了店家的命，但是圖片的處理方式可以做到統(tǒng)一,，比如淘寶的商品圖大部分是灰色背景等,。

3）文案的一致性,，文案的人稱，風格保持一致,，網(wǎng)易云音樂的文案都是用的第二人稱，且具有很強的趣味性,。

二,、優(yōu)先級

優(yōu)先級可以從以下幾個維度分析：

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

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

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

3,、交互優(yōu)先級：主要路徑清晰，減少干擾和分支,。如下轉(zhuǎn)賬流程中,，根據(jù)用戶每一步驟的目的與使用場景進行信息呈現(xiàn)，該出現(xiàn)的時候出現(xiàn),，不該出現(xiàn)時隱藏,，分步驟進行，使轉(zhuǎn)賬這一主路徑清晰明了,，減少其他信息對用戶的干擾,。

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

三,、易讀性

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

1、使用用戶語言而不是開發(fā)者語言,，貼近生活實際而不是學術概念,。圖1是改版前的頁面，頁面的核心目的是通過圖表,、止鼾次數(shù),、分貝向用戶傳達止鼾器的止鼾效果，呈現(xiàn)方式不直觀,，且用戶對分貝并沒有確切的概念,，圖二將分貝巧妙的轉(zhuǎn)化成蜜蜂的聲音，增強了易讀性,，在這里蜜蜂的聲音就是用戶語言,，分貝即開發(fā)語言。

2,、符合用戶認知與心智,，延續(xù)約定俗成概念。蘋果的首席設計師喬納森·艾弗說：“好的設計無需認知門檻”,，好的設計不需要任何指示用戶就知道如何操作,。如下圖蘋果系統(tǒng)的亮度設置，向上滑動是提高亮度,，向下滑動是降低亮度,，而不是向下是提高，向上是降低,。

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

3、保持簡潔,，不給用戶造成困擾與疑惑,。還是拿之前做的項目舉例：微轉(zhuǎn)賬不同于普通的銀行卡轉(zhuǎn)賬，需要給用戶進行解釋說明,，改版前的說明直接將大段的解釋文字展示給用戶,，可讀性差，改版后將大段的解釋轉(zhuǎn)化成4個直觀的步驟,，對用戶來說更容易理解,。

四,、容錯性

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

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

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

2,、操作中有反饋：給用戶明確的錯誤信息，并協(xié)助用戶方便從錯誤中恢復工作,。如在分期金額輸入錯誤時及時告訴用戶出錯的原因,。

3,、操作后可撤消：允許用戶撤消錯誤操作,，如mac系統(tǒng)垃圾箱中「放回原處」功能：

微信對話中的「撤回」功能,，這些都體現(xiàn)了系統(tǒng)的容錯性,。

五、可控性

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

1,、記憶及預測用戶行為,，幫助用戶做些事情，減輕用戶記憶負擔,。如mac系統(tǒng)的密碼管理可以幫助用戶記住常用的賬戶密碼：

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

2,、對操作給予及時反饋,，用戶能了解操作是否已生效，用戶在界面上的任何操作,，不論是單擊,、滾動還是按下鍵盤，或者操作狀態(tài)變化,，界面應及時給出反饋,。

3、將操作狀態(tài)或進度顯示出來,，用戶能了解當前系統(tǒng)狀況,，如讓用戶實時了解貨物的物流信息，會減輕用戶等待的煩躁感,，同時增加可控感,。

4,、用戶清楚知道自己當前在哪里,，退路在哪里,，可以去哪里，如分頁控件就能明確的告訴用戶自己在哪,，退路在哪,，還能去哪。

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

回顧：

一、一致性

1,、交互行為一致性：操作,，控件，位置,。

2,、視覺表現(xiàn)一致性：風格，色彩,，文字，圖標,，圖片,。

3、文案措辭一致性：提示語,，功能按鈕等,。

二、優(yōu)先級

1,、功能優(yōu)先級：把握核心需求,，突出亮點功能。

2,、內(nèi)容優(yōu)先級：內(nèi)容分級,，突出核心內(nèi)容。

3,、交互優(yōu)先級：主要路徑清晰,，減少干擾和分支。

4,、視覺優(yōu)先級：重要的視覺信息第一眼看到,，主要次要信息有所區(qū)分。

三,、易讀性

1,、使用用戶語言而不是開發(fā)者語言，貼近生活實際而不是學術概念

2、符合用戶認知與心智,，延續(xù)約定俗成概念,。

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

四、容錯性

1,、操作前可預知：有預防用戶出錯的措施,，關鍵操作有確認提示，及早消除誤操作,。

2,、操作有反饋：給用戶明確的錯誤信息，并協(xié)助用戶方便從錯誤中恢復工作,。

3,、操作后可撤銷：允許用戶撤銷錯誤操作。

五,、可控性

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

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

3、將操作狀態(tài)或進度顯示出來,，用戶能了解當前系統(tǒng)狀況,。

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

5,、提供適時幫助,、必要的信息提示。