廣州創(chuàng)優(yōu)發(fā)現(xiàn)超詳細(xì)的U.I設(shè)計(jì)規(guī)范，初學(xué)者必備

廣州創(chuàng)優(yōu)發(fā)現(xiàn)超詳細(xì)的U.I設(shè)計(jì)規(guī)范，初學(xué)者必備

作為一個(gè)B端產(chǎn)品，為了應(yīng)對(duì)公司快速迭代開拓市場(chǎng)和一???部分購(gòu)買者的定制化需求，與此同時(shí)還要保障產(chǎn)品間的用戶體驗(yàn)一致性，近年來(lái)設(shè)計(jì)規(guī)范這一解決方案不斷升溫，如Salesforce，antdesign、等紛紛推出了自己的設(shè)計(jì)規(guī)范。那么到底什么是設(shè)計(jì)規(guī)范呢？和設(shè)計(jì)語(yǔ)言、設(shè)計(jì)原則、組件庫(kù)等有什么關(guān)系呢？

我認(rèn)為的設(shè)計(jì)規(guī)范是以下的定義：

設(shè)計(jì)規(guī)范由設(shè)計(jì)原則、設(shè)計(jì)語(yǔ)言和組件庫(kù)構(gòu)成，在設(shè)計(jì)原則的指導(dǎo)下使用設(shè)計(jì)語(yǔ)言和組件庫(kù)創(chuàng)建體驗(yàn)一致的用戶界面。



設(shè)計(jì)原則：即整個(gè)設(shè)計(jì)規(guī)范所要遵循的全局規(guī)則，為設(shè)計(jì)提供方向指導(dǎo)。以下給出幾個(gè)例子：



設(shè)計(jì)語(yǔ)言：包括色彩，文字、圖標(biāo)等

組件庫(kù)：分為基礎(chǔ)組件（按鈕，下拉列表等）及業(yè)務(wù)組件（商品模塊）。

在做設(shè)計(jì)語(yǔ)言和組件庫(kù)時(shí)，有一個(gè)基本原則是，少即是多(less is more)，用盡可能少的樣式來(lái)實(shí)現(xiàn)設(shè)計(jì)目標(biāo)，例如按鈕提供三種尺寸即可，在適應(yīng)不同場(chǎng)景需求的同時(shí)保證體驗(yàn)的一致性；另一方面，保持克制的設(shè)計(jì)規(guī)范可以進(jìn)一步減少設(shè)計(jì)師的決策時(shí)間，提高設(shè)計(jì)效率。

1.2 理論基礎(chǔ)-原子設(shè)計(jì)
1.2.1 什么是原子設(shè)計(jì)

原子設(shè)計(jì)是構(gòu)建設(shè)計(jì)規(guī)范的核心指導(dǎo)理論。2013年，Brad從化學(xué)中得到了靈感，創(chuàng)建了原子設(shè)計(jì)理論。在化學(xué)中，所有的物體都是由原子構(gòu)成，原子構(gòu)成分子，進(jìn)而構(gòu)成宇宙萬(wàn)物。對(duì)應(yīng)到界面中，界面也是如此，所有的元素都是由文字、顏色等 基本的元素構(gòu)成的。這些基本元素構(gòu)成組件，組件構(gòu)成頁(yè)面。

原子設(shè)計(jì)概念的提出使得設(shè)計(jì)規(guī)范演變成為了一種更為高效、科學(xué)的設(shè)計(jì)規(guī)范，極大的改善了設(shè)計(jì)師與前端工程師的工作體驗(yàn)。

1.2.2 原子設(shè)計(jì)系統(tǒng)的五個(gè)層次

原子設(shè)計(jì)包含五個(gè)同時(shí)工作的階段，以更慎重和更具層次的方式創(chuàng)建界面設(shè)計(jì)規(guī)范。

原子:原子是構(gòu)成界面的 小元素，例如顏色、文本、圖標(biāo)、線條。它們?cè)谠诮缑孢@個(gè)維度上不能再被細(xì)分。例如圖標(biāo)，本身是可以繼續(xù)細(xì)分的，但是對(duì)于界面而言，圖標(biāo)細(xì)分得到的元素是沒(méi)有任何意義的。

