組件化設(shè)計(jì)思維，能夠提升設(shè)計(jì)團(tuán)隊(duì)的生產(chǎn)力，讓設(shè)計(jì)師專(zhuān)注于設(shè)計(jì)上的創(chuàng)意，同時(shí)讓設(shè)計(jì)師完成更多產(chǎn)品需求和提升團(tuán)隊(duì)的溝通效率
 

 

 

寫(xiě)在前面 

組件化設(shè)計(jì)的流程，經(jīng)過(guò)實(shí)際工作的鍛煉和思考，具體可以拆分為 3 個(gè)方面：

 

1. 明確組件化設(shè)計(jì)的內(nèi)容。

2. 場(chǎng)景設(shè)計(jì)走查。

3. 組件化設(shè)計(jì)驗(yàn)證效果。

 

 

一. 組件化設(shè)計(jì)的案例（界面展示篇）

  

  

 

 

 小結(jié)：

組件化設(shè)計(jì)，需要設(shè)計(jì)師要有一個(gè)整體性的設(shè)計(jì)思維，要有很強(qiáng)的設(shè)計(jì)能力和良好的溝通協(xié)作能力，同時(shí)設(shè)計(jì)師要深入理解業(yè)務(wù)，這樣組件化設(shè)計(jì)才能很好的在團(tuán)隊(duì)內(nèi)落地推行。

組件化設(shè)計(jì)的優(yōu)點(diǎn)有很多，能夠提升設(shè)計(jì)師的輸出效率，讓設(shè)計(jì)師更專(zhuān)注于設(shè)計(jì)上的創(chuàng)意思考，提升溝通效率。

二. 原子設(shè)計(jì)方法論

 

 

 

原子設(shè)計(jì)方法論是由國(guó)外設(shè)計(jì)師 Brad Frost 提出的，他從化學(xué)元素周期表中得到啟發(fā)，發(fā)現(xiàn)原子結(jié)合在一起，可以形成分子，然后形成組織。

 

Brad 把原子設(shè)計(jì)的方法論應(yīng)用到界面設(shè)計(jì)中，用心觀(guān)察會(huì)發(fā)現(xiàn)，界面是由一些基本的元素組成，顏色、文字、圖標(biāo)等都是一個(gè)個(gè)原子。

 

原子設(shè)計(jì)方法論，是由原子、分子、組織、模版和頁(yè)面共同協(xié)作，可以幫助我們創(chuàng)造出一套符合公司產(chǎn)品的設(shè)計(jì)系統(tǒng)。

 

 

 

 

原子設(shè)計(jì)方法論是為了幫助我們?nèi)ソ⒃O(shè)計(jì)系統(tǒng)，目前逐漸被國(guó)內(nèi)外的一些大公司，應(yīng)用于創(chuàng)建統(tǒng)一的公司產(chǎn)品設(shè)計(jì)系統(tǒng)。

 

接下來(lái)，我們以金融產(chǎn)品為例 ，對(duì)原子設(shè)計(jì)方法論進(jìn)行拆解，深入思考原子、分子、組件、模塊和頁(yè)面在界面設(shè)計(jì)中的定義是什么，以及對(duì)應(yīng)的元素是什么，元素之間又是如何組合的。

 

 

原子

 

用戶(hù)界面設(shè)計(jì)中的原子，是構(gòu)成界面的基本元素。是一個(gè)單獨(dú)的元素，如圖標(biāo)、標(biāo)題、色彩等以及原子之間組合形成的新的元素組合。

 

 

 

我們開(kāi)展一個(gè)項(xiàng)目時(shí)，為了保證各個(gè)頁(yè)面保持統(tǒng)一的設(shè)計(jì)風(fēng)格，我們會(huì)制定一套視覺(jué)規(guī)范，定義的內(nèi)容包括：字體、顏色、柵格和圖標(biāo)，這些就是界面中最基礎(chǔ)的原子。在關(guān)鍵的設(shè)計(jì)元素上，保證各個(gè)設(shè)計(jì)師達(dá)成一致，這樣就能很大程度的保證不同頁(yè)面的設(shè)計(jì)風(fēng)格統(tǒng)一，并在這個(gè)基礎(chǔ)上去探索更有價(jià)值和創(chuàng)意的設(shè)計(jì)方案。

 

 

 

 

分子

 

兩個(gè)原子即可組成一個(gè)分子，以按鈕為例：包含了文字、色塊、柵格。

