設(shè)計體系的目標(biāo)、價值及構(gòu)成原理
我還買了一本Smashing Magazine出版的新書,叫做《Design Systems》,關(guān)于如何規(guī)劃、創(chuàng)建和維護(hù)設(shè)計模式庫/設(shè)計體系。上周剛剛在公眾號發(fā)過一篇“接下來會切入一些Design System方面的話題”,今天便看到這本書,感到很開心。
“如此這般體現(xiàn)著體系性與邏輯性的,需要你一方面站在全局去歸納信息、梳理架構(gòu),一方面從基礎(chǔ)細(xì)節(jié)的層面入手去精雕細(xì)琢的系統(tǒng)概念,總是能讓人為之著迷不是么。”

從前不覺得自己會培養(yǎng)出整理癖;自然也不是處女座。然而上半年搗鼓了一套WireframeKit for Sketch線框稿組件庫之后,便慢慢開始傾心于這件事。總之很有趣,無論總體還是細(xì)節(jié)執(zhí)行層面也都充滿了持久性的挑戰(zhàn)。過去在博客中似乎沒有涉及過相關(guān)話題,今天開始會盡力分配到更多關(guān)注度。挑選了一篇泛方法與價值定義方面的文章做譯,權(quán)且作為暖身。
下面進(jìn)入譯文。
“設(shè)計規(guī)范”這一概念早已行之有年,它對于一個產(chǎn)品甚至一家公司的品牌識別效應(yīng)的構(gòu)筑起著重要的作用。如今,作為其升級版本,“設(shè)計體系”(Design System)又將這一概念提升到了新的高度。
過去,UI設(shè)計師們會創(chuàng)建一些結(jié)構(gòu)松散的設(shè)計說明文檔,其中包括配色、字體、按鈕樣式或是圖標(biāo)一類的風(fēng)格定義。這些文檔通常會被安靜地保存在硬盤里,僅在新設(shè)計師加入團(tuán)隊或外部設(shè)計代理商需要了解相關(guān)規(guī)范時才會被想到。
在日常工作中,這些文檔可能沒有太多的實用價值,設(shè)計師們在很多時候僅會憑記憶來判斷某些設(shè)計模式是否被使用過。長此以往,一致性方面的問題便會積累起來,終導(dǎo)致難以收拾的狀況也是十有八九。
近年來,“設(shè)計規(guī)范”逐漸被“設(shè)計體系”或“設(shè)計語言”(Design Language)的概念重塑,與之俱來的新設(shè)計方法可以幫助產(chǎn)品設(shè)計團(tuán)隊更好地站在整體層面構(gòu)建方案?;谝惶准軜?gòu)嚴(yán)謹(jǐn)、規(guī)則統(tǒng)一的體系框架,產(chǎn)品表現(xiàn)層面的設(shè)計工作可以逐漸實現(xiàn)模塊化運(yùn)作。諸如Brand.ai或是來自Invision的Craft等工具已經(jīng)在一定程度上滿足了標(biāo)準(zhǔn)化的、模塊拖放式的設(shè)計需求,團(tuán)隊協(xié)作過程中的統(tǒng)一性得到提升,視覺設(shè)計工作變得更加好,有時甚至可以跨過傳統(tǒng)的低保真原型設(shè)計階段。
本文旨在討論設(shè)計體系的目標(biāo)、價值及構(gòu)成原理,而不會深入到具體的構(gòu)建方法當(dāng)中。
在過去的幾年中,我參與了很多公司的設(shè)計體系項目,其中既有初創(chuàng)型團(tuán)隊,同時也包括了知名度和成熟度都相當(dāng)高的組織。我近的一個項目就是為Qstream打造設(shè)計體系。
我剛剛加入Qstream團(tuán)隊時就意識到盡快打造一套新型、實用的設(shè)計體系是非常必要的一件事。產(chǎn)品設(shè)計缺乏一致性,而問題還會隨著功能復(fù)雜度的提升以及設(shè)計團(tuán)隊規(guī)模的擴(kuò)大而愈演愈烈 - 通過詳實、完備、易懂的設(shè)計體系對設(shè)計工作進(jìn)行把控,從整體上穩(wěn)定設(shè)計航向,這件事刻不容緩。
在這樣的背景下,我們開始創(chuàng)建自己的設(shè)計體系,即QUIK - Qstream User Interface Kit。

