創意UI Photoshop玩轉移動UI新媒體廣告設計（簡體書）

本書講解如何使用Photoshop進行移動UI新媒體設計。全書共12章，包括開啟移動UI設計之門、佈局原則、視覺交互、元素設計、字體設計、圖標設計、App設計、遊戲UI設計、UI設計、小程序UI設計、H5場景UI設計、新媒體UI設計等內容，讓讀者學後可以融會貫通、舉一反三，製作出更多更加精彩的移動UI效果。
隨書附贈全部案例的素材文件、效果文件，以及在線教學視頻。同時，提供3本Photoshop手冊，幫助讀者快速掌握Photoshop軟件的相關使用技巧。
本書適合Photoshop UI設計的愛好者，特別是手機App設計人員、遊戲界面UI設計人員、新媒體廣告設計人員等閱讀，同時本書也可以作為UI設計相關的培訓機構或中職中專、高職高專等院校的輔導教材。

創意UI Photoshop
玩轉移動UI新媒體廣告設計

第 1章 精工細作：開啟移動UI設計之門 9
1.1 新手入門：零基礎小白入門移動UI設計 10
1.1.1 認識移動UI設計 10
1.1.2 移動UI界面設計規範 11
1.1.3 移動UI設計的個性化 11
1.2 製作工具：移動UI設計常用的軟件 12
1.2.1 Photoshop：功能強大的圖像處理工具 12
1.2.2 Illustrator：工業標準矢量插畫的軟件 13
1.2.3 CorelDRAW：矢量圖形製作工具軟件 13
1.3 圖像格式：移動UI設計常用的圖像類型 14
1.3.1 JPEG格式：很靈活的格式 14
1.3.2 PNG格式：便攜式網絡圖形 14
1.3.3 GIF格式：最簡單的動畫 14
1.3.4 瞭解有損壓縮與無損壓縮 14
1.4 設計規範：瞭解移動設備的尺寸標準 14
1.4.1 iPhone的界面和圖標尺寸 15
1.4.2 iPad的界面和圖標尺寸 15
1.4.3 Android的界面和圖標尺寸 16
1.5 系統學習：移動UI設計的基本原則 17
1.5.1 設計風格體現UI功能 17
1.5.2 移動產品的UI要統一 19
1.5.3 UI設計符合用戶習慣 19
1.5.4 UI提供實用內容 20
1.5.5 UI的層次感清晰 21
1.5.6 考慮用戶的網絡環境 21
1.5.7 添加合適的用戶指引 22
第 2章 佈局原則：帶來舒服的視覺效果 23
2.1 常見佈局：簡單的移動UI排列佈局形式 24
2.1.1 豎排列表佈局 24
2.1.2 橫排方塊佈局 24
2.1.3 九宮格佈局 25
2.1.4 六宮格佈局 26
2.1.5 大圖展示佈局 26
2.2 信息佈局：完美地呈現移動UI中的信息 27
2.2.1 熱門標簽佈局 27
2.2.2 走馬燈式佈局 27
2.2.3 磁貼設計佈局 28
2.2.4 圖示式佈局 28
2.2.5 幻燈片式佈局 29
2.2.6 數據圖表佈局 29
2.3 菜單佈局：保證UI佈局和體驗的一致性 30
2.3.1 彈出框佈局 30
2.3.2 抽屜式佈局 31
2.3.3 陳列館式佈局 32
2.3.4 分段菜單式佈局 33
2.3.5 點聚式佈局 34
2.3.6 底部導航欄佈局 34
2.3.7 超級菜單式佈局 35
2.3.8 選項卡式佈局 35
2.4佈局模式：常用的響應式移動UI模式 36
2.4.1 固定佈局：固定使用一種佈局 36
2.4.2 流線佈局：相對拉伸內容元素 37
2.4.3 等比縮放：相對位置等比縮放 37
2.4.4 拓展佈局：根據屏幕大小顯示 38
2.4.5 分欄佈局：改變界面佈局結構 38
2.4.6 流動佈局：改變界面元素位置 38
2.5 佈局優化：打造友好的UI用戶界面 39
2.5.1 完善細節設計 39
2.5.2 圖片瀑布流聚焦用戶 40
2.5.3 妙用圓形與多邊形 41
2.5.4 用通欄圖片作為背景 41
2.5.5 移動UI的佈局原則 42

