『 寫在之前 』

最近在閱讀《佐藤可士和的超整理術》，書里講述的是作者通過對空間、信息和思考的整理，來解決復雜問題，讓工作變得高效。生活和工作離不開“整理”，好的設計也要從“整理”開始，組件化設計思維，也可以看做一種“整理術”。本篇文章將與大家探討如何運用組件化設計思維去“整理”項目，并發(fā)揮更高的價值。

文章分為兩個部分：

1. 組件化設計思維

2. 滴滴表單優(yōu)化項目的沉淀總結：組件化思維的推動和執(zhí)行

『 組件化設計思維 』

1. 什么是組件化設計思維

我們知道“分子是由原子組成的，分子分成原子，原子也可以重新組合成新的分子”。一個界面是由獨立的分子組件搭建而成，分子組件由原子元件構成，這些原子可通過不同的組合方式，組成新分子組件，繼而重組構成新的界面。

組件化設計思維是通過對功能及視覺表達中元素的拆解、歸納、重組，并基于可被復用的目的，形成規(guī)范化的組件，通過多維度組合來構建整個設計方案，從而提升設計效能。

2. 滴滴運用組件化帶來的收益

隨著滴滴業(yè)務的飛速增長，組件化為滴滴帶來了一致的設計語言和工作效率上的提升，因此滴滴在組件化道路上的決心愈發(fā)堅定。選擇以組件化展開設計實踐，帶來的變化與收益主要體現在公司、項目和個人三個維度：

2.1 公司維度

一款產品的更新迭代是依附于產品、設計、開發(fā)、測試等多個團隊協(xié)作進行的，隨著產品功能的完善，背后支撐的團隊也在不斷壯大。以運用組件化推動的產品設計與迭代，可以使團隊增效，降低成本。設計師可以只用幾個小時設計出幾十個頁面，開發(fā)人員也可以通過查看prd文檔，直接調取組件代碼完成需求，使得我們的生產力產生質的飛躍。在保證數量和質量的前提下，原本200人的團隊，可以縮減為100人，為公司節(jié)省了人力成本。組件化能讓公司以更快的速度和更低的成本開發(fā)產品，也能對產品想法快速驗證。

2.2 項目維度

● 從設計方案上

對于一些適用組件化的產品形態(tài)，我們可以運用組件化思維將其“化整為零”，對需求有更規(guī)范的統(tǒng)籌，理清框架，建立一個可復用的組件結構并持續(xù)優(yōu)化，以保證交互和視覺的一致性。

● 從工作流程上

傳統(tǒng)的設計流程大多是同屬性多角色并行的，從需求到設計，從設計到前端的工作流程會涉及到不同的設計師及不同的前端工程師。相同角色間無交集、缺乏溝通會導致大量重復性工作，增加項目周期和管理難度。

而將組件化思維貫穿其中的設計流程，帶來了工作流程上的創(chuàng)新。我們建立了一套設計組件庫來提高協(xié)同效率，大量需求均通過需求評估來判斷是否需要新增或復用組件，對于組件庫里已有的組件，設計師可直接調取，組合構建出新頁面。對于新增組件則經過常規(guī)設計流程后，歸納沉淀并由組件委員會審核通過后方可入庫，以提升后續(xù)組件擴展能力，助力產品快速更新迭代。 

2.3 個人維度

利用組件化，設計師可以從低價值的機械式工作中解放出來，參與到設計創(chuàng)新中去，發(fā)揮更高的設計價值。

另外，在工作中運用組件化設計思維有助于設計師更完整的思考，培養(yǎng)全局思維的能力；也有助于我們專注于細節(jié)，提供個性化的創(chuàng)新方法，產出適應不同場景的最優(yōu)方案。

下面用一款優(yōu)秀案例來解析組件化設計思維

『 滴滴表單優(yōu)化項目沉淀 』

1. 項目背景

1.1 為什么要優(yōu)化表單

滴滴出行5.0版本從2016年11月上線至今，隨著用戶體驗痛點不斷增加，業(yè)務的需求逐漸多元化，我們希望對表單進行一次統(tǒng)一的整合梳理和升級。為未來更多業(yè)務發(fā)展提供快速支撐和拓展，同時也注重用戶體驗的提升。

