第1章  移動UI設計快速入門 1
1.1  初識移動UI設計 2
1.1.1  UI設計師 2
1.1.2  UI設計的分類 2
1.1.3  APP的主要類別 4
1.1.4  移動UI的設計特點 5
1.1.5  統一的尺寸和色彩 6
1.1.6  個性化的界面特色 7
1.1.7  熟悉手機界面特色 7
1.2  UI的操作平臺 8
1.2.1  谷歌Android繫統 9
1.2.2  蘋果iOS繫統 10
1.2.3  微軟Windows Phone繫統 12
1.3  手機與平板的界面 14
1.3.1  手機界面 14
1.3.2  平板電腦界面 17
1.3.3  流程分析 17
習題 18
第2章  移動UI設計的布局 19
2.1  移動UI的縱橫布局 20
2.1.1  豎向排列布局 20
2.1.2  橫向排列布局 20
2.1.3  九宮格布局 21
2.2  移動UI的特殊布局 21
2.2.1  彈出框式布局 21
2.2.2  熱門標簽式布局 22
2.2.3  陳列館式布局 22
2.2.4  分段菜單式布局 23
2.2.5  點聚式布局 24
2.2.6  走馬燈式布局 25
2.2.7  磁貼設計式布局 25
2.2.8  超級菜單式布局 25
2.2.9  底部導航欄式布局 26
2.3  移動UI的布局策略 27
2.3.1  圖文信息布局的設計方法 27
2.3.2  界面細節的設計方法 28
2.3.3  移動UI的布局規則 29
習題 31
第3章  移動UI視覺交互設計法則 33
3.1  把握UI的視覺特色 34
3.1.1  打造簡潔與抽像美感 34
3.1.2  營造趣味視覺畫面 34
3.1.3  塑造華麗視覺效果 35
3.1.4  把握色彩的使用特點 35
3.2  提升UI的文字設計 36
3.2.1  內容設計簡潔化 36
3.2.2  字體設計合理 37
3.2.3  突出文字層次 38
3.2.4  信息表達清晰 38
3.2.5  掌握文字間距 39
3.2.6  文字顏色設計 40
3.2.7  畫面美感設計 41
3.2.8  使用性能優化 41
3.3  優化移動UI的圖案效果 42
3.3.1  分辨率影響美感 42
3.3.2  拉伸影響美感 43
3.3.3  特效美化界面 43
3.3.4  交互動作特性 44
3.3.5  增加真實感 45
3.3.6  透析事物關繫 45
3.3.7  關鍵動作效果 46
3.3.8  展現連續動畫 46
3.3.9  實現誇張想像 47
習題 47
第4章  移動UI中素 49
4.1  按鈕設計 50
4.2  開關按鈕設計 50
4.3  輸入框設計 51
4.4  標簽設計 51
4.5  列表框設計 52
4.6  導航欄設計 52
4.7  圖標欄設計 52
4.8  進度條設計 53
習題 53
第5章  Photoshop CC基礎應用 55
5.1  Photoshop CC的基本操作 56
5.1.1  安裝Photoshop CC 56
5.1.2  卸載Photoshop CC 57
5.1.3  啟動Photoshop CC 58
5.1.4  退出Photoshop CC 58
5.2  Photoshop CC的工作環境 60
5.2.1  Photoshop CC 的工作界面 60
5.2.2  菜單欄 60
5.2.3  工具箱 62
5.2.4  工具選項欄 62
5.2.5  面板 63
5.2.6  圖像窗口 63
5.2.7  狀態欄 63
【實例5-1】個性化設置 65
5.2.8  字體的安裝 66
5.3  圖像的基本知識 66
5.3.1  矢量圖和位圖 66
5.3.2  圖像格式 67
5.4  文件的相關操作 70
5.4.1  新建空白文檔 70
5.4.2  打開文檔 70
5.4.3  保存文檔 71
5.4.4  關閉文檔 72
5.5  圖像的窗口操作 73
5.5.1  調整還原窗口設置 73
5.5.2  展開/折疊面板設置 73
5.5.3  移動面板 74
5.5.4  圖像編輯窗口排列設置 75
5.5.5  圖像編輯窗口大小調整 77
5.6  圖像設計的輔助操作 77
5.6.1  顯示/隱藏圖像中的網格 77
【實例5-2】對圖像進行自動對齊
網格操作 78
5.6.2  調整網格屬性 78
【實例5-3】顯示/隱藏圖像中的
標尺 79
5.6.3  更改圖像中標尺原點的位置 80
5.6.4  還原圖像中標尺原點的位置 80
5.6.5  更改圖像中的標尺單位 81
5.6.6  拖曳創建圖像參考線 81
【實例5-4】準確創建圖像參考線 81
5.6.7  顯示/隱藏圖像中的參考線 82
5.6.8  更改圖像中參考線的顏色 83
5.6.9  更改圖像中參考線的樣式 84
5.6.10  調整圖像中參考線的位置 84
5.6.11  清除圖像中的參考線 85
5.6.12  為圖像創建注釋 85
5.6.13  更改圖像中注釋的顏色 86
【實例5-5】運用對齊工具對齊
圖像 87
習題 88
第6章  UI的色彩與風格設計 89
6.1  圖像的顏色屬性 90
6.1.1  色相區分 90
6.1.2  明度標準 90
6.1.3  色彩飽和度 91
6.1.4  查看圖像的顏色分布 91
6.2  調整圖像的影調 94
6.2.1  【色階】命令 94
6.2.2  【亮度/對比度】命令 96
【實例6-1】調整UI的自然飽和度 96
【實例6-2】調整UI的色相/飽和度 97
6.2.3  【通道混合器】命令 101
【實例6-3】調整UI的色彩平衡 103
6.2.4  【照片濾鏡】命令 106
6.2.5  【漸變映射】命令 108
6.2.6  【曲線】命令 109
6.2.7  【曝光度】命令 111
【實例6-4】調整UI的匹配顏色 112
【實例6-5】調整UI的可選顏色 113
6.2.8  【反相】命令 114
6.2.9  【去色】命令 115
【實例6-6】調整UI的替換顏色 115
6.2.10  【陰影/高光】命令 116
6.2.11  【黑白】命令 116
【實例6-7】調整UI的HDR色調 117
習題 118
第7章  移動UI文字的編排設計 119
7.1  文字的排列 120
7.1.1  文字屬性設置 120
【實例7-1】輸入橫排圖像文字 120
【實例7-2】輸入直排圖像文字 121
【實例7-3】橫排文字蒙版的輸入 121
【實例7-4】直排文字蒙版的輸入 123
7.1.2  編輯段落文本 124
7.1.3  點文本與段落文本之間的
轉換 125
7.1.4  文字的拼寫檢查 126
7.1.5  文字的查找與替換 127
7.2  設置移動UI中的文字效果 128
7.2.1  設置文字變形 128
7.2.2  應用文字樣式 128
【實例7-5】載入文本路徑 129
7.2.3  柵格化文字 130
7.2.4  將文本轉換為智能對像 130
習題 131
第8章  移動UI圖像的處理 133
8.1  圖像命令處理技法 134
8.1.1  全部選擇 134
8.1.2  變換選區 134
8.1.3  使用【擴大選取】命令擴大
選區 135
8.1.4使用【選取相似】命令創建
相似選區 135
【實例8-1】通過【反向】命令摳取
圖形 136
8.1.5取消選擇與重新選擇 137
【實例8-2】使用【色彩範圍】命令
創建選區 137
8.2  圖像工具的處理技法 139
8.2.1  套索工具 139
8.2.2  多邊形套索工具 139
【實例8-3】通過【矩形選框工具】
更換相機拍照UI 140
8.2.3  橢圓選框工具 141
8.2.4  磁性套索工具 142
8.2.5  魔棒工具 143
8.2.6  快速選擇工具 143
【實例8-4】通過【污點修復畫筆
工具】制作移動UI 144
【實例8-5】通過【修補工具】制作
移動UI 145
【實例8-6】通過【仿制圖章工具】
制作移動UI界面 146
8.2.7  歷史記錄畫筆工具 146
8.2.8  橡皮擦工具 147
8.2.9  背景橡皮擦工具 148
8.2.10  魔術橡皮擦工具 149
習題 149
第9章  移動UI的圖形設計 151
9.1  圖形創建與修改 152
9.1.1  使用【鋼筆工具】創建
圖形 152
9.1.2  使用【自由鋼筆工具】創建
圖形 156
9.1.3  形狀工具的使用 157
【實例9-1】制作語音客服界面 166
9.1.4  選擇路徑 169
9.1.5添加/刪除錨點 170
9.1.6  轉換點工具 171
9.2  路徑編輯 173
9.2.1  將選區轉換為路徑 173
9.2.2  路徑和選區的轉換 174
9.2.3  描邊路徑 175
9.2.4  填充路徑 176
【實例9-2】制作扁平化解鎖圖標 177
習題 180
第10章  設計網頁宣傳圖——濾鏡在
 ?設計中的應用 181
