《創意UI Photoshop玩轉移動UI新媒體廣告設計》是2019年5月人民郵電出版社出版的圖書，作者是華天印象。
基本介紹
- 書名：創意UI Photoshop玩轉移動UI新媒體廣告設計
- 作者：華天印象
- ISBN：9787115508454
- 頁數：228頁
- 定價：79元
- 出版社：人民郵電出版社
- 出版時間：2019年5月
- 裝幀：平裝
- 開本：大20開
內容簡介,圖書目錄,
內容簡介
本書講解如何使用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
