單位
- 解析度 px(device pixel)
- 是抽象長度單位
- 在不同螢幕上每個像素點大小都不同
- 螢幕密度 ppi、dpi
- 圖像 ppi 值越高=畫面的細節越豐富
- 300ppi = retina = 人眼無法分辨出像素點 = 視網膜螢幕
- dpi 是印刷用
- 163dpi = 1x = 3G
- 326dpi = 2x = 6/7
- 401dpi = 3x = 6plus
ios
- ios 單位：pt
- 1x = 1pt = 1px
- 2x = 1pt = 2px
- 3x = 1pt = 3px
- 使用字體：
- 中文： pingFang SC（蘋方體）
- 英文：
- 20pt 以上：SF UI display
- 19pt 以下：SF UI Text
- 基本元件：
- 可觸控元件：44x44pt
- 非觸控元件：30x30pt
- 狀態欄位高度：44pt
- 導航欄位高度：44pt
android
- android 單位：
- 文字：sp
- 圖片、間距：dp
- 使用字體：
- 中文： Source Han Sans/Noto（思源黑體）
- 英文： Roboto
- 基本元件：
- 可觸控元件：48x48dp
- 頭像：40x40dp
- 元件內圖標：24x24dp
- 9 patch（九宮格）技術來顯示由 NicePatch 圖片提供的背景以適應不同的設備和螢幕大小
什麼是 UI、UX？
- UX=User(使用者)+Experience(體驗)
- 是使用體驗所有總和，包括 UI、情緒、認知、生理反應
- 產品形象(設計師)
- 問題回覆時間(客服人員)
- 頁面讀取速度(工程師)
- 產品經理(新功能規劃)
- UI=User(使用者)+Interface(介面)
- UI 是和特定『使用者』互動，平面設計面向『大眾』
- 透過視覺手段，讓使用者感受產品
- 使用者-介面-產品
- 螢幕觸控：手機、車機、平板
- 語音系統：Google Home
- 實體按鈕：遙控器、洗衣機、販賣機、電鍋
UCD 設計思維流程
- 了解使用情境
- 定義使用者需求
- 設計解決方案
- 評估設計成果
判斷產品體驗的七大指標
- 可用的(有幫助的)
- 有用的(減少錯誤)
- 令人嚮往的(配色、文案、視覺勾引力)
- 易到達的(顧及到不同(弱勢)族群、使用更直覺)
- 有信用的(安全感)
- 可發現的
- 有價值的(綜合以上 6 點)
UX 需要具備的五大元素
- 使用者需求與產品目標(了解用戶需求，提供什麼樣的服務)
- 功能規格與需求定義(提供什麼功能、願景)
- 資訊架構與互動設計(定義產品使用流程、架構)
- UI 設計與內容設計(互動設計、資訊層級)
- 視覺設計與美感(配色、視覺感受)
設計思考流程
- 同理用戶(探索問題、找出使用者的痛點、做問卷訪談)
- 定義問題(假設問題)
- 發想創意(團隊討論、頭腦風暴、工作坊)
- 製作原型(製作範本使用來得到反饋)
- 測試(重新修改討問、解決問題)
通用設計原則
- 減少裝飾性元素、複雜度
- 資訊重點讓文案明確易懂
- 多留一點呼吸空間、留白拿捏
- 視覺一致性、使用有限的顏色和字型
- 遵循通用設計規範內容一致性、標準化
- 增加文字和背景按鈕顏色對比度
- 了解設計是給誰
- 注意手指觸控範圍、按鈕大小
- 簡化表單
- 使用熟悉佈局、介面，減少熟悉時間
- 按鈕要是可以點擊狀態
- 使用者控制權、操控自由度
前期設計工具
- 線框稿(wireframe)
- 用最少的視覺元素呈現
- 讓團隊了解排列位置、功能結構
- 不必添加內容
- 介面流程圖(UI flow)
- 文字任務流程或視覺頁面流程
- 誰是使用者
- 他們的目標是什麼
- 怎樣到達目標
- 使用者旅程地圖