這篇文章用來紀錄《UI 設計入門：畫出有程式邏輯的設計稿》中的原子設計章節。
什麼是原子設計(Atomic Design)
萬物皆由原子所組成（概念來自於化學週期表），原子設計將同樣概念套用在介面設計上，藉此以更有系統的方式來建構設計規範。
原子設計分成五個階段：
- 原子（Atoms)：HTML標籤（網頁構成基本元素）
- 分子（Molecules)：原子+原子
- 組織(Organisms)：原子+分子
- 模板（Templates)：原子+分子+組織 (線框稿）
- 頁面(Pages)：套用圖片、段落（設計精稿）
Atoms原子：
原子是網頁構成基本元素，像是按鈕、輸入格的HTML標籤，也可以像是字型、顏色的抽象概念。
原子設計第一階段：從原子設計學習介面的常見元件
1.Button按鈕：通常讓使用者採取行動、做出選擇，在點擊後會立即反饋（像是跳轉到其他頁面）。
－填滿按鈕（馬上註冊）、外框按鈕（加到願望清單）、文字按鈕（了解更多）
按鈕：直角、圓角、切角
按鈕排版：文字垂直置中、文字精簡、保持單行、粗體字重、英文大寫（全大寫或首字大寫）、適度增加文字間距、加上圖標（填滿按鈕）、加上陰影（填滿按鈕）
＊按鈕文字與內間距常使用8px、16px倍數
＊小圓角數值不要超過8px (建議為4px左右）
＊icon到左邊長方形的間距，略小於右邊到文字的間距，為了是覺得修正。
2. States 物件狀態
互動性是介面與平面設計間最大的不同，設計元件用相似的視覺變化來表答目前狀態，藉此讓使用者知道現在操控的階段或目標。
常見的物件狀態：
可見(Enable)：用來傳達此元件可以被互動。
停用(Disable)：元件不能被互動（如：還沒點選商品，就不能結帳）
懸停(Hover)：只有在使用滑鼠的桌機介面才會出現，常用顏色或線條變化表示。
聚焦(Focus)：使用鍵盤瀏覽設備出現，像是無障礙網頁，常用淡藍色光暈為主。
啟用(Activated)：常用標籤或分頁上，具有導航作用。
點擊（Pressed)：常見於按鈕、選單、卡片的元件上。
拖移(Dragged)：介面元件允許被重新拖曳出現，常出現較深陰影。
選取(Selected)：出現在選單或產品列表，可以勾選單一元件。
開啟(on)、關閉(Off) ：非開就是關選項。
錯誤(Error)：常用表班輸入框，常轉變成紅色警告。
3.Input 輸入格
input輸入格可以讓使用者輸入文本內容，像是使用者名稱、密碼、附註等，常用於表單、搜尋、留言等情境。
三種常見輸入格種類：
填滿（Filled text input）
外框（Outlined text input)
底線（Underlined text input)
input輸入格元素：
容器(container)
輸入文字（input text)
標籤文字（label text)
提示文字(placeholder) ：使用者輸入文字就會消失，要搭配標籤文字，讓使用者好做確認。
附屬圖標(trailing icon)
說明文字(Helper text)
輸入格常見狀態：
可用(Enable)
停用(Disable)
聚焦(Focused)
啟用(Activated)
4. Radio Buttons & Checkbox 單選按鈕與複選框
Radio Button和Checkbox是很常被搞混的兩種元素，通常會在選擇選項時出現。
功能分類：
單選按鈕(Radio Button)：多個選項只能選一個。
複選框：Checkbox （同時選取多個選項)
物件狀態：開啟、關閉、停用
5. Links 連結
是網頁間最原始導覽方式，在網頁上非常常見，且被應用在許多地方，是個不需太多裝飾就能讓使用者操作的簡單元件。
連結排版：
(1) 通常是藍色
(2)通常會加入下底線
(3)可以選擇加上圖標
連結狀態：可用(Enable)、懸停(Hover)、點擊(Pressed)、已拜訪(Visited)
6. Icon 圖示
圖示樣式：填滿(Filled)、外框(Outlined)、雙色(Two-Tone)
圖示資源：Material Design Icon Fontawesome
為什麼要使用線上圖示：程式好操控、圖示狀態變化、圖示尺寸變化
圖示排版:輔助文字、簡單明確、樣式一致、避免混淆、 通用圖示
原子設計第二階段：分子
1. Navigation 導覽元件: 導覽的最基本元素是連結，將幾個連結組合之後就能成為導覽元件，是使用者用來瀏覽不同頁面的網頁時，最主要操控的文件。
－－常見的導覽元件：
(1)Navigation Menu選單列 ：通常置頂於每個頁面，為許多網頁的主要導覽元件（品牌logo、主要分頁、功能系統資訊結合）
－Mega Menu 巨型選單 ：大部分的網頁都屬於階層式，需要一層一層地進入，巨型選單將第一、第二、第三層級的頁面標籤拉到最頂層，藉此提升導覽速度（如:NIKE 電商網站常見)
(2) Tab標籤列：標籤常會與選單一起使用，通常作為次要導航。（如：BBC網站紅色的標籤列)
(3)Vertical Navigation垂直選單：用於分頁龐大的網站，有顯示網站結構與作為常駐型導航的特點，在行動裝置時，會轉化成側邊選單(Navigation Drawer)
(4)Breadcrumbs 頁面路徑:顯示網頁層級結構的元件，因為樣式簡單所以不會分散使用者的注意力，也多給了使用者一個橫跨多個層級的方法。（如:adidas）
(5)Pagination分頁條:通常出現於產品通常出現於產品列表或是搜尋結果等大量資料的頁面，也有網站會用瀑布流（Infinite Scrolling)的設計來取代分頁條。
2. Accordions 手風琴/折疊面板
折疊面板通常會用於FAQ等問答區，點擊後可以展開原本收合的資訊，通常會加上圖示來增加被點擊的狀態。
3. Tooltips 提示工具:提示工具是當使用者懸停或聚焦時，出現的文字標籤，通常會顯示幫助使用者倉作的內容，如圖示功能、狀態訊息、引導操作的敘述等。
－Onboarding教學提示：提示工具也常運用在功能教學上，在後台等功能較多的線上平台比較常見，通常還會再加上進度提示與按鈕。
4. Card 卡片:非常常見，將內容包含容器中，區隔不同內容，並將相關的功能群組起來，在使用上非常彈性。
卡片優點：便於瀏覽、整齊排列、版型彈性、功能多元（如：Hahow）
卡片排版：
（1）容器(Container)
（2）選擇性加入元件： 卡片標題(Header Text)、卡片附標(Subhead)、卡片內文(Supporting text)、媒體(Media)、按鈕(Button)、圖示(icon)
5.Modal互動視窗
互動視窗是一個需要使用者執行特定任務、做出決定、或提供訊息的時候會出現的視窗，使用者通常必須操作完之後才能執行其他動作。
互動視窗類型：
1. 彈出視窗(Popups) – 點選登入，會跳出彈出視窗。
2.(觸發區域的)彈出視窗(Popover) – 加入購物車的瀏覽商品。
3.警告視窗(Alert Modal) – 清空垃圾桶。
互動視窗排版:
- 關閉的按鈕和圖示
- 確認和取消的按鈕
- 標題
- 內文
- 輸入格
- 背景遮罩
6. Alert 警告訊息
Alert是一段簡短的文字訊息，常用於操作的結果描述，例如成功或失敗，也可以表達目前的狀態，例如：目前沒有網路連線等。
警告訊息類型： 成功(Success)、錯誤(Error)、警示(Warning)、資訊(Info)
7. Data Table資料表
資料表以行與列的網格狀格式顯示資訊，方便使用者瀏覽，適合大量數據資料使用，也可以新增篩選器、排列順序等方便使用者搜尋。
資料表排版：資料標題、表格替代顏色、互動元件（按鈕、複選框、下拉式選單、分頁條）
8. Form 表單
表單可以讓使用者輸入資訊，常用於登入、回饋、填寫個資等需要提供資料的流程，是蒐集使用者數據的重要元件。
表單組成：輸入格(input)、單選按鈕(Radio Button)、複選框(checkbox）、下拉式選單（Dropdowns)、小提示（Microcopy)、按鈕。
表單排版準則：表單是取得使用者資訊的重要元件，所以讓使用者能順利填完是表單設計的重點。
表單看似簡單，卻有很多細節影響使用者的體驗。
(1) 盡量使用單列設計：
(2) 文字標籤統一置頂：
(3) 英文標籤避免全大寫：
(4)提示文字不能取代標籤
＊浮動式文字標籤
(5)輸入格的長度呼應內容
(6)不隱藏基本幫助文字
(7)區分選填與必填
(8)明確CTA文字
(9)Validation表單驗證
針對提交的資料，進行格式的確認與比對，像是漏填重要欄位、填入的帳號正不正確等，若是格式錯誤，就會跳出錯誤通使用者。
驗證元素：圖示(icon)、 狀態顏色(State Color)、說明文字（Help Text)、提示工具(Tooltips)
9. C.R.A.P. 四個幫助你優化介面的設計準則
C.R.A.P.是從平面設計延伸出來的設計準則，運用介面設計的視覺與動線，達到優化使用者體驗的效果。
對比 (Contrast）：介面上的元件都有其重要程度的高低，如何把這種差異給具體化，就必須依照對比設計，常會透過大小、顏色、形狀方式呈現。
重複（Repetition)：重複是指一致性，像是字型、顏色、排版、間距等的邏輯，重複使用相似的設計能讓使用者更快進入狀況，也能建立介面的整體感。
對齊（Alignment)：對齊的目的是在引導使用者的視覺動線，讓使用者可以順暢的瀏覽並操作介面，使用網格系統是一種最基礎的對齊手法。
相近(Proximity)：
當元件的距離越靠近，就會被認為是同一格群體，可以透過間距大小為功能相關的元件分組，藉此幫助使用者掌握介面的操作。
原子設計第三階段 -（組織＝原子＋分子）
一、頁首(Header)
Header:是使用者亦進到網頁最先看到的區域，通常是靜態或動態的圖像、文字所構成，目的是為了向使用者傳達網頁最重要的內容。
Hero Header(主頁首圖)：將主打產品、服務或核心概念，以首頁的大版面圖像或影片呈現，並在顯眼處搭配網頁標題、連結、或任何可以達成使用者轉換目的的CTA元件。
主頁的首圖元素：
- 標題列
- 媒體（圖片、插畫、影片）
- 網頁標題
- 互動元件（表單、連結、按鈕）
主要首圖如何選擇？
- 明確目的 – 輔助解釋功能、操作流程。
- 情感加乘 －給予心理上的肯定或情感驅動。
- 品牌價值 – 帶來的效益與成果。
如：Airbnb 、Airtable、protoPie、Adobe XD、invision
二、頁尾（Footer）
Footer基本上位於網站所有頁面的底部，通常作為主要內容的輔助，增強使用者的瀏覽體驗，能根據網站內容和目的調整擺放的元件。
頁尾元素：
- 顧客參與(customer engagement) – 品牌logo、訂閱電子報、社群平台連結
- 實用連結(Utility Links)-聯絡資訊、顧客服務資訊（付款資訊、幫助中心)、隱私權政策(privacy policy)、服務條款(terms of use)
- 次要任務連結(Secondary-task links)- 職缺消息、產品規格、媒體資源、投資訊息
- 網站地圖(site map) – (如：CNN網站、apple公司)
門墊式導覽列(doormat navigation):將選單列的導覽連結同時也放置頁尾，當頁面很常或是在頁面底部不能使用選單列時很便利。 （如：kickstarter、Envoy）
eg: Chobani、nike、unipapa、puma
三、運用常見的介面版型排出好設計
常見版型：可以當作發想參考，以下幾欄式設計是以格線系統為主，元件不能對齊在欄間距上。
單欄式設計：使用者最方便瀏覽的版型，只需向下滾動
▼ (如：Medium）
▼ (如：滿版版型，增加吸睛的一些變化）
兩欄式設計：將主要畫面一分為二，兩邊同樣重要的內容。
▼ 圖+文字：非常常見的版型
▼ 性別區分男與女的版型
▼ 彈跳視窗
– 不對稱設計：帶來視覺張力，引導使用者視覺動線。
▼如 ：利用圖片視線，將使用者視線移動到右邊上
▼ 常用於登入、註冊頁
▼ 滿版設計
– 交錯式設計：連續Z字型排版，圖文交錯式排列（也可以使用滿版）
▼ 圖文帶給使用者節奏感
▼滿版設計（緊密交錯排列）
多欄式設計：分三、四個欄位，使用者好吸收理解，適合坐在重點敘述的區間。
▼ 在說明功能、服務的頁面非常常見。
▼表示價格區間的頁面
▼商品分類頁面，左邊常見篩選器。
– 卡片式設計：可以乘載多樣化的資訊，點擊卡片了解細節，適用於內容龐大網站。(airbnbprinterest)
– 雜誌排版 : 模擬現實報章雜誌，透過字體、圖片等元素尺寸，來決定各個內容的重要層級，並引導使用者的視覺動線。（如：WiredBBC)
原子設計第四階段：模板
1. templates 模板：以頁面為基礎的架構，將以上的元素進行排版等同於設計流程的線框稿(wireframe)。
線框稿是什麼？線框稿是產品的建構藍圖，以單純的線條、單色色快去規劃頁面的版型，通常需要團隊一起溝通討論，共同制定產品的技術規格。
線框稿繪製技巧：
(1) 明確目標：繪製線框稿之前，先確定繪製的是什麼主題介面，以單頁式的宣傳網站和電商網站的後台相較，兩者目標和排版是不同的。
(2)在紙上勾勒想法：可以在紙上多嘗試不同排版。
(3)使用適當尺寸的畫布 ：要以什麼尺寸繪製很重要！可以從研究人員得知使用這多用什麼裝置。
（可以透過statcounter去查台灣使用裝置的狀況）
(4) 套用格線系統：快速繪製有邏輯的線框稿。
(5) 套用真實文案 ：lorem Ipsum假字可能和實際文字有落差。
(6)功能導向 ：最主要目的。
(7) 添加注釋：標記註解才能讓團隊成員快速溝通。
(8)尋求回饋 ：討論重點在流程體驗上，而非視覺美感相關議題（應該在精稿討論）
2. 如何做出高轉換的著陸頁（Landing Page）
著陸頁(Landing Page) :通常是使用這進入網站看到的第一個頁面，主要的目的是為了取得轉換率，達成曝光流量或營收目標。
- 單頁式網站(one page) ： 廣告用途為主 ，除了最重要的轉換元件以外，通常不會帶有其他連結，主要是讓使用者專注於該頁面以帶來轉換。
– Hero Header主頁主圖（超重要！）圖片與標題要足夠吸引使用者。
– Why us 功能特點區域：常見會使用三欄式版型來進行介紹，簡單敘述產品有什麼特別的地方，吸引使用者了解更多。
– How it works 操作流程：常用兩欄式交錯版型，z 字型的動線能讓使用者順暢的瀏覽，通常是操作的實際畫面，配上文字描述。
– Social proof 顧客推薦： 真實顧客推薦能夠增加使用者對於產品的信任感，常見是使用單欄式的版型，有時搭配輪播效果（可使用合作夥伴logo)。
– FAQs常見問題：頁面補充說明（常用於群眾募資）
– Pricing 價格方案：三欄式卡片設計為主，方案差異。
– CTA頁面轉換：能讓被說服的使用者馬上點擊，通常為單欄式。
– Footer 頁尾：不一定存在，若有通常為聯絡資訊。
3. 行動版的介面優化：響應式排版（RWD）
RWD(Responsive Web Design) 響應式網頁設計可以讓網站根據不同裝置的螢幕解析度去做適合的介面呈現，減少使用者進行縮放、平移和捲動等操作，達到更好的使用者體驗。
Breakpoint中斷點：是改變排版的解析度寬度，可以通過stateCounter去找出常用的尺寸當作中斷點，建議是選擇手機、平板、桌機三種尺寸做設計。
－常用裝置尺寸：statecounter 2019年台灣三種裝置常用的尺寸
＊桌機 :1920*1080
* 平板:768*1024
* 手機：360*640
－常用框架規範
* Boostrap
響應式網頁的網格
– 固定網格(Fixed Grid) :要到中斷點時才會變更排版(如：pinterest)。
– 流動網格(Fluid Grid) :在裝置縮放時，其文字與圖片的元素會跟著動態縮放，元件寬度通常為比例，而非固定尺寸(如：Behance)。
*在繪圖軟體內，可固定欄寬與欄間距，只調整欄數與欄外間距。
*根據尺寸調整藍墅，以及相對應的欄數。
4. 透過頁面的六種狀態提升使用者體驗
UI stack 頁面狀態：可以被使用者操作的介面就會有狀態的差別，在設計上去規劃這些狀態的頁面後，才能打造一個顧及使用者體驗的好產品。
頁面的六種狀態：
- 理想狀態(Ideal State):最希望使用者看的狀態，最初規劃都是理想狀態。(如：Dribble）
- 空白狀態(Empty State)：不僅是沒有資料的狀態，鼓勵使用者行動的時候，給使用者建議比顯示空白一片的頁面，才不會讓使用者覺得挫折。
- 產生原因 ：第一次使用／使用者清除資料／搜尋不到資訊 （如：airbnb的心願單）
- 錯誤狀態(Error State)：引起錯誤狀態的原因很多，像是網路連線、系統出錯、輸入錯誤資訊，非常容易發生，應該清楚而友善地告訴使用者如何解決問題。
- 局部資料狀態(Partial State)：介於空白狀態和理想狀態之間，像是完成到一半的個人簡介。 這時可以透過一些鼓勵的方式，讓使用者朝著理想前進。
- 載入中狀態(Loading State)：資料還沒有完全呈現在界面之前，使用畫面骨架（Skeleton Screens)的設計，而能讓使用者專注於正在載入的內容，而非讀取的圓圈。（如：youtube）
- 極限狀態(Maximum State):數值／介面應該設定一個最大值，像是標題文字的長度、或是搜尋結果頁的結果筆數等，無止盡的增加只會破壞原先設計的版型。(如: Wired)（標題超過呈現…)
（標題超過呈現…)原子設計第五階段：頁面
1. Pages頁面（設計流程最終階段-精稿）
Mockup（設計精稿）是設計師最主要的工作，負責制定產品標準色、規劃元件樣式、套用實際內容的時候，是產品整體風格的呈現。
＊設計精稿繪製重點：
- 顏色：把整體顏色，加入Adobe XD字體庫，可以一次調整設計稿一次套用這個顏色元件。
- 媒體：包含照片、插畫、影片等等，應用的範圍很廣，最好的狀況是可以全部客製化，如果實在無法取得，也可以使用圖庫資源：如 Unsplash
- 文字
- 元件
＊圖庫圖片挑選要件，如下：
- 主題
- 色調
- 構圖
- 考慮響應式
需要思考圖片是暗色還是亮色，構圖是仰式還是平視。
＊Google Sheets導入真實資料
這個外掛可以透過Google Sheets整理介面需要文字、圖片資料，並一鍵匯入，甚至還能一鍵更新修改後的資料內容。
在彙整資料與協作上非常便利。
＊Character Style文字段落樣式
在線框稿時為了去除字型的干擾會採用單一字型，而到了精稿時，可以依照介面風格進一步規劃文字的樣式，例如：標題與內文用不同字型或調整成不同字重。
＊Components元件庫
元件的樣式同樣也能依照需求調整樣式，像是把按鈕從直角調整成圓腳等，在介面繪圖軟體裡都有專門的功能可以統整規劃。
2. 教你打造最流行的深色模式（Dark Theme）
深色模式近年來非常受歡迎，深色的背景可以減緩眼睛疲勞，以及在OLED螢幕上能夠減緩電池的消耗，在Apple、Google等公司的設計規範也有說明。
*三大重點：
- 背景：深色模式使用深灰色(#121212)而非黑色作為主要背景色。原因是因為深黑色能減輕眼睛負擔，還能夠表現更多狀態，如元件陰影。
- 平面高度：在Material Design裡，介面的元素是層層堆疊的平面，會有ＳＺ軸的高度變化，而越高的平面，在深色模式會越量，是透過白色不同的透明度來疊加呈現。
- 主要色：色彩應用於不同高度的平面時，都能達到至少ＡＡ級對比度標準，因此在深色模式上的色彩，要選擇不飽和的色彩才能有比較清晰的呈現。
Color palettes 調色板
調色板上面的色彩可以依照色階判斷飽和度，數值越小飽和度愈低，也就比較適合作為深色模式的主要色彩，建議使用200左右的顏色，而次要色彩的選擇也是相同蘿雞。
*Error Color錯誤色彩
用於錯誤狀態的顏色，也需要再額外設定，建議可以用原本亮色模式的錯誤色，疊加40%的白色來產生用於深色模式的錯誤色。
*Text文字段落
- 文字標題 100& #FFFFFF
- 高強調文字：87%#FFFFFF
- 中強調文字：60% #FFFFFF
- 停用文字：38% #FFFFFF
