UI 的組成順序:原子 → 分子 → 組織 → 模板 → 頁面。
在上一篇已經把 UI 元件做了分類,再來就要依據 UI 的組成順序組裝起來,我們選擇最常被使用的頁面,UI 元件較齊全的頁面來進行組裝/佈局。
以查詢頁面為例,我們需要的 UI 元件有:
是 UI 的最小單位,在這個頁面我們會用到:
按鈕(一般按鈕、icon 按鈕、Radio Button、Checkbox、Link) |
---|
輸入框(Input) |
下拉選單( Select) |
圖標(Icon) |
文字(Typography) |
色彩(Color) |
是由原子所組合而成的 UI 元件,例如:Label + input = 一個表單元件。 這裡我們會組合以下分子:
Label Input | Modal | Button Line | Title |
---|---|---|---|
Popup | Breadcrumbs | Pagination |
比分子更大更複雜的 UI 元件,是由一個一個分子組合而成,例如:表單的組成會有:Modal、Title、Label、Button Line。我們要建構的組織有:
Form | Tabs | Table | Calendar Picker |
---|
像拼圖一樣,照著我們想要的頁面佈局,把組織一個一個拼起來,形成獨立且完整的 UI 元件,這個獨立且完整的 UI 元件,可在不同的頁面有不同的布局(例如:A頁面有放,B頁面沒有放),都不會影響它的狀態或互動機制。我們的模板有:
Header | Menu Tree | Dashboard |
---|
完整呈現頁面的佈局樣式,包括在不同裝置上的可視性也要設計進去,在頁面階段尤其注重格線系統的規劃,若考量不週全,則會使RWD失敗而破版。
Template | Grid System | RWD |
---|
接下來我們就要開始針對每一個元件做設計定義:Color、Typography、Spacing、Icon、Button、input、Select⋯⋯,設計定義做好了,才能進行以上的組合,進而完成一個完整的頁面,才能做交付文件。挑戰尚未成功,捧油們繼續努力,加油啊!(這是說給我聽的 QQ)