設(shè)計(jì)的整理術(shù),滴滴平臺(tái)體驗(yàn)設(shè)計(jì)研究

來(lái)源:
秋秋
時(shí)間:
2017-12-27 09:14:13
閱讀:
4380


 

『 寫在之前 』

 

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

文章分為兩個(gè)部分:

1. 組件化設(shè)計(jì)思維

2. 滴滴表單優(yōu)化項(xiàng)目的沉淀總結(jié):組件化思維的推動(dòng)和執(zhí)行

 

 

『 組件化設(shè)計(jì)思維 』

 

 

1. 什么是組件化設(shè)計(jì)思維

我們知道“分子是由原子組成的,分子分成原子,原子也可以重新組合成新的分子”。一個(gè)界面是由獨(dú)立的分子組件搭建而成,分子組件由原子元件構(gòu)成,這些原子可通過(guò)不同的組合方式,組成新分子組件,繼而重組構(gòu)成新的界面。

組件化設(shè)計(jì)思維是通過(guò)對(duì)功能及視覺(jué)表達(dá)中元素的拆解、歸納、重組,并基于可被復(fù)用的目的,形成規(guī)范化的組件,通過(guò)多維度組合來(lái)構(gòu)建整個(gè)設(shè)計(jì)方案,從而提升設(shè)計(jì)效能。

 

 

 

2. 滴滴運(yùn)用組件化帶來(lái)的收益

 

隨著滴滴業(yè)務(wù)的飛速增長(zhǎng),組件化為滴滴帶來(lái)了一致的設(shè)計(jì)語(yǔ)言和工作效率上的提升,因此滴滴在組件化道路上的決心愈發(fā)堅(jiān)定。選擇以組件化展開設(shè)計(jì)實(shí)踐,帶來(lái)的變化與收益主要體現(xiàn)在公司、項(xiàng)目和個(gè)人三個(gè)維度:

 

2.1 公司維度

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

 

2.2 項(xiàng)目維度

● 從設(shè)計(jì)方案上

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

 

● 從工作流程上

傳統(tǒng)的設(shè)計(jì)流程大多是同屬性多角色并行的,從需求到設(shè)計(jì),從設(shè)計(jì)到前端的工作流程會(huì)涉及到不同的設(shè)計(jì)師及不同的前端工程師。相同角色間無(wú)交集、缺乏溝通會(huì)導(dǎo)致大量重復(fù)性工作,增加項(xiàng)目周期和管理難度。

 

 

 

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

 

 

 

2.3 個(gè)人維度

利用組件化,設(shè)計(jì)師可以從低價(jià)值的機(jī)械式工作中解放出來(lái),參與到設(shè)計(jì)創(chuàng)新中去,發(fā)揮更高的設(shè)計(jì)價(jià)值。

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

 

 

 

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

 

1. 項(xiàng)目背景

 

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

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

滴滴出行作為出行服務(wù)類應(yīng)用,精準(zhǔn)的發(fā)單表達(dá)是觸達(dá)用戶進(jìn)入服務(wù)流程的關(guān)鍵。每個(gè)業(yè)務(wù)在確認(rèn)呼叫的節(jié)點(diǎn)上擁有獨(dú)立的入口并滿足不同的需求(如下圖),確認(rèn)呼叫頁(yè)表單(以下簡(jiǎn)稱表單)作為最重要的多功能、多信息載體,需要高效、精準(zhǔn)的表達(dá)和流暢的體驗(yàn)。

 

 

 

 

1.2 跨業(yè)務(wù)共建

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

 

 

 

 

2. 確立設(shè)計(jì)目標(biāo)

 

項(xiàng)目初始,平臺(tái)設(shè)計(jì)師需從業(yè)務(wù)訴求及用戶訴求兩方面著手,在收集到兩方需求后,對(duì)其進(jìn)行歸類整理并定義優(yōu)先級(jí),從而確立設(shè)計(jì)目標(biāo),制定出具體的設(shè)計(jì)策略,提煉交互框架,再深入到細(xì)節(jié)的設(shè)計(jì)。 

 

 

 

 

