中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：什么是設(shè)計系統(tǒng)？設(shè)計系統(tǒng)的存在目的大多是為了提高工作效率、降低溝通、設(shè)計等方面的成本，實(shí)現(xiàn)設(shè)計一致性的相對保持，是由設(shè)計原則、設(shè)計風(fēng)格、設(shè)計規(guī)范等模塊組成的有機(jī)整體結(jié)合。本文作者就設(shè)計系統(tǒng)的組成、常見問題等進(jìn)行了闡述，一起來看一下。

今年因?yàn)闃I(yè)務(wù)量增大，我所在的公司組織越來越強(qiáng)調(diào)“可復(fù)制”這個概念了。這不是一個新的概念，對應(yīng)到設(shè)計來說，大概就要提到設(shè)計系統(tǒng)這件事了。

很多年前剛聽到這個概念的時候，一直覺得設(shè)計系統(tǒng)是個非常高大上和牛逼哄哄的事情，當(dāng)時Material Design剛剛出來沒多久，蘋果的人機(jī)設(shè)計指南在設(shè)計圈稱王稱霸，雖然自己主要做的都是安卓系統(tǒng)，還是認(rèn)真拜讀了IOS的Human Interface Guidelines。

然后，其實(shí)也沒有什么然后了……?

你怎么看待設(shè)計系統(tǒng)這件事呢？

關(guān)于設(shè)計系統(tǒng)，有的人會覺得類似于一種玄學(xué)，有的人認(rèn)為它好是好，但容易被束之高閣、放著落灰，有的人認(rèn)為它對于設(shè)計師是一種束縛……另外，還有很多和它相關(guān)的概念也經(jīng)常被混淆：設(shè)計語言、設(shè)計原則、設(shè)計規(guī)范、設(shè)計風(fēng)格、設(shè)計組件……

圖1：設(shè)計系統(tǒng)詞云圖

為了理清設(shè)計系統(tǒng)到底是什么，我把上面的這些和設(shè)計系統(tǒng)經(jīng)常出現(xiàn)的詞語進(jìn)行了分類。我認(rèn)為，它們指出的，應(yīng)該是基于不同角度對設(shè)計系統(tǒng)的解釋。

在這些詞語里，有的解釋了設(shè)計系統(tǒng)存在的原因：追求效率，保持一致性、避免重復(fù)勞動，有助于數(shù)字產(chǎn)品形成整體性等。有的解釋了它的組成或者相關(guān)聯(lián)的內(nèi)容：設(shè)計規(guī)范、設(shè)計語言、設(shè)計原則、設(shè)計規(guī)范、設(shè)計風(fēng)格、設(shè)計組件等。有的解釋了設(shè)計系統(tǒng)容易出現(xiàn)的問題：玄學(xué)、束縛、高大上、理想化等。

一、存在原因

存在原因，也就是建設(shè)設(shè)計系統(tǒng)的目的，正是由于設(shè)計系統(tǒng)是為了幫助我們的工作更加有效率的一個整體工具，也就注定了設(shè)計系統(tǒng)的樣式、組成和運(yùn)作方式不會一成不變，每個公司都需要自己找出適合自己團(tuán)隊(duì)設(shè)計與開發(fā)之間最順暢的那個系統(tǒng)。

要知道，雖然設(shè)計系統(tǒng)聽起來很酷，但創(chuàng)建一個好的設(shè)計系統(tǒng)其實(shí)是非常消耗精力的。所以，設(shè)計系統(tǒng)的目的一定要清晰并且符合現(xiàn)狀需要。

為什么還要去創(chuàng)建設(shè)計系統(tǒng)呢？我認(rèn)為，只有對于下面這幾條，你或團(tuán)隊(duì)有強(qiáng)烈的需求，才是生成一個設(shè)計系統(tǒng)的好時機(jī)。

