設計一套 UI 元件庫

我從自己是 junior 時代一直對於自己手刻元件極其熱衷，最早刻過輪播、下拉選單、輸入框等。隨著時間前進，後來我又做彈窗相關系列的元件，以及各式工具。

製作通用元件的哲學相當多，很多 UI 元件的小巧思更是不容易，這是經年累月開發經驗累積後堆疊的。在現在滿街 UI 套件的年代，誰又去細膩了解每一個元件背後被製作出來的智慧呢？評估一個元件的設計方式也同時能評斷開發者的經驗值，大至各種元件 API 接口，小至互動體驗和動畫變化。

以設計師角度來說，如何設計出好的 design pattern & design token 就是一個難關，通用設計和專用設計的難度不是在同一個層級，要考慮各種組合搭配的應用情境。

關於基本的顏色系統是單一色調支援？還是亮暗雙色？還是複雜的色票風格切換？

多國語言文字的排列組合在同一個元件上設計差異很大，過長時可能延展的改變，過少也不會扁掉，這也是需要細節調整的。

再來就是互動體驗的優化，有時不能單單只考慮直接的體驗，還有關於無障礙的鍵盤互動與標籤語意上的設置，對於role的定義和交互細節的定義都很重要。特別是鍵盤常常是被忽略的東西，但照顧鍵盤用戶也是很重要的事。

而程式面設計部分，初期規劃就有很多要決策，包含採用的 CSS 解決方案、專案架構上的編排、基礎提供的方法與基底元件等等。更深層的設計包含到對於各種前端生態的支援與處理。

再來是元件的製作優先次序，什麼樣算是高階元件？什麼樣的元件是基礎元件？元件可以基於哪些元件當作基礎去延展？

還有 API 接口，對應框架生態圈中，大家偏好看到什麼樣的接口，去符合該生態設計的直覺與做法。

其實每一個環節能提的超級多，以後再慢慢一個個說好了。最近開始想從頭設計元件，多年的開發經驗累積下來有很多想嘗試的東西，不知道大家有在製作元件上踩過什麼坑嗎？