一步:解決不一致的問題
再次說明,本文不會就創(chuàng)建設(shè)計體系的具體方法進(jìn)行深入探討,不過我會對大致的流程進(jìn)行簡要說明。
我們做的一件事就是對產(chǎn)品當(dāng)中現(xiàn)有的界面組件進(jìn)行徹底的清查。Brad Frost(“Atomic Design”一書作者)曾就如何進(jìn)行UI清查寫過一篇出色的指導(dǎo)文章“Interface Inventory”,建議閱讀。
這個環(huán)節(jié)會很艱難,你可能需要花費(fèi)大量的時間,而且過程很枯燥,但卻是值得和必要的。通過UI清查,你可以:
充分了解當(dāng)前產(chǎn)品當(dāng)中哪些地方存在不一致性的問題。
站在全局層面理解一些關(guān)鍵元素的使用方式。
快速掌握產(chǎn)品的信息架構(gòu)與運(yùn)作方式。
向團(tuán)隊集中展示現(xiàn)有問題,進(jìn)而體現(xiàn)一套標(biāo)準(zhǔn)、統(tǒng)一的設(shè)計體系的必要性。

我們的平臺UI清查文檔,現(xiàn)有設(shè)計當(dāng)中的不一致性問題一目了然。
第二步:創(chuàng)建元素
我們的設(shè)計體系由三個部分組成。
品牌:產(chǎn)品的品牌識別由一些關(guān)鍵的視覺要素構(gòu)成,包括配色、字形、圖標(biāo)等等。
界面元素:包括那些小顆粒度的、在全局范圍內(nèi)可復(fù)用的元素,例如按鈕、文本輸入框等等。
組件:組件由若干界面元素構(gòu)成。多個組件協(xié)同配合,形成常見的設(shè)計模式,例如對話框、列表、卡片等等。
我們需要根據(jù)UI清查的結(jié)果對設(shè)計體系的組成元素進(jìn)行優(yōu)先級判定,看看哪些元素在產(chǎn)品全局范圍內(nèi)被使用的為廣泛,以此為序逐一梳理。
在著手處理諸如按鈕、文本輸入框等具體元素之前,我們會首先對風(fēng)格與樣式規(guī)則進(jìn)行基礎(chǔ)性的定義,包括配色、字形、圖標(biāo)、間距等等。

依照我們的執(zhí)行順序,設(shè)計體系的建設(shè)工作越深入,所涉及到的元素在產(chǎn)品當(dāng)中的權(quán)重越低。不過無論怎樣,它們都是體系的一部分;所有元素?zé)o一或缺才能確保設(shè)計語言的完整和一致。
我們還有一個針對插畫設(shè)計風(fēng)格的設(shè)計體系項目正在進(jìn)行中,本文暫不做詳解,如果你有興趣,可以到我們的Behance了解更多。

第三步:完善
我們目前正進(jìn)行到這一階段。坦誠地講,我們可能永遠(yuǎn)也無法真正走完這個階段。在你接受設(shè)計體系的挑戰(zhàn)之前,好明白一點(diǎn) - 這是個永無止境的過程。你在打造的更像是一款產(chǎn)品,而非終點(diǎn)明確的項目 - 設(shè)計體系需要隨著產(chǎn)品的發(fā)展而不斷的成長和進(jìn)化。