• 以往的設(shè)計內(nèi)容總是需要被快速重復(fù)使用。
• 需要釋放設(shè)計資源，讓人力更專注于更加復(fù)雜和有價值的問題。
• 需要在多個團(tuán)隊(duì)或多個產(chǎn)品之間保持一致性。
• 需要幫助初級設(shè)計師的產(chǎn)出迅速達(dá)到更高級的要求。

沒有被需要的設(shè)計系統(tǒng)，就是未來束之高閣，等著落灰的一套“玄學(xué)”。

二、組成內(nèi)容

系統(tǒng)這個詞，是指由相互聯(lián)系的要素構(gòu)成的有特定結(jié)構(gòu)和功能的有機(jī)整體。設(shè)計系統(tǒng)，自然也是一個整體性的有機(jī)集合。

圖2：設(shè)計系統(tǒng)的組成內(nèi)容

1. 設(shè)計原則

設(shè)計原則是引導(dǎo)設(shè)計系統(tǒng)建設(shè)的指導(dǎo)思想和戰(zhàn)略方向，基于大量實(shí)際經(jīng)驗(yàn)提煉的高度理論化概括。

設(shè)計原則這個概念并不是為了設(shè)計系統(tǒng)才出現(xiàn)的，從完形心理學(xué)流派運(yùn)用過來的格式塔理論所包括的臨近性、相似性、封閉性、連續(xù)性等設(shè)計原則，還有以“如非必要，勿增實(shí)體”為核心的簡約設(shè)計原則，來自唐納德諾曼的概念模式、反饋、限制范圍、可感知的預(yù)設(shè)用途四條設(shè)計原則等等。

為了對抽象的設(shè)計原則有更具像化的體會，我們再來看看幾個比較有名的設(shè)計系統(tǒng)的原則。

• 蘋果公司：美學(xué)整體，一致性，直接的操作性，反饋，隱喻，用戶可控。
• 微軟公司：自然而然的，符合直覺和有力的，引人入勝且沉浸。
• 谷歌公司：材料是一種隱喻，明顯、圖形化和有目的性的，有意義的動效。

圖3：三大設(shè)計系統(tǒng)的原則

突然發(fā)現(xiàn)就蘋果公司沒給自己的設(shè)計系統(tǒng)專門取一個名字啊～

可以發(fā)現(xiàn)，雖然三家公司的設(shè)計原則各有不同，但幾乎都是從通用的設(shè)計原則中提煉優(yōu)化的。

建設(shè)一個設(shè)計系統(tǒng)一定需要設(shè)定自己的設(shè)計原則嗎？我認(rèn)為它不是必須的。雖然設(shè)計原則很重要，但在設(shè)計系統(tǒng)初期的時候，遵循現(xiàn)有基礎(chǔ)和通用的設(shè)計原則來指導(dǎo)建設(shè)整個系統(tǒng)也是可以的?？偤眠^隨隨便便從基礎(chǔ)通用的設(shè)計原則中拿出一些詞語潤色一下，簡單地堆砌一些高大上的詞語、空泛地放在那里，等著它們逐漸變成別人口中的“玄學(xué)”吧？

正因?yàn)樵瓌t是設(shè)計系統(tǒng)高度抽象化的結(jié)晶，所以它需要基于大量實(shí)際設(shè)計經(jīng)驗(yàn)再去生成，不然，很難起到指導(dǎo)設(shè)計系統(tǒng)達(dá)到增加效率的目的。

2. 設(shè)計風(fēng)格和規(guī)范

設(shè)計風(fēng)格，是這個設(shè)計系統(tǒng)給人形成的一種代表性的圖形印象。設(shè)計規(guī)范，是用于協(xié)調(diào)統(tǒng)一性的規(guī)則和范式。在60年代的《美孚品牌手冊》和70年代的 《NASA 圖形使用規(guī)范》中，就已經(jīng)包含“顏色、字體、圖形、用法和示例”等內(nèi)容。

圖4：設(shè)計規(guī)范

