---
# System prepended metadata

title: 概論
tags: [UI/UX]

---

---
title: 概論
tags: UI/UX
---

大綱
===
![](https://i.imgur.com/niRzZGf.png)
UI與UX
===
![](https://i.imgur.com/aW9aX07.png)

* UI的未來會往NUI(自然使用者介面)走 如:聲控

![](https://i.imgur.com/UG8hszC.png)
* UI的範圍是包含UX的

![](https://i.imgur.com/1128hkq.png)

UI設計的目標
---
![](https://i.imgur.com/OA5RI1K.png)
* 打造一致操作介面的好處是符合人的直覺與慣性 降低學習成本

UI設計核心能力
---
![](https://i.imgur.com/xn9324d.png)
* 平面設計師轉UI設計的盲點是無法掌握設計元素的特性

網頁設計規範
---
![](https://i.imgur.com/JN9Pu95.png)
* Material是必看的 第三版比較focus在android系統
* 做icon時 px不可以有小數點 不然圖示會糊掉

開始設計UI之前
---
![](https://i.imgur.com/DmiVUtx.png)

區分服務內容類型
---
![](https://i.imgur.com/6WgQGb5.jpg)

了解UX使用者經驗
---
![](https://i.imgur.com/n8PPXPk.png)

apple滑鼠UX設計
---
![](https://i.imgur.com/8sQctc6.png)

網路服務UX常見問題
---
![](https://i.imgur.com/I0Fi7zd.png)
* 語意化標籤是依照SEO而創的
* SEO影響著google的使用者搜尋體驗

使用者意見先決
---
![](https://i.imgur.com/l140wXG.png)

專家陷阱
---
![](https://i.imgur.com/LV3Jjmn.png)
* 不需要設定太多 因為使用者的面向與專業人士不盡相同

UI/UX職責分工
===
![](https://i.imgur.com/Ej49vP7.png)
* 在國外 UX是使用者研究 是專責的一個分工工作
    但在台灣 UI跟UX是一起的
* UI與UX一起的範例:
    手機使用app 放在下方比較好按 也可設定左右慣用手來設計UI

配置UX團隊
---
![](https://i.imgur.com/rJm4JOW.png)
* PM會分配進度給各人員去處理

誰適合主導UX專案
---
![](https://i.imgur.com/Oqqyipz.png)

設計師的UX任務
---
![](https://i.imgur.com/AnixTcQ.png)

工程師的UX任務
---
![](https://i.imgur.com/hdkyIJc.png)
* 早期工程師不需要了解UX 但現在需要滾動式設計

測試人員的UX任務
---
![](https://i.imgur.com/ymlHx41.png)
* 測試人員比較會接近使用者

產品管理人員與老闆的UX任務
---
![](https://i.imgur.com/v49nvHw.png)
* 如果老闆沒有UX概念 測試的結果會不理想

UX帶來的正面循環
---
![](https://i.imgur.com/SjZOHAZ.png)

跨職權分工打造美好的UI/UX體驗
---
![](https://i.imgur.com/cIZMvC0.png)
* 比較多會是各部門不熟悉對方的業務內容而吵架居多

使用者經驗分層元素
===
![](https://i.imgur.com/R0Chc7D.jpg)
* 提案的工程師是AJAX的工程師

![](https://i.imgur.com/YBaGkzQ.png)
* 一開始(最底層)是比較抽象的理念(網站企畫的報告)
    function map是類似乙級題目那種有條列式的東西
    wireframe是屬於線稿圖
    UI設計範疇是框架層與表現層
* 早期是手稿 現在可以用專門畫wireframe的軟體
* mockup叫做視覺稿 是用wireframe為基礎繪製 
    繪製好給客戶確認 收訂金以後 再開始打code
    如果客戶反悔可以重新報價
* figma可以做出hover的效果 其他繪圖軟體不行

使用者經驗地圖
---
![](https://i.imgur.com/de3PfRk.png)
![](https://i.imgur.com/szVo7y3.png)
* 星巴克的使用者經驗地圖 
    畫一個情緒的分界線 方便判斷需要優化的部分

![](https://i.imgur.com/JOa7nTa.png)
* 樂高的使用者經驗地圖
    因為客戶都會回流 所以是環狀的

製作使用者旅程圖
---
![](https://i.imgur.com/t1L1TuD.png)
![](https://i.imgur.com/sibRTdB.png)
* 拍照app的使用者經驗蒐集的使用者體驗
    將所有優劣列出

![](https://i.imgur.com/nSPqNHi.png)
* 列出行為流程

![](https://i.imgur.com/XOSJltF.png)
* 將優劣點分類 並且分析 列出解決方案
    方便找出需要改善的面向

![](https://i.imgur.com/a5AyUFu.png)

UI/UX設計階段解析
===
![](https://i.imgur.com/sGSEsDs.png)

UX加入專案建置階段
---
![](https://i.imgur.com/YMesxZf.png)

UI/UX階段任務
---
![](https://i.imgur.com/rUHnJlq.png)
* 使用者研究比較偏向是UX 多是企劃或者PM去做

階段一：使用者研究
---
![](https://i.imgur.com/l7kr4It.png)
![](https://i.imgur.com/ggfgzvs.png)
* 人物誌會定義三到四個人 從人物的角度去思考使用產品的感受

![](https://i.imgur.com/dwFhOLN.png)
![](https://i.imgur.com/XqR0uzP.png)
![](https://i.imgur.com/rV5xQ0T.png)

階段二：服務情境設計
---

![](https://i.imgur.com/9jj695b.png)
![](https://i.imgur.com/R4wjRt6.png)
![](https://i.imgur.com/OZQKQmj.png)
![](https://i.imgur.com/VYUXU0w.png)
* 一個好的情境項目會有這五個項目

階段三：介面與互動模擬
---
![](https://i.imgur.com/NKQCJRT.png)
![](https://i.imgur.com/YpUgtvt.png)
![](https://i.imgur.com/OrIk9f5.png)
* 有些公司畫流程圖會亂畫 

![](https://i.imgur.com/0EPJWfT.png)
* 流程圖的各種圖形都是有規範的

![](https://i.imgur.com/8tJ2dj4.png)
* 建議不要用上方的寫法
* 建議以下方的寫法

![](https://i.imgur.com/51vPvyw.png)
![](https://i.imgur.com/Wwt7aDv.png)
![](https://i.imgur.com/IBc2558.png)
* 做一個假網站或是用figma
* 可以使用New project來做

![](https://i.imgur.com/rsY7rmA.png)
* 確認布局時使用
* 如果想要做的更漂亮 建議用figma做

![](https://i.imgur.com/8FBMlO9.png)
* 比較老牌的公司都是photoshop跟illustrator
* 
![](https://i.imgur.com/axVi6uo.png)
![](https://i.imgur.com/nLQZTdT.png)
* 先定義的草圖

![](https://i.imgur.com/t9CFxy4.png)
* 關鍵字也會列在上方

![](https://i.imgur.com/SPtVabf.png)
![](https://i.imgur.com/x7KTVU6.png)
* banner通常都會放當季需要促銷的東西
* 會依照各種網頁類型來做配置

![](https://i.imgur.com/VBgKJxc.png)
* 動線通常上方放主導覽列 左側會放次導覽列
* 相關導覽比較常放曾經瀏覽以及有興趣的商品
* 直接導覽區在台灣比較常用來放置廣告

![](https://i.imgur.com/GLM5nqS.png)
* col=欄
* 通常會分成12col或者16col

![](https://i.imgur.com/A8QD7p2.png)
![](https://i.imgur.com/HHcFkh1.png)
![](https://i.imgur.com/py4XjlA.png)
* 輔助色通常是黑白灰

![](https://i.imgur.com/X5DYvaG.png)
* 留白並不會浪費 行高要留多一點 版面比較好看

![](https://i.imgur.com/iSHGfht.png)
![](https://i.imgur.com/CdVQcj6.png)
* 卡片樣式可以到codepen參考

![](https://i.imgur.com/8AJm7GQ.png)
![](https://i.imgur.com/1KPsTiX.png)
![](https://i.imgur.com/NkQ6IFq.png)
![](https://i.imgur.com/hvbNsBX.png)
* 瀏覽器以無襯線字為主
* 印刷體用襯線字比較好看

![](https://i.imgur.com/3S0Roee.png)
![](https://i.imgur.com/Bq1idjx.png)
![](https://i.imgur.com/W3irU2g.png)
* 可以讓文字的層次感變多

![](https://i.imgur.com/nDr1yct.png)
* 行長col=6比較妥當

十大易用性原則
---
![](https://i.imgur.com/IlITJps.png)
![](https://i.imgur.com/SPEXRR7.png)
![](https://i.imgur.com/RLLGBdE.png)
![](https://i.imgur.com/vrsUzhE.png)
![](https://i.imgur.com/CCV6tiN.png)
![](https://i.imgur.com/Kkp9VYa.png)
介面原型
---
![](https://i.imgur.com/CKHmrmI.png)
![](https://i.imgur.com/6me0jR2.png)
UI設計工具
---
![](https://i.imgur.com/S3QDvxu.png)
填補設計靈感缺口
---
![](https://i.imgur.com/Jn2KQep.png)
設計參考資源
---
![](https://i.imgur.com/aXpWvgf.png)
* awwwards每天會收錄一個優質的網站
* collect UI可以找介面的樣式

免費網頁版型
---
![](https://i.imgur.com/9gaSJyh.png)
* Bootstrap的按鈕如果不喜歡 可以去Cretive-Tim找

階段四：使用者測試導入
---
![](https://i.imgur.com/gm1lDyi.png)
![](https://i.imgur.com/2NmH7ac.png)
![](https://i.imgur.com/JV0o3Xe.png)
![](https://i.imgur.com/2DvrPnW.png)
![](https://i.imgur.com/H7OPEOr.png)
* 先測試再上線 不然使用者體驗會扣分

階段五：服務持續優化
---
* 階段五都是產品上線會遇到的問題

![](https://i.imgur.com/dIbyIkQ.png)
![](https://i.imgur.com/3IwQaLE.png)
* 分流頁面的線上測試

![](https://i.imgur.com/sdKz4vH.png)
* 網頁排版最常做A/B Test
* 通常會用一個實驗組跟一個用對照組

![](https://i.imgur.com/1Mo67DT.png)