10.1  了解圖像濾鏡的基本知識 182
10.1.1  認識濾鏡 182
10.1.2  濾鏡的分類 183
10.1.3  濾鏡的使用規則 183
10.1.4  濾鏡的使用技巧 185
10.1.5  濾鏡庫 186
10.2  為圖像添加智能濾鏡 187
10.2.1  創建智能濾鏡 187
【實例10-1】制作手機播放器背景 188
10.2.2  停用/啟用智能濾鏡 190
10.2.3  編輯智能濾鏡蒙版 191
10.2.4  刪除智能濾鏡蒙版 191
10.2.5  清除智能濾鏡 192
10.3  為圖像添加特效 192
10.3.1  鏡頭校正 192
10.3.2  液化 194
10.3.3  消失點 196
10.3.4  【風格化】濾鏡 199
10.3.5  【畫筆描邊】濾鏡 204
10.3.6  【模糊】濾鏡 209
【實例10-2】制作三維立體質感
手機UI 214
10.3.7  【扭曲】濾鏡 218
10.3.8  【銳化】濾鏡 222
10.3.9  【紋理】濾鏡 224
10.3.10  【渲染】濾鏡 226
【實例10-3】制作科技質感手機UI
登錄界面 227
10.3.11  【藝術效果】濾鏡 231
【實例10-4】制作水彩質感
手機UI 233
習題 238
第11章  項目指導——應用軟件APP
  面設計 239
