你的產品 UI Kit 了嗎？

Step 1 該怎麼開始

延續上期「UI Kit 是甚麼？」，在對 UI Kit 有初步的認識後，第一個疑問是，該怎麼開始？叡揚資訊的前端設計團隊在一開始都沒有這方面的經驗，但在 2016 總統大選期間，發現候選人官網運用 UIKit 的設計，讓人耳目一新，也從其中體認到 UI Kit 的趨勢與在介面設計上的作用。

使用 UI Kit 不僅能呈現風格一致性、應用延續性、程式管理面，同時也讓開發者跟設計者有更具統合性的工作環境。對於一般大眾來說，除提升使用好感度，也呈現了更好的設計美學。

Step 2 先做做看吧

▲參考資料並確認做法

「先做做看吧！」是團隊一開始的想法。很幸運的是，網路上已有許多開發完整的案例可以提供參考，加上團隊先前在寫程式時，已有套用 Bootstrap、kendo UI 等的經驗，所以對此並不完全陌生。在程式跟設計雙方的配合下，團隊在初期便確定要同時兼顧視覺與程式的開發。

在搜集資料、比較分析的過程中，團隊漸漸了解一套 UI Kit 一般具備的內容，而原始碼公開的程式資源也讓我們清楚得了解如何規劃寫法。從一開始到現在，團隊在所有相關的製作會議中，皆反覆調整與驗證這些部分，貫徹讓設計跟程式相輔相成的概念，並將成果反應到產品上。

▲從基礎的元件著手

凡事起頭難，尤其是從零到有的階段。一開始，程式跟 UI 設計先分兩頭進行，前端工程師先規劃出內容網站的框架，讓工程與設計都可先理解工作分配及未來呈現的樣子，設計則可先從比較通用的小元件著手，包含色彩規劃、按鈕、輸入框、表格、選單等。

一開始設計方向以辦公型的軟體系統為主，希望凸顯內容，並以較簡練、單純、素雅的風格為主。顏色搭配上則規劃了輔助色色系，以達一致性外，同時也作為介面設計上可搭配應用的色彩分佈範本。

而公司原本的產品系統， 如Official Document, Payroll，整體色感較重，風格偏深色系，雖有助凸顯內容，但在參考了國外的 UI 設計範例後，我們近期從Formdoc 的 UI 設計開始，嘗試讓整體系統的量感走向輕盈，在色彩上調整為偏明亮、淺色系的感覺，並以此定調整體色系的彩度與亮度風格。

Step 3 大膽嘗試，勇敢執行

▲實際應用在公司產品上

「沒有實際應用的 UI Kit，始終只是一個樣式表，如同企業識別系統沒有企業作為對象，那識別系統只是推敲或練習。」此時碰巧遇到Official document 的 Speed 這項產品的 UI 介面需更新，團隊便決定將 UI Kit 實際運用在上面。

實作後面臨的最大挑戰便是龐雜的功能與介面，這讓開發中的 UI Kit 常跟著調整。例如Speed 的第一個需求──側邊欄位的下拉樹狀結構。團隊最後用不同的深淺顏色做提示，取代線條或單純的縮排方式呈現下拉的樹狀層級，在視覺上塑造如同一層層往裡開啟的感覺。

在頁面選單上，除側邊主選單，頁面裡還有至多三層的選單樣式。我們的原則是區隔清楚層級，視覺及空間以不影響主要資訊為主，以此我們設計出最上方如 Pill style 藥丸式的按鈕樣式，以圓弧造型吸引使用者目光。同時我們為了不讓這造型成為整個頁面的焦點，更降低了位於背景層的顏色彩度跟亮度。而在下方的卡片區塊內的選單，則採用 tab 形式按鈕，讓使用者清楚知道切換上方按鈕可連動下方卡片；卡片內則可用上方 tab 按鈕切換，去更改卡片裡的內容區塊。在 tab 選單層上，我們採用顯眼的漸層色做背景以增加畫面的活力，沒選到的 tab 部分則用半透明效果呈現；這種不同於一般的樣式，是我們希望營造的有趣小亮點。

接著我們以漸進式的開發與套用順序，從選單到頁面層級的架構再到內容 grid 去做設計。grid 樣式統一以內容為主，用色素雅大方，顏色使用上也都有各自的意義1與內容分類的用途。其中，Speed 的公文分類在 grid 樣式上對我們來說是另一個挑戰。公文種類多，在表格中需明顯區隔，考量到單色不易一眼區分，花俏色則會讓整體顯得凌亂，我們在設計上盡量讓樣式統一，並以純粹的 icon 圖或單一文字的方式，區分項目相對應的配色。

▲三方的磨合

由於先前公司產品無套用 UI Kit 的經驗，團隊裡的設計師、前端跟產品後端在配合上需要大量的討論跟嘗試，尤其是在同時開發與應用的階段，我們透過這些溝通互動，讓 UIKit 更成熟。

站在設計者的立場，需要 UI Kit 的想法很簡單，除讓設計內容不用重工，且能以整體介面需求去考量每次的設計，讓設計出的成果全適用；過程中也能吸收不同角色的作業需求，在彼此的體諒與配合下，有效提升溝通效率。

▲特殊情境的運用與解決方式

當 UI Kit 開發到一個段落，在實際產品套用上累積一些經驗後，我們發現，最困難的不是樣式的套用，而是在特殊情境時的概念與解決方式。以往在處理上，可能工程面交給工程師，設計面交給設計師，各自完成後再結合在一起，現在運用 UI Kit 時，它反而成為居中協調的角色，結合不同面向的團隊成員們的專業，共同累積經驗與成長。在內部使用上，未來我們希望在Vital UI Kit 開發成熟後可以成為產品介面的有效解決方案，讓有需要的產品可以自主運用並達到好的成果。

Step 4 回到使用者身上

最後檢視成果時，我們還是要回到使用者身上。在 UI 的設計過程中，我們體驗到介面設計的宗旨應是要讓功能好用，並能把事情順利完成，這對使用者來說才是最重要的。

美好來自於停留越少的時間在這些介面的操作上面。「把時間留給真實的生活。」像這樣的減法設計，同時也將會是未來我們持續努力的方向。

¹ 可參考83 期論壇「UI Kit 是甚麼？」顏色之於UI Kit 的重要性。