第3章 視覺交互：打造理想的用戶體驗 45
3.1 視覺設計：讓移動UI更加出色 46
3.1.1 色彩是重要的視覺因素 46
3.1.2 使用半透明的圖案效果 46
3.1.3 美觀是設計的首要要求 47
3.1.4 要把握好實用性的要點 47
3.1.5 高品質圖片呈現出美感 48
3.1.6 圖片不要隨意進行拉伸 49
3.1.7 對UI中的圖片進行美化 50
3.2 交互設計：進一步提升人機交流體驗 51
3.2.1 常見的UI手勢交互操作 51
3.2.2 增加真實感的循環動作 51
3.2.3 重複運用提高工作效率 52
3.2.4 關鍵動作製作動畫特效 53
3.2.5 連續動作描述運動軌跡 53
3.2.6 為App操作中斷做設計 54
3.2.7 誇張的想像力和創造力 54
3.3 反饋形式：用戶反饋功能的UI設計 55
3.3.1 氣泡狀提示 55
3.3.2 彈出框提示 56
3.3.3 按鈕的反饋 56
3.3.4 聲音的反饋 57
3.3.5 震動的反饋 57
3.3.6 動畫的反饋 57
3.3.7 反饋的位置 58

第4章 元素設計：創造精美的界面元素 61
4.1 組件解析：移動UI中的基本元素 62
4.1.1 常規按鈕元素 62
4.1.2 編輯輸入框元素 62
4.1.3 開關按鈕元素 63
4.1.4 網格式瀏覽元素 63
4.1.5 文本標簽元素 64
4.1.6 警告框元素 64
4.1.7 導航欄元素 65
4.1.8 頁面切換元素 65
4.1.9 進度條元素 65
4.2 設計要點：“簡練但不簡略”的規劃原則 66
4.2.1 好看的ico圖標更吸引人 66
4.2.2 簡約的UI更受青睞 66
4.2.3 分區和分組UI中的元素 67
4.2.4 換位思考解決用戶問題 67
4.2.5 加入感情呈現出人性化 68
4.2.6 做好UI的內容“裝修” 68
4.2.7 登錄界面做好用戶引導 69
4.2.8 UI基本元素的設計技巧 71
4.3 元素實戰：掌握常見UI元素的設計方法 75
4.3.1 下單按鈕設計 75
4.3.2 簡潔進度條設計 78
4.3.3 開關按鈕設計 81

第5章 字體設計：用戶為王的設計理念 83
5.1 字體解析：字體在移動UI中的應用 84
5.1.1 漢字的應用 84
5.1.2 字母的應用 84
5.1.3 數字的應用 85
5.1.4 符號的應用 85
5.2 文字設計：文字如何實現完美UI 86
5.2.1 保證字形設計的正確 86
5.2.2 採用統一的文字風格 86
5.2.3 注重文字內容和精神 87
5.2.4 文字內容要易於識別 87
5.2.5 文字的層次感要強烈 88
5.2.6 清晰地表達文字信息 89
5.2.7 把握好文字之間的間距 90
5.2.8 適當設置文字的色彩 91
5.3 字體實戰：掌握UI文字的設計方法 92
5.3.1 共享單車小程序文字設計 92
5.3.2 《青蛙旅行》遊戲App文字設計 94
5.3.3 《今天頭條》資訊App文字設計 96
第6章 圖標設計：展現無限的創意火花 98
6.1 UI圖標：移動UI圖標最全設計技法 99
6.1.1 選取有代表性的獨立中文字體 99
6.1.2 使用英文、數字和特殊符號 101
6.1.3 提煉有特色的圖形作為圖標 103
6.1.4 運用遊戲元素作為移動圖標 104
6.1.5 使用不同色彩進行組合設計 105
6.1.6 移動UI圖標的版式設計方法 106
6.2 App圖標：第三方應用圖標的設計實戰 107
6.2.1 卡通圖標設計 107
6.2.2 符號圖標設計 111
6.2.3 擬物化圖標設計 114
6.3 系統圖標：系統自帶圖標的設計實戰 116
6.3.1 日曆圖標設計 116
6.3.2 郵箱圖標設計 118
6.3.3 電話圖標設計 119

第7章 App設計：帶你領略移動UI的魅力 123
7.1 設計基礎：了解手機App UI設計 124
7.1.1 熟悉App的基本概念 124
7.1.2 瞭解App的主要類別 124
7.1.3 App的草圖設計方法 125
7.1.4 App的基本界面構成 126
7.1.5 App設計的用戶體驗 127
7.2 設計技巧：完整的App UI設計流程 128
7.2.1 流程1：需求目的 128
7.2.2 流程2：分析設計 128
7.2.3 流程3：調研驗證 128
7.2.4 流程4：方案改進 129
7.2.5 流程5：用戶反饋 129
7.3 登錄界面：漂亮的註冊和登錄頁設計 130
7.3.1 設計登錄界面背景效果 130
7.3.2 設計登錄界面主體效果 131
7.3.3 設計登錄界面整體效果 134
7.4 交互界面：體現移動App的特色功能 135
7.4.1 設計交互界面背景效果 136
7.4.2 設計交互界面整體效果 140

