《移動UI設計與製作案例教程（微課版）》是清華大學出版社2020年出版圖書，作者王玉娟、張莉、李炤坤、梁東安、桑峻
基本介紹
- 中文名：移動UI設計與製作案例教程（微課版）
- 作者：王玉娟、張莉、李炤坤、梁東安、桑峻
- 出版社：清華大學出版社
- ISBN：9787302564584
內容簡介,作者簡介,目錄,
內容簡介
《移動UI設計與製作案例教程：微課版》是一本講解如何使用Photoshop CC軟體進行移動UI設計的操作型案例教程，可以幫助UI設計愛好者，特別是手機APP設計人員，提高UI製作能力，拓展移動UI視覺設計的創作思路。 《移動UI設計與製作案例教程：微課版》共分為13章，內容包括移動UI 設計快速入門、移動UI 設計的布局、移動UI 視覺互動設計法則、移動UI中的基本元素、Photoshop CC基礎套用、UI 的色彩與風格設計、移動UI 文字的編排設計、移動UI圖像的處理、移動UI的圖形設計、設計網頁宣傳圖——濾鏡在設計中的套用、項目指導——套用軟體APP界面設計、項目指導——手機登錄界面UI設計、項目指導——運動醫療APP界面設計。全書使用自帶素材，通過對素材的不同處理，製作出精美的界面效果。製作界面過程已被錄製為視頻，可在手機與網路中進行分享，讀者學後可以融會貫通、舉一反三，從而更好地完成作品。 《移動UI設計與製作案例教程：微課版》結構清晰，語言簡潔，適合作為高等院校相關專業UI設計課程教材及各類UI設計培訓教材，同時可以作為Photoshop UI設計的愛好者，特別是手機APP設計人員、平面廣告設計人員、網站美工人員以及遊戲界面設計人員等的自學參考書。
作者簡介
王玉娟，畢業於武漢理工大學，軟體工程專業，研究方向人工智慧與知識工程、計算機視覺。廣東省圖像圖形學學會-計算機視覺專業委員會委員，現任職於中山大學新華學院，雙師型教師。2018年4月榮獲第九屆藍橋杯全國軟體和信息技術專業人才大賽優秀指導教師稱號，2019年4月榮獲第十屆藍橋杯全國軟體和信息技術專業人才大賽優秀指導教師稱號。主講課程有：面向對象程式設計、Java程式設計、JSP程式設計、網頁設計等。
目錄
第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