?分子:原子按照一定的規(guī)律組合就構(gòu)成了分子，它們擁有獨(dú)特的功能，例如下拉列表，步進(jìn)器等。

?組織:在界面中組織體現(xiàn)為由分子原子組成的模塊，例如數(shù)據(jù)概覽的卡片。

?模板:在界面中，模板的體現(xiàn)是原型圖，是頁(yè)面的基本形態(tài)，可以讓我們快速試錯(cuò)，搭建出一個(gè)功能良好的整體。

?頁(yè)面:在模板的基礎(chǔ)上將占位符更換為真實(shí)內(nèi)容，并進(jìn)行視覺(jué)優(yōu)化即為頁(yè)面。

1.3 為什么需要設(shè)計(jì)規(guī)范
1.3.1 軟件危機(jī)

廣州創(chuàng)優(yōu)視覺(jué)有限公司在講述設(shè)計(jì)規(guī)范之前，我想先講述一個(gè)互聯(lián)網(wǎng)史上的真實(shí)事件——軟件危機(jī)。

19世紀(jì)80年代，軟件的復(fù)雜度進(jìn)一步提升，大規(guī)模軟件甚至?xí)捎蓴?shù)百萬(wàn)行代碼組成，有數(shù)以百計(jì)的程序員參與其中，抽象語(yǔ)言解放了程序員的生產(chǎn)力和想象力，人們可以像寫文學(xué)小說(shuō)一樣隨意發(fā)揮地去寫代碼。擺在面前的問(wèn)題是如何高效且可靠地維護(hù)與迭代如此龐大的軟件。之后C++、Java等我們熟知的面向?qū)ο蟮木幊陶Z(yǔ)言誕生了。

面向?qū)ο筮@種模式有一個(gè)很重要的特征是封裝。這就好比當(dāng)你在寫王者榮耀的代碼時(shí)，小兵是出現(xiàn)頻率較高的模塊，你可以提前把王者榮耀里的一個(gè)小兵封裝成一個(gè)代碼塊，當(dāng)你需要用到它時(shí)，不必重新一行一行寫，只需要把它整體調(diào)用即可。

縱觀軟件發(fā)展史，20世紀(jì)60年代的第一次軟件危機(jī)創(chuàng)造了“模塊”概念；20世紀(jì)80年代第二次軟件危機(jī)引出了“面向?qū)ο缶幊獭?，?chuàng)造了“對(duì)象”概念；模塊與對(duì)象本質(zhì)上都是對(duì)軟件進(jìn)行拆分與封裝，只是對(duì)象拆分的粒度更大，維度更高。這點(diǎn)與原子設(shè)計(jì)的原理不謀而合，從色彩文字等基礎(chǔ)元素，到按鈕、選擇器等基礎(chǔ)組件、再到典型模塊，也是對(duì)大型軟件的設(shè)計(jì)元素不同粒度的拆分與封裝。

1.3.2 設(shè)計(jì)規(guī)范的優(yōu)勢(shì)



設(shè)計(jì)層面：解決用戶體驗(yàn)一致性，減少設(shè)計(jì)成本，提高設(shè)計(jì)效率，使得設(shè)計(jì)師可以快速承接新需求。沉淀設(shè)計(jì)資產(chǎn)，使得設(shè)計(jì)更加持續(xù)地輸出價(jià)值，減少一次性設(shè)計(jì)，同時(shí)使設(shè)計(jì)師從樣式中解放出來(lái)，站在更高的層面上來(lái)思考業(yè)務(wù)與體驗(yàn)。

開發(fā)層面：與設(shè)計(jì)規(guī)范同步形成研發(fā)資產(chǎn)，避免重復(fù)造輪子，保證代碼質(zhì)量，降低維護(hù)和拓展的成本。

測(cè)試層面：避免重復(fù)的無(wú)意義走查。之前遇到過(guò)一個(gè)深色模式的需求，盡管只換了顏色，但是測(cè)試仍然把所有組件都測(cè)試了一遍，加上重復(fù)的設(shè)計(jì)、開發(fā)量，導(dǎo)致原本一個(gè)很簡(jiǎn)單的需求，居然花費(fèi)了12人天的工作量。

產(chǎn)品層面：提高產(chǎn)品迭代與優(yōu)化效率，降低試錯(cuò)成本。

