Photoshop智能手機(jī)APP UI設(shè)計(jì)之道

目錄
第01章智能手機(jī) APP 界面設(shè)計(jì)概述
1.1智能 APP界面設(shè)計(jì)概述010
1.1.1什么是智能手機(jī)用戶界面 010
1.1.2優(yōu)秀的界面具有哪些特點(diǎn) 011
1.2 APP界面設(shè)計(jì)的布局和分類 012
1.2.1 APP 界面設(shè)計(jì)的布局 012
1.2.2 APP 界面設(shè)計(jì)的分類 013
1.3如何制作出優(yōu)秀的 APP界面 016
1.3.1你的 UI是不是保持著高度一致016
1.3.2用戶可以自由掌控自己的操作嗎017
1.3.3你對(duì)你的用戶群了解嗎 017
1.3.4你有預(yù)防錯(cuò)誤的措施嗎 018
1.3.5你有沒有在重要的位置為用戶展示出最重要的內(nèi)容018
1.3.6你的設(shè)計(jì)是不是顯得很簡(jiǎn)約018
1.3.7你有沒有使用視覺提示019
1.3.8你的 UI有操作提示嗎 019
1.3.9你的內(nèi)容清晰嗎 019
1.3.10你是怎樣使用色彩的 019
1.3.11你的 UI是不是太過花哨 020
1.3.12你的 UI結(jié)構(gòu)是否清晰明了020
1.4 UI 設(shè)計(jì)師如何自我提升 020
1.4.1形狀 / 輪廓 021
1.4.2美術(shù)基礎(chǔ)021
1.4.3色彩識(shí)別 022
1.4.4引導(dǎo)視覺 022
設(shè)計(jì)思路：如何設(shè)計(jì)出更加友好的界面 024
知識(shí)拓展：瀏覽本書所有范例，從視覺上總結(jié) APP UI設(shè)計(jì)的基本要素026
第02章手機(jī) UI設(shè)計(jì)基礎(chǔ)
2.1關(guān)于手機(jī)030
2.1.1智能手機(jī)操作系統(tǒng)的分類 030
2.1.2手機(jī)屏幕的分辨率 030
2.1.3屏幕的色彩 031
2.2 UI 設(shè)計(jì)相關(guān)知識(shí) 032
2.2.1什么是 UI設(shè)計(jì) 032
2.2.2 UI設(shè)計(jì)的目的和重要性 033
2.2.3 UI設(shè)計(jì)中最重要的元素是什么 033
2.2.4平面 UI與手機(jī) UI的不同 033
2.3 UI 設(shè)計(jì)的原則 034
設(shè)計(jì)思路：一個(gè) UI設(shè)計(jì)師去找工作，如何展示他的價(jià)值 037
知識(shí)拓展：思考一下 UI設(shè)計(jì)的流程 037
第03章APP 界面設(shè)計(jì)的色彩理論
3.1色彩的意象 040
3.2色彩的重要性042
3.2.1色彩的物理效應(yīng) 042
3.2.2色彩的心理反應(yīng) 042
3.3色彩的屬性 043
3.3.1色彩的分類 043
3.3.2色相 043
3.3.3明度 044
3.3.4飽和度 044
3.3.5色調(diào) 044
3.4色彩的搭配原則 045
3.4.1色相配色 045
3.4.2色調(diào)配色 046
3.4.3明度配色 047
3.5使用 Kuler配色 047
設(shè)計(jì)思路：如何找到完美的色彩搭配 050
知識(shí)拓展：色彩在 UI設(shè)計(jì)中起到什么樣的作用 056
第04章Photoshop 制作圖標(biāo)常用的編輯操作
4.1 Photoshop
4.1.1了解工作界面 058
4.1.2了解工具箱 059
4.1.3了解選項(xiàng)欄 059
4.1.4了解狀態(tài)欄 061
4.1.5了解面板 062
4.2 UI 設(shè)計(jì)的準(zhǔn)則 063
4.3圖標(biāo)設(shè)計(jì)的格式和大小 064
4.3.1 JPEG 格式 065
4.3.2 PNG 格式 065
4.3.3 GIF格式 065
4.3.4圖標(biāo)尺寸大小 065
4.4跟大師設(shè)計(jì)一組圖標(biāo) 066
4.4.1準(zhǔn)備工作 066
4.4.2構(gòu)思、草圖 067
4.4.3輔助背景制作 067
4.4.4基本形、放大067
4.4.5創(chuàng)作過程 068
4.4.6常用方法——變形 069
4.4.7成品 070
設(shè)計(jì)思路：設(shè)計(jì)一個(gè)圖標(biāo)的三個(gè)階段 071
知識(shí)拓展：圖標(biāo)格式的那點(diǎn)事 073
第05章手機(jī) UI設(shè)計(jì)平面圖標(biāo)制作
實(shí)戰(zhàn) 01 Home 圖標(biāo)制作 078
實(shí)戰(zhàn) 02日歷圖標(biāo)制作 079
實(shí)戰(zhàn) 03錄音機(jī)圖標(biāo)制作 081
實(shí)戰(zhàn) 04文件夾圖標(biāo)制作 083
實(shí)戰(zhàn) 05徽章圖形 085
實(shí)戰(zhàn) 06秒表圖形 088
設(shè)計(jì)思路：繪制基本形狀 092
知識(shí)拓展 1：了解繪圖模式 095
知識(shí)拓展 2：了解圖層樣式 095
第06章手機(jī) UI設(shè)計(jì)的字效表現(xiàn)
實(shí)戰(zhàn) 01車燈字體 098
實(shí)戰(zhàn) 02星星字體 102
實(shí)戰(zhàn) 03牛仔布料字體 106
設(shè)計(jì)思路：如何在 APP UI中控制字號(hào) 109
知識(shí)拓展：字體配色的那點(diǎn)事 111
第07章UI的質(zhì)感表現(xiàn)
實(shí)戰(zhàn) 01金屬 114
實(shí)戰(zhàn) 02膠布 118
實(shí)戰(zhàn) 03玻璃 121
實(shí)戰(zhàn) 04光滑表面 127
實(shí)戰(zhàn) 05木紋 135
實(shí)戰(zhàn) 06皮革 138
實(shí)戰(zhàn) 07紙張 143
實(shí)戰(zhàn) 08陶瓷 144
實(shí)戰(zhàn) 09光滑漆皮 147
實(shí)戰(zhàn) 10塑料、金屬和玻璃綜合表現(xiàn) 152
設(shè)計(jì)思路：Apple 和 Android 移動(dòng)端尺寸指南 155
設(shè)計(jì)思路：iOS 扁平化系統(tǒng)有哪些特色156
知識(shí)拓展：關(guān)于透明元素和透明度使用的藝術(shù)158
第08章手機(jī) UI設(shè)計(jì)立體圖標(biāo)制作
實(shí)戰(zhàn) 01 Dribbbleb 圖標(biāo)制作 160
實(shí)戰(zhàn) 02按鈕圖標(biāo)制作 164
實(shí)戰(zhàn) 03 Chrome 圖標(biāo)制作 170
實(shí)戰(zhàn) 04 twieer 圖標(biāo)制作 173
實(shí)戰(zhàn) 05照相機(jī)圖標(biāo)制作 176
設(shè)計(jì)思路：如何讓圖標(biāo)更具吸引力 182
知識(shí)拓展：立體圖標(biāo)的設(shè)計(jì)原則183
第09章手機(jī) UI按鈕設(shè)計(jì)
實(shí)戰(zhàn) 01發(fā)光按鈕 186
實(shí)戰(zhàn) 02控制鍵按鈕 189
實(shí)戰(zhàn) 03播放器按鈕 193
實(shí)戰(zhàn) 04清新開關(guān)按鈕 198
實(shí)戰(zhàn) 05高調(diào)旋鈕 203
設(shè)計(jì)思路：如何設(shè)計(jì)和諧的交互 208
知識(shí)拓展：關(guān)于按鈕設(shè)計(jì)，設(shè)計(jì)師的幾點(diǎn)建議 209
第10章手機(jī) UI局部界面設(shè)計(jì)
實(shí)戰(zhàn) 01登錄界面 212
實(shí)戰(zhàn) 02設(shè)置界面開關(guān) 217
實(shí)戰(zhàn) 03通知列表界面 223
實(shí)戰(zhàn) 04日歷界面 230
設(shè)計(jì)思路：如何制作配色卡 236
知識(shí)拓展：關(guān)于進(jìn)度條設(shè)計(jì)的幾點(diǎn)建議 240
第11章手機(jī) UI零件設(shè)計(jì)大集合
實(shí)戰(zhàn) 01進(jìn)度條 242
實(shí)戰(zhàn) 02音量設(shè)置 251
實(shí)戰(zhàn) 03選項(xiàng)設(shè)置 265
設(shè)計(jì)思路：導(dǎo)航列表的設(shè)計(jì)原則 273
第12章智能手機(jī) UI整體界面制作
實(shí)戰(zhàn) 01Windows
實(shí)戰(zhàn) 02蘋果手機(jī) iOS 界面總體設(shè)計(jì) 289
實(shí)戰(zhàn) 03 Android 手機(jī)界面總體設(shè)計(jì) 300
附錄 313