UI設(shè)計(jì)實(shí)戰(zhàn)

目錄
第1章 走進(jìn)UI世界．．．．．．．．．．．．．．．．．．1
1．1 認(rèn)識(shí)移動(dòng)UI 設(shè)計(jì) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．2
1．1．1　認(rèn)識(shí)UI、GUI、HUI、WUI概念．．．． 2
1．1．2　UE與UED ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 4
1．1．3　UCD ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 4
1．2 UI 相關(guān)概念 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．5
1．2．1　智能手機(jī)屏幕單位 ．．．．．．．．．．．．．．．．．．．．．．． 5
1．2．2　色彩模式 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 6
1．2．3　網(wǎng)點(diǎn)密度與像素密度 ．．．．．．．．．．．．．．．．．．．． 7
1．2．4　邏輯分辨率與像素倍率 ．．．．．．．．．．．．．．．． 7
1．2．5　視網(wǎng)膜屏幕 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 8
1．3 常見(jiàn)智能手機(jī)系統(tǒng) ．．．．．．．．．．．．．．．．．．．．．．．．．．．8
1．3．1　Android系統(tǒng) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 8
1．3．2　iOS系統(tǒng) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 13
1．3．3　Windows Phone系統(tǒng)．．．．．．．．．．．．．．．．． 16
1．4 文件存儲(chǔ)格式 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．18
1．4．1　GIF格式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 18
1．4．2　JPEG格式 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 18
1．4．3　PNG格式 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 18
1．4．4　SVG格式 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 18
1．5 如何進(jìn)行手機(jī)UI設(shè)計(jì) ．．．．．．．．．．．．．．．．．．．．18
1．5．1　UI設(shè)計(jì)的流程 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 18
1．5．2　UI設(shè)計(jì)原則 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 22
思考與練習(xí) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 26
第2章 主題圖標(biāo)設(shè)計(jì)．．．．．．．．．．．．．．．．．．27
2．1 圖標(biāo) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．28
2．1．1　圖標(biāo)概念 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 28
2．1．2　圖標(biāo)分類 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 28
2．2 主題圖標(biāo) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．30
2．2．1　主題圖標(biāo)概念 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 30
2．2．2　常用主題圖標(biāo)名稱 ．．．．．．．．．．．．．．．．．．．．． 31
2．3 圖標(biāo)設(shè)計(jì)規(guī)范及技巧 ．．．．．．．．．．．．．．．．．．．．．．32
2．3．1　圖標(biāo)設(shè)計(jì)規(guī)范 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 32
2．3．2　圖標(biāo)設(shè)計(jì)流程 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 36
2．3．3　圖標(biāo)設(shè)計(jì)方法 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 37
思考與練習(xí) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 40
第3章 Illustrator 圖標(biāo)設(shè)計(jì)．．．．．．．．．．．．．．．．．．27
3．1 Illustrator 概述 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．42
3．1．1　Illustrator 發(fā)展歷程 ．．．．．．．．．．．．．．．．．．．．． 42
3．1．2　Illustrator 應(yīng)用領(lǐng)域 ．．．．．．．．．．．．．．．．．．．．． 42
3．2 Illustrator 基礎(chǔ)操作 ．．．．．．．．．．．．．．．．．．．．．．．45
3．2．1　工作區(qū)概覽 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 45
3．2．2　新建Illustrator 文檔 ．．．．．．．．．．．．．．．．．．．． 47
3．2．3　保存Illustrator 文檔 ．．．．．．．．．．．．．．．．．．．． 48
3．2．4　保存文件類型 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 49
3．2．5　導(dǎo)出文件類型 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 49
3．2．6　輔助工具的使用 ．．．．．．．．．．．．．．．．．．．．．．．．． 50
3．2．7　選擇對(duì)象 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 52
3．2．8　對(duì)象編組 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 54
3．2．9　對(duì)象對(duì)齊和分布 ．．．．．．．．．．．．．．．．．．．．．．．．． 54
3．2．10　繪圖與變形工具 ．．．．．．．．．．．．．．．．．．．．．．． 55
3．3 組合對(duì)象 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．75
3．3．1　復(fù)合形狀 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 75
3．3．2　其他復(fù)合形狀 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 77
3．3．3　釋放與擴(kuò)展復(fù)合形狀 ．．．．．．．．．．．．．．．．．． 78
3．3．4　路徑查找器選項(xiàng) ．．．．．．．．．．．．．．．．．．．．．．．．． 80
3．4 擴(kuò)展、擴(kuò)展外觀、輪廓化描邊、文字輪廓 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．81
3．4．1　擴(kuò)展 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 81
3．4．2　擴(kuò)展外觀 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 81
3．4．3　輪廓化描邊 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 82
3．4．4　文字輪廓 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 82
3．5 圖標(biāo)設(shè)計(jì)技法 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．82
3．5．1　繪制“image”圖標(biāo) ．．．．．．．．．．．．．．．．．．． 82
3．5．2　繪制“setting”圖標(biāo) ．．．．．．．．．．．．．．．．．． 85
3．5．3　繪制“game”圖標(biāo) ．．．．．．．．．．．．．．．．．．．． 89
3．5．4　繪制“BrandColors”的Logo ．．．． 92
3．5．5　繪制“中國(guó)聯(lián)通”的Logo ．．．．．．．．． 94
3．5．6　繪制MBE 風(fēng)格“Video”圖標(biāo) ．．． 97
3．5．7　繪制可愛(ài)漸變“user”圖標(biāo) ．．．．． 100
3．5．8　繪制折疊效果“user”圖標(biāo) ．．．．． 103
3．5．9　拼湊效果“home”圖標(biāo) ．．．．．．．．．． 105
3．5．10　彩色“切片球”制作 ．．．．．．．．．．．．．． 110
思考與練習(xí) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 113
第4章 Photoshop圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)．．．．．．．．．．．．．．．．．．114
4．1 Photoshop概述 ．．．．．．．．．．．．．．．．．．．．．．．．．．115
4．2 Photoshop基本操作 ．．．．．．．．．．．．．．．．．．．115
4．2．1　工作區(qū)概覽 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 115
4．2．2　了解Photoshop中的工具 ．．．．．．．． 116
4．2．3　新建Photoshop文檔 ．．．．．．．．．．．．．．． 117
4．2．4　保存Photoshop文檔 ．．．．．．．．．．．．．．． 119
4．2．5　保存文件類型 ．．．．．．．．．．．．．．．．．．．．．．．．．． 120
4．3 Photoshop矢量工具 ．．．．．．．．．．．．．．．．．．．121
4．3．1　鋼筆工具 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 121
4．3．2　路徑選擇工具/ 直接選擇工具 ．． 122
4．3．3　形狀圖形工具 ．．．．．．．．．．．．．．．．．．．．．．．．．． 122
4．3．4　設(shè)置顏色方法 ．．．．．．．．．．．．．．．．．．．．．．．．．． 123
4．3．5　布爾運(yùn)算 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 124
4．3．6　對(duì)齊、排列關(guān)系 ．．．．．．．．．．．．．．．．．．．．．．． 126
4．4 圖層樣式 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．128
4．4．1　添加圖層樣式 ．．．．．．．．．．．．．．．．．．．．．．．．．． 129
4．4．2　“圖層樣式”面板 ．．．．．．．．．．．．．．．．．．． 129
4．5 Photoshop圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn) ．．．．．．．．．．．．134
4．5．1　圖標(biāo)的扁平化設(shè)計(jì) ．．．．．．．．．．．．．．．．．．． 134
4．5．2　線形圖標(biāo) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 136
4．5．3　剪影圖標(biāo) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 139
4．5．4　扁平彩色圖標(biāo) ．．．．．．．．．．．．．．．．．．．．．．．．．． 144
4．5．5　擬物圖標(biāo)的設(shè)計(jì)方法 ．．．．．．．．．．．．．．．． 148
思考與練習(xí) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 152
第5章 iOS規(guī)范及工具APP視覺(jué)設(shè)計(jì)．．．．．．．．．．．．．．．．．．153
5．1 App類型及特點(diǎn) ．．．．．．．．．．．．．．．．．．．．．．．．．．．154
5．1．1　App類型．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 154
5．1．2　手機(jī)App設(shè)計(jì)原則 ．．．．．．．．．．．．．．．．．． 156
5．2 iOS控件介紹及設(shè)計(jì)規(guī)范 ．．．．．．．．．．．．．164
5．2．1　iOS控件擺放規(guī)范 ．．．．．．．．．．．．．．．．．．．． 164
5．2．2　iOS控件的構(gòu)成與尺寸 ．．．．．．．．．．．．． 165
5．3 常見(jiàn)布界面布局 ．．．．．．．．．．．．．．．．．．．．．．．．．．．173
5．4 App界面設(shè)計(jì)實(shí)戰(zhàn) ．．．．．．．．．．．．．．．．．．．．．．．176
5．4．1　音樂(lè)App界面實(shí)戰(zhàn) ．．．．．．．．．．．．．．．．．． 176
5．4．2　社交App界面實(shí)戰(zhàn) ．．．．．．．．．．．．．．．．．． 181
5．4．3　個(gè)人中心界面實(shí)戰(zhàn) ．．．．．．．．．．．．．．．．．．． 183
思考與練習(xí) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 185