滴滴出行作為出行服務類應用，精準的發(fā)單表達是觸達用戶進入服務流程的關鍵。每個業(yè)務在確認呼叫的節(jié)點上擁有獨立的入口并滿足不同的需求（如下圖），確認呼叫頁表單（以下簡稱表單）作為最重要的多功能、多信息載體，需要高效、精準的表達和流暢的體驗。

1.2 跨業(yè)務共建

滴滴出行是涵蓋出租車、專車、快車等多項業(yè)務在內的一站式出行平臺，我們希望在保證全平臺統(tǒng)一化的基礎上，與業(yè)務尋求一種相輔相成的關系，并且在保證規(guī)范化輸出的同時，展現出業(yè)務特色。在需求階段，確定各業(yè)務接口人，收集需求，溝通評審促成各方達成一致目標。在方案執(zhí)行階段，平臺設計師產出方案，與各業(yè)務線溝通并優(yōu)化，1～2次循環(huán)后方案評審到最終確立。開發(fā)和測試階段，各方驗收通過后發(fā)版上線，上線后平臺沉淀設計規(guī)范，完善組件庫，跟蹤反饋，推動體驗優(yōu)化形成工作流程閉環(huán)。 

2. 確立設計目標

項目初始，平臺設計師需從業(yè)務訴求及用戶訴求兩方面著手，在收集到兩方需求后，對其進行歸類整理并定義優(yōu)先級，從而確立設計目標，制定出具體的設計策略，提煉交互框架，再深入到細節(jié)的設計。 

在表單項目中，基于滿足業(yè)務未來多元化及提升用戶體驗的需求，輸出目標為：

1）兼容各業(yè)務需求，建立具有可承載多種業(yè)務共性及特性的組件能力框架；

2）主要信息及次要信息的合理化分布；

3）傳遞真實感及專業(yè)感，拉近用戶體驗共鳴。

3. 以組件化設計思維展開設計探索

有了明確的目標后，根據目標制定相應的方向策略，也便于我們在后續(xù)的設計工作中尋找發(fā)力點。和業(yè)務溝通后，明確整體方案的設計基調聚焦在“擴展性”“統(tǒng)一性”“邏輯性”“個性”四個方向上：

擴展性——組件化視覺表達，能夠隨著滴滴多場景、多業(yè)務需求的變化進行延展和擴充；

統(tǒng)一性——各業(yè)務信息歸類統(tǒng)一、簡化；

邏輯性——信息層級清晰，增強主焦點認知，次要信息弱化；

個性——設計個性化表達

3.1 以組件化思維進行框架探索

在方案構思階段，我們是以組件化設計的思維方式先去全面的思考并分析問題，再進行拆解分類，最后歸納重組。

● 全面多維度分析問題

框架層：針對快、專、豪的確認呼叫表單的關鍵場景進行框架分析

因為業(yè)務不同，場景不同，確認呼叫這個流程觸點在各業(yè)務中是具有共性和差異性的。我們重新梳理了確認呼叫頁表單各業(yè)務的功能點（如下圖），可見各業(yè)務表單雖有一致模塊，但信息內容十分繁雜，層級區(qū)分無規(guī)律可循；操作區(qū)位置不統(tǒng)一，樣式各異；框架的兼容性及擴展性不高。

表現層：在視覺表現層面上，也暴露了很多問題，如：不同業(yè)務的車型選擇分別有各自的展示方式；價格區(qū)選中項的感知較弱且各業(yè)務的樣式不統(tǒng)一；價格小數點展示位數不一致等等。

新增業(yè)務特性訴求：新的框架還需滿足業(yè)務特性的訴求（如下圖）。

● 拆解并簡化

如何讓新的框架既能滿足越來越多的業(yè)務類型，保證體驗的統(tǒng)一，又能體現出業(yè)務特性，平衡取舍促進產品更新迭代呢？

我們回歸到本質，從以下四個方面對框架進行重新構思：

刪除——去掉無用的功能點

組織——根據類別將這些功能點分解后重新劃分成組

隱藏——突出主焦點的認知并隱藏次要信息

抽取——抽取共性，對比差異性

綜上，即對框架進行簡化，保證框架可靈活適配具有業(yè)務共性與特性的組件。 

● 重組

簡化后的框架幾乎可以覆蓋所有必要功能點，有很強的適應能力和擴充能力，可以輕松應對未來多元化的出行服務及場景。

