如何在產(chǎn)品現(xiàn)有的設(shè)計(jì)系統(tǒng)基礎(chǔ)上重塑UI組件設(shè)計(jì)？

設(shè)計(jì)系統(tǒng)在使用過程中，會不斷有新的UI組件會以組件納入標(biāo)準(zhǔn)被納入組件庫，隨著時間的推移，組件庫會越來龐大、復(fù)雜、和冗長，再加上一些執(zhí)行不到位的情況，導(dǎo)致下游可用性問題。本文討論如何為現(xiàn)有設(shè)計(jì)系統(tǒng)重塑UI組件設(shè)計(jì)。

第 1 步：審核組件在您的產(chǎn)品平臺上的當(dāng)前使用情況
為了最好地了解新設(shè)計(jì)的UI組件可以為未來項(xiàng)目提供的潛在價值，請確定它在以前項(xiàng)目中的位置。探索您當(dāng)前的應(yīng)用程序或平臺，以最好地了解它所處的特定環(huán)境。

第 2 步：確定設(shè)計(jì)痛點(diǎn)和系統(tǒng)可用性屬性
寫下您在使用此UI組件時遇到的所有不同痛點(diǎn)及其所有改進(jìn)領(lǐng)域。再過渡到與在之前項(xiàng)目中使用過該組件的設(shè)計(jì)團(tuán)隊(duì)成員的內(nèi)部調(diào)研訪談。從內(nèi)部研究中，將能夠更多地了解其使用背后的原因，并確認(rèn)組織內(nèi)眾多不同團(tuán)隊(duì)的現(xiàn)有痛點(diǎn)或發(fā)現(xiàn)新痛點(diǎn)。
1、有限步數(shù)
由于其父容器大小有限，組件的邊界大小不允許大量步數(shù)。
2、大小不一致
目前，步驟指示器組件面臨著使用帶來的挑戰(zhàn)，特別是大小調(diào)整。隨著用戶逐步完成檢查標(biāo)記的添加和字體粗細(xì)的變化，條形圖的寬度會增加，因此很難使用固定的父容器。
3、輔助功能
尚未完成的步驟的視覺語言對于有視覺障礙的用戶來說可能難以閱讀。
4、無法定制
目前，標(biāo)準(zhǔn)是在已完成的步進(jìn)器組件中為流程的每個階段使用復(fù)選標(biāo)記圖標(biāo)。允許靈活地為不同的步驟添加不同的圖標(biāo)可能有助于視覺設(shè)計(jì)。
5、分界線不清晰
邊距和間距似乎在較窄的一端。增加這可能會允許更高的對比度和更容易區(qū)分階段。

第 3 步：概述理想組件的關(guān)鍵功能方面
分析您收集的數(shù)據(jù)并寫下您希望新組件體現(xiàn)的原則列表。為可以進(jìn)行哪些改進(jìn)創(chuàng)建一個愿景將有助于專注于修復(fù)當(dāng)前組件的弱點(diǎn)。 您可以在下面找到我為我的步進(jìn)器組件編寫的理想原則的示例：
1、對比度
 采用最低對比度標(biāo)準(zhǔn)以與 W3 (AA) 保持一致，對比度為 4.5:1。這是檢查元素對比度的有用工具：https ://webaim.org/resources/contrastchecker/ 。此外，關(guān)于對比度指南的有用資源：https ://www.w3.org/TR/WCAG/#contrast-minimum 。

2、字符/單詞
限制每個步驟都應(yīng)包含特定的字符或單詞限制，以確保降低措辭中視覺平衡不一致的風(fēng)險。

3、考慮長步數(shù)
即使在步數(shù)很大的情況下，用戶也應(yīng)該有一種優(yōu)化和引導(dǎo)步驟的方法。

4、“可點(diǎn)擊”
為了讓用戶可以輕松地在前面的步驟之間進(jìn)行操作，應(yīng)該明確步進(jìn)器組件的步驟允許此功能 - 使其明顯可以點(diǎn)擊步驟本身。

5、垂直版本（計(jì)劃用于未來工作）
當(dāng)用戶必須完成可能具有大量步數(shù)且水平空間可能不可用的任務(wù)時，使用垂直版本的步進(jìn)器可能會有所幫助。

第 4 步：審核當(dāng)前設(shè)計(jì)系統(tǒng)中的現(xiàn)有組件
審核視察所有現(xiàn)在的組件庫和模版庫。

