化整為零組件化設計升級思考

化整為零組件化設計升級思考「習以為?！沟奈幢厥亲詈玫?，多一點自己對于方便快捷、創(chuàng)新細節(jié)的思考最近在推動手頭負責的一個C端移動產(chǎn)品的組件化體驗升級，這個產(chǎn)品因為復雜業(yè)務場景和一些歷史遺留問題，許多最基本的組件線上樣式與交互體驗都可以用「慘不忍睹」來形容，而對業(yè)務組件做系統(tǒng)整理和適時重新設計優(yōu)化，也是項目組普遍認可的事情。雖然才起步不久，但也在過程中積累了一些對于組件化設計升級的思考和心得，在此總結一下，歡迎補充。組件化設計在前期有較大的整理、設計與開發(fā)成本，并不是所有房地產(chǎn)項目都適合，在升級換代驅動力組件化設計及升級之前，我們需要對房地產(chǎn)項目現(xiàn)狀有比較清晰的評估和認知。01是否存在多人協(xié)同的情況？如果只是1個設計+1個前端之類的配置，很多細節(jié)體驗問題靠面對面口頭溝通也能解決，但如果項目投資中有班萊班縣多個設計師或多個前端，沒有統(tǒng)一的組件標準規(guī)范的話，就極易造成樣式混亂、重復設計開發(fā)另一類的問題。這時推動組件化設計是有必要的事情。02產(chǎn)品是否進入相對成熟的階段？組件化設計會考慮很多對于的打磨和規(guī)范，對于從0到1的產(chǎn)品，有時候最基礎的投資業(yè)務/用戶價值都還很模糊，迅速驗證上線驗證迭代更加重要，一個60分的MVP可能就夠用了；而渡過這一階段、產(chǎn)品暫未技術形態(tài)又未完全固化的時候，就需要更多對于體驗細節(jié)的注目和打磨，部件化設計時機相對成熟。03線上組件體驗是否影響核心業(yè)務指標？發(fā)起組件化裝配升級之前，線上通常已經(jīng)積累了一部分「能用」的組件，但是組件基礎理論體驗不佳，造成用戶失誤概率大、操作效率低、滿意度低等情況，有些會影響沖擊到核心業(yè)務指標，所以需要升級優(yōu)化。01思考角度更全面如果只是跟著某一個具體業(yè)務場景出方案，我們可能只會考慮組件在當前場景能否滿足切合訴求，而沒有跳出來看全局，后續(xù)核心部件在其他場景里可能有后續(xù)被「濫用」的風險。而在組件化設計過程中，更我們需要有更完整地走查和整理所有已有潛在業(yè)務場景，全鏈路考慮解決方案。以我們最近設計的一個「圖片」組件為例，這個組件在好幾個場景都會被用到。最開始接到的是其中一個場景下的業(yè)務情景需求，用戶用戶可以瀏覽自己之前瀏覽的圖片、定位具體問題在哪，當時處理得比較簡單，就是常見的固定尺寸居中裁剪展示縮略圖。結果后面業(yè)務方把這個組件復用到其他地方，就出現(xiàn)了問題：被復用的是一個圖片審核的場景，用戶可能需要瀏覽業(yè)務給出的若干登入圖片，判斷是否符合要求，而這些圖片可能非常奇葩，可能如果是一張很長的圖片然后頂部有文字，裁剪后文字默認是看不到的，對于「圖中是否有文字」一類問題用戶就可能誤判。在前一故事情節(jié)里我們注重的是瀏覽效率、幫助廣告主快速定位，圖片本身由用戶上傳也不會存在「裁剪誤判」一類問題；而在后一場景里我們注重的是準確率、減少用戶誤判，不能簡單復用前一場景的方案。具體到方案設計第二階段，需要平衡的利空因素也很多，準確率、效率、可用性、美觀度、一致性等，要考慮很多極端場景下的展示效果是否會有問題，制定相應的處理規(guī)則等，這個過程比較累，但有助于我們進行更開展完整全面的思考，產(chǎn)出更能靈活靈活滿足不同場景的方案。02細節(jié)打磨更充分在做業(yè)務需求的時候，因為時間、優(yōu)先級等原因，我們可能更注重整體新體驗的流程體驗的通暢，而不會花太多精力去打磨其中某一小塊的創(chuàng)新動效等細節(jié)。即使做了，在開發(fā)評估優(yōu)先級時也會往后排甚至時候直接砍掉。但如果單獨拎成為一個組件去成優(yōu)化，化的設計交付節(jié)奏一般由設計師自行把控，而不是業(yè)務發(fā)展和業(yè)務需求一樣受制于業(yè)務沃洛韋齊區(qū)，我們也會有更多的時間來進行充分打磨，改投更多人性化思考、微交互創(chuàng)新、動效細節(jié)等，捆綁交付給開發(fā)。03想法落地更容易好的想法無法落地是困擾過很多設計師問題，前述原因我之前的文章也有思考過，除去業(yè)務價值之外，開發(fā)成本也是影響我們將作法說詞變?yōu)楝F(xiàn)實的重要因素。而我近期解決這個弊端的一個嘗試，就是將之前的想法「化整為零」，把原先完整的設計優(yōu)化方案肢解成好幾個組件的組合，然后按優(yōu)先級去推動每種組件的優(yōu)化，直到將所有組件都優(yōu)化完畢。這樣的一個好處是在開發(fā)資源節(jié)奏緊張的時候，可以實實在在地見縫插針推動助推迭代，適用于在已有完整線上方案的基礎上進行體驗優(yōu)化。具體的組件化設計升級流程我總結成了下圖：設計流程婁目典理一塔里定重一間履方桁 ? 方案僮計 ?圻準量化? 效果騙證這一階段主要是整理和歸類線上組件，和利益相關方討論補充（未來會上哪些新業(yè)務，現(xiàn)有的組件能否滿足訴求），配合業(yè)務發(fā)布節(jié)奏，評估具體組件優(yōu)先級和元件迭代計劃。組件整理完畢后，具體優(yōu)先級評估和評估結果投資業(yè)務方一起進行，我們主要從以下幾個維度進行考慮：核心業(yè)務/體驗指標影響面、近期是否有用到組件的新業(yè)務發(fā)布、前端與后端開發(fā)成本。明確優(yōu)先級后錄入到在線協(xié)作工具，將每一個組件建成一個獨立任務，像日常需求那樣，方面隨時更新、抄送和管理追蹤。02場景走查把自己變成產(chǎn)品家電產(chǎn)品的深度用戶，完整體驗走查線上APP,繪制用戶這些行為鏈路，并和業(yè)務方溝通了解后續(xù)計劃，將組件的所有的當前/潛在應用場景總結下來，盡可能不進行披露場景。與此同時，非議也要關注每幾類場景的具體特征，真實數(shù)據(jù)下的展現(xiàn)情況，了解最復雜、格外奇葩的數(shù)據(jù)是怎樣的，在方案設計階段盡可能考慮周全。03問題分析分析線上已有組件控制器的體驗現(xiàn)狀如何，每類場景下解決的核心問題是什么，沒能兼顧時如何取舍。比如前面提到的「圖片」組件，在A場景下運行效率更重要，B場景下防錯判更重要，要解決的核心問題多種不同，產(chǎn)生的方案也會有差異，這些都是在設計具體方案之前需要具體的。有時我們會發(fā)現(xiàn)想解決的結構性問題無法都兼顧到，產(chǎn)生不了最受用的方案，這時就可以對問題優(yōu)先級有個明確判斷，比如優(yōu)先考慮效率持續(xù)提升，美觀可以次要一點，這樣方案設計階段可以在幾種解決方案中作出最合適的決策。完整考慮熟習組件對所有場景的適應，是否人格結構能解決每類場景下所的核心問題，特殊狀況下所如何展示等。在這一階段還有一點我覺得比較重要，就是融入更為多自己對于人性化、創(chuàng)新細節(jié)的思考，而不滿足于沿用各種設計指南里早就用濫了的「通用方案」。比如一個語音播放組件，按照常規(guī)思路就是簡單地做一下播放、暫停幾種狀態(tài)的展示，但如果代入場景更深入乘以地思考一下，比如用戶第二次點擊「播放」時，會不會是因為之前語速太快、沒聽清楚？可不可以在第二次點擊時適當調慢速度幫助用戶聽清？這些細節(jié)可能出現(xiàn)很小、難量化、甚至根本不會被用戶注意到，但卻是我們作為UX設計師應有的態(tài)度。05標準量化對于控制器級的優(yōu)化，我們也需要跟蹤其上線后的具體效果，可以通過定量和定性各一絕大部分部分來看，在發(fā)布之前明確埋點機制。定量各方面我們考慮的是推動業(yè)務建立之前沒有的灰度機制，通過灰度50%對比同一業(yè)務內(nèi)容下組件優(yōu)化前/優(yōu)化后才的關鍵數(shù)據(jù)指標（比如點擊次數(shù)、完成時長等），減弱全量覆蓋機制下因