你可能需要專門組建團(tuán)隊來負(fù)責(zé)設(shè)計體系的維護(hù),或是由一些設(shè)計師來專職擔(dān)任。一套嚴(yán)整規(guī)范的設(shè)計體系可以為產(chǎn)品設(shè)計工作帶來不可或缺的核心價值,使工作流程更加聚焦、清晰,設(shè)計模式的一致性與產(chǎn)品開發(fā)速度都能得到顯著提升。
綜合性體系
站在產(chǎn)品全局層面創(chuàng)建并維護(hù)一套行之有效的設(shè)計體系,這只是規(guī)范化、體系化的一部分;我們同時還在構(gòu)建產(chǎn)品的品牌規(guī)范及設(shè)計原則。
我們認(rèn)為,在產(chǎn)品設(shè)計的復(fù)雜性上升到一定程度之前,將基礎(chǔ)框架奠定牢靠是非常關(guān)鍵的,否則各種潛在問題將一路積累下去,直到無法解決的地步。一系列規(guī)范、原則與體系的建立將能確保我們在擴(kuò)大產(chǎn)品及團(tuán)隊規(guī)模時穩(wěn)定在正確的軌道上。
我們計劃在QUIK進(jìn)入實用階段之后,繼續(xù)創(chuàng)建一套用于定義產(chǎn)品個性化特質(zhì)的設(shè)計規(guī)范。我們將會建成的綜合性體系包括:
品牌規(guī)范(Brand Guidelines):用于描述品牌個性與特質(zhì)的一系列文檔,其中包括文案基調(diào)、配色風(fēng)格、logo使用約束等方面的定義說明。
QUIK:將產(chǎn)品全局范圍內(nèi)的設(shè)計理念、方法及界面組件等集約在一處進(jìn)行標(biāo)準(zhǔn)化定義的設(shè)計體系(Design System)。
設(shè)計原則(Design Principles):幫助我們恪守產(chǎn)品設(shè)計方向,聚焦于對團(tuán)隊及客戶為重要的目標(biāo)之上,大程度地實現(xiàn)二者的統(tǒng)一。

接下來
我們將持續(xù)力爭在產(chǎn)品平臺全局范圍內(nèi)實現(xiàn)統(tǒng)一化的設(shè)計標(biāo)準(zhǔn)。面對這個目標(biāo),我們還有很長的路要走。產(chǎn)品團(tuán)隊當(dāng)中的每一個人都明白這是個巨大的挑戰(zhàn),但我們同樣理解這件事對于產(chǎn)品保持平穩(wěn)發(fā)展的重要性。
猜你喜歡



-
未來社交電商新風(fēng)口--小程序
擁有10億活躍用戶的微信無疑成為了移動互聯(lián)網(wǎng)大的流量池。無論是公眾號,還是小程序,都蘊(yùn)含著巨大的商業(yè)機(jī)會。 業(yè)界普遍認(rèn)為小程序給傳統(tǒng)零售行業(yè)和電商提供了新土壤。在電商層面,淘寶和天貓是兩大核心拳頭產(chǎn)品,而小程序是目前具潛力成為第三...
-
常見的網(wǎng)站制作方式有那些
1、模板建站:直接套用別人網(wǎng)站的模板,建站速度快,費(fèi)用低,一般在幾百到幾千,看具體模板的功能。但沒特色且容易引起原設(shè)計方的投訴等。 2、源碼建站:直接仿制某個網(wǎng)站,這套源碼可以賣給N多人,費(fèi)用低。一般在幾百到幾千,看具體模板的功能...
-
提高「可讀性」,文本、背景色怎么選?
針對 QQ支付的品牌設(shè)計,他們做了不同的設(shè)計嘗試,本文著重分享QQ 支付品牌設(shè)計進(jìn)行的三步驟。enjoy~ 大家見到的大部分支付類產(chǎn)品,在視覺系統(tǒng)上大都選擇較沉穩(wěn)、低調(diào)的風(fēng)格,對產(chǎn)品的可信任度上會...
-
展示型網(wǎng)站設(shè)計的方式
揚(yáng)州辦公系統(tǒng)圖形設(shè)計可以抓住這些點(diǎn),并向需要它們的用戶展示它們。同樣,只有具有這些因素的用戶才能被吸引。頁腳可以幫助網(wǎng)站傳達(dá)大量信息,它會告訴客戶一些信息、網(wǎng)站可以做什么以及一些幫助內(nèi)容。它還將顯示詳細(xì)信息。網(wǎng)站的三維視差效果,允許...
-
HTTP和HTTPS的區(qū)別
HTTP(Hypertext Transfer Protocol)*文本傳輸協(xié)議是用來在Internet上傳送*文本的傳送協(xié)議,它可以使瀏覽器更加好,使網(wǎng)絡(luò)傳輸減少。但HTTP協(xié)議采用明文傳輸信息,存在信息竊聽、信息篡改和信息劫持的風(fēng)險。 &n...