本篇不討論該用什麼 UI 框架，而是將我在開發元件中發現的現象以及考量的重點紀錄下來，或許能給剛開始練習設計通用元件的你一個參考。

元件設計的常態現象

在設計元件的過程中，每個元件的誕生都緊密地響應著特定的、反覆出現的情境需求。這種針對性的設計讓元件在不同的階級和規模下展現出某種共同特徵，而這些特徵會是一個光譜。正如人格特質中的內向與外向之分。

我會將元件切分呈以下幾種不同規模組成一個元件金字塔以利於我闡述。

        / \
       /App\
      /-----\
     /  page \
    /---------\
   / page comp \
  /-------------\
 /   component   \
/-----------------\

彈性 ~ 易用性

        / \          ^ 易於使用
       /App\         |
      /-----\        |
     /  page \       |
    /---------\      |
   / page comp \     |
  /-------------\    |
 /   component   \   |
/-----------------\  | 高彈性

越底層的元件通常重用性最高，也因此在設計上更傾向高彈性，讓使用的人有修改的餘地，避免只有一小部份樣式不同而無法適用必須重新做一個的狀況。而隨著功能越多結構越複雜，我們的目標就要慢慢轉向易於使用，慢慢的限縮參數數量，只留關鍵的部份。

目標明確 ~ 目標抽象

        / \          ^ 目標抽象
       /App\         |
      /-----\        |
     /  page \       |
    /---------\      |
   / page comp \     |
  /-------------\    |
 /   component   \   |
/-----------------\  | 目標明確

一個 App 匯集了整個專案的功能，因此其目標相對較為廣泛和抽象，單個頁面（page）由若干個功能組件組成。page component 則為特定業務邏輯的實現。而一個 component 目標明確且單一，多數不與業務邏輯直接掛勾。

當你把上方的特徵顛倒過來，然後以這為目標下去開發，會發現非常的彆扭，甚至有些東西組不起來，因此我才認為以上這兩種特徵會是我們開發元件的常態現象且想要達到的理想目標。一旦發現你的元件似乎不是這麼好用，你可以利用這兩個指標去檢視你的元件是否站在光譜中適當的位置，抑或是根本搞錯了該元件的定位。

元件三大核心元素

撇除功能的部分，來談談元件 UI 部分如何影響複雜度，一個元件是由結構、形狀、顏色三個核心概念組建出來的，元件變化的也是圍繞在三核心上面，而在製作一個元件的過程會是 定義結構 → 改變形狀 → 填上顏色。

結構

結構，是我們製作一個元件第一個考量的事，沒有結構後續的都不用談。一個元件有多複雜，結構佔了很大一部分，且最困難且最花時間的都會是結構的改動調整。在提供使用者作結構變化的選擇上過於彈性會使元件變得非常繁雜及混亂。而在做結構變化的程式上盡量保持結構的整體性，避免對一個結構的每個小部分作個別切換，這樣不只難以修改且不易理解。

個別針對每個區域做更改

const Component = () => {
  // ...

  return (
    <div>
      {isLayoutA ? (
        <div></div>
      ) : (
        <div>
          <p></p>
        </div>
      )}

      <div>
        {isLayoutA ? (
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        ) : (
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        )}
      </div>
    </div>
  );
};

保持結構整體性

const Component = () => {
  // ...

  if (isLayoutA) {
    return (
      <div>
        <div></div>

        <div>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    );
  }

  return (
    <div>
      <div>
        <p></p>
      </div>

      <div>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </div>
    </div>
  );
};

形狀

元素的伸縮及圓角等都能稱作形狀的改變，而改變形狀可能會影響部分排版甚至造成結構破壞，所以在設計上會以不影響結構破壞為前提，或是提供能夠讓使用者限縮其變動範圍的參數。

顏色

顏色相較於前面兩者，對元件的破壞較小，所以會追求一個高度彈性。但什麼時候要跟隨主題色，什麼又跟主題色無關而個別填上色碼會是主要考量重點，這會影響日後設計系統改變主題顏色時會有部份遺漏的問題。

結論

我認為開發一個元件，目的是最重要的，目的能讓元件有個明確的分界線，什麼是這元件該做的，什麼是它不應該做的，每次為你的元件新增/改變功能都先問「這是它應該做的嘛？」，一旦發現偏離了原本元件的目的，就應該重新尋找是否有不改變元件的前提下達成你要的效果的方法，或是重新思考該元件目標。