編輯導(dǎo)讀：好的設(shè)計原則是產(chǎn)品設(shè)計的堅實基礎(chǔ)，它應(yīng)當(dāng)體現(xiàn)出重要而清晰的設(shè)計意圖，既可以描述產(chǎn)品整體層面的設(shè)計目標(biāo)，也可以對具體問題的決策進(jìn)行支持，還可以幫助圍繞重要事項調(diào)整人員。文章從設(shè)計原則的重要性出發(fā)，對建立有效設(shè)計原則的關(guān)鍵和定義設(shè)計原則的思路展開梳理，與大家分享。

在前邊的文章中，我們研究了原子設(shè)計理論，并弄清了如何創(chuàng)建組件庫，從而形成設(shè)計體系的基礎(chǔ)。然而，這僅僅是打造設(shè)計體系的第一步。

組件庫就像樂高積木的基礎(chǔ)方塊，有了這些基礎(chǔ)方塊之后，就可以搭出作品嗎？顯然不可能，你還需要一份說明書。也就是說必須明確如何使用這些組件，該遵循什么樣的規(guī)則，這就需要設(shè)計原則。

沒有設(shè)計原則，組件庫永遠(yuǎn)只是一堆基礎(chǔ)組件。即便使用相同的組件庫，不同設(shè)計師的設(shè)計風(fēng)格也不會統(tǒng)一。所以，要將組件庫升級為設(shè)計體系，就必須定義屬于自己的設(shè)計原則。

一、設(shè)計原則是什么？

設(shè)計原則可以為設(shè)計決策提供核心價值，為設(shè)計提供向?qū)?，從而明確設(shè)計方向，統(tǒng)一設(shè)計風(fēng)格。

在定義設(shè)計原則之前，我們先來看看什么是原則。

原則是做事所依據(jù)的準(zhǔn)則，是信仰體系或推理鏈的基本原理，是我們的行為準(zhǔn)則，體現(xiàn)我們內(nèi)在的價值觀。

同樣的道理，設(shè)計原則就是做設(shè)計時所要依據(jù)的準(zhǔn)則，它為我們的設(shè)計提供向?qū)?，體現(xiàn)我們的設(shè)計價值觀。

因此，很多團(tuán)隊都在定義自己的設(shè)計原則，可以看到類似這樣的描述：“我們的設(shè)計要保持簡潔”、“清晰準(zhǔn)確”、“簡單實用”等等。但是仔細(xì)想想，是不是覺得聽了很多大道理，依然不會做設(shè)計？

難道設(shè)計不應(yīng)該保持簡潔嗎？設(shè)計不應(yīng)該做到“清晰準(zhǔn)確”？沒有人會說我的設(shè)計要復(fù)雜一點，盡可能讓別人看不懂。這些太過寬泛或者太明顯的原則毫無意義，根本無法指導(dǎo)實際的設(shè)計。那我們到底需要什么樣的設(shè)計原則？

二、有效的設(shè)計原則

有效的設(shè)計原則應(yīng)該能夠指導(dǎo)設(shè)計決策，它會明確的告訴設(shè)計團(tuán)隊，什么樣的設(shè)計是合適的，什么樣的設(shè)計是好的，什么樣的設(shè)計是要避免的。總的來說，它需要做到以下四點。

1. 真實而貼切

有效的設(shè)計原則用詞必須是真實且貼切的，而不是寬泛而空洞的。

“簡潔”“實用”“清晰”之類的詞匯雖然聽上去很有道理，但這更像是一種與生俱來的特質(zhì)，如“人必須要喝水”一樣。這樣的描述雖然是正確的，但對于設(shè)計決策沒有太大幫助。

該如何做到“簡潔”，怎樣做去保證“清晰準(zhǔn)確”，好的設(shè)計原則會將其放在特定的產(chǎn)品背景之下，使寬泛的原則變得貼切。例如，在Salesforce的LightningDesign System中，定義了“清晰”的設(shè)計原則，并解釋說：