協(xié)作層面：降低不同設(shè)計(jì)師之間以及設(shè)計(jì)師與開發(fā)工程師之間的溝通成本。

1.4 為什么要自己做設(shè)計(jì)規(guī)范
這個(gè)時(shí)候可以會(huì)有小伙伴問(wèn)，目前市面上有這么多的第三方設(shè)計(jì)規(guī)范，例如antdesign，element，有必要自己重復(fù)造輪子做一遍嗎？ 是非常有必要。原因如下：

B端自身的業(yè)務(wù)性決定了市場(chǎng)上沒(méi)有萬(wàn)能的設(shè)計(jì)規(guī)范，那些設(shè)計(jì)規(guī)范的組件并不能100%滿足我們產(chǎn)品的需求。另外一方面使用封裝好的第三方設(shè)計(jì)規(guī)范，在此基礎(chǔ)上進(jìn)行修改，效率很低，適配的復(fù)雜度和重新開發(fā)相差無(wú)幾。
大家都在使用第三方設(shè)計(jì)規(guī)范時(shí)，產(chǎn)品的同質(zhì)化便不可避免。為了避免這種情況發(fā)生，我們必須要從設(shè)計(jì)語(yǔ)言開始，設(shè)計(jì)自己的規(guī)范。
那些大廠的成熟的組件庫(kù)該如何用呢？我認(rèn)為應(yīng)該把它當(dāng)成一個(gè)字典，有不會(huì)的地方，可以去參考人家的成熟的解決方案。

1.5 設(shè)計(jì)規(guī)范的落地
1.5.1 落不了地的原因



1.設(shè)計(jì)層面：

a. 組件擴(kuò)展性弱：有的設(shè)計(jì)師做出來(lái)的組件雖然看著很好，但是實(shí)際上使用時(shí)，適配效率很低，用組件去擴(kuò)展和重新做的效率差不多。

b. 脫離業(yè)務(wù)：大部分時(shí)候設(shè)計(jì)師手中都有任務(wù)，于是這個(gè)任務(wù)就落在了實(shí)習(xí)生的肩上，但是實(shí)習(xí)生不了解業(yè)務(wù)，做出來(lái)的是空中樓閣，拋開業(yè)務(wù)談設(shè)計(jì)規(guī)范的都是耍流氓。

c. 缺乏開發(fā)思維：設(shè)計(jì)師不了解開發(fā)的實(shí)現(xiàn)方式，可能會(huì)做出來(lái)開發(fā)較難實(shí)現(xiàn)的組件。

2.開發(fā)層面

缺少開發(fā)資源：設(shè)計(jì)規(guī)范的作用是巨大而緩慢的，不能即時(shí)產(chǎn)出很大的價(jià)值，另外一方面，設(shè)計(jì)規(guī)范的落地會(huì)增加開發(fā)工程師很多的工作量，且無(wú)法量化收益。這也導(dǎo)致很多時(shí)候無(wú)法爭(zhēng)取到足夠的開發(fā)資源來(lái)做這件事，導(dǎo)致達(dá)不到預(yù)期的效果。

1.5.2 如何落地

說(shuō)完了落不了地的原因，那么如何落地呢？我認(rèn)為要從以下四個(gè)方面來(lái)推進(jìn)：

寫一份設(shè)計(jì)規(guī)范的價(jià)值的提案給領(lǐng)導(dǎo)，爭(zhēng)取到足夠的開發(fā)資源。
借鑒敏捷開發(fā)的思想，小步迭代快速推進(jìn)，將設(shè)計(jì)規(guī)范的覆蓋放在每次迭代過(guò)程中。
把設(shè)計(jì)規(guī)范的開發(fā)交給熟悉業(yè)務(wù)的設(shè)計(jì)師來(lái)做，通過(guò)業(yè)務(wù)提煉復(fù)用率高的典型元素，優(yōu)先開發(fā)， 大化投入產(chǎn)出比。
設(shè)計(jì)師在做設(shè)計(jì)規(guī)范時(shí)，要不斷與開發(fā)工程師溝通，保證設(shè)計(jì)規(guī)范的還原度。
文章轉(zhuǎn)摘網(wǎng)絡(luò) 侵權(quán)聯(lián)系刪除