UI界面設(shè)計（第2版）

目　　錄
第一部分 知識準(zhǔn)備
第1章 UI設(shè)計相關(guān)知識\t1
1．1 UI設(shè)計\t1
1．1．1 UI設(shè)計的概念\t1
1．1．2　UI設(shè)計的流程\t2
1．1．3　UI設(shè)計的規(guī)范\t4
1．1．4 UI設(shè)計常用工具\t6
1．2 UI設(shè)計與用戶體驗\t7
1．2．1 UI設(shè)計與用戶體驗概述\t7
1．2．2 影響用戶體驗的因素\t8
1．3 知識拓展\t9
1．3．1 Photoshop CC 2017入門\t9
1．3．2 Photoshop CC 2017精彩新功能\t9
1．3．3 圖像常用基本操作\t12
1．3．4 選區(qū)的基本操作\t15
1．3．5 畫筆工具的應(yīng)用\t17
本章小結(jié)\t19
第2章 UI設(shè)計的常用方法\t20
2．1 UI設(shè)計中的設(shè)計方法\t20
2．1．1 方法與方法論\t20
2．1．2 設(shè)計方法學(xué)\t20
2．1．3 UI設(shè)計中實用的設(shè)計方法\t21
2．2 UI設(shè)計中實用的構(gòu)成方法\t23
2．2．1 什么是構(gòu)成\t23
2．2．2 形式美法則\t23
2．2．3 構(gòu)成的思維方式\t29
2．3 UI設(shè)計中實用的色彩搭配技巧\t31
2．3．1 色彩的基本理論\t31
2．3．2 色彩搭配法則\t33
2．4 知識拓展\t45
2．4．1 扁平化設(shè)計風(fēng)格\t45
2．4．2 擬物化設(shè)計風(fēng)格\t47
2．4．3 卡通化設(shè)計風(fēng)格\t47
2．5 能力拓展\t47
2．5．1 圖層類別\t47
2．5．2 圖層的基礎(chǔ)操作\t47
2．5．3 圖層樣式\t48
2．5．4 混合模式\t49
2．5．5 Photoshop中的蒙版\t50
2．5．6 漸變工具\t54
本章小結(jié)\t56
第二部分 牛刀小試
第3章 各種UI常用元素制作\t57
3．1 常用背景制作\t57
3．1．1 壁紙\t57
3．1．2 圖標(biāo)背板\t62
3．2 常見控件制作\t64
3．2．1 按鈕的制作\t64
3．2．2 下拉選擇框的制作\t65
3．2．3 滑動條的制作\t68
3．2．4 TAB切換塊的制作\t70
3．2．5 氣泡對話框的制作\t72
3．3 創(chuàng)意圖標(biāo)設(shè)計與制作\t73
3．3．1 圖標(biāo)設(shè)計的基本知識\t73
3．3．2 利用Photoshop打造擬物化圖標(biāo)\t77
3．3．3 利用Photoshop打造扁平化圖標(biāo)\t82
3．3．4 利用Photoshop打造單色圖標(biāo)\t85
3．3．5 利用Photoshop打造線性圖標(biāo)\t87
3．4 知識拓展\t87
3．4．1 圖標(biāo)設(shè)計的趨勢―響應(yīng)式圖標(biāo)\t87
3．4．2 路徑與形狀工具\t88
3．4．3 擦除類工具\t90
3．5 能力拓展\t91
3．5．1 設(shè)計制作簡單網(wǎng)頁\t91
3．5．2 獨立實踐\t97
本章小結(jié)\t98
第三部分 UI設(shè)計典型實戰(zhàn)
第4章 操作型APP―計算器界面設(shè)計\t99
4．1　UI設(shè)計任務(wù)分析\t99
4．2　學(xué)習(xí)目標(biāo)\t100
4．3　制作步驟詳解\t100
4．3．1 新建文件，確定尺寸規(guī)范\t100
4．3．2 制作背景\t100
4．3．3 制作狀態(tài)欄區(qū)域\t101
4．3．4 制作顯示區(qū)細節(jié)\t101
4．3．5 制作功能鍵區(qū)和數(shù)字鍵區(qū)細節(jié)\t101
4．3．6 定稿輸出有效的設(shè)計方案\t102
4．4 知識拓展\t103
4．4．1 圖層組\t103
4．4．2 APP界面設(shè)計概述\t104
4．4．3 APP界面布局設(shè)計\t105
4．4．4 Photoshop外部素材的載入使用\t105
4．5 能力拓展\t106
4．5．1 設(shè)計制作水平儀UI\t106
4．5．2 設(shè)計制作拼拼樂APP界面\t107
4．5．3 獨立實踐\t111
本章小結(jié)\t111
第5章 實用型軟件―播放器界面設(shè)計\t112
5．1　UI設(shè)計任務(wù)分析\t112
5．2 學(xué)習(xí)目標(biāo)\t112
5．3 制作步驟詳解\t112
5．3．1　創(chuàng)建播放器\t112
5．3．2　制作播放器專輯信息部分\t114
5．3．3　制作播放器播放按鈕部分\t117
5．4 知識拓展\t121
5．4．1 色彩的搭配\t121
5．4．2 Photoshop中的色彩調(diào)整\t121
5．5 能力拓展\t122
5．5．1 設(shè)計制作DVD光盤圖標(biāo)\t122
5．5．2 設(shè)計制作金屬按鈕\t123
5．5．3 為黑白照片調(diào)色\t123
5．5．4 獨立實踐\t126
本章小結(jié)\t126
第6章 手機主題UI設(shè)計\t127
6．1 UI設(shè)計任務(wù)分析\t127
6．2 學(xué)習(xí)目標(biāo)\t128
6．3 制作步驟詳解\t128
6．3．1 制作主題形象\t128
6．3．2 制作手機壁紙\t129
6．3．3 制作鎖屏界面\t130
6．3．4 制作天氣插件\t131
6．3．5 制作桌面圖標(biāo)\t136
6．4 知識拓展\t142
6．4．1 手機界面設(shè)計原則\t142
6．4．2 手機常用尺寸與圖標(biāo)格式\t143
6．5 能力拓展\t144
6．5．1 設(shè)計制作ico圖標(biāo)\t144
6．5．2 設(shè)計制作偽扁平化手機主題界面\t145
6．5．3 獨立實踐\t146
本章小結(jié)\t146
第7章 Web界面設(shè)計實例―兒童節(jié)專題網(wǎng)頁設(shè)計\t147
7．1　UI設(shè)計任務(wù)分析\t147
7．2 學(xué)習(xí)目標(biāo)\t148
7．3 制作步驟詳解\t148
7．3．1 制作頭部主圖\t148
7．3．2 制作裝飾圖形\t161
7．3．3 制作欄目“書籍系列”\t167
7．3．4 制作欄目“服飾系列”\t175
7．3．5 制作欄目“玩具系列”\t178
7．3．6 制作底部區(qū)域\t181
7．4 知識拓展\t183
7．4．1 網(wǎng)站界面設(shè)計基本原則\t183
7．4．2 網(wǎng)站界面的功能美與形式美\t183
7．5 能力拓展\t184
7．5．1 打造照射在透明玻璃窗上的效果\t184
7．5．2 打造傾盆大雨效果\t185
7．5．3 設(shè)計制作電子商務(wù)網(wǎng)頁界面\t185
7．5．4 強化全局觀念\t198
7．5．5 獨立實踐\t198
本章小結(jié)\t198
第8章 智能電視界面設(shè)計\t199
8．1　UI設(shè)計任務(wù)分析\t199
8．2　學(xué)習(xí)目標(biāo)\t199
8．3 制作步驟詳解\t199
8．3．1 制作主界面\t199
8．3．2 制作影視劇列表頁\t205
8．3．3 制作影視劇詳情頁\t207
8．3．4 制作播放頁\t209
8．4 知識拓展\t211
8．4．1 智能電視界面設(shè)計\t211
8．4．2 智能電視界面設(shè)計的原則\t212
8．5 能力拓展\t212
8．5．1 設(shè)計制作樂視TV界面\t212
8．5．2 獨立實踐\t213
本章小結(jié)\t213
參考文獻\t214