UI設計

序

從某種意義上講，動畫不僅僅是一門集藝術與技術於一體的學科，它還是當代文化藝術的集合點——文學、影視、美術、音樂、軟體技術等盡匯其中。動畫也是一個產業——已成為世界創意產業中非常重要的組成部分，這必然涉及產品和產業的系統策劃、衍生產品開發、市場行銷等。由此，動畫必然成為一個內容龐雜、體系龐大的學科。

動畫創作從編劇到技術製作，再到配音，要跨越幾個專業，因此，沒有團隊的協作很難完成。這使動畫教學自然還要涉及團隊合作精神和工程規劃、流程管理等方面。

怎麼去實施這些複雜的內容教學呢？

首先，一套優秀的教材對於學校教學和學生學習都是十分重要的，不敢說它就是動畫教學機構和動畫學子的「錦囊妙計」，但透過教材規劃出知識結構的框架和邏輯，使教學有規範，使學生的思考有路徑，是十分必要的。但什麼是優秀教材？在我看來，「系統性」十分重要。按課程名稱撰寫教材不是一件難事，將各種動畫知識堆砌成一堆所謂的「教材」也不是難事，但要真正使其形成一套系統性的教材是十分困難的。因此，我們從多所大學物色在相關課程教學中經驗豐富，而且主持過教學管理、項目管理的專業教師組成編寫團隊，並經多次研討、論證、磨合，才完成了本書的規劃。

其次，動畫藝術是一門技術性、實作性很強的藝術。因此，動畫教材的編寫，要求編寫者有豐富的動畫藝術理論知識和教學經驗，還要有動畫專案的實戰經驗。使教材超越「常識」層面，才能對學生實踐有引領作用，才能以此為垂範去引導學生。

前言

隨著行動網路的高速發展，人與人之間、人與物之間、物與物之間的聯繫變得更加緊密。網路已滲透到人們生活的方方面面。人們在任何時間、任何地點都可以連上網路，保持連線狀態成為身處資訊時代人們的基本需求。資訊科技的民間化被投資家熱捧，透過各種線上平臺所承載的無以計數的網站、APP、遊戲，滿足了人們娛樂、工作、交流、生活等需求，將不同時間和空間的人們聚合到一起，並最終實現網路世界、物連萬物的理想。

現在，介面變得像空氣一樣自然，它時時刻刻都與我們發生著聯繫。透過介面，將人機交互中晦澀的數據和功能變得更加親切自然，更容易被人們所認知並接受，它是承載網路世界的橋樑。一些具有創造性思維的優秀設計師開始轉向產品及其介面的開發和設計，並將其作為一種新的表達形式和顛覆傳統行業的手段。面對市場的導向和教學的需求，很多大學都開設了相關的專業課程，並攜手網路企業進行學生培養和專案開發，形成產學研一體化的教學模式，這種對行業標準的引入值得借鑑。

本書基於實踐和練習，強調視覺表現的設計而非強調編程技術，更符合藝術專業的認知規律和學習特點。本書注重培養綜合素質，著重培養基本的造型能力和手繪功底。

在編纂本書的過程中，筆者針對藝術專業，對介面設計基本理論和標準流程進行深入淺出的講解，參閱了相關文獻資料，從介面設計行業的一線設計師手中獲取相關素材，並結合筆者近年的教學和實踐經驗，嘗試在理論與實踐結合的基礎上編撰此書。希望本書能為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

序 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 的發展...