本書按照高職高專計(jì)算機(jī)多媒體技術(shù)專業(yè)教學(xué)大綱的要求編寫，是一本全面的UI界面設(shè)計(jì)與制作的基礎(chǔ)教程。本書以培養(yǎng)學(xué)生的UI設(shè)計(jì)理念、方法為基本，結(jié)合Photoshop軟件中常用的各種工具和方法，有針對(duì)性地剖析設(shè)計(jì)制作的實(shí)施策略與過(guò)程，以訓(xùn)練和提高學(xué)生UI界面設(shè)計(jì)制作技能。全書共8章，分為3個(gè)部分。第一部分是UI界面設(shè)計(jì)相關(guān)知識(shí)的介紹，包括什么是UI界面設(shè)計(jì)、UI界面設(shè)計(jì)的常用方法和設(shè)計(jì)工具、UI設(shè)計(jì)與用戶體驗(yàn)的關(guān)系等基本知識(shí)。第二部分是各種UI界面常用元素的制作。第三部分是UI界面設(shè)計(jì)典型實(shí)戰(zhàn)，通過(guò)5個(gè)遞進(jìn)的設(shè)計(jì)實(shí)例，從任務(wù)分析、功能定位、制作步驟入手對(duì)界面設(shè)計(jì)制作進(jìn)行全過(guò)程講解。本書適合作為高等院校計(jì)算機(jī)類專業(yè)的教材，也可供平面設(shè)計(jì)人員、美工人員和對(duì)UI設(shè)計(jì)感興趣的讀者閱讀和參考，還可幫助UI設(shè)計(jì)師迅速進(jìn)入職場(chǎng)角色。為方便教學(xué)，本書提供電子課件等教學(xué)資源，請(qǐng)登錄華信教育資源網(wǎng)（www.hxedu.com.cn）免費(fèi)下載。
張小玲，2007.12至今就職于重慶正大軟件職業(yè)技術(shù)學(xué)院（現(xiàn)升本改名為重慶工程學(xué)院），先后擔(dān)任專業(yè)教師、教研室主任等職，兼任正大恒領(lǐng)網(wǎng)絡(luò)公司設(shè)計(jì)總監(jiān)，主要教研方向?yàn)樗囆g(shù)學(xué)、數(shù)字媒體設(shè)計(jì)。
目 錄
第一部分 知識(shí)準(zhǔn)備
第1章 UI設(shè)計(jì)相關(guān)知識(shí) 1
1．1 UI設(shè)計(jì) 1
1．1．1 UI設(shè)計(jì)的概念 1
1．1．2 UI設(shè)計(jì)的流程 2
1．1．3 UI設(shè)計(jì)的規(guī)范 4
1．1．4 UI設(shè)計(jì)常用工具 6
1．2 UI設(shè)計(jì)與用戶體驗(yàn) 7
1．2．1 UI設(shè)計(jì)與用戶體驗(yàn)概述 7
1．2．2 影響用戶體驗(yàn)的因素 8
1．3 知識(shí)拓展 9
1．3．1 Photoshop CC 2017入門 9
1．3．2 Photoshop CC 2017精彩新功能 9
1．3．3 圖像常用基本操作 12
1．3．4 選區(qū)的基本操作 15
1．3．5 畫筆工具的應(yīng)用 17
本章小結(jié) 19
第2章 UI設(shè)計(jì)的常用方法 20
2．1 UI設(shè)計(jì)中的設(shè)計(jì)方法 20
2．1．1 方法與方法論 20
2．1．2 設(shè)計(jì)方法學(xué) 20
2．1．3 UI設(shè)計(jì)中實(shí)用的設(shè)計(jì)方法 21
2．2 UI設(shè)計(jì)中實(shí)用的構(gòu)成方法 23
2．2．1 什么是構(gòu)成 23
2．2．2 形式美法則 23
2．2．3 構(gòu)成的思維方式 29
2．3 UI設(shè)計(jì)中實(shí)用的色彩搭配技巧 31
2．3．1 色彩的基本理論 31
2．3．2 色彩搭配法則 33
2．4 知識(shí)拓展 45
2．4．1 扁平化設(shè)計(jì)風(fēng)格 45
2．4．2 擬物化設(shè)計(jì)風(fēng)格 47
2．4．3 卡通化設(shè)計(jì)風(fēng)格 47
2．5 能力拓展 47
2．5．1 圖層類別 47
2．5．2 圖層的基礎(chǔ)操作 47
2．5．3 圖層樣式 48
2．5．4 混合模式 49
2．5．5 Photoshop中的蒙版 50
2．5．6 漸變工具 54
本章小結(jié) 56
第二部分 牛刀小試
第3章 各種UI常用元素制作 57
3．1 常用背景制作 57
3．1．1 壁紙 57
3．1．2 圖標(biāo)背板 62
3．2 常見控件制作 64
3．2．1 按鈕的制作 64
3．2．2 下拉選擇框的制作 65
3．2．3 滑動(dòng)條的制作 68
3．2．4 TAB切換塊的制作 70
3．2．5 氣泡對(duì)話框的制作 72
3．3 創(chuàng)意圖標(biāo)設(shè)計(jì)與制作 73
3．3．1 圖標(biāo)設(shè)計(jì)的基本知識(shí) 73
3．3．2 利用Photoshop打造擬物化圖標(biāo) 77
3．3．3 利用Photoshop打造扁平化圖標(biāo) 82
3．3．4 利用Photoshop打造單色圖標(biāo) 85
3．3．5 利用Photoshop打造線性圖標(biāo) 87
3．4 知識(shí)拓展 87
3．4．1 圖標(biāo)設(shè)計(jì)的趨勢(shì)―響應(yīng)式圖標(biāo) 87
3．4．2 路徑與形狀工具 88
3．4．3 擦除類工具 90
3．5 能力拓展 91
3．5．1 設(shè)計(jì)制作簡(jiǎn)單網(wǎng)頁(yè) 91
3．5．2 獨(dú)立實(shí)踐 97
本章小結(jié) 98
第三部分 UI設(shè)計(jì)典型實(shí)戰(zhàn)
第4章 操作型APP―計(jì)算器界面設(shè)計(jì) 99
4．1 UI設(shè)計(jì)任務(wù)分析 99
4．2 學(xué)習(xí)目標(biāo) 100
4．3 制作步驟詳解 100
4．3．1 新建文件，確定尺寸規(guī)范 100
4．3．2 制作背景 100
4．3．3 制作狀態(tài)欄區(qū)域 101
4．3．4 制作顯示區(qū)細(xì)節(jié) 101
4．3．5 制作功能鍵區(qū)和數(shù)字鍵區(qū)細(xì)節(jié) 101
4．3．6 定稿輸出有效的設(shè)計(jì)方案 102
4．4 知識(shí)拓展 103
4．4．1 圖層組 103
4．4．2 APP界面設(shè)計(jì)概述 104
4．4．3 APP界面布局設(shè)計(jì) 105
4．4．4 Photoshop外部素材的載入使用 105
4．5 能力拓展 106
4．5．1 設(shè)計(jì)制作水平儀UI 106
4．5．2 設(shè)計(jì)制作拼拼樂APP界面 107
4．5．3 獨(dú)立實(shí)踐 111
本章小結(jié) 111
第5章 實(shí)用型軟件―播放器界面設(shè)計(jì) 112
5．1 UI設(shè)計(jì)任務(wù)分析 112
5．2 學(xué)習(xí)目標(biāo) 112
5．3 制作步驟詳解 112
5．3．1 創(chuàng)建播放器 112
5．3．2 制作播放器專輯信息部分 114
5．3．3 制作播放器播放按鈕部分 117
5．4 知識(shí)拓展 121
5．4．1 色彩的搭配 121
5．4．2 Photoshop中的色彩調(diào)整 121
5．5 能力拓展 122
5．5．1 設(shè)計(jì)制作DVD光盤圖標(biāo) 122
5．5．2 設(shè)計(jì)制作金屬按鈕 123
5．5．3 為黑白照片調(diào)色 123
5．5．4 獨(dú)立實(shí)踐 126
本章小結(jié) 126
第6章 手機(jī)主題UI設(shè)計(jì) 127
6．1 UI設(shè)計(jì)任務(wù)分析 127
6．2 學(xué)習(xí)目標(biāo) 128
6．3 制作步驟詳解 128
6．3．1 制作主題形象 128
6．3．2 制作手機(jī)壁紙 129
6．3．3 制作鎖屏界面 130
6．3．4 制作天氣插件 131
6．3．5 制作桌面圖標(biāo) 136
6．4 知識(shí)拓展 142
6．4．1 手機(jī)界面設(shè)計(jì)原則 142
6．4．2 手機(jī)常用尺寸與圖標(biāo)格式 143
6．5 能力拓展 144
6．5．1 設(shè)計(jì)制作ico圖標(biāo) 144
6．5．2 設(shè)計(jì)制作偽扁平化手機(jī)主題界面 145
6．5．3 獨(dú)立實(shí)踐 146
本章小結(jié) 146
第7章 Web界面設(shè)計(jì)實(shí)例―兒童節(jié)專題網(wǎng)頁(yè)設(shè)計(jì) 147
7．1 UI設(shè)計(jì)任務(wù)分析 147
7．2 學(xué)習(xí)目標(biāo) 148
7．3 制作步驟詳解 148
7．3．1 制作頭部主圖 148
7．3．2 制作裝飾圖形 161
7．3．3 制作欄目“書籍系列” 167
7．3．4 制作欄目“服飾系列” 175
7．3．5 制作欄目“玩具系列” 178
7．3．6 制作底部區(qū)域 181
7．4 知識(shí)拓展 183
7．4．1 網(wǎng)站界面設(shè)計(jì)基本原則 183
7．4．2 網(wǎng)站界面的功能美與形式美 183
7．5 能力拓展 184
7．5．1 打造照射在透明玻璃窗上的效果 184
7．5．2 打造傾盆大雨效果 185
7．5．3 設(shè)計(jì)制作電子商務(wù)網(wǎng)頁(yè)界面 185
7．5．4 強(qiáng)化全局觀念 198
7．5．5 獨(dú)立實(shí)踐 198
本章小結(jié) 198
第8章 智能電視界面設(shè)計(jì) 199
8．1 UI設(shè)計(jì)任務(wù)分析 199
8．2 學(xué)習(xí)目標(biāo) 199
8．3 制作步驟詳解 199
8．3．1 制作主界面 199
8．3．2 制作影視劇列表頁(yè) 205
8．3．3 制作影視劇詳情頁(yè) 207
8．3．4 制作播放頁(yè) 209
8．4 知識(shí)拓展 211
8．4．1 智能電視界面設(shè)計(jì) 211
8．4．2 智能電視界面設(shè)計(jì)的原則 212
8．5 能力拓展 212
8．5．1 設(shè)計(jì)制作樂視TV界面 212
8．5．2 獨(dú)立實(shí)踐 213
本章小結(jié) 213
參考文獻(xiàn) 214
新書資訊