
0人評分過此書
打造成功UI/UX 的50 個關鍵:用魔鬼的細節創造極致使用者體驗
第一線工作者的實踐應用法則實用UI/UX設計法則的必讀書!你 一定有想過,同樣是數位服務,為什麼有些就是能夠深得你心呢?不論是網站、APP、甚至是今日的物聯網系統,一款能夠感動人心的數位服務,其實都花了不少 心思,因為除了介面的美學設計之外,使用者的操作經驗也需要不斷改善,換句話說,唯有同時擅用UI與UX技巧的整合,才可達到「感動人心的極致設計」目 標,這也是本書想要分享的內容。內容主要收錄本土案例,將內容依難易度分為50個單元,由淺入深解說「基礎知識」及「UI/UX設計技巧」。本書非常適合剛從事網頁設計師工作及想提升網頁設計知識的人閱讀。
【本書特色】★內容由淺入深:以星級區分內容難度,可讓你漸進式學習。★涵蓋綜整知識:本書是少數同時整合了設計、心理學、程式知識的書籍,而這些正是打造美好 UI/UX 的必備技能。★切合市場趨勢:本書同時選錄Web/APP的各類案例,讓你不錯過各類數位服務的趨勢。
【本書特色】★內容由淺入深:以星級區分內容難度,可讓你漸進式學習。★涵蓋綜整知識:本書是少數同時整合了設計、心理學、程式知識的書籍,而這些正是打造美好 UI/UX 的必備技能。★切合市場趨勢:本書同時選錄Web/APP的各類案例,讓你不錯過各類數位服務的趨勢。
-
Part 01 基本UI/UX概念與流程介紹
-
Unit 01 淺談UI 與UX
-
UI(使用者介面)
-
UX(使用者經驗)
-
UI 與UX
-
在專案導入UI/UX 的概念
-
-
Unit 02 了解UI 使用者介面
-
關於UI 使用者介面
-
UI 設計的目標
-
UI 設計核心能力
-
在著手設計UI 之前
-
-
Unit 03 了解UX 使用者經驗
-
一杯$180 的咖啡
-
網路服務UX 興起的原因
-
UX 時代,請以使用者的意見為準
-
-
Unit 04 UI/UX 的職責分工
-
誰適合擔任UX 設計師?
-
配置你的UX 戰隊
-
UI/UX 的改善是所有團隊成員的責任
-
跨職權分工,打造美好的UI/UX 體驗
-
-
Unit 05 UI/UX 設計階段解析
-
原始網路服務的階段
-
階段一:進行使用者研究
-
階段二:服務情境設計
-
階段三:介面與互動模擬
-
階段四:使用者測試導入
-
階段五:服務持續優化
-
-
Unit 06 階段一:使用者研究
-
清楚定義目標使用者
-
人物誌(Persona)
-
面談對象的選擇
-
使用者互動技巧
-
使用者研究輔助工具
-
-
Unit 07 階段二:服務情境設計
-
什麼是產品使用情境
-
驗證產品使用情境
-
-
Unit 08 階段三:介面與互動模擬
-
網站Wireframe(線框圖)
-
從Wireframe 到Mockup(視覺稿)
-
從Mockup 到Prototype(介面原型)
-
-
Unit 09 階段四:使用者測試導入
-
使用者測試重點
-
測試階段與使用者互動的技巧
-
記錄、討論、追蹤測試結果
-
使用者測試架構
-
關於測試任務的指派
-
-
Unit 10 階段五:服務持續優化
-
改善的驅動力
-
網站服務的數據化評量
-
A/B Test 數據化評量
-
用影片加強實驗結果的說服力
-
-
-
Part 02 視覺規劃與UI設計技巧
-
Unit 11 與UI/UX 有關的領域
-
設計面向:與UI/UX 有關的學門
-
資訊面向:與UI/UX 有關的學門
-
商業與心理學面向:與UI/UX 有關的學門
-
-
Unit 12 淺談UI 排版技巧
-
參考標準排版框架
-
善用對齊技巧
-
留白設計
-
排版上的特殊狀況
-
-
Unit 13 關於文字與字型
-
字型基本認識
-
文字使用技巧
-
網頁字型使用技巧
-
-
Unit 14 基本配色技巧
-
基本色彩學
-
色彩與年齡偏好
-
配色相關網路資源
-
-
Unit 15 色彩的應用技巧
-
色彩的情緒
-
色彩數量與比例的選擇
-
用色彩引導視線流動
-
色彩與感覺
-
-
Unit 16 Photoshop 與製圖觀念
-
Photoshop 使用時機
-
Photoshop 知識
-
圖層的概念
-
-
Unit 17 形式追隨功能
-
儘可能避免使用操作說明
-
維持功能性隱喻
-
-
Unit 18 設計手勢
-
基本手勢
-
Web 獨有手勢
-
APP 特殊手勢
-
-
Unit 19 填補設計靈感缺口
-
熟悉靈感存檔與使用的流程
-
UI/UX 靈感與素材收集
-
-
Unit 20 善用使用者熟悉的元素
-
人們在數位領域更依賴熟悉元素
-
網頁中使用者熟悉的元素
-
APP 中使用者熟悉的元素
-
熟悉元素的配置隨著內容而異
-
-
-
Part 03 使用者的情緒反應與UX改善
-
Unit 21 設計通知
-
設計通知的重要性
-
通知需要讓使用者感到安心
-
通知內容要讓使用者感到舒服
-
保留使用者可控制的彈性設定
-
注意溝通的文案
-
通知訊息需引導使用者進行正確的操作
-
-
Unit 22 UX 與APP
-
APP 使用者的期待
-
APP UX 設計指南
-
滿足APP 情感訴求
-
-
Unit 23 善用視覺暗示
-
營造「可以按下」的感覺
-
營造「可以拖拉」的感覺
-
營造「可以抓取」的感覺
-
營造「可以掀開」的感覺
-
-
Unit 24 預測使用者的意圖
-
關於使用者意圖
-
根據使用者行為協助決策
-
用群眾智慧幫助使用者做決定
-
捕捉瞬間的意圖
-
減少操作步驟
-
提供操作預設值
-
善用操作紀錄
-
-
Unit 25 為進階使用者設計
-
減少重複工作的時間
-
協助使用者做決定
-
提供偏好設定選項
-
減少頁面的切換
-
安全與效率的取捨
-
-
Unit 26 再簡單一點
-
造成複雜的原因
-
簡化操作的技巧
-
打造簡易介面
-
清楚比簡單更重要
-
-
Unit 27 貼心無障礙的設計
-
殘疾人士遇到的網頁操作難題
-
為視力障礙者而設計
-
為身體障礙者而設計
-
廣義的無障礙設計
-
無障礙設計常見的四大迷思
-
關於WCAG(Web Accessibility Guideline)
-
-
Unit 28 UX 迷思
-
UX 研究的迷思
-
UX 分工的迷思
-
UX 流程的迷思
-
UX 設計的迷思
-
-
Unit 29 UX 與速度
-
使用者對於速度的期待
-
等待時間的煎熬分級
-
影響速度的因素
-
為等待而設計
-
行為、進度與功能按鈕
-
用Loading 動畫降低等待感
-
-
Unit 30 防呆子的設計
-
關於呆子與笨蛋
-
防呆技巧❶:防止操作並給予提示
-
防呆技巧❷:提供替代選項
-
防呆技巧❸:貼心提示
-
防呆技巧❹:加大感測範圍
-
-
-
Part 04 UI/UX前端概念與技術介紹
-
Unit 31 了解前端工程
-
何謂「前端工程」?
-
前端工程人員的價值
-
網路服務分工的演進
-
蓋房子與網路服務的建立
-
-
Unit 32 網頁前端技術介紹:HTML
-
HTML 與UI/UX 的關係
-
HTML 基本知識
-
HTML 的核心:標籤元素
-
HTML 相關概念說明
-
-
Unit 33 關於HTML5
-
HTML5 與UI/UX
-
HTML5 簡介
-
HTML 與APP
-
-
Unit 34 網頁前端技術介紹:CSS
-
CSS 概觀
-
了解CSS 選擇器
-
記得使用CSS Reset
-
CSS 基本觀念
-
-
Unit 35 CSS 進階技巧
-
關於CSS3
-
使用Media Query 隨瀏覽器改變呈現樣式
-
使用更符合語意的CSS 樣式命名技巧
-
關於SASS 工具
-
-
Unit 36 認識前端開發工具
-
前端開發工具
-
程式碼排版工具
-
-
Unit 37 認識前端測試工具
-
前端測試工具
-
程式碼錯誤檢測工具
-
程式碼分享服務
-
-
Unit 38 與瀏覽器大戰
-
瀏覽器的戰爭
-
瀏覽器的原理
-
關於網頁的DOM Tree
-
網頁DOM Tree 決定了瀏覽器解析程式碼的行為
-
瀏覽器造成了網頁UI/UX 設計上的難度
-
行動裝置瀏覽器的問題
-
-
Unit 39 瀏覽器測試的神兵利器
-
瀏覽器內建測試工具
-
使用測試外掛軟體
-
行動裝置測試
-
-
Unit 40 使用外掛強化使用體驗
-
圖片外掛
-
網頁元件外掛
-
社群外掛
-
-
-
Part 05 更多UI/UX相關技術與行動網頁概念介紹
-
Unit 41 設計資訊架構
-
淺談資訊架構
-
資訊架構的重要性
-
常見資訊架構及其特性
-
設計資訊架構的技巧
-
放置導覽工具
-
驗證資訊架構的好壞
-
-
Unit 42 資料視覺化
-
淺談資料視覺化
-
視覺圖表的選用情境
-
視覺化工具介紹
-
-
Unit 43 建立行動版網站
-
透過手機瀏覽網頁的人數遠超過想像
-
網站與行動版網站有什麼不同
-
從一般網頁移植到行動版網頁
-
-
Unit 44 選擇行動開發模式
-
行動操作情境需求
-
行動應用的資訊呈現方式
-
原生APP
-
Hybrid 網頁APP
-
如何選擇適合我的行動網頁開發模式?
-
行動開發模式技術比較
-
-
Unit 45 RWD 行動版網頁設計技術
-
關於RWD
-
RWD 設計原理
-
測試你的RWD
-
-
Unit 46 網頁UI 技術簡介:JavaScript
-
JavaScript 的特色
-
介紹JS 基本技巧
-
打造網頁UI/UX 的核心技術:AJAX
-
-
Unit 47 了解前端技術核心:jQuery
-
jQuery 與UI/UX
-
了解jQuery
-
跨入jQuery 的世界
-
jQuery 選擇器(selector)
-
-
Unit 48 了解前端Framework
-
什麼是Framework
-
使用Framework 的動機
-
Bootstrap 簡介
-
保持更新Framework 知識的習慣
-
-
Unit 49 持續加強前端工程的能力(上)
-
前端工程市場現況
-
前端學徒階段
-
前端入門階段
-
-
Unit 50 持續加強前端工程的能力(下)
-
前端專家階段
-
前端精英階段
-
前端大師階段
-
-
- 出版地 : 臺灣
- 語言 : 繁體中文
評分與評論
請登入後再留言與評分