第 5 步：迭代、原型和測試
除了你自己早期草圖的想法外，還探索了從你的競爭性審計(jì)中獲得靈感的無數(shù)選擇。將它們?nèi)糠旁趨f(xié)作原型屏幕上，以便您能夠與團(tuán)隊(duì)的其他成員共享它們以收集評論。根據(jù)反饋，確定 4-5 個方向的選擇。您將在外部用戶測試中評估備選方案。
還可能有助于為組件的其他狀態(tài)開發(fā)早期概念，以幫助進(jìn)一步可視化設(shè)計(jì)。

選擇特定設(shè)計(jì)后，通過定義您想要測試的用戶體驗(yàn)原則（即可發(fā)現(xiàn)性、理解性等），專注于您的用戶研究目標(biāo)。為了節(jié)省時間，我在UserTesting.com上對遠(yuǎn)程、未經(jīng)審核的用戶進(jìn)行了任務(wù)分析。我了解并非所有設(shè)計(jì)團(tuán)隊(duì)都有預(yù)算和資源來使用第三方服務(wù)；您還可以在公司內(nèi)部進(jìn)行內(nèi)部測試或招募外部參與者來收集這些數(shù)據(jù)。

發(fā)現(xiàn)：
此頁面上有哪些吸引您眼球的元素？
你認(rèn)為用戶試圖在這個屏幕上完成什么？
你怎么會知道這事？
你覺得你接下來會做什么？
你怎么會知道這事？

理解：
既然您已經(jīng)在這個頁面上下文中看到了這個元素，您怎么看它？
你認(rèn)為這意味著什么？
按照 1-7 的等級給我評分（1 表示最不清晰，7 表示最清晰）。
您期望從該組件獲得哪些懸停交互？ 
如果你有一根魔杖可以改變這個組件的任何東西，你會改變什么（如果有的話）？

第 6 步：通過“征求意見”(RFC) 收集反饋
您現(xiàn)在已經(jīng)完成了一些使用組件庫用戶的測試，但是您應(yīng)該與您的同行確認(rèn)您到目前為止所做的設(shè)計(jì)決策。您的團(tuán)隊(duì)將在他們的項(xiàng)目中廣泛使用該組件，反過來，用戶最終將成為受到嚴(yán)重影響的人，因?yàn)樗麄儗⑴c該組件進(jìn)行最多的交互。

通過與不同部門同事的交談，這可以為您提供有關(guān)視覺和交互設(shè)計(jì)的額外反饋，還可以讓設(shè)計(jì)團(tuán)隊(duì)中的其他人有機(jī)會表達(dá)他們對項(xiàng)目進(jìn)展的想法。

第 7 步：為所有可能的狀態(tài)定義設(shè)計(jì)指南
確保您的設(shè)計(jì)師了解UI組件所有不同狀態(tài)的顏色、填充和邊距測量以及交互行為。將您的組件放在示例頁面上下文中也有助于設(shè)想如何使用它。

第 8 步（可選）：添加動畫以通過微交互增強(qiáng)用戶體驗(yàn)
為了增強(qiáng)UI組件的設(shè)計(jì)，動畫可能是一個很好的補(bǔ)充，可以增強(qiáng)微交互元素并為組件增添光彩。 

第 9 步：創(chuàng)建草圖標(biāo)記符號。
與您的設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)中的某個人合作，建立您需要創(chuàng)建為交接文件的不同狀態(tài)。然后，將其交給負(fù)責(zé)開發(fā)您重新設(shè)計(jì)的組件的團(tuán)隊(duì)。完全構(gòu)建組件后，與您的團(tuán)隊(duì)共享它并包含指南以提醒您的同事適當(dāng)?shù)氖褂眯袨椤?br/>
展望未來，將組件文件包含在共享空間中或?qū)⑵涮砑拥侥脑O(shè)計(jì)系統(tǒng)庫中，以便其他人可以快速找到它可能會有所幫助。如果您的公司沒有專門的設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)，這可能是您重溫編碼技能以自行開發(fā)組件的好時機(jī)。

最后，別忘記UX用戶體驗(yàn)度量，通過比較老設(shè)計(jì)系統(tǒng)和新設(shè)計(jì)系統(tǒng)，包括組件樣式，得出比對和測試數(shù)據(jù)，以此來驗(yàn)證你的付出和努力是值得的，這點(diǎn)很重要，對于接下來的在企業(yè)內(nèi)部大規(guī)模推廣你的設(shè)計(jì)系統(tǒng)起到一定背書的作用。