李笑來(lái)說(shuō)過(guò)一句話：審美常常并不需要知道原理，但創(chuàng)造美的人必須有方法論，否則不可能持續(xù)創(chuàng)造。但是很多人總覺(jué)得背方法論是笨工夫，高手難道不應(yīng)該根據(jù)場(chǎng)上局面隨機(jī)應(yīng)變嗎？但事實(shí)是，隨機(jī)應(yīng)變才是笨辦法，方法論和成語(yǔ)典故、數(shù)學(xué)定理一樣，是人腦思維中的快捷方式，“聰明人”之所以能做到隨機(jī)應(yīng)變，是因?yàn)樗麄兡X中存有足夠多方法論，當(dāng)遇到事情時(shí)，這些方法論像神經(jīng)一樣互相連接，給出最優(yōu)的解決方案。
今天就跟大家分享設(shè)計(jì)的方法論——設(shè)計(jì)原則，在方案輸出時(shí)，可以將設(shè)計(jì)原則作為方案的自檢工具，這樣在方案內(nèi)審時(shí)，面對(duì)領(lǐng)導(dǎo)和同事的質(zhì)疑，除了說(shuō)“大廠都是這么做的”這樣蒼白無(wú)力的解釋外，還有更多的設(shè)計(jì)原則做支撐。
一、一致性
一致性的益處：對(duì)用戶(hù)來(lái)說(shuō)，一致性可以降低學(xué)習(xí)成本，對(duì)開(kāi)發(fā)團(tuán)隊(duì)來(lái)說(shuō)，可以減少錯(cuò)誤，降低產(chǎn)品的維護(hù)成本，提高代碼和設(shè)計(jì)的復(fù)用率。對(duì)企業(yè)來(lái)說(shuō)，一致性意味著產(chǎn)品的不同模塊要有相似的外觀、感覺(jué)和行為，這種特性會(huì)被擴(kuò)展到企業(yè)其他產(chǎn)品中（比如Adobe旗下的產(chǎn)品都嚴(yán)格保持著相同的標(biāo)準(zhǔn)），有利于強(qiáng)化用戶(hù)對(duì)品牌的認(rèn)知，建立品牌忠誠(chéng)度。
一致性的弊端：很多設(shè)計(jì)師容易被這一原則而禁錮，進(jìn)而成為設(shè)計(jì)師偷懶的借口，設(shè)計(jì)師有時(shí)為了強(qiáng)調(diào)一致性而忽略了特定情境下的用戶(hù)行為和使用模式，所以在設(shè)計(jì)時(shí)不能只關(guān)注用戶(hù)的感覺(jué)和品牌認(rèn)知，要根據(jù)特定場(chǎng)景敢于創(chuàng)新。
一致性可以從以下幾個(gè)維度分析：
1、交互行為一致性，交互行為一致性又包括操作方式，控件，控件位置等。拿最近做的項(xiàng)目舉例，「轉(zhuǎn)到銀行卡」和「信用卡還款」雖兩個(gè)不同功能，但盡量使模塊內(nèi)控件，控件位置及操作方式保持統(tǒng)一。
2、視覺(jué)表現(xiàn)一致性，包括風(fēng)格，色彩，文字，圖標(biāo)，圖片等。風(fēng)格和色彩的統(tǒng)一比較容易理解，這里詳細(xì)說(shuō)一下圖標(biāo)和圖片如何保持統(tǒng)一。
圖標(biāo)的統(tǒng)一性：
1）一款產(chǎn)品在各個(gè)平臺(tái)上的圖標(biāo)要一致
2）多款產(chǎn)品在一個(gè)平臺(tái)上的圖標(biāo)之間的風(fēng)格或規(guī)范要一致
3）一款產(chǎn)品的每個(gè)圖標(biāo)的風(fēng)格、細(xì)節(jié)、體量感上要一致
如何做到每個(gè)圖標(biāo)風(fēng)格，細(xì)節(jié)，體量感上的統(tǒng)一？
1）保持圖標(biāo)的復(fù)雜程度或簡(jiǎn)約程度統(tǒng)一
2）不使用潦草、手繪的造型，幾何形更容易達(dá)到統(tǒng)一
3）保持圖標(biāo)的維度統(tǒng)一（二維/三維）
4）保持圖標(biāo)陰影、漸變等樣式統(tǒng)一或均無(wú)樣式
5）保持圖標(biāo)顏色或圖標(biāo)背景的顏色統(tǒng)一
6）保持圖標(biāo)的尺寸和比例統(tǒng)一（體量感）
7）保持圖標(biāo)線的粗細(xì)統(tǒng)一
8）保持圖標(biāo)圓角大小統(tǒng)一
如何做到圖片的一致性：
1）圖片的處理方式一致（尺寸比例，圓角，投影）
2）圖片的風(fēng)格一致，圖片風(fēng)格是否保持統(tǒng)一視產(chǎn)品屬性而定，像淘寶這樣的電商平臺(tái)想要保持圖片風(fēng)格的統(tǒng)一性簡(jiǎn)直要了店家的命，但是圖片的處理方式可以做到統(tǒng)一，比如淘寶的商品圖大部分是灰色背景等。
3、文案的一致性，文案的人稱(chēng)，風(fēng)格保持一致，網(wǎng)易云音樂(lè)的文案都是用的第二人稱(chēng)，且具有很強(qiáng)的趣味性。
二、優(yōu)先級(jí)
優(yōu)先級(jí)可以從以下幾個(gè)維度分析：
1、功能優(yōu)先級(jí)：把握核心需求，突出亮點(diǎn)功能，拿最近做的項(xiàng)目舉例：轉(zhuǎn)賬主頁(yè)面功能優(yōu)先級(jí)最高的是「轉(zhuǎn)到銀行卡」「微轉(zhuǎn)賬」，所以在頁(yè)面布局、所占比重上強(qiáng)調(diào)這兩個(gè)功能，同時(shí)上滑時(shí)兩個(gè)按鈕變小凍結(jié)在頁(yè)面頂部，方便用戶(hù)快捷使用。
2、內(nèi)容優(yōu)先級(jí)：內(nèi)容分級(jí)，突出核心內(nèi)容。拿最近做的項(xiàng)目舉例：代金券詳情頁(yè)，根據(jù)用戶(hù)使用卡券的場(chǎng)景，以及數(shù)據(jù)分析得出的內(nèi)容優(yōu)先級(jí)對(duì)內(nèi)容進(jìn)行布局與設(shè)計(jì)。將優(yōu)先級(jí)最高的代金券二維碼放在用戶(hù)視線觸達(dá)的位置，當(dāng)用戶(hù)上滑時(shí)，底部出現(xiàn)全局浮動(dòng)的按鈕，可快速顯示二維碼。
再比如，轉(zhuǎn)賬后的狀態(tài)頁(yè)面，用戶(hù)最關(guān)心的內(nèi)容是轉(zhuǎn)賬后的狀態(tài)及轉(zhuǎn)賬金額，其次是收款方信息以及轉(zhuǎn)賬備注，將信息進(jìn)行整理、歸類(lèi)、隱藏、刪減，避免不重要信息對(duì)用戶(hù)獲取重要信息時(shí)的干擾。點(diǎn)擊箭頭可查看更詳細(xì)的轉(zhuǎn)賬信息，最后的頁(yè)面設(shè)計(jì)如下：
3、交互優(yōu)先級(jí)：主要路徑清晰，減少干擾和分支。如下轉(zhuǎn)賬流程中，根據(jù)用戶(hù)每一步驟的目的與使用場(chǎng)景進(jìn)行信息呈現(xiàn)，該出現(xiàn)的時(shí)候出現(xiàn)，不該出現(xiàn)時(shí)隱藏，分步驟進(jìn)行，使轉(zhuǎn)賬這一主路徑清晰明了，減少其他信息對(duì)用戶(hù)的干擾。
4、視覺(jué)優(yōu)先級(jí)：重要的視覺(jué)信息第一眼看到，主要次要信息有所區(qū)分。如微信錢(qián)包頁(yè)面，收付款和錢(qián)包的視覺(jué)優(yōu)先級(jí)明顯高于下方的騰訊服務(wù)。美團(tuán)首頁(yè)上方雖都是功能按鈕，通過(guò)圖標(biāo)的體量、大小、位置拉開(kāi)彼此層級(jí)，突出展示「掃一掃」「付款碼」「紅包/卡券」「騎單車(chē)」這些功能，很好的引導(dǎo)了用戶(hù)視線，完成產(chǎn)品目標(biāo)和用戶(hù)目標(biāo)。
三、易讀性
易讀性可以從以下幾個(gè)維度分析：
1、使用用戶(hù)語(yǔ)言而不是開(kāi)發(fā)者語(yǔ)言，貼近生活實(shí)際而不是學(xué)術(shù)概念。圖1是改版前的頁(yè)面，頁(yè)面的核心目的是通過(guò)圖表、止鼾次數(shù)、分貝向用戶(hù)傳達(dá)止鼾器的止鼾效果，呈現(xiàn)方式不直觀，且用戶(hù)對(duì)分貝并沒(méi)有確切的概念，圖二將分貝巧妙的轉(zhuǎn)化成蜜蜂的聲音，增強(qiáng)了易讀性，在這里蜜蜂的聲音就是用戶(hù)語(yǔ)言，分貝即開(kāi)發(fā)語(yǔ)言。
2、符合用戶(hù)認(rèn)知與心智，延續(xù)約定俗成概念。蘋(píng)果的首席設(shè)計(jì)師喬納森·艾弗說(shuō)：“好的設(shè)計(jì)無(wú)需認(rèn)知門(mén)檻”，好的設(shè)計(jì)不需要任何指示用戶(hù)就知道如何操作。如下圖蘋(píng)果系統(tǒng)的亮度設(shè)置，向上滑動(dòng)是提高亮度，向下滑動(dòng)是降低亮度，而不是向下是提高，向上是降低。
再比如，根據(jù)我們的正常認(rèn)知，下一步應(yīng)該在右，上一步在左。
3、保持簡(jiǎn)潔，不給用戶(hù)造成困擾與疑惑。還是拿之前做的項(xiàng)目舉例：微轉(zhuǎn)賬不同于普通的銀行卡轉(zhuǎn)賬，需要給用戶(hù)進(jìn)行解釋說(shuō)明，改版前的說(shuō)明直接將大段的解釋文字展示給用戶(hù)，可讀性差，改版后將大段的解釋轉(zhuǎn)化成4個(gè)直觀的步驟，對(duì)用戶(hù)來(lái)說(shuō)更容易理解。
四、容錯(cuò)性
容錯(cuò)性可以從以下幾個(gè)維度分析：
1、操作前可預(yù)知：有預(yù)防用戶(hù)出錯(cuò)的措施，關(guān)鍵操作有確認(rèn)提示，及早消除誤操作。如圖1輸入轉(zhuǎn)賬金額時(shí)提前告知用戶(hù)銀行卡余額，避免余額不足讓用戶(hù)重復(fù)輸入；圖2提前告知用戶(hù)提取的金額是50的倍數(shù)，避免用戶(hù)出錯(cuò)。
分期還款時(shí)，提前告知用戶(hù)一個(gè)賬單周期只能申請(qǐng)一次分期，且在用戶(hù)二次確認(rèn)的彈出框再次提示。
2、操作中有反饋：給用戶(hù)明確的錯(cuò)誤信息，并協(xié)助用戶(hù)方便從錯(cuò)誤中恢復(fù)工作。如在分期金額輸入錯(cuò)誤時(shí)及時(shí)告訴用戶(hù)出錯(cuò)的原因。
3、操作后可撤消：允許用戶(hù)撤消錯(cuò)誤操作，如mac系統(tǒng)垃圾箱中「放回原處」功能：
微信對(duì)話中的「撤回」功能，這些都體現(xiàn)了系統(tǒng)的容錯(cuò)性。
五、可控性
可控性可以從以下幾個(gè)維度分析：
1、記憶及預(yù)測(cè)用戶(hù)行為，幫助用戶(hù)做些事情，減輕用戶(hù)記憶負(fù)擔(dān)。如mac系統(tǒng)的密碼管理可以幫助用戶(hù)記住常用的賬戶(hù)密碼：
郵件中，輸入收件人的姓，軟件能自動(dòng)檢索出該姓下曾出現(xiàn)過(guò)的所有用戶(hù)的郵件地址。
2、對(duì)操作給予及時(shí)反饋，用戶(hù)能了解操作是否已生效，用戶(hù)在界面上的任何操作，不論是單擊、滾動(dòng)還是按下鍵盤(pán)，或者操作狀態(tài)變化，界面應(yīng)及時(shí)給出反饋。
3、將操作狀態(tài)或進(jìn)度顯示出來(lái)，用戶(hù)能了解當(dāng)前系統(tǒng)狀況，如讓用戶(hù)實(shí)時(shí)了解貨物的物流信息，會(huì)減輕用戶(hù)等待的煩躁感，同時(shí)增加可控感。
4、用戶(hù)清楚知道自己當(dāng)前在哪里，退路在哪里，可以去哪里，如分頁(yè)控件就能明確的告訴用戶(hù)自己在哪，退路在哪，還能去哪。
5、提供適時(shí)幫助、必要的信息提示，如最常見(jiàn)的功能引導(dǎo)
回顧：
一、一致性
1、交互行為一致性：操作，控件，位置。
2、視覺(jué)表現(xiàn)一致性：風(fēng)格，色彩，文字，圖標(biāo)，圖片。
3、文案措辭一致性：提示語(yǔ)，功能按鈕等。
二、優(yōu)先級(jí)
1、功能優(yōu)先級(jí)：把握核心需求，突出亮點(diǎn)功能。
2、內(nèi)容優(yōu)先級(jí)：內(nèi)容分級(jí)，突出核心內(nèi)容。
3、交互優(yōu)先級(jí)：主要路徑清晰，減少干擾和分支。
4、視覺(jué)優(yōu)先級(jí)：重要的視覺(jué)信息第一眼看到，主要次要信息有所區(qū)分。
三、易讀性
1、使用用戶(hù)語(yǔ)言而不是開(kāi)發(fā)者語(yǔ)言，貼近生活實(shí)際而不是學(xué)術(shù)概念
2、符合用戶(hù)認(rèn)知與心智，延續(xù)約定俗成概念。
3、保持簡(jiǎn)潔，不給用戶(hù)造成困擾與疑惑。
四、容錯(cuò)性
1、操作前可預(yù)知：有預(yù)防用戶(hù)出錯(cuò)的措施，關(guān)鍵操作有確認(rèn)提示，及早消除誤操作。
2、操作有反饋：給用戶(hù)明確的錯(cuò)誤信息，并協(xié)助用戶(hù)方便從錯(cuò)誤中恢復(fù)工作。
3、操作后可撤銷(xiāo)：允許用戶(hù)撤銷(xiāo)錯(cuò)誤操作。
五、可控性
1、記憶及預(yù)測(cè)用戶(hù)行為，幫助用戶(hù)做些事情，減輕用戶(hù)記憶負(fù)擔(dān)。
2、對(duì)操作給予及時(shí)反饋，用戶(hù)能了解操作是否生效。
3、將操作狀態(tài)或進(jìn)度顯示出來(lái)，用戶(hù)能了解當(dāng)前系統(tǒng)狀況。
4、用戶(hù)清楚知道自己當(dāng)前在哪里，退路在哪里，可以去哪里。
5、提供適時(shí)幫助、必要的信息提示。
-希望此文對(duì)你有一點(diǎn)幫助
轉(zhuǎn)自：站酷-poppy