在表單項(xiàng)目中,基于滿足業(yè)務(wù)未來(lái)多元化及提升用戶體驗(yàn)的需求,輸出目標(biāo)為:

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

2)主要信息及次要信息的合理化分布;

3)傳遞真實(shí)感及專業(yè)感,拉近用戶體驗(yàn)共鳴。

 

 

3. 以組件化設(shè)計(jì)思維展開設(shè)計(jì)探索

 

有了明確的目標(biāo)后,根據(jù)目標(biāo)制定相應(yīng)的方向策略,也便于我們?cè)诤罄m(xù)的設(shè)計(jì)工作中尋找發(fā)力點(diǎn)。和業(yè)務(wù)溝通后,明確整體方案的設(shè)計(jì)基調(diào)聚焦在“擴(kuò)展性”“統(tǒng)一性”“邏輯性”“個(gè)性”四個(gè)方向上:

擴(kuò)展性——組件化視覺(jué)表達(dá),能夠隨著滴滴多場(chǎng)景、多業(yè)務(wù)需求的變化進(jìn)行延展和擴(kuò)充;

統(tǒng)一性——各業(yè)務(wù)信息歸類統(tǒng)一、簡(jiǎn)化;

邏輯性——信息層級(jí)清晰,增強(qiáng)主焦點(diǎn)認(rèn)知,次要信息弱化;

個(gè)性——設(shè)計(jì)個(gè)性化表達(dá)

 

 

3.1 以組件化思維進(jìn)行框架探索

在方案構(gòu)思階段,我們是以組件化設(shè)計(jì)的思維方式先去全面的思考并分析問(wèn)題,再進(jìn)行拆解分類,最后歸納重組。

 

● 全面多維度分析問(wèn)題

框架層:針對(duì)快、專、豪的確認(rèn)呼叫表單的關(guān)鍵場(chǎng)景進(jìn)行框架分析

 

 

 

 

因?yàn)闃I(yè)務(wù)不同,場(chǎng)景不同,確認(rèn)呼叫這個(gè)流程觸點(diǎn)在各業(yè)務(wù)中是具有共性和差異性的。我們重新梳理了確認(rèn)呼叫頁(yè)表單各業(yè)務(wù)的功能點(diǎn)(如下圖),可見(jiàn)各業(yè)務(wù)表單雖有一致模塊,但信息內(nèi)容十分繁雜,層級(jí)區(qū)分無(wú)規(guī)律可循;操作區(qū)位置不統(tǒng)一,樣式各異;框架的兼容性及擴(kuò)展性不高。

 

 

 

 

表現(xiàn)層:在視覺(jué)表現(xiàn)層面上,也暴露了很多問(wèn)題,如:不同業(yè)務(wù)的車型選擇分別有各自的展示方式;價(jià)格區(qū)選中項(xiàng)的感知較弱且各業(yè)務(wù)的樣式不統(tǒng)一;價(jià)格小數(shù)點(diǎn)展示位數(shù)不一致等等。

 

 

 

 

新增業(yè)務(wù)特性訴求:新的框架還需滿足業(yè)務(wù)特性的訴求(如下圖)。

 

 

 

 

● 拆解并簡(jiǎn)化

如何讓新的框架既能滿足越來(lái)越多的業(yè)務(wù)類型,保證體驗(yàn)的統(tǒng)一,又能體現(xiàn)出業(yè)務(wù)特性,平衡取舍促進(jìn)產(chǎn)品更新迭代呢?

我們回歸到本質(zhì),從以下四個(gè)方面對(duì)框架進(jìn)行重新構(gòu)思:

刪除——去掉無(wú)用的功能點(diǎn)

組織——根據(jù)類別將這些功能點(diǎn)分解后重新劃分成組

隱藏——突出主焦點(diǎn)的認(rèn)知并隱藏次要信息

抽取——抽取共性,對(duì)比差異性

綜上,即對(duì)框架進(jìn)行簡(jiǎn)化,保證框架可靈活適配具有業(yè)務(wù)共性與特性的組件。 

 

 

 

 