文字傳達(dá)含義，顏色定義了按鈕的特性，柵格為按鈕定義了一個(gè)尺寸和規(guī)范。

 

 

 

 

把單獨(dú)的元素做一個(gè)簡(jiǎn)單的組合，是我們做界面設(shè)計(jì)的一種方法，組合的方式簡(jiǎn)單且可復(fù)用性很好，作為開(kāi)發(fā)者可以根據(jù)規(guī)則進(jìn)行編寫(xiě)代碼，提升產(chǎn)品的迭代效率和產(chǎn)品的一致性。

 

 

界面設(shè)計(jì)中的表單為例，表單是一個(gè)非常常見(jiàn)的設(shè)計(jì)元素，一個(gè)表單分子由分割線(xiàn)、文案、Icon和分割線(xiàn)等原子組成。原子組合之后，可以得到是一個(gè)可以應(yīng)用在功能模塊的組合。

 

 

 

 

組織

 

我們把分子和原子做組合，就可以創(chuàng)建復(fù)雜的、可擴(kuò)展性的模塊，然后變成一個(gè)組織。

 

 

組件在提升設(shè)計(jì)師設(shè)計(jì)效率方面有著很重要的意義，設(shè)計(jì)師可以把界面中常用的組件模塊進(jìn)行分類(lèi)整理，比如：圖片、卡片、輸入框等，可以解決設(shè)計(jì)師日常的設(shè)計(jì)需求。

 

 

以金融產(chǎn)品為例，基本分為 3 類(lèi) ：內(nèi)容、表單、卡片化的設(shè)計(jì)。

每個(gè)卡片化的內(nèi)容設(shè)計(jì)盡量保持統(tǒng)一性，這樣方便負(fù)責(zé)不同模塊內(nèi)容的設(shè)計(jì)師復(fù)用同一個(gè)組件，就可以完成不同頁(yè)面的設(shè)計(jì)，提升項(xiàng)目的設(shè)計(jì)效率。

 

 

 

 

模板

 

模版一般應(yīng)用在設(shè)計(jì)系統(tǒng)的交互階段，保證原型階段的多方案的展示；模版內(nèi)容，后面可以?xún)?yōu)化，這樣可以降低設(shè)計(jì)的成本。模版的價(jià)值可以讓設(shè)計(jì)師，更專(zhuān)注于頁(yè)面的結(jié)構(gòu)化設(shè)計(jì)排版和對(duì)頁(yè)面布局的思考。

 

那模版的原理是什么呢？

就是產(chǎn)品的原型圖，就是組織和分子的組合，會(huì)先形成一個(gè)完整的頁(yè)面框架，作為一個(gè)初步的設(shè)計(jì)方案，作為團(tuán)隊(duì)項(xiàng)目的前期溝通所用。

 

以教育和金融界面為例，如下圖：

 

 

 

 

 

界面

 

界面設(shè)計(jì)是把占位符內(nèi)容替換成產(chǎn)品設(shè)計(jì)需要的文案，在模板的組合上進(jìn)行完善，會(huì)形成界面的設(shè)計(jì)方案。

 

界面設(shè)計(jì)是模板的具體的展示設(shè)計(jì)，是真實(shí)內(nèi)容的設(shè)計(jì)方案。

 

通過(guò)圖標(biāo)和文字的組合，清晰的展示用戶(hù)所需要的場(chǎng)景，加上內(nèi)容，就會(huì)變成一套完整的界面設(shè)計(jì)方案。

 

如下圖所示：

 

 

 

 

以金融產(chǎn)品的場(chǎng)景設(shè)計(jì)為例，有了實(shí)際的內(nèi)容后，我們可以發(fā)現(xiàn)通過(guò)組合組件，就能很好的呈現(xiàn)界面內(nèi)容。

 

如下圖所示：

 

 

 

小結(jié)：

原子設(shè)計(jì)方法論為界面元素提供了應(yīng)用規(guī)則和組織整理，原子設(shè)計(jì)方法論在建立設(shè)計(jì)系統(tǒng)、團(tuán)隊(duì)協(xié)作、產(chǎn)品迭代優(yōu)化等方面，都有很好的價(jià)值和意義。

 

 

 

 

三. 組件化設(shè)計(jì)的流程 ？

 

 

 

