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

第一部分 知識準備
第1章 UI設(shè)計相關(guān)知識
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．2 UI設(shè)計與用戶體驗\t6
1．2．1 用戶體驗的含義\t6
1．2．2 影響用戶體驗的因素\t6
1．3 UI設(shè)計常見風(fēng)格\t7
1．3．1 扁平化風(fēng)格\t8
1．3．2 擬物化風(fēng)格\t10
1．3．3 卡通化風(fēng)格\t10
1．3．4 立體風(fēng)格\t10
1．3．5 幾何風(fēng)格\t11
1．3．6 漸變風(fēng)格\t11
第2章 UI設(shè)計的常用方法
2．1 UI設(shè)計中的設(shè)計方法\t12
2．1．1 方法與方法論\t12
2．1．2 設(shè)計方法學(xué)\t12
2．1．3 UI設(shè)計中實用的設(shè)計方法\t13
2．2 UI設(shè)計中實用的構(gòu)成方法\t13
2．2．1 什么是構(gòu)成\t13
2．2．2 形式美法則\t14
2．2．3 構(gòu)成的思維方式\t17
第3章 UI設(shè)計的配色方法
3．1 色彩基礎(chǔ)\t21
3．1．1　色彩的基本理論\t21
3．1．2　常用顏色模式\t23
3．2 色彩搭配\t23
3．2．1 界面中不同色彩的象征與聯(lián)想\t23
3．2．2 色彩搭配方法\t27
3．2．3 色彩搭配的其他原則\t28
3．3 設(shè)計軟件中的色彩調(diào)整\t31
3．3．1 Photoshop中的色彩調(diào)整\t31
3．3．2 Illustrator中的色彩調(diào)整\t31
第4章 UI設(shè)計常用工具
4．1 Photoshop\t33
4．1．1 初識Photoshop\t33
4．1．2 圖像常用基本操作\t34
4．1．3 選區(qū)的基本操作\t36
4．1．4 矢量繪制類工具的應(yīng)用\t38
4．1．5 畫筆工具的應(yīng)用\t40
4．1．6 圖層相關(guān)知識\t42
4．1．7 蒙版相關(guān)知識\t46
4．1．8 擦除類工具的應(yīng)用\t48
4．1．9 外部素材的載入\t49
4．1．10 小練手\t50
4．2 Illustrator\t52
4．2．1 初識Illustrator\t52
4．2．2 界面設(shè)計常用圖形\t53
4．2．3 繪制對象的常用操作\t55
4．2．4 填色和描邊\t55
4．2．5 直角變圓角\t56
4．2．6 路徑查找器與形狀生成器\t56
4．2．7 通過擴展路徑描邊讓線變成面\t57
4．2．8 Illustrator 工具箱中的比例縮放工具\t57
4．2．9 旋轉(zhuǎn)與鏡像打造對稱圖形\t58
4．2．10 圖像描摹\t58
4．2．11 小練手\t59
4．3 其他輔助工具\t62
第5章 UI界面常用壁紙與控件制作
5．1 常用壁紙制作\t64
5．1．1 攝影像素壁紙\t64
5．1．2 設(shè)計構(gòu)成壁紙\t64
5．1．3 綜合圖像壁紙\t65
5．1．4 小練手：多種壁紙設(shè)計\t65
5．2 常見控件制作\t70
5．2．1 按鈕\t70
5．2．2 下拉選擇框\t72
5．2．3 進度條\t74
5．2．4 TAB切換塊\t78
5．2．5 氣泡對話框\t79
5．2．6 步進器\t80
5．2．7 開關(guān)\t80
第6章 圖標設(shè)計
6．1 圖標的設(shè)計與制作概述\t82
6．1．1 圖標設(shè)計概述\t82
6．1．2 圖標的背板\t83
6．1．3 圖標的分類\t83
6．1．4 圖標的規(guī)格\t87
6．1．5 圖標的統(tǒng)一性\t89
6．2 線性圖標\t89
6．2．1 利用Illustrator打造線性圖標\t89
6．2．2 多種線性圖標風(fēng)格\t98
6．3 面性圖標\t102
6．3．1 面性圖標設(shè)計制作思路\t102
6．3．2 多種面性圖標風(fēng)格\t102
6．4 2．5D圖標\t104
6．4．1 利用Illustrator打造2．5D圖標\t104
6．4．2 使用Photoshop打造2．5D圖標\t107
6．5 MBE圖標\t107
6．6 利用Photoshop打造擬物化圖標\t108
6．7 延伸閱讀與練習(xí)\t111
6．7．1 利用Illustrator批量導(dǎo)出圖標\t111
6．7．2 拓展練習(xí)： 利用Photoshop打造扁平化圖標\t114
6．7．3 拓展練習(xí)： 利用Photoshop打造單色圖標\t116
6．7．4 拓展練習(xí)： 利用Photoshop打造線性圖標\t117
6．7．5 拓展練習(xí)：利用Photoshop打造樣式圖標\t118
6．8 獨立實踐\t118
第7章 手機主題界面設(shè)計
7．1 手機主題界面設(shè)計概述\t119
7．1．1 手機常用尺寸與圖標格式\t119
7．1．2 手機主題界面設(shè)計內(nèi)容\t120
7．1．3 手機界面設(shè)計的原則\t120
7．2 項目實作：卡通小熊手機主題界面設(shè)計\t121
7．2．1 界面設(shè)計任務(wù)分析\t121
7．2．2 學(xué)習(xí)目標\t122
7．2．3 制作步驟詳解\t122
7．3 項目實作：偽扁平手機主題界面設(shè)計\t136
7．3．1 界面設(shè)計任務(wù)分析\t136
7．3．2 學(xué)習(xí)目標\t136
7．3．3 關(guān)鍵步驟提示\t136
7．4 獨立實踐\t137
7．5 本章小結(jié)\t137
第8章 App界面設(shè)計
8．1 App界面設(shè)計概述\t138
8．1．1 手機App界面視覺設(shè)計\t138
8．1．2 手機App界面用戶體驗設(shè)計\t139
8．1．3 App界面布局設(shè)計\t139
8．2 項目實作：操作型App―計算器界面設(shè)計\t140
8．2．1 界面設(shè)計任務(wù)分析\t140
8．2．2 學(xué)習(xí)目標\t141
8．2．3 制作步驟詳解\t141
8．3 項目實作：拼拼樂App界面設(shè)計\t143
8．3．1 界面設(shè)計任務(wù)分析\t143
8．3．2 學(xué)習(xí)目標\t143
8．3．3 制作步驟詳解\t144
8．4 項目實做：水平儀App界面設(shè)計\t148
8．5 獨立實踐\t148
8．6 本章小結(jié)\t148
第9章 網(wǎng)頁界面設(shè)計
9．1 網(wǎng)頁界面設(shè)計概述\t149
9．1．1 網(wǎng)頁界面設(shè)計基本原則\t149
9．1．2 網(wǎng)站頁面的功能美與形式美\t149
9．2 項目實作：一欄式簡單網(wǎng)頁設(shè)計與制作\t150
9．2．1 界面設(shè)計任務(wù)分析\t150
9．2．2 學(xué)習(xí)目標\t151
9．2．3 制作步驟詳解\t151
9．3 項目實作：多欄式電子商務(wù)網(wǎng)頁設(shè)計與制作\t156
9．3．1 界面設(shè)計任務(wù)分析\t156
9．3．2 學(xué)習(xí)目標\t157
9．3．3 制作步驟詳解\t157
9．4 項目實作：自由版式專題網(wǎng)頁設(shè)計與制作\t169
9．4．1 界面設(shè)計任務(wù)分析\t169
9．4．2 學(xué)習(xí)目標\t171
9．4．3 制作步驟詳解\t171
9．5 獨立實踐\t203
9．6 本章小結(jié)\t203
第10章 智能電視界面設(shè)計
10．1 智能電視界面設(shè)計概述\t204
10．1．1 智能電視界面設(shè)計\t204
10．1．2 智能電視界面設(shè)計的原則\t204
10．2 項目實作：智能電視界面設(shè)計\t205
10．2．1 界面設(shè)計任務(wù)分析\t205
10．2．2 學(xué)習(xí)目標\t205
10．2．3 制作步驟詳解\t206
10．3 獨立實踐\t217
10．4 本章小結(jié)\t217
第11章 其他類型人機界面設(shè)計
11．1 人機界面設(shè)計概述\t218
11．1．1 人機界面概述\t218
11．1．2 人機界面設(shè)計的要點\t220
11．1．3 人機界面設(shè)計的原則\t221
11．2 項目實作：播放器界面設(shè)計\t221
11．2．1 界面設(shè)計任務(wù)分析\t221
11．2．2 學(xué)習(xí)目標\t222
11．2．3 制作步驟詳解\t222
11．3 獨立實踐\t229
11．4 本章小結(jié)\t229