有了設(shè)計風(fēng)格和設(shè)計規(guī)范并不一定就能讓使用這個設(shè)計系統(tǒng)的產(chǎn)品建立統(tǒng)一的品牌調(diào)性，只有當(dāng)設(shè)計系統(tǒng)具有了一定辨識性的設(shè)計風(fēng)格、并在設(shè)計規(guī)范指導(dǎo)下進(jìn)行長期的設(shè)計產(chǎn)出后，才能夠讓使用這個設(shè)計系統(tǒng)的產(chǎn)品形成統(tǒng)一的品牌調(diào)性。

3. 設(shè)計組件和模式

對于設(shè)計系統(tǒng)里，我們最熟悉和常用的應(yīng)該就是設(shè)計組件了，也就是UI kits，包括輸入框、按鈕、文字、鏈接、下拉菜單等等。是組成界面的最小元素和這些元素的常用集合體。

圖5：UI kits

設(shè)計模式，比元素更復(fù)雜一些，是完成任務(wù)所使用的一些基礎(chǔ)的、常用的交互方式，是可以解決問題的小型設(shè)計方案。比如Material design 里的Confirmation and acknowledgement，它提供的就是為機(jī)器在執(zhí)行操作之前向用戶確認(rèn)的一系列設(shè)計方案。

圖6：設(shè)計模式??

簡單點(diǎn)來說，設(shè)計組件就是一些元素，主要給設(shè)計師用的，設(shè)計模式就是一些交互方式，主要給研發(fā)工程師看的。由于兩者很相似，如今更多地會把兩者合起來看。

2013年，前端工程師 Brad Forst 將原子理論運(yùn)用在界面設(shè)計中，形成一套設(shè)計系統(tǒng)后，設(shè)計組件得到進(jìn)一步擴(kuò)展，可以形成比原來最初出現(xiàn)設(shè)計模式這個概念時更高層次的集合體，例如，大到幾個完整的頁面及其包含的交互方式，也可以成為某個設(shè)計系統(tǒng)的其中一個組件。

當(dāng)然，由于各個產(chǎn)品的需求、場景和定位等不同，越大的合成組件將會越復(fù)雜。

圖7：原子設(shè)計理論

4. 內(nèi)容資產(chǎn)

在某些設(shè)計系統(tǒng)的定義里，可能會把內(nèi)容資產(chǎn)作為設(shè)計規(guī)范的一部分，但我這里想強(qiáng)調(diào)的是其作為資源的一部分。

由于設(shè)計系統(tǒng)是一個有機(jī)的整體，在它不斷地服務(wù)于各產(chǎn)品線的同時，也一定會需要不斷填充不同的內(nèi)容，比如應(yīng)用里使用的圖標(biāo)、字體、插畫、模型等等，這些內(nèi)容積累下來，也應(yīng)該成為這個設(shè)計系統(tǒng)的一部分。如果有其他的應(yīng)用或產(chǎn)品需要，就可以直接取用，從而提高整體的工作效率。

內(nèi)容資產(chǎn)比較常見的有圖標(biāo)庫、字體庫和音效庫，分別提供了多種圖標(biāo)、多種字體和多種音效，可以給不同的產(chǎn)品或應(yīng)用使用。

隨著插畫風(fēng)格、三維風(fēng)格的留下，未來必然還會出現(xiàn)隸屬于某個設(shè)計系統(tǒng)的插畫庫、模型庫，以及在產(chǎn)品里經(jīng)常使用的文案集合。

圖8：內(nèi)容資產(chǎn)

5. 工具、流程

這兩塊主要是針對設(shè)計系統(tǒng)適用的具體環(huán)境，在協(xié)同性要求下我認(rèn)為需要納入設(shè)計系統(tǒng)的內(nèi)容。簡單舉例來說，就是如果使用藍(lán)湖做自動化標(biāo)注，就團(tuán)隊(duì)統(tǒng)一使用藍(lán)湖，而不是有的人使用藍(lán)湖，有的人使用摹客。

6. 設(shè)計語言和設(shè)計方針（guidelines）