11.1  美食外賣APP界面的設計 240
11.1.1  美食外賣APP界面的標題
 效果設計 240
11.1.2  美食外賣APP界面的內容
 區域效果設計 243
11.2  購物APP界面的設計 246
11.2.1  購物APP界面的導航欄效果
 設計 246
11.2.2  購物APP界面的主體效果
 設計 249
第12章  項目指導——手機登錄界面
 ?UI設計 253
12.1  設計社交APP登錄界面 254
12.1.1  社交APP登錄界面的主題
 效果設計 254
12.1.2  社交APP登錄界面的表單
 控件設計 255
12.1.3  社交APP登錄界面的倒影
 效果設計 258
12.2  設計美食餐飲類APP登錄界面 259
12.2.1  美食餐飲類APP登錄界面的
 背景設計 259
12.2.2  美食餐飲類APP登錄界面的
 登錄區域設計 261
第13章  項目指導——運動醫療APP
 ?界面設計 265
13.1  設計運動APP界面 266
13.1.1  運動APP狀態欄效果設計 266
13.1.2  運動APP導航欄效果設計 268
13.1.3  運動APP信息欄效果設計 270
13.1.4  運動APP圖標欄效果設計 273
13.2  設計醫療APP界面 275
13.2.1  醫療APP主題效果設計 275
13.2.2  醫療APP圖標導航效果
 設計 279
13.2.3  醫療APP信息欄效果設計 281
13.2.4  醫療APP圖標欄效果設計 285
附錄  Photoshop CC常用快捷鍵 287
參考文獻 289

隨著計算機行業和互聯網的迅速發展以及應用領域的拓寬，用戶界面設計逐漸成為互聯網熱門的專業和職業。用戶界面是繫統中不可缺少的部分，是人與電子計算機繫統進行交互和信息交換的媒介，是用戶使用電子計算機的綜合環境。用戶界面設計是指為用戶提供人機交互的可視化界面，在用戶界面的設計中，需要提取用戶需求，針對需求進行分析，設計出合理美觀並且操作簡便的界面。用戶界面設計是一門集人機工程學、認知心理學、人機交互原理學、設計藝術原理於一身的綜合性學科。
1. 本書內容
全書共分13章，按照UI設計工作的實際需求組織內容，案例以實用、夠用為原則。本書具體內容包括移動UI 設計快速入門、移動UI 設計的布局、移動UI 視覺交互設計法則、移動UI中素、Photoshop CC 基礎應用、UI 的色彩與風格設計、移動UI 文字的編排設計、移動UI圖像的處理、移動UI的圖形設計、設計網頁宣傳圖——濾鏡在設計中的應用、項目指導——應用軟件APP界面設計、項目指導——手機登錄界面UI設計、項目指導——運動醫療APP界面設計等內容。 
2. 本書特色
(1)本書案例豐富，每章都有不同類型的案例，相關案例的制作均錄制相關微視頻操作講解，適合上機操作教學。
(2)每個案例都經過編寫者精心挑選，可以引導讀者發揮想像力，調動學習積極性。 
(3)案例實用，技術含量高，與實踐緊密結合。
(4)配套資源豐富，包括電子課件、習題答案、素材、微視頻等，方便教學。
3. 本書約定
為便於閱讀理解，本書的寫作風格遵從以下約定。
◎ 本書中出現的中文菜單和命令將用【】括起來，以示區分。此外，為了使語句更簡潔易懂，本書中所有的菜單和命令之間以豎線(|)分隔，例如，單擊【編輯】菜單，再選擇【移動】命令，就用【編輯】|【移動】來表示。
◎ 用加號( )連接的兩個或三個鍵表示快捷鍵，在操作時表示同時按下這兩個或三個鍵。例如，Ctrl V是指在按下Ctrl鍵的同時，按下V鍵；Ctrl Alt F10是指在按下Ctrl和Alt鍵的同時，按下功能鍵F10。
◎ 在沒有特殊指定時，單擊、雙擊和拖動是指用鼠標左鍵單擊、雙擊和拖動，右擊是指用鼠標右鍵單擊。
本書由中山大學新華學院信息科學學院王玉娟、湖南應用技術學院信息工程學院張莉、壽光市職業教育中心學校李炤坤任主編，德州學院梁東安、海南政法職業學院桑峻任副主編。本書在編寫過程中，參考了很多相關技術資料及經典案例，吸取了許多同仁的寶貴經驗，同時本書的出版凝結了許多優秀教師的心血，在這裡衷心感謝對本書出版過程給予幫助的編輯老師，感謝你們！
由於編者水平有限，書中疏漏與不妥之處在所難免，敬請廣大讀者批評指正！

編  者