UI設計

　　本書從UI設計的歷史發展脈絡切入，娓娓道來UI如何演變成今天的模樣與多種類型，並一一講解圖標、色彩、風格，面對不同的需求該如何著手設計等，輔以實例圖片說明優缺，讓讀者完整了解UI是怎麼一回事。

　　說明人體工學、心理學、圖標常識、色彩知覺、格式塔原理及應用，並舉例如何搭配電腦實作綜合運用。

　　介紹IoT技術、立體投影、透明螢幕、連網汽車等尖端技術，預測未來UI的發展方向與形式，加上對各時期科幻影片中UI的說明，指出已有許多想像中的科技成真了，許多技術也將在不遠的將來實現。
 

序 PREFACE
前言 FOREWORD

緒論
一、時代背景15
二、藝術專業 UI 設計課程現狀及問題分析16
三、藝術專業 UI 設計課程及設計人才培養目標分析17
四、UI 藝術設計人才培養模式的設計17
五、藝術專業 UI 設計課程的教學方法探討19
六、本書中 UI 設計的內容和範圍界定20

第一章 UI 設計概述
1.1 UI 設計相關概念21
1.1.1 UI  21
1.1.2 GUI  22
1.1.3 HCI  22
1.1.4 IxD  22
1.1.5 IA  23
1.1.6 UE、UED  23
1.1.7 UCD  23
1.2 UI 設計23
1.2.1 UI 設計的設計流程23
1.2.2 UI 設計師24
1.3 UI 的發展26
1.3.1 UI 發展概述26
1.3.2 UI 的發展趨勢概述27

第二章 UI 設計理論
2.1 目標導向設計29
2.1.1 使用者經驗、UCD 與可用性29
2.1.2 使用者研究32
2.1.3 使用者細分34
2.1.4 使用者模型35
2.1.5 使用者研究的途徑37
2.1.6 使用者研究的方法38
2.2 UI 設計流程41
2.2.1 產品定位42
2.2.2 設計需求核心功能確認42
2.2.3 架構設計42
2.2.4 原型設計44
2.2.5 視覺設計的實施46
2.2.6 測試與疊代設計46
2.3 蘋果公司有關介面設計的原則與方法46
2.3.1 善用隱喻46
2.3.2 直接操控46
2.3.3 能見能點47
2.3.4 一致性47
2.3.5 所見即所得47
2.3.6 使用者控制47
2.3.7 回饋與溝通47
2.3.8 容錯性47
2.3.9 介面感受的恆常性48
2.3.10 視覺藝術完美性48

第三章 UI 視覺設計原理
3.1 UI 視覺設計的設計藝術學原理49
3.1.1 設計美學原理49
3.1.2 產品語義學、符號學原理49
3.1.3 設計色彩學原理51
3.1.4 認知心理學原理——UI 視覺設計的三個層面52
3.1.5 格式塔視知覺原理52
3.2 UI 的可用性與視覺設計56
3.2.1 提高可用性的 UI 視覺設計原則56
3.2.2 介面美感對可用性的提升59
3.3 UI 視覺設計與情感59
3.3.1 介面的美感60
3.3.2 介面的趣味化60
3.3.3 介面的擬人化61
3.3.4 介面的個性化62
3.4 UI 視覺設計的風格62
3.4.1 擬物化設計63
3.4.2 扁平化設計65
3.4.3 小結68

第四章 UI 視覺設計的藝術規律
4.1 UI 設計中的平面構成71
4.1.1 UI 中的基本造型元素71
4.1.2 UI 中形式美的規律和共性77
4.2 UI 設計中的色彩構成82
4.2.1 UI 中色彩設計的基本理論82
4.2.2 UI 設計中的色彩感知87
4.2.3 UI 設計中的色彩心理89
4.2.4 UI 設計中色彩的採集和重構95
4.2.5 UI 中色彩設計的配色原則97
4.2.6 UI 設計中色彩的風格定位98
4.3 UI 設計中的視覺要素100
4.3.1 圖像與文字101
4.3.2 圖標101
4.3.3 動畫和影片102
4.3.4 空間102
4.3.5 質感104
4.3.6 視覺流程106