還有兩個經(jīng)常提到，但我剛才畫的設(shè)計系統(tǒng)圖示里沒有提到的概念。

1. 設(shè)計語言：語言，是一個能夠達(dá)到相互交流的符號系統(tǒng)。人類學(xué)家索緒爾認(rèn)為，語言能反映出多變言語活動背后的穩(wěn)定規(guī)律。所以，我認(rèn)為這里的設(shè)計語言，應(yīng)該等同于設(shè)計規(guī)范，是設(shè)計規(guī)范另一種表述。
2. 設(shè)計指導(dǎo)方針（Design Guidelines）：按照中文翻譯理解，我認(rèn)為它是說明、介紹設(shè)計系的文檔，沒有包含在設(shè)計系統(tǒng)內(nèi)。

三、常見問題

最后，設(shè)計系統(tǒng)的詞云圖里出現(xiàn)的玄學(xué)、理論化、落灰、空中樓閣……這些都是創(chuàng)建設(shè)計系統(tǒng)時很容易遇到的一些問題，尤其是實(shí)用性最高的設(shè)計組件，更是首當(dāng)其沖。之前我組織我們團(tuán)隊(duì)的設(shè)計師做復(fù)盤性質(zhì)的workshop，單就設(shè)計系統(tǒng)的設(shè)計組件部分，大家就提出了20多條問題。

圖9：設(shè)計組件復(fù)盤workshop

綜合來說，設(shè)計系統(tǒng)常見的問題有三類：

1）定義性問題

設(shè)計系統(tǒng)從大的框架性定義到具體設(shè)計組件的定義都不是件一蹴而就的事情，它從0開始，每一次的更新和迭代，對于當(dāng)前的團(tuán)隊(duì)來說都需要是既關(guān)鍵又有效的。

關(guān)鍵是指設(shè)計系統(tǒng)當(dāng)前定義下來的內(nèi)容是后面的產(chǎn)品線經(jīng)常性使用的，有效是指這些定義確定下來的內(nèi)容是可以使用現(xiàn)有的資源去完成的，即以現(xiàn)有團(tuán)隊(duì)的能力、時間和設(shè)備是可以完成并達(dá)成其效果的。

2）使用性問題

目錄不清晰、文檔說明不全、包含資源不完整，這些都是使用時的問題。如果把設(shè)計系統(tǒng)看作一個產(chǎn)品，讓用戶（設(shè)計師或研發(fā)人員）覺得好用，才是它不會被束之高閣的解決方法。

3）協(xié)作性問題

不知道有更新、收不到反饋、不了解使用者的情況……協(xié)作性的問題催生了市面上諸如藍(lán)湖、摹客、墨刀、Codesign以及很多設(shè)計軟件的云服務(wù)功能等。

……

雖然現(xiàn)在市面上有非常多優(yōu)秀的設(shè)計系統(tǒng)可以參考，但正如在存在原因中提到的，由于它是為了幫助我們自己所在的團(tuán)隊(duì)更有效率地工作，終究還是需要靠自己基于實(shí)際情況去做變化。

參考文獻(xiàn)

• 什麼是設(shè)計系統(tǒng)——我們需要他來做什麼
• https://www.nngroup.com/articles/design-systems-101/
• 設(shè)計系統(tǒng)簡史：https://mp.weixin.qq.com/s/nskpYOxtatStgs79fs5YEw
• Components 和 Patterns 究竟有什么區(qū)別： https://zhuanlan.zhihu.com/p/31769639
• 什么是設(shè)計系統(tǒng)：https://zhuanlan.zhihu.com/p/31197706
• 今年很火的原子設(shè)計理論，幫你做了一份全面的精華總結(jié)：https://www.uisdc.com/atomic-design-theory
• 《人類學(xué)概論》，中國人民大學(xué)出版社，P139

作者：林影落，10年+體驗(yàn)設(shè)計師，專注AR及創(chuàng)新領(lǐng)域設(shè)計；微信公眾號：林間有影落

本文由 @林影落 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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