要想建立設(shè)計體系,必須先定義設(shè)計原則
編輯導(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è)計是要避免的??偟膩碚f,它需要做到以下四點。
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á)較長的運行狀態(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è)計中隨時運用。而不是,遇到某個難題,才去翻看埋在灰塵里的設(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ū)?,體現(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é)議。
非常感謝,深受啟發(fā),多謝!