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

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