工作經(jīng)驗(yàn)|設(shè)計(jì)組件的更新和優(yōu)化,需要哪些流程?
編輯導(dǎo)語(yǔ):設(shè)計(jì)組件的更新與優(yōu)化,需要哪些流程呢?本文作者將優(yōu)化流程大致歸納為搜集、探究、設(shè)計(jì)、開(kāi)發(fā)、發(fā)布這五個(gè)流程,并作出了詳細(xì)分析,一起來(lái)看一下吧。
有很多讀者想要了解關(guān)于組件更新和優(yōu)化的工作流程和經(jīng)驗(yàn),我最近就經(jīng)常會(huì)收到如下讀者和粉絲的提問(wèn):
- 組件的更新需要怎樣的工作流程呢?
- 組件在更新與維護(hù)的過(guò)程中,設(shè)計(jì)與前端要如何配合呢?
- 組件設(shè)計(jì)師和其他設(shè)計(jì)師的工作有什么區(qū)別呢?
其實(shí)組件庫(kù)的建設(shè)和優(yōu)化工作其實(shí)并沒(méi)有絕對(duì)的標(biāo)準(zhǔn),只有適合自己團(tuán)隊(duì)的工作流程,才是真正有效和實(shí)用的。具體到每一個(gè)組件的更新優(yōu)化,我的經(jīng)驗(yàn)是:從「發(fā)現(xiàn)組件的存在的問(wèn)題」到「將組件進(jìn)行更新和修復(fù)」,優(yōu)化流程大致會(huì)被歸納成五個(gè)步驟:
- 搜集組件問(wèn)題及優(yōu)化需求
- 探究分析組件的優(yōu)化方案
- 設(shè)計(jì)優(yōu)化方案并進(jìn)行評(píng)審
- 開(kāi)發(fā)方案完成并進(jìn)行驗(yàn)收
- 發(fā)布上線并同步組件更新
01 搜集組件問(wèn)題及優(yōu)化需求
如果你希望你的組件庫(kù)可以與時(shí)俱進(jìn)、賦能業(yè)務(wù),定期搜集組件問(wèn)題和設(shè)計(jì)師們的使用反饋就很有必要。通常組件問(wèn)題和需求可能來(lái)源于:
- 設(shè)計(jì)師 / 開(kāi)發(fā)在使用組件做業(yè)務(wù)時(shí)發(fā)現(xiàn)的組件問(wèn)題
- 設(shè)計(jì)師 / 開(kāi)發(fā)發(fā)現(xiàn)其他優(yōu)秀的組件庫(kù)案例中有值得借鑒之處
- 設(shè)計(jì)師在使用組件的過(guò)程中覺(jué)得不方便、不易用
- 產(chǎn)品的用戶反饋某些功能或局部模塊在使用時(shí)體驗(yàn)不好等等
收集和整理問(wèn)題需要一張需求列表。你可以通過(guò)需求類型、完成狀態(tài)、負(fù)責(zé)人等方面對(duì)需求進(jìn)行描述。同時(shí)你也需要對(duì)需求定義優(yōu)先級(jí),確定排期和完成時(shí)間。下圖為需求列表的基礎(chǔ)示例:
- 參與人員:使用組件的設(shè)計(jì)師和前端開(kāi)發(fā)
- 所用時(shí)間:不定期反饋和收集
- 所用工具:公共的開(kāi)放文檔或看板(比如語(yǔ)雀文檔、數(shù)據(jù)表、討論區(qū)等)對(duì)收集需求會(huì)有一定幫助,可以使其他設(shè)計(jì)師在做設(shè)計(jì)的過(guò)程中,遇到組件問(wèn)題就自發(fā)填寫(xiě)需求列表,實(shí)時(shí)共享。組件負(fù)責(zé)人將需求歸類整理、做好排期即可
Tips
1)群策群力,用制度約束行為
收集組件問(wèn)題需要使用組件的所有設(shè)計(jì)師群策群力,但是設(shè)計(jì)師遇到問(wèn)題忙著做需求來(lái)不及記錄是常有的事情。因此必要時(shí)可以采用簡(jiǎn)單的制度來(lái)做約束,比如每個(gè)設(shè)計(jì)師每月必須提交 1-2 個(gè)組件設(shè)計(jì)優(yōu)化想法,或者每季度評(píng)審「組件問(wèn)題查缺補(bǔ)漏」一二三名,給予精神或物質(zhì)獎(jiǎng)勵(lì)。
2)評(píng)估需求,不是所有需求都值得優(yōu)化
你需要判斷這些需求的真?zhèn)魏洼p重緩急。并不是所有的組件設(shè)計(jì)需求都需要被立即優(yōu)化,區(qū)分優(yōu)先級(jí)和做好排期很重要。你可以參考以下內(nèi)容對(duì)需求進(jìn)行綜合評(píng)估:
- 設(shè)計(jì)和開(kāi)發(fā)當(dāng)前可用資源
- 設(shè)計(jì)優(yōu)化內(nèi)容難易程度
- 組件在業(yè)務(wù)中出現(xiàn)的頻率
- 業(yè)務(wù)需求的緊急程度
- 組件的通用程度和擴(kuò)展性等
3)指定到人,每個(gè)需求進(jìn)度易追查
如果組件設(shè)計(jì)小組人數(shù)充足,組件負(fù)責(zé)人也可以安排指定的組件設(shè)計(jì)師來(lái)完成對(duì)應(yīng)需求,因此需要指定到專人,并在表單中有體現(xiàn),便于聯(lián)系和實(shí)時(shí)溝通。
02 探究分析組件的優(yōu)化方案
這需要對(duì)你上一步搜集到的問(wèn)題和需求進(jìn)行分析和研究。對(duì)于業(yè)務(wù)組件的研究,我的建議是:一定要帶入到業(yè)務(wù)場(chǎng)景進(jìn)行考慮。
你可以通過(guò)兩個(gè)方面來(lái)做組件分析和研究:
- 競(jìng)品中類似的業(yè)務(wù)場(chǎng)景:收集和分析同類產(chǎn)品或類似功能場(chǎng)景下的實(shí)際應(yīng)用案例。已經(jīng)成熟的產(chǎn)品會(huì)更有說(shuō)服力,也更值得被參考。
- 其他組件庫(kù)的解決方案:收集和分析其他優(yōu)秀設(shè)計(jì)系統(tǒng) / 組件庫(kù)中的同款組件案例,熟知的如 Ant Design、Material Design、Lightening Design、Carbon Design、SAP Fiori Design 等等。
當(dāng)然你也需要綜合應(yīng)用一切可行的設(shè)計(jì)方法和工具,通過(guò)學(xué)習(xí)競(jìng)品、研讀文章、與有經(jīng)驗(yàn)的設(shè)計(jì)師交流討論(也歡迎向我提問(wèn)和討論)、做 AB Test 等方法,研究合理的解決方案。
- 參與人員:指定的組件設(shè)計(jì)師
- 所用時(shí)間:2-3 天
- 所用工具:公共的開(kāi)放文檔或設(shè)計(jì)文檔
03 設(shè)計(jì)優(yōu)化方案并進(jìn)行評(píng)審
當(dāng)設(shè)計(jì)師根據(jù)上一步的研究分析,產(chǎn)出優(yōu)化后的組件設(shè)計(jì)稿,就可以組織或邀請(qǐng)團(tuán)隊(duì)中其他設(shè)計(jì)師(尤其是組件問(wèn)題的提出者)和開(kāi)發(fā)對(duì)組件設(shè)計(jì)方案進(jìn)行檢驗(yàn)和評(píng)審。
評(píng)審?fù)ㄟ^(guò)后,進(jìn)入組件的代碼開(kāi)發(fā)階段;評(píng)審不通過(guò),收集意見(jiàn)再進(jìn)行修改、更新和二次評(píng)審。
- 參與人員:組件設(shè)計(jì)師、使用組件的設(shè)計(jì)師和前端開(kāi)發(fā)
- 所用時(shí)間:2-3 天
- 所用工具:公共的開(kāi)放文檔或設(shè)計(jì)文檔、線上或線下會(huì)議
Tips
1)有理有據(jù),分析過(guò)程要保留
「組件優(yōu)化的評(píng)審」比「業(yè)務(wù)需求設(shè)計(jì)評(píng)審」更加注重設(shè)計(jì)分析依據(jù)。因?yàn)榻M件評(píng)審人以設(shè)計(jì)師為主,而業(yè)務(wù)需求的評(píng)審人以業(yè)務(wù)和產(chǎn)品為主。設(shè)計(jì)師們之間的交流更需要有充分的證據(jù)和思考流程。
2)建立標(biāo)準(zhǔn),評(píng)估更快捷
你可以根據(jù)組件庫(kù)的設(shè)計(jì)原則,建立組件設(shè)計(jì)的評(píng)審標(biāo)準(zhǔn),根據(jù)標(biāo)準(zhǔn)和原則來(lái)進(jìn)行設(shè)計(jì)評(píng)審,可以有效避免不必要的爭(zhēng)論。
3)業(yè)務(wù)先行,先完成業(yè)務(wù)需求
有時(shí)組件設(shè)計(jì)和業(yè)務(wù)設(shè)計(jì)是同時(shí)進(jìn)行的,任何時(shí)候都要遵守「業(yè)務(wù)先行」的規(guī)則。組件設(shè)計(jì)師可以先配合業(yè)務(wù)設(shè)計(jì)師,完成當(dāng)前業(yè)務(wù)的需求,之后再將組件進(jìn)行通用性沉淀。業(yè)務(wù)應(yīng)用也是對(duì)組件最好的檢驗(yàn)場(chǎng)景。
04 開(kāi)發(fā)方案完成并進(jìn)行驗(yàn)收
這一步由開(kāi)發(fā)將組件的優(yōu)化方案落實(shí)到代碼,完成組件。開(kāi)發(fā)完成后,需由組件設(shè)計(jì)師進(jìn)行走查。完成的內(nèi)容和質(zhì)量反饋可以補(bǔ)充到上文所提到的「組件優(yōu)化需求列表」中,易于追查。
- 參與人員:組件設(shè)計(jì)師、前端開(kāi)發(fā)
- 所用時(shí)間:2-3 天
- 所用工具:公共的開(kāi)放文檔、開(kāi)發(fā)稿、線上或線下會(huì)議
05 發(fā)布上線并同步組件更新
組件的上新「發(fā)布」包括幾件事情:
一是將組件庫(kù)的設(shè)計(jì)Toolkits和線上開(kāi)發(fā)使用庫(kù)進(jìn)行更新;
二是補(bǔ)充和編寫(xiě)組件更新后的使用規(guī)范;
三是團(tuán)隊(duì)的更新事項(xiàng)同步,要做到所有成員的使用版本保持最新和統(tǒng)一。
- 參與人員:組件設(shè)計(jì)師、使用組件的設(shè)計(jì)師和前端開(kāi)發(fā)
- 所用時(shí)間:1-2 天
- 所用工具:公共的開(kāi)放文檔、線上及線下組件庫(kù)、線上或線下會(huì)議
Tips
1)規(guī)則簡(jiǎn)潔,好記才好用
關(guān)于組件的使用規(guī)則,我們?cè)?jīng)在文章:如何讓「設(shè)計(jì)規(guī)范」被有效執(zhí)行和落地?一文中做出過(guò)詳細(xì)的講解,設(shè)計(jì)規(guī)范的內(nèi)容表達(dá)方式要「接地氣」,拒絕「假大空」,好記才好用。
2)定期同步,有規(guī)律、可預(yù)期
有規(guī)律地同步組件優(yōu)化進(jìn)度。可以以周會(huì)的形式,將本周更新的組件內(nèi)容同步給團(tuán)隊(duì)中的所有成員;或者以月報(bào)的形式,每月通過(guò)郵件發(fā)布組件工作和優(yōu)化進(jìn)度,以達(dá)到全員知曉。
3)重在穩(wěn)定,避免頻繁更新
組件庫(kù)的更新和迭代的時(shí)間不宜過(guò)于頻繁,小的修改和優(yōu)化,比如組件的局部細(xì)節(jié)調(diào)整、次要顏色的色號(hào)更新等可以以周 / 月為單位進(jìn)行統(tǒng)一迭代;大的優(yōu)化和升級(jí),比如設(shè)計(jì)風(fēng)格更新導(dǎo)致的主題色、圓角、交互形式的優(yōu)化則推薦以年為單位進(jìn)行更新。
作者:元堯,微信公眾號(hào):長(zhǎng)弓小子
本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
作者總結(jié)的設(shè)計(jì)組件的更新和優(yōu)化的流程很詳細(xì)全面,學(xué)習(xí)到了。