設(shè)計(jì)規(guī)范和 Ui kit 是我們管理一個(gè)或多個(gè)App統(tǒng)一性和設(shè)計(jì)效率的工具，同時(shí)探索如何更有效的提升設(shè)計(jì)效率。像 滴滴等Ant Design 設(shè)計(jì)系統(tǒng)，他們的產(chǎn)品體驗(yàn)非常好，用戶(hù)使用產(chǎn)品時(shí)能夠有效的滿(mǎn)足其需求，良好的用戶(hù)體驗(yàn)背后都有著一套好的產(chǎn)品設(shè)計(jì)系統(tǒng)在運(yùn)作。

 

如下圖，國(guó)外的金融產(chǎn)品運(yùn)用組件規(guī)范化后的界面設(shè)計(jì)展示 ：

 

 

 

系統(tǒng)性的組件化設(shè)計(jì)思維的好處是 ：

 

1. 產(chǎn)品設(shè)計(jì)迭代優(yōu)化時(shí)，版本和版本之間的差異性就可以得到很好的解決。

2. 界面設(shè)計(jì)之間的設(shè)計(jì)風(fēng)格和設(shè)計(jì)樣式就會(huì)統(tǒng)一。

3. 界面設(shè)計(jì)的效率和質(zhì)量會(huì)穩(wěn)定輸出。

 

在我們所經(jīng)常使用的 App 產(chǎn)品中，如 蘋(píng)果、Airbnb、自如、Ant Design 等，用戶(hù)體驗(yàn)都非常好，用戶(hù)使用產(chǎn)品時(shí)能夠快速的解決需求，優(yōu)質(zhì)的用戶(hù)體驗(yàn)背后都有著一套強(qiáng)大的專(zhuān)業(yè)設(shè)計(jì)系統(tǒng)所幫助。

 

 

 

 

思考：我們?yōu)槭裁葱枰M件化設(shè)計(jì) ？

 

一. 統(tǒng)一產(chǎn)品設(shè)計(jì)體驗(yàn)

 

1. 以京東金融為例，在京東金融最近更新的版本中，我們看到財(cái)富界面和生活界面，同樣的模塊可以復(fù)用，對(duì)于復(fù)用性高的內(nèi)容，應(yīng)該提煉為通用組件，提高設(shè)計(jì)效率。

 

 

 

2. 如上圖所示，對(duì)于會(huì)員專(zhuān)區(qū)或者熱門(mén)活動(dòng)是金融類(lèi)產(chǎn)品中最為常見(jiàn)的產(chǎn)品形式，在京東金融的首頁(yè)出現(xiàn)，布局往往是左右結(jié)構(gòu)，或者上下結(jié)構(gòu)；因?yàn)檫@類(lèi)產(chǎn)品具有較強(qiáng)的引導(dǎo)屬性，所以會(huì)把右側(cè)的運(yùn)營(yíng)的插畫(huà)設(shè)計(jì)相對(duì)突出，以吸引用戶(hù)的注意力。會(huì)員專(zhuān)區(qū)的卡片化設(shè)計(jì)，具有較強(qiáng)的復(fù)用性，可以列為通用組件，這樣就可以保證兩個(gè)產(chǎn)品界面的卡片化的設(shè)計(jì)風(fēng)格和樣式上的一致性原則。

 

 

 

二. 提高團(tuán)隊(duì)協(xié)作效率

 

1. 面對(duì)相同的設(shè)計(jì)需求時(shí)，可直接調(diào)用相關(guān)組件，節(jié)省重復(fù)性的設(shè)計(jì)工作，提升溝通效率。

2. 借助組件化設(shè)計(jì)，可以快速開(kāi)展工作，達(dá)到復(fù)用的價(jià)值。

3. 通過(guò)設(shè)計(jì)語(yǔ)言可以完成一個(gè)界面設(shè)計(jì)，在下面案例中，主要的元素由文字、柵格線(xiàn)、Icon 等組成界面結(jié)構(gòu)，確定好排版布局和圖標(biāo)的設(shè)計(jì)風(fēng)格后，完成產(chǎn)品的界面設(shè)計(jì)。

 

 

 

三. 降低開(kāi)發(fā)成本

1. 在實(shí)際工作中，如果每次制作一個(gè)新頁(yè)面都設(shè)計(jì)不同的組件，開(kāi)發(fā)就要寫(xiě)新代碼，增加開(kāi)發(fā)時(shí)間成本。