第五章 UI 圖像設計
5.1 圖標設計109
5.1.1 圖標設計概述109
5.1.2 圖標設計的創意110
5.1.3 圖標設計的原則113
5.1.4 圖標設計的方法和流程115
5.1.5 圖像聯想與訓練117
5.1.6 圖標細節設計和表現120
5.1.7 圖標系統化設計122
5.2 像素圖像設計129
5.2.1 像素圖像設計基礎129
5.2.2 像素圖標設計135
5.2.3 像素介面設計136
5.3 向量圖形設計137
5.3.1 向量插圖設計139
5.3.2 向量圖標設計140
5.3.3 向量介面設計142
5.4 資訊圖像設計143
5.4.1 資訊圖像的概念143
5.4.2 UI 中資訊圖像設計的表現要素144
5.4.3 UI 資訊圖像設計技巧146
5.5 UI 動態圖像設計149
5.5.1 介面動態圖像的屬性149
5.5.2 介面動態圖像的類型150
5.5.3 介面動效的作用152

第六章 非行動裝置 UI 設計的應用
6.1 網站 UI 設計155
6.1.1 概述155
6.1.2 網站 UI 設計及其架構技術的沿革157
6.1.3 網站 UI 的視覺構成要素161
6.1.4 網站 UI 中文字的設計161
6.1.5 網站 UI 中的圖像設計166
6.1.6 網站 UI 的圖文版式設計168
6.1.7 網站 UI 設計流程和規範170
6.1.8 網站 UI 設計（案例及作業）171
6.2 應用軟體 UI 設計174
6.2.1 網站介面與軟體介面的區別和聯繫174
6.2.2 教育軟體 UI 設計（案例及作業）175
6.2.3 家電產品 UI 設計177

第七章 行動裝置 UI 設計的應用
7.1 手機 UI 主題化設計（案例及作業）179
7.1.1 手機主題設計的構成要素179
7.1.2 手機主題的設計原則181
7.1.3 手機主題的設計流程（以學生作業為案例）181
7.1.4 作業與練習183
7.2 手機遊戲 UI 設計（案例及作業）184
7.2.1 手機遊戲的特點184
7.2.2 手機遊戲 UI 設計原則185
7.2.3 手機遊戲 UI 設計流程186
7.2.4 手機遊戲 UI 設計案例（學生作品）188
7.2.5 作業與練習192
7.3 行動 APP UI 設計195
7.3.1 行動 APP 的分類195
7.3.2 行動 APP 的設計流程196
7.3.3 行動 APP 介面常見導航互動模式（圖 7-38）198
7.3.4 行動的手勢應用200
7.3.5 作業與練習201
7.4 車上型 UI 設計203
7.4.1 概述203
7.4.2 車上型 UI 資訊組織和視覺設計204
7.4.3 車上型 HUD 介面205
7.4.4 車上型 UI 設計作業與練習208

第八章 科幻主題 UI 設計賞析
8.1 FUI 設計師及作品介紹211
8.1.1 Mark Coleran  211
8.1.2 John Likens  211
8.2 FUI 的設計思路和原則213
8.2.1 直觀易懂213
8.2.2 帶入感213
8.2.3 可用性和心理真實213
8.2.4 大數據與資訊可視化214
8.2.5 動態圖像214
8.2.6 視覺風格215
8.3 科幻電影中的互動介面和未來的發展趨勢215
8.3.1 語音識別和語音控制216
8.3.2 指紋識別217
8.3.3 身分識別217
8.3.4 手勢和體感217
8.3.5 眼動追蹤217
8.3.6 透明顯示218
8.3.7 3D 立體投影影像218
8.3.8 虛擬實境218
8.3.9 擴增實境219
8.3.10 自然互動介面219
8.4 小結220