消除歧義，讓用戶有信心的去看，去理解，去行動。

這里的“消除歧義”就是非常貼切的說法，因為“歧義”這個詞是可操作的，設(shè)計師就會盡量使自己的設(shè)計不產(chǎn)生歧義，從而達(dá)到“清晰”的目的。

2. 實用可操作

有效的設(shè)計原則應(yīng)該幫助產(chǎn)品解決問題，并提供實用的具體指導(dǎo)。

我們看看iOS的Human Interface Guidelines中，是如何定義“反饋”這一原則的：

通過反饋來確認(rèn)操作并展示結(jié)果。原生的iOS應(yīng)用對用戶的每個操作都提供可感知的反饋。點擊可交互元素會高亮顯示，通過進(jìn)度指示器來傳達(dá)較長的運(yùn)行狀態(tài)，并通過動效和聲音來清晰反饋操作結(jié)果。

通過提供可操作的具體建議，讓設(shè)計原則更加實用，而不是讀完之后還不知道該怎么做。

可以設(shè)想自己是在對團(tuán)隊中的設(shè)計師解釋這些原則，如果你只是說“要給用戶足夠的反饋”，那他聽完之后還是很蒙。而向iOS那樣的解釋，并舉幾個小例子，他就知道自己該怎么做了。

3. 有主觀觀點

沒有完全正確的設(shè)計，只有最合適的設(shè)計。有效的設(shè)計原則要有自己的主觀觀點。

在做設(shè)計的時候，往往會有很多限制因素，我們就會有取舍，從而塑造最終的設(shè)計。好的設(shè)計原則必須清晰的指出，設(shè)計的優(yōu)先級和平衡點是什么，哪些是需要首先考慮的，哪些可以不用太關(guān)注。

在Google的Material Design中，提到了“動效必須是有意義的”：

通過微妙的反饋和連貫的過度動效來吸引注意力并保持連續(xù)性。元素在屏幕上，會轉(zhuǎn)換和重組環(huán)境，并通過交互產(chǎn)生新的轉(zhuǎn)換。

和大多數(shù)人對動效的看法并不一致，難倒不應(yīng)該多一些炫酷的動效嗎？動效不是會讓我們的產(chǎn)品看上去很厲害嗎？Material通過對動效的克制，保證每個動效都具有獨特的意義，從而形成自己獨特的魅力。

正是這些主觀的觀點，讓你的設(shè)計原則有態(tài)度，形成差異化，而不是千篇一律，毫無個性，一味模仿別人。

4. 揭露本質(zhì)

優(yōu)秀的設(shè)計原則是揭露本質(zhì)的，可以讓所有人都能輕松的理解，都能產(chǎn)生共鳴，都能輕易記住。

這樣做的好處是，每個設(shè)計師都可以輕松的回憶起來，從而在設(shè)計中隨時運(yùn)用。而不是，遇到某個難題，才去翻看埋在灰塵里的設(shè)計原則。

在螞蟻金服的Ant Design中，將“自然”作為了他們的首要設(shè)計原則：

認(rèn)知心理學(xué)所述，約 80%外界信息通過視覺通道獲取。界面設(shè)計中最重要的視覺要素，包括布局、色彩、插畫、圖標(biāo)等，應(yīng)充分汲取自然界規(guī)律，從而降低用戶認(rèn)知成本，帶來真實流暢的感受。在一些場景下，適時加入聽覺、觸覺等其它感知通道，能創(chuàng)造更豐富自然的產(chǎn)品體驗。

它將自然界的規(guī)律引入設(shè)計原則，揭露了事物的本質(zhì)，很容易被理解和記住。

三、如何定義設(shè)計原則？

最后一步，是定義自己的設(shè)計原則。每個團(tuán)隊的情況不一樣，使用的方法也會不一樣，大體來說，可以通過以下四個思路進(jìn)行。

1. 自上而下

