# Material Design 質感設計

## 介紹

### 目的
* 創造一種視覺語言，建立規範
* 統一使用者的體驗

### 隱喻 (模擬實體質感)
* 使用熟悉的觸覺特性：有助用戶快速了解其中暗示
* 存在空間、交互作用：以照明顯示接縫、劃分空間、移動部件

### 作用
* 大規模排版、刻意留白、大膽圖形：讓用戶專注於使用者體驗
* 動畫：有意義的、適當的：有助集中注意力、保持連續性

## 環境

### 3D
* 3D空間：含x、y和z維度
* z軸與畫面的平面呈垂直
* 每個元素在z軸上佔據一個位置，且標準必為1dp厚度

### 光源/陰影
* 2個光源投射：創造一致的，柔和的陰影
1. Shadow cast by key light
2. Shadow cast by ambient light
3. Combined shadow from key and ambient lights

## 特性

### 厚度
* 統一厚度（1dp）
* 厚度不可為0
* 內容不會增加元素厚度

### 物理特性
* 寬高無限制
* 陰影是因為元素間在z軸上的不同~~厚度~~高度而產生
* 輸入事件不會穿透元素
* 元素彼此不能佔據空間同一點

### 變形
* 元素可以改變形狀、縮放
* 元素不可彎曲、對折
* 元素可以互相結合、分裂

### 動作
* 可自發性在任何地方產生或消失
* 可以沿著任何軸線移動
* z軸(高度)移動是典型的互動效果

## 空間

### 高度
* 高度與x、y軸使用相同單位
* 單位：density independent pixels (dps)
* 靜止高度：若物件改變高度，應儘快回到原靜止高度
* 不同平台中可以有不同的靜止高度，取決於該環境的深度 (電視>桌電>手機)
* 物件高度決定其陰影視覺呈現
1. 沒有陰影：表示元素是與背景表面互相分離的另一個表面
2. 俐落陰影：表示元素非常靠近背景表面
3. 柔和陰影：表示元素離背景表面處於更高的高度
* 高度增加時，陰影變得更柔和更大；高度減少時，陰影變得更俐落更小
* 一致的陰影幫助用戶了解這個物件只是改變形狀而沒有改變高度

### 關係
* 物件可以獨立於彼此來移動
* 物件行動可以被限制或依賴於所在的容器 (parents)

## 動畫
> 不只是增加美麗的效果，更建立了空間關係、功能顯示、系統意向的意義

### 質量/重量
* 移動來自外力，若有質量物體不會突然地移動或停止
* 瞬間移動、停止、轉向看起來不符合自然規則，需保留其物理感受
* 可加速、減速，不可線性移動
* 物體進退場時，確保以最高速度進入退出(從容進場和緩速退場會讓使用者的注意力過度集中在動畫效果)

## 互動
> 程式會對使用者的輸入操作進行回饋，且極其盼望使用者的輸入
> 視覺和動畫效果的提示，彌補了使用者與裝置溝通的鴻溝
> 使用者的輸入點建立強烈視覺連結，可以讓使用者更清楚知道他所做的動作
* 觸控，聲音，滑鼠和鍵盤是首要的輸入方式
1. 觸控或點選，物體可往上移動，表示是啟用狀態
2. 表象層呈現像墨水渲染般的效果，暗喻墨水的使用，墨水是覆蓋在紙上的動態展示表象
3. 物體從觸控點出現，視覺上可感受物體與觸控點是繫結在一起的

## 有意義
> 避免造成使用者困惑，失於元件A變換到元件B的過程

### 連續性
* 助使用者了解現在專注位置
* 漸變動畫包含三種元件：進入的元件/離開的元件/共用的元件
* 需思考：
1. 注意力如何被引導？
2. 如何安排強調或弱化？
3. 透過顏色或共用元件，創造視覺關聯性
4. 動畫漸變過程清晰流暢
5. 避免直接切換畫面(突兀感)

### 時間差
* 漸層動線引導使用者的注意力

### 一致性
* 規劃良好動線有助使用者學習使用方式

