本書囊括了各行業(yè)中UI設(shè)計(jì)的經(jīng)驗(yàn)與準(zhǔn)則,并結(jié)合大量實(shí)際設(shè)計(jì)案例,提出了很多有利于設(shè)計(jì)師從事UI設(shè)計(jì)的要素,例如網(wǎng)頁UI設(shè)計(jì)、軟件UI設(shè)計(jì)和手機(jī)UI設(shè)計(jì),從基本的按鈕設(shè)計(jì)制作到全面的播放器界面設(shè)計(jì)制作。全書以圖文并茂且簡單易懂的形式,為廣大讀者詳細(xì)解讀了用戶界面設(shè)計(jì)的理念與方法。通過學(xué)習(xí)這些寶貴的設(shè)計(jì)經(jīng)驗(yàn)與法則,讀者同樣可以設(shè)計(jì)出觸動(dòng)人心的作品。
本書共6章,以循序漸進(jìn)的方式,全面介紹了Photoshop在界面設(shè)計(jì)方面的處理方法和技巧。第1章,UI設(shè)計(jì)基礎(chǔ);第2章,圖標(biāo)設(shè)計(jì);第3章,網(wǎng)頁設(shè)計(jì);第4章,軟件界面設(shè)計(jì);第5章,手機(jī)界面設(shè)計(jì);第6章,播放器界面設(shè)計(jì)。全書劃分得很詳細(xì),并將基礎(chǔ)知識(shí)與案例相結(jié)合。
本書適合平面設(shè)計(jì)制作的初、中級(jí)讀者、有一定Photoshop操作基礎(chǔ)的讀者閱讀,也可以作為商業(yè)設(shè)計(jì)制作人員及相關(guān)專業(yè)師生的參考用書。
1.圖標(biāo)設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、軟件界面設(shè)計(jì)、手機(jī)界面設(shè)計(jì)、播放器界面設(shè)計(jì)五大UI設(shè)計(jì)方向全涉及。
2.提供多媒體課件、書中全部案例素材、以及書中案例教學(xué)視頻。
張晨起,藝術(shù)設(shè)計(jì)類暢銷書作者,編寫過多本設(shè)計(jì)類圖書,包括《7天精通Photoshop CS6 UI交互設(shè)計(jì)》、《網(wǎng)站用戶體驗(yàn)設(shè)計(jì)全程揭秘》、《中文版Photoshop CS6完全自學(xué)一本通》等。
1章 UI設(shè)計(jì)基礎(chǔ) 1
1.1 了解UI設(shè)計(jì) 2
1.1.1 什么是UI設(shè)計(jì) 2
1.1.2 常見的UI設(shè)計(jì)分類 2
1.1.3 導(dǎo)航欄和按鈕的設(shè)計(jì)要點(diǎn) 3
1.1.4 UI設(shè)計(jì)的重要性 4
1.1.5 了解交互的概念 5
1.2 數(shù)字化圖像的基礎(chǔ) 5
1.2.1 常見圖像格式 5
1.2.2 常見圖像模式 6
1.2.3 常見圖像類型 6
1.3 初識(shí)Photoshop CC 7
1.3.1 優(yōu)化配置Photoshop CC 8
1.3.2 文件的基本操作 8
1.3.3 圖像的變換 10
1.3.4 設(shè)置前景色和背景色 11
1.3.5 按鈕的應(yīng)用格式 16
1.3.6 實(shí)現(xiàn)不同的漸變效果 16
1.4 擴(kuò)展練習(xí) 33
1.5 本章小結(jié) 33
第2章 圖標(biāo)設(shè)計(jì) 35
2.1 了解圖標(biāo)設(shè)計(jì) 36
2.1.1 什么是圖標(biāo) 36
2.1.2 圖標(biāo)設(shè)計(jì)的作用 36
2.1.3 圖標(biāo)設(shè)計(jì)的意義 36
2.2 圖標(biāo)設(shè)計(jì)的繪制原則 36
2.3 Photoshop圖層的基本操作 41
2.3.1 新建圖層 41
2.3.2 選擇圖層 42
2.3.3 復(fù)制、移動(dòng)圖層 42
2.3.4 重命名圖層、刪除圖層 44
2.4 畫筆工具 50
2.4.1 預(yù)設(shè)畫筆工具 52
2.4.2 自定義畫筆筆觸 53
2.5 鋼筆工具 57
2.5.1 創(chuàng)建路徑 59
2.5.2 編輯路徑 59
2.5.3 路徑的變換操作 60
2.6 形狀工具 60
2.7 擴(kuò)展練習(xí) 65
2.8 本章小結(jié) 65
第3章 網(wǎng)頁設(shè)計(jì) 67
3.1 了解網(wǎng)頁UI 68
3.1.1 什么是網(wǎng)頁設(shè)計(jì) 68
3.1.2 網(wǎng)頁設(shè)計(jì)的分類 68
3.2 網(wǎng)頁界面構(gòu)成元素 69
3.2.1 文字 69
3.2.2 圖像 69
3.2.3 色彩 70
3.2.4 多媒體 70
3.3 網(wǎng)頁設(shè)計(jì)的原則 70
3.3.1 視覺美觀性原則 70
3.3.2 主題突出原則 71
3.3.3 整體性原則 71
3.3.4 為用戶考慮原則 72
3.3.5 更新和維護(hù)原則 72
3.4 網(wǎng)頁界面布局形式 72
3.4.1 標(biāo)題型 72
3.4.2 左右框架型 73
3.4.3 上下框架型 73
3.4.4 綜合型 73
3.4.5 動(dòng)畫型 73
3.4.6 圖片型 74
3.5 圖層的“不透明度” 79
3.6 圖層的“混合模式” 84
3.6.1 組合模式組 85
3.6.2 加深模式組 85
3.6.3 減淡模式組 85
3.6.4 對(duì)比模式組 86
3.7 蒙版的應(yīng)用 88
3.7.1 認(rèn)識(shí)蒙版 89
3.7.2 蒙版的分類 89
3.7.3 蒙版的“屬性”面板 89
3.7.4 圖層蒙版 89
3.7.5 矢量蒙版 90
3.7.6 剪貼蒙版 90
3.7.7 移動(dòng)復(fù)制蒙版 91
3.7.8 鏈接和取消鏈接蒙版 91
3.8 擴(kuò)展練習(xí) 97
3.9 本章小結(jié) 98
第4章 軟件界面設(shè)計(jì) 100
4.1 軟件界面設(shè)計(jì)發(fā)展歷程 101
4.2 軟件界面設(shè)計(jì)簡介 101
4.2.1 軟件界面設(shè)計(jì)的標(biāo)準(zhǔn) 101
4.2.2 軟件界面設(shè)計(jì)的分類 101
4.3 軟件界面設(shè)計(jì)的原則 102
4.4 軟件界面設(shè)計(jì)中的屏幕設(shè)計(jì) 102
4.5 應(yīng)用圖層樣式 105
4.5.1 添加圖層樣式 105
4.5.2 “樣式”面板 106
4.5.3 導(dǎo)入外部樣式 106
4.5.4 顯示“樣式面板”的方式 107
4.6 設(shè)置混合選項(xiàng) 110
4.6.1 高級(jí)混合 110
4.6.2 混合顏色帶 111
4.7 文字工具的使用 114
4.7.1 認(rèn)識(shí)文字工具 114
4.7.2 文字工具的選項(xiàng)欄 115
4.8 輸入文字 115
4.9 設(shè)置字符和段落屬性 115
4.9.1 “字符”面板 115
4.9.2 “段落”面板 116
4.10 編輯文字 117
4.10.1 將文字轉(zhuǎn)換為選區(qū)范圍 117
4.10.2 將文字轉(zhuǎn)換為路徑 117
4.10.3 將文字轉(zhuǎn)換為形狀 117
4.10.4 柵格化文字 117
4.11 擴(kuò)展練習(xí) 121
4.12 本章小結(jié) 122
第5章 手機(jī)界面設(shè)計(jì) 124
5.1 手機(jī)界面設(shè)計(jì)的重要性 125
5.2 手機(jī)界面設(shè)計(jì)的要求 125
5.2.1 界面效果的整體性、一致性 125
5.2.2 界面效果的個(gè)性化 125
5.2.3 界面視覺元素的規(guī)范 126
5.3 手機(jī)界面設(shè)計(jì)的特征 126
5.4 手機(jī)界面設(shè)計(jì)的基本常識(shí) 126
5.4.1 常見手機(jī)顯示屏分辨率 127
5.4.2 手機(jī)界面的色彩級(jí)別 127
5.4.3 手機(jī)界面設(shè)計(jì)圖標(biāo)的尺寸 127
5.5 選區(qū)的操作 132
5.5.1 選區(qū)的概述 132
5.5.2 創(chuàng)建選區(qū)的方法 132
5.6 創(chuàng)建選區(qū)的工具 134
5.6.1 選框工具組 134
5.6.2 選框工具的選項(xiàng)欄 135
5.6.3 套索工具組 138
5.6.4 “磁性套索工具”的選項(xiàng)欄 139
5.6.5 魔棒工具組 140
5.7 創(chuàng)建選區(qū)的其他方法 140
5.8 關(guān)于Photoshop CC的調(diào)整命令 143
5.8.1 調(diào)整命令的分類 143
5.8.2 調(diào)整命令的使用方法 143
5.9 圖像色調(diào)的基本調(diào)整命令 144
5.9.1 色階 144
5.9.2 曲線 145
5.9.3 色相/飽和度 145
5.9.4 亮度/對(duì)比度 146
5.10 擴(kuò)展練習(xí) 150
5.11 本章小結(jié) 150
第6章 播放器界面設(shè)計(jì) 152
6.1 注意人性化的設(shè)計(jì) 153
6.1.1 舒適性 153
6.1.2 可靠性 153
6.1.3 個(gè)性化 153
6.2 播放器界面設(shè)計(jì)的原則 153
6.2.1 協(xié)調(diào)統(tǒng)一性 154
6.2.2 創(chuàng)造性 154
6.2.3 視覺沖擊力 154
6.3 情感化因素不可忽視 154
6.4 Photoshop CC中的濾鏡 158
6.4.1 什么是濾鏡 158
6.4.2 濾鏡的類型 158
6.4.3 使用濾鏡的注意事項(xiàng) 159
6.4.4 濾鏡的種類和用途 159
6.5 認(rèn)識(shí)濾鏡庫 160
6.6 常見的濾鏡 161
6.7 智能濾鏡 167
6.8 智能對(duì)象 168
6.8.1 創(chuàng)建智能對(duì)象 168
6.8.2 編輯智能對(duì)象 168
6.9 色彩范圍與快速蒙版 177
6.9.1 色彩范圍 177
6.9.2 快速蒙版 177
6.10 調(diào)整圖層與調(diào)整命令 178
6.10.1 創(chuàng)建調(diào)整圖層 178
6.10.2 照片濾鏡 178
6.10.3 色彩平衡 178
6.10.4 強(qiáng)大的“調(diào)整邊緣” 179
6.11 調(diào)整圖層與調(diào)整命令的不同之處 180
6.12 擴(kuò)展練習(xí) 185
6.13 本章小結(jié) 185