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

大綱
===
UI與UX
===

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

* UI的範圍是包含UX的


UI設計的目標
---
* 打造一致操作介面的好處是符合人的直覺與慣性 降低學習成本

UI設計核心能力
---
* 平面設計師轉UI設計的盲點是無法掌握設計元素的特性

網頁設計規範
---
* Material是必看的 第三版比較focus在android系統
* 做icon時 px不可以有小數點 不然圖示會糊掉

開始設計UI之前
---

區分服務內容類型
---

了解UX使用者經驗
---

apple滑鼠UX設計
---

網路服務UX常見問題
---
* 語意化標籤是依照SEO而創的
* SEO影響著google的使用者搜尋體驗

使用者意見先決
---

專家陷阱
---
* 不需要設定太多 因為使用者的面向與專業人士不盡相同

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

配置UX團隊
---
* PM會分配進度給各人員去處理

誰適合主導UX專案
---

設計師的UX任務
---

工程師的UX任務
---
* 早期工程師不需要了解UX 但現在需要滾動式設計

測試人員的UX任務
---
* 測試人員比較會接近使用者

產品管理人員與老闆的UX任務
---
* 如果老闆沒有UX概念 測試的結果會不理想

UX帶來的正面循環
---

跨職權分工打造美好的UI/UX體驗
---
* 比較多會是各部門不熟悉對方的業務內容而吵架居多

使用者經驗分層元素
===
* 提案的工程師是AJAX的工程師

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

使用者經驗地圖
---
* 星巴克的使用者經驗地圖
畫一個情緒的分界線 方便判斷需要優化的部分

* 樂高的使用者經驗地圖
因為客戶都會回流 所以是環狀的

製作使用者旅程圖
---
* 拍照app的使用者經驗蒐集的使用者體驗
將所有優劣列出

* 列出行為流程

* 將優劣點分類 並且分析 列出解決方案
方便找出需要改善的面向


UI/UX設計階段解析
===

UX加入專案建置階段
---

UI/UX階段任務
---
* 使用者研究比較偏向是UX 多是企劃或者PM去做

階段一：使用者研究
---
* 人物誌會定義三到四個人 從人物的角度去思考使用產品的感受


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

* 一個好的情境項目會有這五個項目

階段三：介面與互動模擬
---
* 有些公司畫流程圖會亂畫

* 流程圖的各種圖形都是有規範的

* 建議不要用上方的寫法
* 建議以下方的寫法

* 做一個假網站或是用figma
* 可以使用New project來做

* 確認布局時使用
* 如果想要做的更漂亮 建議用figma做

* 比較老牌的公司都是photoshop跟illustrator
*
* 先定義的草圖

* 關鍵字也會列在上方

* banner通常都會放當季需要促銷的東西
* 會依照各種網頁類型來做配置

* 動線通常上方放主導覽列 左側會放次導覽列
* 相關導覽比較常放曾經瀏覽以及有興趣的商品
* 直接導覽區在台灣比較常用來放置廣告

* col=欄
* 通常會分成12col或者16col

* 輔助色通常是黑白灰

* 留白並不會浪費 行高要留多一點 版面比較好看

* 卡片樣式可以到codepen參考

* 瀏覽器以無襯線字為主
* 印刷體用襯線字比較好看

* 可以讓文字的層次感變多

* 行長col=6比較妥當

十大易用性原則
---
介面原型
---
UI設計工具
---
填補設計靈感缺口
---
設計參考資源
---
* awwwards每天會收錄一個優質的網站
* collect UI可以找介面的樣式

免費網頁版型
---
* Bootstrap的按鈕如果不喜歡 可以去Cretive-Tim找

階段四：使用者測試導入
---
* 先測試再上線 不然使用者體驗會扣分

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

* 分流頁面的線上測試

* 網頁排版最常做A/B Test
* 通常會用一個實驗組跟一個用對照組