2. 如果我們常用的模塊作成組件庫(kù)，開(kāi)發(fā)遇到相同的組件時(shí)，可直接調(diào)用組件，復(fù)用相關(guān)代碼，這樣可以降低開(kāi)發(fā)成本。

 

  

組件化設(shè)計(jì)流程，

經(jīng)過(guò)實(shí)際工作的鍛煉和思考，具體可以拆分為 3 個(gè)方面：

一. 明確組件化設(shè)計(jì)的內(nèi)容

我們需要整體思考，明確可以復(fù)用的的內(nèi)容、組件，以熱銷(xiāo)理財(cái)場(chǎng)景為例，金融產(chǎn)品都會(huì)需要用戶(hù)進(jìn)行選擇理財(cái)產(chǎn)品，可定義為理財(cái)產(chǎn)品的卡片化設(shè)計(jì)組件，適合組件化設(shè)計(jì)的模塊。產(chǎn)品已有組件的優(yōu)化，設(shè)計(jì)師要具體分析，分析組件體驗(yàn)現(xiàn)狀，發(fā)現(xiàn)問(wèn)題然后針對(duì)性解決問(wèn)題。

使用產(chǎn)品的場(chǎng)景設(shè)計(jì)、交互體驗(yàn)、設(shè)計(jì)風(fēng)格三方面都要思考，推出更好的產(chǎn)品設(shè)計(jì)的解決方案。以京東金融的財(cái)富和首頁(yè)的界面設(shè)計(jì)為例，應(yīng)用的都是卡片化設(shè)計(jì)的理財(cái)模塊。在開(kāi)發(fā)新項(xiàng)目的時(shí)候，同樣可以調(diào)用同一個(gè)理財(cái)產(chǎn)品的模塊化組件，不僅能保證產(chǎn)品上體驗(yàn)的一致性，也能降低團(tuán)隊(duì)的設(shè)計(jì)成本。如下圖所示：

 

 

二. 場(chǎng)景設(shè)計(jì)走查

 1. 全面體驗(yàn)走查線(xiàn)上的移動(dòng)端產(chǎn)品設(shè)計(jì),對(duì)用戶(hù)的交互行為鏈路有一個(gè)清晰的理解，思考當(dāng)前線(xiàn)上的產(chǎn)品體驗(yàn)。

2. 線(xiàn)上產(chǎn)品功能的迭代一般業(yè)務(wù)方都會(huì)有一個(gè)周期性安排，因此在走查時(shí)要及時(shí)和業(yè)務(wù)方溝通，在這個(gè)基礎(chǔ)上再進(jìn)行組件化的方案設(shè)計(jì)。

設(shè)計(jì)師使用金融產(chǎn)品，在設(shè)計(jì)的時(shí)候要考慮到每一個(gè)環(huán)節(jié)。

我們先來(lái)看下京東金融的案例，這兩個(gè)閃屏運(yùn)營(yíng)彈窗除了場(chǎng)景不一樣以外，其他元素都是高度統(tǒng)一的，組件化設(shè)計(jì)的優(yōu)勢(shì)在于，只需要改變組件的部分元素就能適配各種場(chǎng)景。如下圖所示：

 

 

三. 組件化設(shè)計(jì)驗(yàn)證效果（如下圖）

 

 

 

組件化的設(shè)計(jì)方案完成對(duì)接開(kāi)發(fā)上線(xiàn)后，我們需要從兩個(gè)方面來(lái)驗(yàn)證組件優(yōu)化后的效果：

1. 組件化設(shè)計(jì)是否可以滿(mǎn)足各業(yè)務(wù)方的需求和場(chǎng)景化的設(shè)計(jì)。

2. 通過(guò)定性數(shù)據(jù)追蹤功能是否能促進(jìn)業(yè)務(wù)的關(guān)鍵的設(shè)計(jì)指標(biāo)的提升，這些數(shù)據(jù)可以是轉(zhuǎn)化率等數(shù)據(jù)指標(biāo)，用戶(hù)的反饋也是一個(gè)很好的輔助驗(yàn)證方法。

 

四 如何建立組件化設(shè)計(jì)系統(tǒng) ？

 

 

 

每個(gè)團(tuán)隊(duì)的體量和業(yè)務(wù)訴求不一樣，個(gè)性化的組件化設(shè)計(jì)系統(tǒng)包含有設(shè)計(jì)原則、設(shè)計(jì)語(yǔ)言和組件庫(kù)，這是一個(gè)爭(zhēng)議的概念。

