組件化設計思維，能夠提升設計團隊的生產力，讓設計師專注于設計上的創(chuàng)意，同時讓設計師完成更多產品需求和提升團隊的溝通效率
 

 

 

寫在前面 

組件化設計的流程，經過實際工作的鍛煉和思考，具體可以拆分為 3 個方面：

 

1. 明確組件化設計的內容。

2. 場景設計走查。

3. 組件化設計驗證效果。

 

 

一. 組件化設計的案例（界面展示篇）

  

  

 

 

 小結：

組件化設計，需要設計師要有一個整體性的設計思維，要有很強的設計能力和良好的溝通協(xié)作能力，同時設計師要深入理解業(yè)務，這樣組件化設計才能很好的在團隊內落地推行。

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

二. 原子設計方法論

 

 

 

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

 

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

 

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

 

 

 

 

原子設計方法論是為了幫助我們去建立設計系統(tǒng)，目前逐漸被國內外的一些大公司，應用于創(chuàng)建統(tǒng)一的公司產品設計系統(tǒng)。

 

接下來，我們以金融產品為例 ，對原子設計方法論進行拆解，深入思考原子、分子、組件、模塊和頁面在界面設計中的定義是什么，以及對應的元素是什么，元素之間又是如何組合的。

 

 

原子

 

用戶界面設計中的原子，是構成界面的基本元素。是一個單獨的元素，如圖標、標題、色彩等以及原子之間組合形成的新的元素組合。

 

 

 

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

 

 

 

 

分子

 

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

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

 

 

 

 

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

 

 

界面設計中的表單為例，表單是一個非常常見的設計元素，一個表單分子由分割線、文案、Icon和分割線等原子組成。原子組合之后，可以得到是一個可以應用在功能模塊的組合。

 

 

 

 

組織

 

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

 

 

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

 

 

以金融產品為例，基本分為 3 類 ：內容、表單、卡片化的設計。

每個卡片化的內容設計盡量保持統(tǒng)一性，這樣方便負責不同模塊內容的設計師復用同一個組件，就可以完成不同頁面的設計，提升項目的設計效率。

 

 

 

 

模板

 

模版一般應用在設計系統(tǒng)的交互階段，保證原型階段的多方案的展示；模版內容，后面可以優(yōu)化，這樣可以降低設計的成本。模版的價值可以讓設計師，更專注于頁面的結構化設計排版和對頁面布局的思考。

 

那模版的原理是什么呢？

就是產品的原型圖，就是組織和分子的組合，會先形成一個完整的頁面框架，作為一個初步的設計方案，作為團隊項目的前期溝通所用。

 

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

 

 

 

 

 

界面

 

界面設計是把占位符內容替換成產品設計需要的文案，在模板的組合上進行完善，會形成界面的設計方案。

 

界面設計是模板的具體的展示設計，是真實內容的設計方案。

 

通過圖標和文字的組合，清晰的展示用戶所需要的場景，加上內容，就會變成一套完整的界面設計方案。

 

如下圖所示：

 

 

 

 

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

 

如下圖所示：

 

 

 

小結：

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

 

 

 

 

三. 組件化設計的流程 ？

 

 

 

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

 

如下圖，國外的金融產品運用組件規(guī)范化后的界面設計展示 ：

 

 

 

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

 

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

2. 界面設計之間的設計風格和設計樣式就會統(tǒng)一。

3. 界面設計的效率和質量會穩(wěn)定輸出。

 

在我們所經常使用的 App 產品中，如 蘋果、Airbnb、自如、Ant Design 等，用戶體驗都非常好，用戶使用產品時能夠快速的解決需求，優(yōu)質的用戶體驗背后都有著一套強大的專業(yè)設計系統(tǒng)所幫助。

 

 

 

 

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

 

一. 統(tǒng)一產品設計體驗

 

1. 以京東金融為例，在京東金融最近更新的版本中，我們看到財富界面和生活界面，同樣的模塊可以復用，對于復用性高的內容，應該提煉為通用組件，提高設計效率。

 

 

 

