【🐜 Ant Design 系列 No.1 】初步探索 UI 元件庫🚀，一起進入 UI 宇宙!!🛸
Hi!! 如果您也是 UI 新手，那誠摯地歡迎您閱讀這篇文章，我們將以 Ant Design 元件庫為例，透過設計心法一步步拆解各個 UI 元件 ( Components )，並且尋找哪些網站服務有使用 Ant Design，帶領大家一步步進入由各個元件所構成的 UI 宇宙!!🛸前言
根據原子設計理論（Atomic Design），每一個介面都是由無數的元件 ( Components ) 組成，像一個個原子構成分子一樣，許多文字、顏色和按鈕等元件，經過不同的組合，變化出更多層次和結構，產生無數個介面設計。
目錄：1. 由來
2. UI 元件庫包含哪些內容？
2.1. General 基本元件
2.2. Layout 佈局元件
2.3. Navigation 導航元件
2.4. Data Entry 輸入元件
2.5. Data Display 顯示元件
2.6. Feedback 回饋元件
2.7. Other
3. 淺談 Ant Design
4. 相關案例解析：支付寶
1. 由來
平面設計師有 CIS ( Corporation Identity System ) 企業識別系統做依據，發展出一整套的 VI ( Visual Identity ) ，塑造一體感的品牌視覺。
那 UI 設計師們設計數位產品的時候，有沒有需要遵守的規則呢？有的，答案就是設計系統 ( Design System ) 。
在一間公司或集團中，產品數量不少，功能也相當複雜，背後也有一個龐大的系統。隨著用戶體驗的發展，這些產品介面往往需要頻繁地更新，若有了設計系統，設計師和開發人員就能快速地搭配，因應產品的變遷。
這些產品介面往往也有著類似的元件，若類似的元件能夠有統一的規範，那在設計和開發上，能提升效率。對用戶來說，也能省下不少認知成本，而這就是制定設計準則的開端。
將元件做統一的規範，制定設計準則，也叫設計規範 ( Design Guideline )，組織成一個龐大的資料庫，就像設計指南般，這就是 UI 元件庫的由來。
簡單來說，設計規範 ( Design Guideline ) 解決了介面不一致的狀況，能夠幫助設計師和開發人員，帶來了以下好處：
．提升開發效率
．提升用戶體驗好感度
．專注在解決問題
許多公司都會制定自己的 UI 元件庫，而下面列出幾個目前知名的 UI 元件庫：
． Apple 的 Human Interface Guidelines
．Google 的 Material Design
．Adobe 的 Spectrum
．螞蟻金服的 Ant Design
以下並不會一一介紹每個 UI 元件庫，我們會以此篇文章的主角 Ant Design 為例，在後方的文章中也會說明為何挑選 Ant Design 介紹。
2. UI 元件庫包含哪些內容？
以 Ant Design 為例，UI 元件可區分為以下幾種：
General 基本元件、Layout 佈局元件、Navigation 導航元件、Data Entry 輸入元件、Data Display 顯示元件、Feedback 回饋元件、Other
每一項分類中都包含了不少元件，接下來會按照上面的分類順序由上至下，帶大家一一介紹這些分類中的元件功能。
2.1. General 基本元件
包含 Button 、 Icon 和 Typography ，是三個最基本的元件， Ant Design 不只是分類這些項目，還將程式碼都附上去，開發人員可以直接複製修改使用。
2.2. Layout 佈局元件
包含 Divider 、 Grid 、 Layout 和 Space ，這四項佈局元件是幫助你在介面上規劃版面配置，如上圖所示，有了準則後，就能夠做出一體性的設計。 Ant Design 一樣很貼心地給了程式碼，可以直接使用。
2.3. Navigation 導航元件
包含 Affix 、 Breadcrumb 、 Dropdown 、 Menu 、 Pagination 、 PageHeader 和 Steps 等，導航元件的功能是引導用戶完成任務，以臉書 APP 為例，如上圖，當你有明確要執行的任務時，上方那一排的按鈕會引導你完成目標任務。導航元件這塊， Ant Design 除了附上程式碼，更清楚告訴你不同情況下這些元件該如何呈現。
2.4. Data Entry 輸入元件
包含 AutoComplete 、 Checkbox 、 Cascader 、 DatePicker 、 Form 、 InputNumber 、 Input 、 Mentions 、 Rate 、 Radio 、 Switch 、 Slider 、 Select 、 TreeSelect 、 Transfer 、 TimePicker 、 Upload 等，這些輸入元件的功能是幫助用戶在介面上輸入資訊。如上圖所示，登入 Web 或 APP 時輸入帳密的輸入框。就如同導航元件般， Ant Design 同樣相當明確地列出在不同情況下，這些元件的呈現方式。
2.5. Data Display 顯示元件
包含 Avatar 、 Badge 、 Comment 、 Collapse 、 Carousel 、 Card 、 Calendar 、 Descriptions 、 Empty 、 Image 、 List 、 Popover 、 Statistic 、 Segmented 、 Tree 、 Tooltip 、 Timeline 、 Tag 、 Tabs 、 Table 等，這些顯示元件負責將資訊呈現在介面上，常和基本元件或導航元件搭配呈現。像是上圖的 ADPList 導航列，會在每一個 Icon 上顯示紅色圓形底白字的數字，提示你有未讀取的通知和訊息。如同前者， Ant Design 列出了在不同情況下，這些元件的呈現方式。
2.6. Feedback 回饋元件
包含 Alert 、 Drawer 、 Modal 、 Message 、 Notification 、 Progress 、 Popconfirm 、 Result 、 Spin 、 Skeleton 等，當用戶在執行任務時，有時候需要一些即時的回饋，讓用戶知道剛剛執行的動作是否正確，如同上方圖片所示，在密碼輸入錯誤，或是鍵入字數不對時，會跳出警告訊息通知用戶輸入密碼錯誤，這就是回饋元件的功能，向用戶發出回饋。
2.7. Other
Anchor 、 BackTop 、 ConfigProvider 在 Ant Design 的分類中，不歸屬在前六類裡，分別是錨點、返回頂部和全局化配置。錨點用途是跳轉至指定頁面位置；返回頂部的用途是返回頁面最上方，如上圖所示， Wikipedia 的 Backtop ， 點選即可返回頁面最上 / 下方；全局化配置的用途是讓元件可以統一，這一部分是運用在程式碼裡面。
以上就是 Ant Design 所有分類中元件的介紹，接下來要談談為何選擇 Ant Design 當範例，到底 Ant Design 和其他 UI 元件庫有什麼差別？
3. 淺談 Ant Design
Ant Design 是由中國知名網路公司螞蟻金服 ( Ant Group ) 所開發的 UI 元件庫，至於為什麼挑選 Ant Design 來介紹呢？相信看了前面，一定有發現，Ant Design 除了提供 UI 元件庫，還附上
．可直接修改的程式碼
．貼心地告訴你在不同情況下該怎麼做
．解釋每個設計所代表的意義
相較之下， Apple 的 Human Interface Guidelines 、 Google 的 Material Design 和 Adobe 的 Spectrum 並沒有提供得這麼健全。相較於前三者， Ant Design 兼具實用性，是相當全面的設計指南。
4. 相關案例解析：支付寶
相信大家肯定沒用過，也聽過支付寶。支付寶運用了 Ant Design ，我們就以支付寶網頁版頁面作為範例，一一拆解元件在介面上的呈現與應用。
(1)支付寶安全中心頁面
快速瀏覽過整個安全中心頁面後，我們就來慢慢分析 UI 元件在介面上， Header、Content、Footer 各個區塊的呈現和運用。
首先上方黑色列是 Header ，右邊有一排白字選單，就是導航元件 Menu ，有些選項旁邊有三角形圖標，按下去後會顯示子選項的 Menu 。
接著是橘色列，也是一個 Menu ，在選項 「應急服務 」右上角有一個黃底對話框，寫著「 new 」，那是一個顯示元件 Badge ，標示著新訊息。
底下的方框中，有兩個寫著「 快速掛失 」的橘色矩形，就是基本元件 Button ，而整體版面的 Layout 如下圖所示：
(2)服務大廳頁面
接著再以服務大廳當作範例，拆解看看更多元件的組合應用，首先一樣先來看看支付寶服務大廳的頁面和 Layout ：
在 Header 的區域中可以看見有兩列 Menu ，同樣也有著倒三角圖標，點選後會出現含有子項目的選單。
在 Sider 和 Content 最上方的區域中，可以看見搜索欄位 Search Box ，和右邊的搜索 Button 互相搭配，形成一組輸入元件。
在 Sider 區域中能夠看見一個常見問題分類的選單，這是導航元件 Inline Menu ，其還有內嵌子選單。
在 Content 區域 Search Box 下方能看到一列 「服務大廳 > 轉帳 」 的文字，這是導航元件 Breadcrumb ；在 Breadcrumb 下方有許多可點選的藍色中文字，都是基本元件 Text Button 。
在 Content 區域中看見最大塊面積的是一行行的提問句，這些提問句可以點選，跳轉至其他頁面看解答，均屬基本元件 Text Button ；而在頁面下方可以看見顯示當前頁數的元件，這是導航元件的一種，叫 Pagination ；在 Pagination 旁邊可以看見一個橘色的圖標，就是前面提過的 BackTop 元件，點選後可以回到頁面頂部。
參考資料：
1. Day 01 — 行前說明 — 關於 UI 元件你所該知道的事