● 重組

簡(jiǎn)化后的框架幾乎可以覆蓋所有必要功能點(diǎn),有很強(qiáng)的適應(yīng)能力和擴(kuò)充能力,可以輕松應(yīng)對(duì)未來(lái)多元化的出行服務(wù)及場(chǎng)景。

 

 

 

 

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

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

 

 

3.2從框架層到表現(xiàn)層——從整體到細(xì)節(jié)的設(shè)計(jì)

● 視覺(jué)嘗試探索

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

 

 

 

 

 組件化設(shè)計(jì)的細(xì)節(jié)打磨

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

 

 

 

 

● 根據(jù)組件構(gòu)建頁(yè)面

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

 

 

 

 

平臺(tái)與業(yè)務(wù)共建的過(guò)程,可以更好的調(diào)動(dòng)業(yè)務(wù)線設(shè)計(jì)師的積極性和參與度,也能從業(yè)務(wù)的角度驗(yàn)證組件的擴(kuò)展能力;“共建”也能更快速的將組件規(guī)范推動(dòng)落地,實(shí)現(xiàn)組件的復(fù)用、協(xié)調(diào)與升級(jí),是快速搭建頁(yè)面、促進(jìn)產(chǎn)品快速迭代的重要因素。

 

 

 

4. 項(xiàng)目反思

表單在 2017年10月19日 隨乘客端 V5.1.16 發(fā)布,我們通過(guò)數(shù)據(jù)分析來(lái)驗(yàn)證表單優(yōu)化的合理性。(以ios為例,分析上線一周后10月25日-10月31日的發(fā)單率和發(fā)單時(shí)長(zhǎng)數(shù)據(jù)) 

 

 

 

 

4.1 體驗(yàn)量化

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

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

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

 

4.2 快速落地

“共建”和“組件化”是促成表單項(xiàng)目在短時(shí)間內(nèi)達(dá)成落地目標(biāo)的關(guān)鍵因素,平臺(tái)與業(yè)務(wù)共建的工作方法也擴(kuò)展運(yùn)用到了更多項(xiàng)目中,是平臺(tái)與業(yè)務(wù)之間迅速確立方案、搭建設(shè)計(jì)規(guī)范、推動(dòng)體驗(yàn)優(yōu)化和迭代的最高效路徑。

 

4.3 設(shè)計(jì)研發(fā)一體化

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

在滴滴的未來(lái),設(shè)計(jì)研發(fā)一體化是可以將代碼實(shí)時(shí)渲染到設(shè)計(jì)軟件中審閱設(shè)計(jì)的生態(tài)系統(tǒng),且并不遙遠(yuǎn)。

 

 

 

『 在路上 』

 

組件化推動(dòng)著設(shè)計(jì)變革,構(gòu)建設(shè)計(jì)研發(fā)一體化是個(gè)無(wú)比艱巨的任務(wù),需要各個(gè)團(tuán)隊(duì)共同努力完成。設(shè)計(jì)研發(fā)一體化會(huì)給整個(gè)產(chǎn)品甚至整個(gè)公司帶來(lái)巨大的價(jià)值。

作為設(shè)計(jì)師,利用設(shè)計(jì)工具化可以幫助我們節(jié)省因重復(fù)設(shè)計(jì)產(chǎn)生的工作時(shí)間,實(shí)現(xiàn)從設(shè)計(jì)支撐到設(shè)計(jì)驅(qū)動(dòng)的價(jià)值轉(zhuǎn)化。讓我們更專注于用戶體驗(yàn)和對(duì)產(chǎn)品的創(chuàng)新,并且把自己帶到更高的視野,經(jīng)過(guò)全鏈路實(shí)踐,提高自身專業(yè)影響力和核心競(jìng)爭(zhēng)力,從而完成設(shè)計(jì)新時(shí)代的進(jìn)階之路。

 

 



轉(zhuǎn)載請(qǐng)注明:優(yōu)波設(shè)計(jì)


掃描二維碼可分享給好友