在共性中尋找差異性：全局操作、車型與價格、發(fā)單按鈕是業(yè)務共性部分，除車型／價格區(qū)和發(fā)單按鈕外，其余均可顯示或隱藏，可根據業(yè)務特點靈活配置。 

在差異中尋找共性：車型與價格區(qū)所包含的服務選擇與附屬操作是業(yè)務差異部分，快車需要在一個卡片中呈現三個車型比價、需要有附屬操作，專豪則需要強調車型圖片的露出和服務配置。我們要找一個平衡去把這些差異點串聯(lián)起來，確保用戶擁有同樣的感受，不僅是交互方式、動效流轉，也需要關注同一層級信息的視覺表達。

3.2從框架層到表現層——從整體到細節(jié)的設計

● 視覺嘗試探索

在交互框架明確后，便進入視覺設計階段。平臺設計師基于統(tǒng)一的的框架進行視覺風格探索，兼顧擴展性和邏輯性，同時不能忽視業(yè)務特性，從而迸發(fā)更加出彩的設計想法。設計師是界面的規(guī)劃師，也是品質的把控者，大到頁面布局、組件的組合方式、顏色定義，小到按鈕在空間布局上的占比是否合理都要面面俱到。在這個過程中，不斷打磨微調，進一步細化并且有針對性的進行動效設計，以呈現更完美的方案。

● 組件化設計的細節(jié)打磨

在方案確定的同時，將模塊再次拆分成組件，組件包含不同類型、不同狀態(tài)的基本元件，進行深入打磨，從而實現與設計目標的高度吻合。

● 根據組件構建頁面

表單運用了組件化設計方法，建立了可承載業(yè)務共性與特性的框架。通過設計評審敲定最終方案后，提煉規(guī)范，設定組件標準，提取組合用法以覆蓋各業(yè)務場景。由于業(yè)務線設計師更了解業(yè)務的需求根源及業(yè)務流程，所以由其枚舉場景并輸出業(yè)務遍歷圖。

平臺與業(yè)務共建的過程，可以更好的調動業(yè)務線設計師的積極性和參與度，也能從業(yè)務的角度驗證組件的擴展能力；“共建”也能更快速的將組件規(guī)范推動落地，實現組件的復用、協(xié)調與升級，是快速搭建頁面、促進產品快速迭代的重要因素。

4. 項目反思

表單在 2017年10月19日 隨乘客端 V5.1.16 發(fā)布，我們通過數據分析來驗證表單優(yōu)化的合理性。（以ios為例，分析上線一周后10月25日-10月31日的發(fā)單率和發(fā)單時長數據） 

4.1 體驗量化

- 新表單較老表單，發(fā)單量增加，發(fā)單率提升14.83%；

- 新表單較老表單的平均發(fā)單時間降低了2%

數據分析表明，表單的設計優(yōu)化是成功的，是設計師運用組件化思維在自驅項目中的每一個環(huán)節(jié)發(fā)揮高價值的體現。

4.2 快速落地

“共建”和“組件化”是促成表單項目在短時間內達成落地目標的關鍵因素，平臺與業(yè)務共建的工作方法也擴展運用到了更多項目中，是平臺與業(yè)務之間迅速確立方案、搭建設計規(guī)范、推動體驗優(yōu)化和迭代的最高效路徑。

4.3 設計研發(fā)一體化

不僅如此，表單優(yōu)化項目取得成功，離不開“組件化設計思維”在設計全流程上的應用。我們堅信，滴滴將在組件化道路上繼續(xù)前行，然而這條路任重而道遠。就現狀而言，我們的兩個組件庫——設計庫和開發(fā)庫仍需要分別維護，且設計和開發(fā)在溝通時成本較高。這使得我們需要創(chuàng)建一個能夠同時面向設計師和開發(fā)人員的共享組件庫，實現設計和研發(fā)一體化，讓設計師面向開發(fā)，讓開發(fā)貼近設計，減少設計及開發(fā)人員的額外工作量。我們設想，在設計和研發(fā)一體化的生態(tài)系統(tǒng)下，不論設計師或開發(fā)人員，通過搜索名稱就可以從共享組件庫中調取相應的組件進行設計，這些組件都有一對一的設計和開發(fā)數據，這會讓工作變得十分高效。

在滴滴的未來，設計研發(fā)一體化是可以將代碼實時渲染到設計軟件中審閱設計的生態(tài)系統(tǒng)，且并不遙遠。

作者：滴滴出行CDS       來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。