本書緊扣用戶界(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)視覺傳達和多媒體設(shè)計等相關(guān)專業(yè)的教材和參考書。
孫劍,男,慧科教育集團產(chǎn)業(yè)學(xué)院教學(xué)研發(fā)總監(jiān),Adobe、Autodesk、CEAC認(rèn)證講師,清華美院特聘教師。
目錄
第1章 走進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 如何進行手機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 釋放與擴展復(fù)合形狀 .................. 78
3.3.4 路徑查找器選項 ......................... 80
3.4 擴展、擴展外觀、輪廓化描邊、文字輪廓 ........................................81
3.4.1 擴展 ........................................... 81
3.4.2 擴展外觀 .................................... 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