從公司的價值主張入手，弄清楚你們提倡的是什么。然后去探索產(chǎn)品的愿景是什么，致力于解決什么樣的問題；通過研究公司的價值主張和產(chǎn)品愿景，可以推理出設(shè)計要怎么做才能幫助產(chǎn)品，體現(xiàn)產(chǎn)品的價值，進(jìn)而幫助產(chǎn)品和公司成功。由此進(jìn)一步得出設(shè)計原則。

通過自上而下的推理法，可以保證設(shè)計原則不脫離產(chǎn)品，從而為產(chǎn)品賦能。

2. 自下而上

從自身團(tuán)隊出發(fā)，讓每個成員都回答關(guān)于設(shè)計原則的問題。他們在平時設(shè)計中，都會不自覺的遵守哪些原則，他們覺得什么是好的設(shè)計，他們覺得什么樣的設(shè)計可以幫助產(chǎn)品成功？

通過內(nèi)部意見的匯總，得出大家的共識。這種自下而上的歸納法，得出的設(shè)計原則往往具有代表性，且容易被團(tuán)隊接受。

3. 由外而內(nèi)

從外部的用戶入手，弄清楚產(chǎn)品的用戶是誰，他們有什么樣的特點，他們要解決什么樣的問題，他們最大的痛點是什么，什么樣的設(shè)計對他們來說最合適。

通過研究外部用戶，可以得出設(shè)計的側(cè)重點，從而歸納出設(shè)計原則。

再看看內(nèi)部的用戶，設(shè)計體系是為誰而創(chuàng)建的，設(shè)計師、產(chǎn)品經(jīng)理和開發(fā)嗎？設(shè)計師在使用設(shè)計體系時遇到的最大問題是什么？產(chǎn)品經(jīng)理有什么難題是設(shè)計體系可以幫助解決的？開發(fā)如何使用設(shè)計體系？

通過研究設(shè)計體系的內(nèi)部用戶，可以讓設(shè)計原則的適用性更強(qiáng)，發(fā)現(xiàn)那些最本質(zhì)的關(guān)鍵因素。

4. 迭代升級

好的設(shè)計原則需要經(jīng)過不斷發(fā)展，不斷更新迭代，才會長期適用。

隨著產(chǎn)品的不斷進(jìn)化，功能和側(cè)重點都會發(fā)生變化，這些反過來都會影響設(shè)計原則。作為設(shè)計的內(nèi)在指導(dǎo)思想，設(shè)計原則不能停滯不前，只解決當(dāng)下的問題。而是要適用于整個設(shè)計決策，因此必須不斷對其進(jìn)行升級迭代，以適應(yīng)產(chǎn)品的發(fā)展。

最后的話

最后，小結(jié)一下。

組件庫只是設(shè)計體系的第一步，要想建立設(shè)計體系，必須定義自己的設(shè)計原則。

設(shè)計原則是做設(shè)計時所要依據(jù)的準(zhǔn)則，它為我們的設(shè)計提供向?qū)Вw現(xiàn)我們的設(shè)計價值觀。

而很多設(shè)計原則會陷入一種誤區(qū)，就是陳述一堆大道理，卻對設(shè)計決策沒有任何幫助。

有效的設(shè)計原則必須具備四個特性：真實而貼切，而非寬泛而空洞；實用可操作，最好有具體的應(yīng)用示例；有主觀觀點，而非千篇一律；揭露本質(zhì)，容易產(chǎn)生共鳴。

要創(chuàng)建自己團(tuán)隊的設(shè)計原則，可以從四個思路來進(jìn)行：自上而下，遵循產(chǎn)品目的，傳遞產(chǎn)品價值觀；自下而上，尋找團(tuán)隊共識；由外而內(nèi)，探索用戶需求；不斷升級迭代，保持更新。

以上這些，都是我在工作中和閱讀大量資料的總結(jié)。在這里，我也期待有更多的高手，可以把你們對設(shè)計原則的理解分享在留言區(qū)。

與你共同進(jìn)步。

作者：加西莫多；公眾號：瓦力UX

本文由 @加西莫多 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。