建立設(shè)計(jì)系統(tǒng)的原因：

1. 建立設(shè)計(jì)系統(tǒng)，可以方便團(tuán)隊(duì)協(xié)作，保證體驗(yàn)上的一致性。

2. 設(shè)計(jì)過(guò)程中，發(fā)現(xiàn)每個(gè)業(yè)務(wù)的形態(tài)，以產(chǎn)品的不同場(chǎng)景為出發(fā)點(diǎn)，使用一套設(shè)計(jì)系統(tǒng)，會(huì)提升用戶(hù)體驗(yàn)。

3. 幫助產(chǎn)品的迭代和優(yōu)化，同時(shí)提升產(chǎn)品和用戶(hù)的體驗(yàn)好感度。

 

 

 1 設(shè)計(jì)原則（設(shè)計(jì)理念、品牌指導(dǎo)）

設(shè)計(jì)的本質(zhì)是解決問(wèn)題，制定設(shè)計(jì)原則時(shí)要建立在這個(gè)設(shè)計(jì)中心思想上。

 

蘋(píng)果的設(shè)計(jì)系統(tǒng)：

 

把審美作為第一要素存在于設(shè)計(jì)原則中。

1. 創(chuàng)意審美的重要性。 

2. 隱喻的價(jià)值。 

3. 易用性原則。 

4. 及時(shí)的反饋。

  

安卓的設(shè)計(jì)系統(tǒng)： 

1. 跨平臺(tái)的設(shè)計(jì)適配原則。 

2. 材料的設(shè)計(jì)價(jià)值思考。 

3. 圖形、強(qiáng)調(diào)、大膽的設(shè)計(jì)語(yǔ)言。

4. 動(dòng)效的服務(wù)設(shè)計(jì)價(jià)值。

 

 

 

2 設(shè)計(jì)語(yǔ)言（色彩、字體、柵格、圖標(biāo)）

色彩的視覺(jué)語(yǔ)言規(guī)范，我們需要定義產(chǎn)品的基礎(chǔ)色板和中性色板，基本色板包含了產(chǎn)品的主題色和輔助色，生成每個(gè)顏色的亮色和暗色的衍生色。中性色板包含黑白灰，這類(lèi)顏色在界面設(shè)計(jì)中使用，能讓頁(yè)面內(nèi)容具有良好的層次關(guān)系，提升閱讀的效率和用戶(hù)體驗(yàn)。

 

字體規(guī)范是界面設(shè)計(jì)中的構(gòu)成之一，用戶(hù)通過(guò)文字來(lái)理解和達(dá)成目標(biāo)，完整的字體系統(tǒng)能有效的提高用戶(hù)的體驗(yàn)和理解效率。字體的規(guī)范定義需要從三個(gè)方面出發(fā)：字重、灰度色、字階。

界面設(shè)計(jì)的排版布局一般使用的 8 柵格法，它能適配不同尺寸的屏幕分辨率，界面元素大小和間距都是8 倍數(shù)為基準(zhǔn)。

圖標(biāo)設(shè)計(jì)，隱喻，保持圖標(biāo)之間一致的設(shè)計(jì)風(fēng)格和表現(xiàn)形式。系統(tǒng)圖標(biāo)為例子：以1@x圖為例子，常見(jiàn)的尺寸有： 16px、24px、32px、48px等。

 

 

 

 

 

3 阿里系團(tuán)隊(duì)，制作的 Kitchen 組件化設(shè)計(jì)系統(tǒng) 很好 ：（如下圖）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

五.  Banner 組件化設(shè)計(jì)、B 端組件化設(shè)計(jì)等平面組件化設(shè)計(jì)的案例如下：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

總結(jié) ：

佐藤寫(xiě)過(guò)一本書(shū)［佐藤可士和的超整理術(shù)］，里面講述了他自己是如何通過(guò)整理自己的思路、對(duì)話(huà)、工作室、隨身物品等設(shè)計(jì)來(lái)讓工作變得并且最終對(duì)自我更加深入的了解 。

生活和工作離不開(kāi)“整理術(shù)”，優(yōu)秀的設(shè)計(jì)應(yīng)該要從“ 整理和總結(jié) ”開(kāi)始，比如：組件化的設(shè)計(jì)思維，可以看做是一種 “設(shè)計(jì)的整理術(shù)” 。

藍(lán)藍(lán)設(shè)計(jì)( www.tuitetiyu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)