> 避免線性空間路徑
> 避免有衝突或重疊的路徑
> 套用一致動畫以強化各元件的空間關係
> 避免使用無連續性或無順序性的動線

### 細節
1. 知會使用者
2. 應用程式充滿驚奇與高超技巧

## 風格
> 使用意想不到的鮮豔色彩

### 色票
* 基本色：從基本色開始填滿色譜，建立一個完整的色票
* 強調色：使用Google建議500色作為基本色，其他顏色則作為強調色

### 顏色運用
* 基本色調侷限三種以內
* 次要色票中則選擇一種強調色(可有可無) - 用於主要操作按鈕及元件上，如開關或滑桿
* 灰階文字(#000/#FFF)：100%、87%、54%、26%、12%

### 主題
* 一致性的風格：品牌識別

## 排版

### 字體
* 拉丁字體：Roboto (Thin、Light、Regular、Medium、Bold、Black)
* 中文字體：Noto (Thin、Light、DemiLight、Regular、Medium、Bold、Black)
* 順序： Roboto、Noto、sans-serif
* 尺寸：12、14、16、20、34
* 粗細：Google 建議避免使用 Bold
* 長度：文字過長(>60)很難讓人快速領會哪邊是開頭結尾；文字太短(<40)眼睛必須時常來回閱讀， 打斷閱讀的良好韻律

## 圖示
> 簡單、大膽、友好，
* 設計方法：由材料的觸覺和物理質量作為啟發，圖標都被切斷、折疊，並模擬紙張

## 圖片
* 不要讓使用者尋思圖像中要表達的意思
* 具有最強力傳達能力的圖像，包含了少量地具有意義的元素和最少的使人分心的元素
* 一個可以說故事的影像：傳遞訊息

## 佈局
> 源自現實世界中的印刷設計，保留頁面的基線以及網格結構

### 紙藝
* 工具列：導航功能(收合選單、向上箭頭)顯示於左側，內容操作功能顯示在右側

## 結構

### 手機
1. 總是存在的應用程式列
2. 浮動操作按鈕
3. 底部按鈕來附加額外的功能
4. 側欄選單可以覆蓋其他的元素

### 平板
1. 浮動操作按鈕
2. 底部按鈕來附加額外的功能
3. 側欄選單可以覆蓋其他的元素
4. 右方的導覽可以暫時或是永久固定的呈現

### 桌面
1. 浮動操作按鈕
2. 工具欄(繼承平板和手機的底部元素)。
3. 功能鍵可以被併入工具欄
4. 側邊的導覽可以暫時或是永久固定的呈現
5. 側邊選單可以有第二個工具欄，顯示標籤、樣式、次級操作

## 底部工作表
* 列表樣式/網格樣式
* 螢幕底部邊緣向上滑動的動畫
* 呼叫工作表原先的畫面將變暗淡。輕擊變暗的區域將關閉工作表
* 工作表是可滾動捲軸方式，滾動時將拉起工作表容器，最終覆蓋全螢幕

## 按鈕
1. 浮動式的按鈕：圓形/墨水散開/升降效果
2. 凸起式的按鈕：典型/墨水散開/升降效果
3. 扁平式的按鈕：一般/墨水散開/無升降
* 對話框上使用主要的油墨式的按鈕以防止太多層次
* 內嵌式按鈕務必保留足夠的位置擺放
* 永久性且容易使用者操作，首先考慮浮動式按鈕。如果需要容易的操作，使用永久性頁尾按鈕

## 卡片
> 卡片通常是前往更複雜以及詳細資料的一個進入點
> 有一個特定的寬度以及可變的高度
* 卡片適合在快速閱覽的列表：表達同值性的內容
* 卡片提供上下文、進入點以取得健全的資訊、呈現
* 主要內容的位置通常在卡片頂部：使用層次結構引導使用者的注意獲取卡片裡重要資訊
* 溢出菜單（可選）通常被放置在卡片的右上角
* 禁止放置更複雜及資料細節在上面
* 卡片集只能垂直滾動，被截斷的內容可以擴展
* 卡片集可以透過編寫程式做排序(篩選日期、檔案大小、字母排序等)

## 對話框
> 告知使用者緊急的訊息
> 分散的過程中包裝成多個任務
> 中斷性突然顯示/停止使用者當前的任務/需要關注對話框裏的內容
* 內文/特定的任務或程序/確認項目的刪除/選擇一種設定
* 對話框總是保持明顯的關注
* 包含了一個標題、內文、及互動元件

### 警告
* 警告：通知使用者繼續前進之前確認狀況的行為
* 警告：干擾性質與緊急迫切，高風險的情況下使用
* 警告不包含標題欄位

### 簡易選單
> 簡易選單優於簡易對話框，因為簡易選單對於目前使用者的畫面破壞性較少
* 簡易選單選擇後會立即提交選擇

### 簡易對話框
* 選擇一個選項將立即被提交並且關閉選單
* 點擊對話框的外部，或是倒退、取消將會關閉對話框
* 簡易對話框比簡易選單更具有干擾性，應該謹慎使用
* 顯示在屏幕的垂直及水平中央

### 確認對話框
* 點擊"OK"這個選擇才會被提交
* 點擊外部將不會有任何動作；使用者必須確認或是取消以關閉確認對話框
* 明確的確認按鈕及取消按鈕

## 分隔器
> 單獨的間距是不夠分隔區塊，全滿分隔器能夠幫助建立韻律、個別分隔區塊
1. 全滿分隔線：分隔章節或不同類型的列表
2. 插入分隔線：圖示或標題上的主要線路
3. 副標題分隔線：分隔線放在副標題的上方以強調副標題與內容之間關係

## 網格
> 適合同性質的檔案，有效提昇使用者視覺上閱讀
> 棋盤狀的連續元素
1. 資料框(Cells)：垂直水平排列格內
2. 資料塊(Tiles)：儲存內容，可在內部再劃分單個或多個資料框(Cells)
3. 列表(Lists)：便於閱讀，特別在比較包含多種型態資料時
4. 區塊(Cards): 當內容與格式不一致的時候使用，不同類型混在一起的內容
* 垂直滾動，水平滾動不符合一般人閱讀方式
* 不允許資料塊滑動、整塊幅浮起來

## 清單
> 將多個項目垂直排列，顯示成單一且連續的元素，「列」所構成
* 同性質資料或集合型資料
* 如果清單的磁磚裡的文字超過三行則應使用「卡片」
* 利用階層，加強內容可讀性
* 大部分面積用來執行主要動作
* 輔助動作應放置於磁磚的右側

## 清單控制器
* 透過拖拉改變清單項目的順序
* 透過垂直的收合，顯示或隱藏清單中的項目
* 沿著特定方向對清單項目滑動時可叫出象徵指令的圖示
* 不必要額外的圖像化

## 菜單
* 菜單不應該被用作頁面導航上的主要功能
* 應用程式上當前狀態應該被禁止
* 不放與當前上下文無關的內容，或雖相關但需滿足特定條件
* 動作為禁止時不是將它們移除，要讓使用者知道必須適當的情況下被禁止的動作才能啟用
* 不要將第下層菜單項目置於列表項目上
* 不要重複顯示已選取的元素
* 簡單菜單不論點擊地點在何處都置左

## 進度

### 指標類型
> 完成操作的百分比：確定的指標讓使用者知道操作所需時間
> 不定性的指標呈現：不需要暴露背後端作業，多久完成
* 線性：線性進度指示應該總是 0% 至 100% 的進度百分比
* 環形
* 整合環形：搭配圖示或是一個重新整理的圖式
* 一階段載入/兩階段載入

## 滑軌
* 連續性滑軌
* 可編輯的數字
* 不連續滑軌

## Snackbars/Toasts
> 出現在行動裝置螢幕底部，或桌上型電腦螢幕左下方的小型彈出式視窗中。他們位在所有螢幕元素(包括浮動式動作按鈕)之上
* 足以容納一行字串的高度即可
* 位於螢幕所有元素之上，因此不應該持續出現而產生堆疊情形
* 當兩個以上動作時，即便其中有解除的動作，應使用對話方塊而非snackbar

## 開關
* 三種類型的開關：核取方塊、選項按鈕、切換開關
* 核取方塊可以讓使用者從一組選項中進行多選
* 選項按鈕可以讓使用者從一組選項中進行單選
* 如果只一個「開/關」選項，請避免使用核取方塊，應使用切換開關

## 頁籤
* 用一橫列來表示，不可巢狀
* 不要縮減文字，不要改變標籤大小，不要使用二行文字，否則改用滑動式頁籤
* 固定式頁籤
* 滑動式頁籤

## 文字輸入框
* 搭配捲軸的單行輸入框
* 單行與多行輸入框
* 含字元數的單行輸入框
* 含字元數的多行輸入框
* 含字元數的全寬輸入框
* 自動輸入文字輸入框：供建議或者完整文字

## 工具提示
* 互動式/圖像優先式

## 資料格式
> 保持一致性與友善性方式顯示日期與時間的資訊

## 錯誤
> 完成預期結果時失敗的情況
1. 應用程式無法理解用戶所輸入：文字欄位輸入、不符合值、表單不完整
2. 系統或應用程式失敗：一般錯誤
3. 用戶企圖同時運行不符合的操作：同步加載錯誤／失敗、連線狀態

## 手勢
> 分為觸控手法Touch Mechanics (指頭在螢幕上所做) 和 觸控行動 Touch Activities (使用者界面上特定手勢).

### 觸控手法 Touch Mechanics
* 點擊、雙重點擊(2指頭)、曳拉、揮過、丟擲、長按、雙重點擊+拉開、雙重點擊+收合、旋轉

### 觸控行動Touch Activities
* 輕敲、取消或跳出、增加／拿掉、曳拉、揮過、丟擲、資料選擇、滾動

## 抽出式導覽面板
* 讓圖示對齊的垂直關鍵線位於從左側以及導覽面板的右側
* 點擊漣漪：也變成強調效果來更加凸顯選取狀態
* 抽出式導覽面板可以捲動
* 設定與支援位於捲動列表的底部

## 捲動方式
* 彈性空間: 用來容納具有理想的長寬比例的圖片或延伸的應用程式列的空間

## 浮起式指令鈕
* 浮起式指令鈕必須是應用程式裡的主要動作
* 他是畫面上最突出的按鈕，只使用一個
* 不要重疊到，不要放在側面搖曳處
* 不要讓浮起式鈕變形為不相干或令人感到困惑的工具列

## 搜尋
> 搜尋有兩個主要的模式：持續式搜尋與可擴展式搜尋
* 持續式搜尋：搜尋為主要功能
* 可擴展式搜尋：搜尋非主要功能(放大鏡icon)

## 親和性(無障礙)

### 導覽
* 先呈現最重要的資訊
* 觸碰標的至少要有48x48 pixel的面積
* 支援無滑鼠(鍵盤)與標準手勢(行動)導覽
* 關注焦點不會因彈跳視窗、警告訊息或多螢幕而分心

### 可讀性
* 確保套用大型字體時仍可使用
* 關鍵文字與背景有良好( 4.5：1 )的對比
* 確保即使無法辨認顏色也能接收到一樣訊息 (形狀、圖案、紋路、文字)

### 導引與回饋
* 命名前後規則的一致性
* 圖片、影片設置替代文字，標簽需符合語義(完整性)
* 適時提供指示與協助
* 賦予連結正確的命名、意義

## 雙向性
> 可以轉換成由右向左（RTL）、由左向右（LTR）書寫及閱讀的語言體制

# Atomic Design 原子設計
> 一套邏輯清楚、步驟明確的設計方法學，可以看到成品完成的階段性成果
> 具有一致性與可擴充性，對元素進行不同的「排列組合」

> [color=#86990c]優點
> Consistency 一致性：使用者經驗相同，在視覺上更為和諧。
> Efficiency 效率：建立Pattern Library元件庫，可以馬上施行、應用。
> Collaboration 跨部門的共通語言：方便設計師、工程師、品質檢驗思考頁面的和諧性

> [color=#b2c932]缺點
先入為主的架構，可能會跳脫不了系統性的方法，而喪失了創意發想的機會

## 源由
* 「原子習慣」、「原子設計」就是從化學延伸出來
* 目的是要讓設計「使用者介面(UI)」能夠結構化
* 為設計訂定邏輯與結構

## 過往
* 以往設計系統強調顏色(color)、排版(typography)、格線(grids)、組織(texture)
* 最後的成品總較偏向設計師的主觀經驗

## 元素週期表
* 化學中最小的元素是原子(Atom)
* 原子與原子結合會形成分子(Molecules)
* 分子又能組合成有機體(Organisms)
* (UI)也是由各種小元件組成(components)，如同堆積木

### 原子 (Atoms)
> 介面上最基礎的積木
> 階層中最基礎、最根本的組成元素
* HTML標籤
* 調色盤(color palettes)
* 字體(fonts)
* 動畫(animations)

### 分子 (Molecules)
> 設計系統的基礎
* ex. Label + Input + Button = “Search” Molecules

### 有機物 (Organisms)
* 有機物容許小積木模塊自由組裝
* 介面上是相對獨立的區塊，例如導覽列(Navigation Section)
* ex. Logo + 主要導覽列 + 搜尋欄位 + 社群連結 = 導覽列(Navigation Section)
* ex. 產品標題 + 產品圖片 + 搜尋欄位 + 社群連結 = 產品區塊(product grid)

### 模板 (Templates)
* 模板由有機體組合而成
* Wireframe(線框圖)即屬於Template(模板)

### 頁面 (Pages)
* 將模板(Templates)進一步美化

## 常見的UI原子

### 按鈕(Buttons)
* 填滿 (Contained button)
* 外框 (Outlined button)
* 文字 (Text button)
* 如果內容是英文需要大寫
* 內間距(padding)通常都是4px,8px倍數，且高：寬 = 1 : 2
* icon和文字的間距通常是8的倍數，且間距小於ICON和邊框的間距

### 狀態(States)
* Enable：表示可互動
* Disable：表示不可互動，通常使用灰色或透明度降到20%
* Hover：表示此元件可以互動，可用顏色變化、加深陰影來表示
* Focused：表示強調物件，通常用光暈來表示
* Activated：通常出現在Navigation bar，有導航的作用
* Pressed：表示按壓，視覺回饋通常用光暈來表示
* Dragged：表示拖移，通常用灰色來代表
* Selected：表示選擇，通常用Checkbox來表示
* On/Off：表示開/關
* Error：表示錯誤，通常用紅色框與驚嘆號表示

### 輸入格(Input)
* 填滿 (Contained text input)
* 外框 (Outlined text input)
* 底線 (Underlined text input)

### 單選框、複選框 (Radio & Checkbox)

### 連結(Links)
* 網頁最原始的導覽方式

### 圖標(Icon)
* 填滿 (Filled)
* 外框 (Outlined)
* 雙色 (Two-Tone)
* 遵循原則：含輔助文字、簡單明確、能傳達意象、樣式一致

### 文字(Text)
* Headline
* Title
* Subtitle
* Body
* Body small
* 倍數關係(rem)較好維護

### 色彩(Color)
* UI會有2種顏色：主要色與次要色
* 次要色又稱強調色
* A (最簡易)：對比度在3以上
* AA (建議達到)：對比度在4.5以上
* AAA (最嚴格)：對比度在7以上

## 設計過程 Design Process
1. 理解商業目的 Understand business goals
2. 瞭解設計限制 Know limitations
3. 分解介面 Decompose the interface：UI元素、功能/資訊重要程度排序
4. 進行設計

## 設計產出 Final Design
1. 網頁設計 Web Design
2. 使用情境 User Scenarios
3. 行動裝置 Mobile Screens
4. 素材庫 Pattern Library
5. 模板 Templates