體驗(yàn)至上 UI設(shè)計(jì)之道 版權(quán)信息
- ISBN:9787302476535
- 條形碼:9787302476535 ; 978-7-302-47653-5
- 裝幀:暫無(wú)
- 冊(cè)數(shù):暫無(wú)
- 重量:暫無(wú)
- 所屬分類(lèi):>>
體驗(yàn)至上 UI設(shè)計(jì)之道 本書(shū)特色
本書(shū)是一本專(zhuān)門(mén)介紹UI設(shè)計(jì)方案制作的教程,針對(duì)性強(qiáng),目標(biāo)清晰。全書(shū)針對(duì)初學(xué)者,進(jìn)行循序漸進(jìn)的知識(shí)講解,能使讀者輕松掌握所學(xué)理論、技術(shù),并達(dá)到學(xué)會(huì)和精通使用Photoshop進(jìn)行UI設(shè)計(jì)方案制作的目的。
本書(shū)共分為8章,從UI設(shè)計(jì)的基礎(chǔ)知識(shí)以及Photoshop的基本操作開(kāi)始,進(jìn)而深入講解Photoshop實(shí)用技法以及多種類(lèi)型UI設(shè)計(jì)方案的制作方法,*后通過(guò)經(jīng)典商業(yè)案例的練習(xí),模擬工作中的實(shí)戰(zhàn)項(xiàng)目,使讀者在案例的練習(xí)過(guò)程中逐步掌握各類(lèi)UI設(shè)計(jì)項(xiàng)目的制作流程。
本書(shū)內(nèi)容實(shí)用、通俗易懂,操作性、趣味性和針對(duì)性強(qiáng),適合相關(guān)專(zhuān)業(yè)的從業(yè)人員及廣大UI設(shè)計(jì)愛(ài)好者閱讀自學(xué),也可作為大中院校學(xué)生的自學(xué)教程和參考書(shū)。本書(shū)案例用Photoshop CC版本軟件制作和編寫(xiě),建議讀者使用Photoshop CC版本軟件學(xué)習(xí)。
體驗(yàn)至上 UI設(shè)計(jì)之道 內(nèi)容簡(jiǎn)介
通過(guò)有多年制作經(jīng)驗(yàn)的平面設(shè)計(jì)師配合時(shí)下主流軟件Photoshop,由淺入深地介紹UI設(shè)計(jì)與制作過(guò)程。
采用理論與實(shí)踐相結(jié)合的講解模式,篩選設(shè)計(jì)工作中實(shí)用的UI設(shè)計(jì)案例,剖析制作方法。
使用清晰、明了的步驟配合高清視頻教學(xué)實(shí)現(xiàn)精美的視覺(jué)效果,快速掌握Photoshop UI制作技法。
體驗(yàn)至上 UI設(shè)計(jì)之道 目錄
目錄
第1章 UI 設(shè)計(jì)基礎(chǔ)知識(shí)
1.1 當(dāng)我們說(shuō)UI 設(shè)計(jì)時(shí)我們?cè)谡f(shuō)什么 2
1.1.1 什么是UI 2
1.1.2 UI 設(shè)計(jì)的發(fā)展 3
1.1.3 UI 設(shè)計(jì)構(gòu)成要素 4
1.1.4 跨平臺(tái)的UI 設(shè)計(jì) 5
1.2 這不是一個(gè)人的工作——產(chǎn)品設(shè)計(jì)團(tuán)隊(duì) 6
1.2.1 產(chǎn)品經(jīng)理 6
1.2.2 交互設(shè)計(jì)師 6
1.2.3 圖形設(shè)計(jì)師 7
1.2.4 用戶體驗(yàn)師 7
1.3 UI 設(shè)計(jì)的基本流程 8
1.3.1 分析階段 8
1.3.2 設(shè)計(jì)階段 8
1.3.3 配合階段 8
1.3.4 驗(yàn)證階段 8
1.4 不同平臺(tái)的UI 設(shè)計(jì)規(guī)范 8
1.4.1 Android 操作系統(tǒng)設(shè)計(jì)規(guī)范 9
1.4.2 iOS 操作系統(tǒng)設(shè)計(jì)規(guī)范 10
1.5 界面的顏色與風(fēng)格 11
1.5.1 抓住用戶的色彩心理 11
1.5.2 選對(duì)色彩的小技巧 13
1.5.3 UI 設(shè)計(jì)的流行趨勢(shì) 14
第2章 Photoshop 基本操作
2.1 初識(shí)Photoshop 18
2.1.1 認(rèn)識(shí)Photoshop 的操作界面 18
2.1.2 從零開(kāi)始創(chuàng)建新的文檔 20
2.1.3 打開(kāi)已有的圖像文檔 20
2.1.4 調(diào)整文檔顯示比例與顯示區(qū)域 21
2.1.5 向當(dāng)前文檔中置入其他元素 22
2.1.6 存儲(chǔ)文檔 23
2.1.7 關(guān)閉文檔 24
2.1.8 打印文檔 24
2.2 掌握“圖層”的基本操作 24
2.2.1 選擇圖層 26
2.2.2 新建圖層 26
2.2.3 刪除圖層 26
2.2.4 復(fù)制圖層 27
2.2.5 調(diào)整圖層順序 27
2.2.6 移動(dòng)圖層 27
2.2.7 對(duì)齊圖層 28
2.2.8 分布圖層 29
2.2.9 圖層的其他基本操作 30
2.3 撤銷(xiāo)錯(cuò)誤操作 30
2.3.1 后退一步、前進(jìn)一步、還原、重做 30
2.3.2 使用“歷史記錄”面板撤銷(xiāo)操作 31
2.3.3 將文檔恢復(fù)到上一次保存狀態(tài) 31
2.4 輔助工具 31
2.4.1 標(biāo)尺與參考線 32
2.4.2 智能參考線 33
2.4.3 網(wǎng)格 33
2.5 圖像處理的基本操作 33
2.5.1 調(diào)整圖像尺寸 33
2.5.2 修改畫(huà)布大小 34
2.5.3 裁剪工具 34
2.5.4 透視裁剪工具 35
2.5.5 旋轉(zhuǎn)畫(huà)布 35
2.5.6 變換圖像 36
2.5.7 操控變形 38
2.5.8 內(nèi)容識(shí)別比例 38
2.6 UI 設(shè)計(jì)實(shí)戰(zhàn):使用“自由變換”命令
制作UI 設(shè)計(jì)方案效果圖 39
第3章
選區(qū)、摳圖與合成
3.1 繪制簡(jiǎn)單的選區(qū) 42
3.1.1 矩形選框工具 42
3.1.2 橢圓選框工具 43
3.1.3 單行選框工具和單列選框工具 44
3.1.4 套索工具 44
3.1.5 多邊形套索工具 44
3.1.6 操作練習(xí):使用“選區(qū)工具”制作極簡(jiǎn)
風(fēng)格圖標(biāo) 45
3.1.7 快速蒙版制作選區(qū) 47
3.1.8 創(chuàng)建文字選區(qū) 49
3.2 選區(qū)填充與描邊 49
3.2.1 填充選區(qū) 49
3.2.2 描邊選區(qū) 50
3.3 選區(qū)的基本編輯操作 51
3.3.1 載入圖層選區(qū) 51
3.3.2 移動(dòng)選區(qū) 51
3.3.3 自由變換選區(qū) 51
3.3.4 全選 52
3.3.5 反選 52
3.3.6 取消選區(qū) 52
3.3.7 隱藏與顯示選區(qū) 53
3.3.8 選區(qū)的存儲(chǔ)與載入 53
3.3.9 調(diào)整邊緣 53
3.3.10 操作練習(xí):使用“調(diào)整邊緣”命令快速
制作毛發(fā)選區(qū) 54
3.3.11 修改選區(qū) 56
3.4 智能的選區(qū)創(chuàng)建工具 58
3.4.1 磁性套索工具 58
3.4.2 操作練習(xí):使用“磁性套索工具”制作
選區(qū)并摳圖 58
3.4.3 魔棒工具 61
3.4.4 操作練習(xí):使用魔棒摳圖制作促銷(xiāo)
活動(dòng)頁(yè)面 61
3.4.5 快速選擇工具 65
3.4.6 操作練習(xí):使用“快速選擇工具”
摳圖換背景 65
3.5 摳圖與合成 67
3.5.1 選區(qū)內(nèi)容的剪切、復(fù)制、粘貼、清除 67
3.5.2 使用“圖層蒙版”合成圖像 69
3.5.3 操作練習(xí):使用“圖層蒙版”制作
游戲界面 70
3.5.4 剪貼蒙版 74
3.5.5 操作練習(xí):使用“剪貼蒙版”制作
簡(jiǎn)約登錄界面 75
3.5.6 通道與摳圖 78
3.6 UI 設(shè)計(jì)實(shí)戰(zhàn):使用多種選區(qū)工具
制作折扣計(jì)算頁(yè)面 80
第4章
矢量制圖
4.1 使用“鋼筆工具”與“形狀工具”繪圖 86
4.1.1 使用“鋼筆工具”繪制路徑 86
4.1.2 操作練習(xí):使用“鋼筆工具”制作
APP 標(biāo)志 87
4.1.3 使用“自由鋼筆工具”繪制路徑 89
4.1.4 繪制“形狀圖層” 90
4.1.5 使用“形狀工具”繪制基本圖形 92
4.1.6 操作練習(xí):設(shè)置描邊屬性制作產(chǎn)品
詳情頁(yè) 96
4.2 調(diào)整路徑形態(tài) 99
4.2.1 添加錨點(diǎn)工具 100
4.2.2 刪除錨點(diǎn)工具 100
4.2.3 轉(zhuǎn)換點(diǎn)工具 100
4.2.4 選擇路徑 101
4.2.5 選擇路徑上的錨點(diǎn) 101
4.2.6 操作練習(xí):使用“圓角矩形工具”與
“橢圓工具”制作許可按鈕 101
4.3 路徑的基本操作 105
4.3.1 路徑的變換 105
4.3.2 路徑運(yùn)算 106
4.3.3 操作練習(xí):使用“形狀工具”與
“路徑運(yùn)算”制作引導(dǎo)頁(yè) 106
4.3.4 將路徑轉(zhuǎn)換為選區(qū) 110
4.3.5 操作練習(xí):使用“鋼筆工具”摳圖
制作購(gòu)物APP 啟動(dòng)頁(yè)面 110
4.3.6 填充路徑 113
4.3.7 描邊路徑 114
4.3.8 創(chuàng)建與使用矢量蒙版 114
4.3.9 操作練習(xí):使用“矢量工具”制作
活動(dòng)標(biāo)志 115
4.4 使用文字工具 120
4.4.1 認(rèn)識(shí)文字工具 120
4.4.2 創(chuàng)建點(diǎn)文字 122
4.4.3 操作練習(xí):使用“文字工具”制作
鎖屏頁(yè)面時(shí)鐘 123
4.4.4 操作練習(xí):使用“直排文字工具”
制作中式水墨感歡迎頁(yè)面 125
4.4.5 創(chuàng)建段落文字 128
4.4.6 創(chuàng)建路徑文字 129
4.4.7 創(chuàng)建區(qū)域文字 129
4.5 編輯文字對(duì)象的屬性 130
4.5.1 使用“字符”面板編輯文字屬性 130
4.5.2 使用“段落”面板編輯段落屬性 132
4.5.3 將文字柵格化為普通圖層 134
4.5.4 將文字圖層轉(zhuǎn)換為形狀圖層 134
4.5.5 創(chuàng)建文字的工作路徑 134
4.6 UI 設(shè)計(jì)實(shí)戰(zhàn):天氣時(shí)鐘小組件界面設(shè)計(jì) 135
第5章
圖像編輯
5.1 顏色的設(shè)置 142
5.1.1 前景色與背景色 142
5.1.2 “色板”面板 142
5.1.3 吸管工具 143
5.2 繪畫(huà)工具 143
5.2.1 畫(huà)筆工具 143
5.2.2 操作練習(xí):使用“畫(huà)筆工具”制作
質(zhì)感標(biāo)志 144
5.2.3 鉛筆工具 148
5.2.4 顏色替換工具 148
5.2.5 混合器畫(huà)筆工具 149
5.2.6 橡皮擦工具 149
5.2.7 背景橡皮擦工具 150
5.2.8 魔術(shù)橡皮擦工具 150
5.2.9 操作練習(xí):使用“魔術(shù)橡皮擦工具”
去除照片背景 151
5.2.10 圖案圖章工具 153
5.3 “畫(huà)筆”面板 154
5.3.1 筆尖形狀設(shè)置 154
5.3.2 形狀動(dòng)態(tài) 155
5.3.3 散布 155
5.3.4 紋理 156
5.3.5 雙重畫(huà)筆 156
5.3.6 顏色動(dòng)態(tài) 157
5.3.7 傳遞 157
5.3.8 畫(huà)筆筆勢(shì) 158
5.3.9 其他選項(xiàng) 158
5.3.10 操作練習(xí):使用“畫(huà)筆工具”與
“畫(huà)筆”面板制作星星 158
5.4 照片修飾工具161
5.4.1 減淡工具 161
5.4.2 加深工具 162
5.4.3 海綿工具 162
5.4.4 模糊工具 162
5.4.5 銳化工具 163
5.4.6 涂抹工具 163
5.4.7 污點(diǎn)修復(fù)畫(huà)筆工具 164
5.4.8 修復(fù)畫(huà)筆工具 164
5.4.9 修補(bǔ)工具 165
5.4.10 內(nèi)容感知移動(dòng)工具 165
5.4.11 紅眼工具 166
5.4.12 仿制圖章工具 166
5.5 填充166
5.5.1 油漆桶工具 167
5.5.2 漸變工具 167
5.5.3 操作練習(xí):使用“漸變工具”
制作多彩壁紙 170
5.5.4 填充 172
5.6 調(diào)色技術(shù)172
5.6.1 自動(dòng)調(diào)色 174
5.6.2 亮度/ 對(duì)比度 175
5.6.3 色階 175
5.6.4 曲線 177
5.6.5 曝光度 178
5.6.6 自然飽和度 179
5.6.7 色相/ 飽和度 179
5.6.8 色彩平衡 181
5.6.9 黑白 182
5.6.10 照片濾鏡 183
5.6.11 通道混合器 184
5.6.12 顏色查找 185
5.6.13 反相 185
5.6.14 色調(diào)分離 185
5.6.15 閾值 186
5.6.16 漸變映射 186
5.6.17 可選顏色 187
5.6.18 陰影/ 高光 187
5.6.19 HDR 色調(diào) 188
5.6.20 變化 189
5.6.21 去色 190
5.6.22 匹配顏色 190
5.6.23 替換顏色 191
5.6.24 色調(diào)均化 193
5.6.25 操作練習(xí):使用“調(diào)色”命令制作
舊照片效果 193
5.7 使用“液化”濾鏡調(diào)整圖像 196
5.8 UI 設(shè)計(jì)實(shí)戰(zhàn):游戲界面設(shè)計(jì) 197
第6章
特殊效果的制作
6.1 圖層的混合模式與圖層樣式 204
6.1.1 圖層不透明度 204
6.1.2 圖層混合模式 204
6.1.3 使用圖層樣式 208
6.1.4 “斜面和浮雕”樣式 209
6.1.5 “描邊”樣式 212
6.1.6 “內(nèi)陰影”樣式 212
6.1.7 “內(nèi)發(fā)光”樣式 213
6.1.8 操作練習(xí):使用“內(nèi)發(fā)光”與
“內(nèi)陰影”樣式制作時(shí)鐘 214
6.1.9 “光澤”樣式 217
6.1.10 “顏色疊加”樣式 218
6.1.11 “漸變疊加”樣式 218
6.1.12 “圖案疊加”樣式 219
6.1.13 “外發(fā)光”樣式 219
6.1.14 “投影”樣式 219
6.1.15 操作練習(xí):使用“投影”樣式制作
UI 展示效果 220
6.2 模擬特殊效果的“濾鏡” 223
6.2.1 使用“濾鏡庫(kù)” 223
6.2.2 使用濾鏡輕松制作“油畫(huà)”效果 224
6.2.3 使用濾鏡組 225
6.2.4 認(rèn)識(shí)“風(fēng)格化”濾鏡組 225
6.2.5 認(rèn)識(shí)“模糊”濾鏡組 226
6.2.6 操作練習(xí):利用“高斯模糊”濾鏡
制作虛化背景 228
6.2.7 認(rèn)識(shí)“扭曲”濾鏡組 230
6.2.8 認(rèn)識(shí)“銳化”濾鏡組 232
6.2.9 認(rèn)識(shí)“像素化”濾鏡組 233
6.2.10 認(rèn)識(shí)“渲染”濾鏡組 234
6.2.11 認(rèn)識(shí)“雜色”濾鏡組 235
6.2.12 認(rèn)識(shí)“其他”濾鏡組 236
6.2.13 操作練習(xí):制作用戶信息頁(yè)面 237
6.3 操作練習(xí):制作立體的3D 效果 240
6.4 UI 設(shè)計(jì)實(shí)戰(zhàn):制作登錄界面 242
第7章
動(dòng)態(tài)效果的制作
7.1 初識(shí)“時(shí)間軸”面板 248
7.1.1 視頻時(shí)間軸 248
7.1.2 幀動(dòng)畫(huà) 249
7.2 創(chuàng)建與編輯視頻圖層 250
7.2.1 導(dǎo)入視頻文件 250
7.2.2 制作視頻動(dòng)畫(huà) 251
7.3 創(chuàng)建與編輯幀動(dòng)畫(huà) 254
7.3.1 創(chuàng)建幀動(dòng)畫(huà) 254
7.3.2 操作練習(xí):創(chuàng)建幀動(dòng)畫(huà)制作界面
設(shè)計(jì)動(dòng)態(tài)化演示 256
7.4 UI 設(shè)計(jì)實(shí)戰(zhàn):使用“時(shí)間軸”
制作變色按鈕 259
第8章 UI 設(shè)計(jì)實(shí)戰(zhàn)
8.1 水晶質(zhì)感APP 圖標(biāo) 264
8.2 新鮮水果圖標(biāo)設(shè)計(jì) 268
8.3 扁平化天氣小組件 273
8.4 鬧鐘小工具界面設(shè)計(jì) 276
8.5 時(shí)尚APP 啟動(dòng)頁(yè)面 281
8.6 外賣(mài)APP 界面設(shè)計(jì) 286
8.7 健康生活A(yù)PP 界面設(shè)計(jì) 291
8.8 清新登錄界面設(shè)計(jì) 294
展開(kāi)全部
體驗(yàn)至上 UI設(shè)計(jì)之道 作者簡(jiǎn)介
齊琦,設(shè)計(jì)藝術(shù)學(xué)專(zhuān)業(yè)碩士,主修插圖設(shè)計(jì),曾游學(xué)瑞士,現(xiàn)為高校教師,發(fā)表多篇學(xué)術(shù)論文和插圖作品。