2. 如上圖所示，對于會員專區(qū)或者熱門活動是金融類產品中最為常見的產品形式，在京東金融的首頁出現(xiàn)，布局往往是左右結構，或者上下結構；因為這類產品具有較強的引導屬性，所以會把右側的運營的插畫設計相對突出，以吸引用戶的注意力。會員專區(qū)的卡片化設計，具有較強的復用性，可以列為通用組件，這樣就可以保證兩個產品界面的卡片化的設計風格和樣式上的一致性原則。

 

 

 

二. 提高團隊協(xié)作效率

 

1. 面對相同的設計需求時，可直接調用相關組件，節(jié)省重復性的設計工作，提升溝通效率。

2. 借助組件化設計，可以快速開展工作，達到復用的價值。

3. 通過設計語言可以完成一個界面設計，在下面案例中，主要的元素由文字、柵格線、Icon 等組成界面結構，確定好排版布局和圖標的設計風格后，完成產品的界面設計。

 

 

 

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

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

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

 

  

組件化設計流程，

經過實際工作的鍛煉和思考，具體可以拆分為 3 個方面：

一. 明確組件化設計的內容

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

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

 

 

二. 場景設計走查

 1. 全面體驗走查線上的移動端產品設計,對用戶的交互行為鏈路有一個清晰的理解，思考當前線上的產品體驗。

2. 線上產品功能的迭代一般業(yè)務方都會有一個周期性安排，因此在走查時要及時和業(yè)務方溝通，在這個基礎上再進行組件化的方案設計。

設計師使用金融產品，在設計的時候要考慮到每一個環(huán)節(jié)。

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

 

 

三. 組件化設計驗證效果（如下圖）

 

 

 

組件化的設計方案完成對接開發(fā)上線后，我們需要從兩個方面來驗證組件優(yōu)化后的效果：

1. 組件化設計是否可以滿足各業(yè)務方的需求和場景化的設計。

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

 

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

 

 

 

每個團隊的體量和業(yè)務訴求不一樣，個性化的組件化設計系統(tǒng)包含有設計原則、設計語言和組件庫，這是一個爭議的概念。

建立設計系統(tǒng)的原因：

1. 建立設計系統(tǒng)，可以方便團隊協(xié)作，保證體驗上的一致性。

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

3. 幫助產品的迭代和優(yōu)化，同時提升產品和用戶的體驗好感度。

 

 

 1 設計原則（設計理念、品牌指導）

設計的本質是解決問題，制定設計原則時要建立在這個設計中心思想上。

 

蘋果的設計系統(tǒng)：

 

把審美作為第一要素存在于設計原則中。

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

2. 隱喻的價值。 

3. 易用性原則。 

4. 及時的反饋。

  

安卓的設計系統(tǒng)： 

1. 跨平臺的設計適配原則。 

2. 材料的設計價值思考。 

3. 圖形、強調、大膽的設計語言。

4. 動效的服務設計價值。

 

 

 

2 設計語言（色彩、字體、柵格、圖標）

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

 

字體規(guī)范是界面設計中的構成之一，用戶通過文字來理解和達成目標，完整的字體系統(tǒng)能有效的提高用戶的體驗和理解效率。字體的規(guī)范定義需要從三個方面出發(fā)：字重、灰度色、字階。

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

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

 

 

 

 

 

3 阿里系團隊，制作的 Kitchen 組件化設計系統(tǒng) 很好 ：（如下圖）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

五.  Banner 組件化設計、B 端組件化設計等平面組件化設計的案例如下：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

總結 ：

佐藤寫過一本書［佐藤可士和的超整理術］，里面講述了他自己是如何通過整理自己的思路、對話、工作室、隨身物品等設計來讓工作變得并且最終對自我更加深入的了解 。

生活和工作離不開“整理術”，優(yōu)秀的設計應該要從“ 整理和總結 ”開始，比如：組件化的設計思維，可以看做是一種 “設計的整理術” 。

藍藍設計( m.820esy.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務