UI設(shè)計實戰(zhàn)圖書目錄

目錄

第1章 走進(jìn)UI世界1

1.1 認(rèn)識移動UI 設(shè)計 2

1.1.1　認(rèn)識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　智能手機屏幕單位 5

1.2.2　色彩模式 6

1.2.3　網(wǎng)點密度與像素密度 7

1.2.4　邏輯分辨率與像素倍率 7

1.2.5　視網(wǎng)膜屏幕 8

1.3 常見智能手機系統(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 文件存儲格式 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)行手機UI設(shè)計 18

1.5.1　UI設(shè)計的流程 18

1.5.2　UI設(shè)計原則 22

思考與練習(xí) 26

第2章 主題圖標(biāo)設(shè)計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è)計規(guī)范及技巧 32

2.3.1　圖標(biāo)設(shè)計規(guī)范 32

2.3.2　圖標(biāo)設(shè)計流程 36

2.3.3　圖標(biāo)設(shè)計方法 37

思考與練習(xí) 40

第3章 Illustrator 圖標(biāo)設(shè)計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　選擇對象 52

3.2.8　對象編組 54

3.2.9　對象對齊和分布 54

3.2.10　繪圖與變形工具 55

3.3 組合對象 75

3.3.1　復(fù)合形狀 75

3.3.2　其他復(fù)合形狀 77

3.3.3　釋放與擴(kuò)展復(fù)合形狀 78

3.3.4　路徑查找器選項 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è)計技法 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　繪制“中國聯(lián)通”的Logo 94

3.5.6　繪制MBE 風(fēng)格“Video”圖標(biāo) ... 97

3.5.7　繪制可愛漸變“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è)計實戰(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　布爾運算 124

4.3.6　對齊、排列關(guān)系 126

4.4 圖層樣式 128

4.4.1　添加圖層樣式 129

4.4.2　“圖層樣式”面板 129

4.5 Photoshop圖標(biāo)設(shè)計實戰(zhàn) 134

4.5.1　圖標(biāo)的扁平化設(shè)計 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è)計方法 148

思考與練習(xí) 152

第5章 iOS規(guī)范及工具APP視覺設(shè)計153

5.1 App類型及特點 154

5.1.1　App類型 154

5.1.2　手機App設(shè)計原則 156

5.2 iOS控件介紹及設(shè)計規(guī)范 164

5.2.1　iOS控件擺放規(guī)范 164

5.2.2　iOS控件的構(gòu)成與尺寸 165

5.3 常見布界面布局 173

5.4 App界面設(shè)計實戰(zhàn) 176

5.4.1　音樂App界面實戰(zhàn) 176

5.4.2　社交App界面實戰(zhàn) 181

5.4.3　個人中心界面實戰(zhàn) 183

思考與練習(xí) 185 2100433B

本書緊扣用戶界（UI）面設(shè)計趨勢，主要講解了什么是UI設(shè)計，UI設(shè)計的原則與理念，圖標(biāo)設(shè)計方法、移動端界面UI設(shè)計布局和iOS規(guī)范五大方面的內(nèi)容。本書結(jié)構(gòu)清晰、內(nèi)容翔實，為廣大讀者詳細(xì)解讀了UI的設(shè)計理念與方法，是一本UI設(shè)計的入門級教材。本書能夠提高圖標(biāo)設(shè)計人員、UI設(shè)計師、平面設(shè)計師、用戶體驗設(shè)計師等的設(shè)計技能，可以幫助他們打開創(chuàng)意靈感之門。本書也適合想要從事UI設(shè)計相關(guān)工作的讀者學(xué)習(xí)使用；也可作為高校和培訓(xùn)機構(gòu)視覺傳達(dá)和多媒體設(shè)計等相關(guān)專業(yè)的教材和參考書。

《移動UI設(shè)計三大利器：Photoshop Illustrator Sketch》一書主要闡述了UI設(shè)計必備的三大軟件：眾所周知的繪圖軟件Photoshop、矢量圖形繪制軟件Illustrator、蘋果系統(tǒng)專用的繪圖軟件Sketch。本書立足于互聯(lián)網(wǎng)行業(yè)，對三大UI設(shè)計軟件進(jìn)行了全面的講解。本書內(nèi)容結(jié)合UI設(shè)計制作中常用的繪圖工具及繪圖手法，并將其落實到每一個工具中，一一分析講解，從而引出UI設(shè)計方法論。 《移動UI設(shè)計三大利器：Photoshop Illustrator Sketch》適合UI界面視覺設(shè)計師，以及想從事這個方向的讀者學(xué)習(xí)使用。

用戶界面是所有屏幕產(chǎn)品的重要組成部分，是用戶與產(chǎn)品交流的直接媒介。本書邀請了全球50位UI設(shè)計師， 展示了他們精彩而獨特的設(shè)計作品，并且從產(chǎn)品特征、創(chuàng)作目的、目標(biāo)用戶、色彩含義和使用字體等角度對作品加以解析。每位設(shè)計師還分享了他們從業(yè)多年的經(jīng)驗和心得，提出了有效而實用的建議。

本書適用于UI設(shè)計、交互設(shè)計、用戶體驗設(shè)計的初學(xué)者和從業(yè)者，能夠幫助他們迅速提升專業(yè)技能并獲得創(chuàng)作靈感。

度本圖書，專注于藝術(shù)設(shè)計類圖書的設(shè)計、編輯、策劃與出版，成立至今已在國內(nèi)、外出版多種語言版本的暢銷圖書，其作品以品質(zhì)精良、專業(yè)化而著稱。