第8章 遊戲UI：設計精美流暢的遊戲界面 144
8.1 遊戲UI：手機遊戲App中的人機交互 145
8.1.1 瞭解什麼是移動遊戲UI設計 145
8.1.2 遊戲UI設計必需的常用工具 146
8.1.3 移動遊戲UI的角色設計 146
8.1.4 移動遊戲UI的場景設計 147
8.1.5 移動遊戲UI的色彩設計 150
8.2 休閒益智：掌握休閒類遊戲App界面的
設計 151
8.2.1 設計休閒類遊戲背景效果 152
8.2.2 設計休閒類遊戲按鈕效果 153
8.2.3 設計休閒類遊戲標題效果 156
8.3 對戰手遊：掌握射擊類遊戲App界面的
設計 158
8.3.1 設計射擊類遊戲背景效果 158
8.3.2 設計射擊類遊戲文字效果 160
8.3.3 設計射擊類遊戲按鈕效果 161

第9章 微信UI：打造簡單高效的交互界面 164
9.1 公眾號：瞭解微信公眾號交互設計 165
9.1.1 公眾號頭像圖標設計 165
9.1.2 自動回復交互設計 165
9.1.3 信息反饋交互設計 166
9.1.4 底部菜單交互設計 167
9.1.5 公眾號圖文廣告設計 168
9.2 朋友圈：瞭解微信朋友圈交互設計 169
9.2.1 朋友圈的界面特色 169
9.2.2 朋友圈的功能結構 171
9.2.3 朋友圈的設計要點 172
9.3 引發關注：微信朋友圈相冊封面設計 174
9.3.1 設計朋友圈封面背景效果 174
9.3.2 設計朋友圈封面主體效果 176
9.3.3 設計朋友圈封面文字效果 178
9.4 吸引眼球：微信公眾號封面廣告設計 179
9.4.1 設計公眾號封面廣告背景效果 180
9.4.2 設計公眾號封面廣告主體效果 180
9.4.3 設計公眾號封面廣告整體效果 182

第 10章 小程序UI：創造真正的品牌價值 184
10.1 小程序UI：打造“爆款”小程序的設計規則 185
10.1.1 界面元素設計保持一致 185
10.1.2 功能設計滿足用戶需求 185
10.1.3 頭像設計要體現特色 186
10.1.4 用卡片流突出信息本身 186
10.1.5 考慮小程序的流暢性 187
10.1.6 適當構圖提高設計效率 188
10.1.7 使用空間和組塊更乾淨 188
10.1.8 創造更有意思的微交互 189
10.1.9 精簡配色反映品牌特性 189
10.1.10 縮短用戶流程優化體驗 190
10.2 界面精美：外賣小程序UI設計 191
10.2.1 設計外賣小程序UI主體效果 191
10.2.2 設計外賣小程序UI細節效果 193
10.2.3 設計外賣小程序UI文字效果 194
10.3 功能全面：攝影小程序UI設計 196
10.3.1 製作攝影小程序UI主體效果 196
10.3.2 製作攝影小程序UI導航按鈕 197

第 11章 H5場景UI：提升用戶瀏覽體驗 199
11.1 H5場景UI：H5界面的設計佈局風格 200
11.1.1 採用統一的主色調設計風格 200
11.1.2 採用撞色多彩色的設計風格 200
11.1.3 採用可視化信息的表達方式 201
11.1.4 為H5打造一個專屬的風格 201
11.1.5 採用長頁面讓畫面更具張力 202
11.1.6 “一鏡到底”帶來更強的空間感 203
11.1.7 欣賞H5界面設計的創意玩法 204
11.2 品牌H5：汽車產品推廣H5界面設計 204
11.2.1 設計汽車產品界面背景效果 205
11.2.2 設計汽車產品界面框架效果 206
11.2.3 設計汽車產品文字修飾效果 208
11.3 招聘H5：企業招聘廣告H5界面設計 209
11.3.1 設計招聘H5背景界面效果 209
11.3.2 設計招聘H5標題邊框效果 211

第 12章 新媒體UI：打贏視覺營銷的戰役 213
12.1 新媒體UI：常見UI設計風格和技巧 214
12.1.1 設計風格要適合目標受眾 214
12.1.2 精心規劃簡約的設計風格 214
12.1.3 將用戶需要的內容放進去 215
12.1.4 讓用戶有很好的瀏覽體驗 215
12.1.5 採用單列佈局更易於瀏覽 216
12.1.6 整合社交媒體的分享按鈕 217
12.2短視頻新媒體：視頻播放UI設計 217
12.2.1 設計短視頻新媒體界面背景效果 218
12.2.2 設計短視頻新媒體界面頭像效果 219
12.2.3 製作短視頻新媒體界面按鈕控件 221
12.3 音頻類新媒體：主播微課UI設計 224
12.3.1 製作音頻類新媒體界面主體效果 224
12.3.2 製作音頻類新媒體界面播放控件 227