本書全面系統(tǒng)地介紹了用Photoshop CS6制作App圖標(biāo)和App界面的設(shè)計(jì)方法和處理技巧,首先闡述了App是什么和App的開發(fā)過程,然后講解了圖標(biāo)的設(shè)計(jì)規(guī)范、界面的設(shè)計(jì)規(guī)范、界面的構(gòu)成組件、如何搭配顏色等理論知識(shí),最后使用案例詳細(xì)講解該如何制作不同風(fēng)格的圖標(biāo)、不同風(fēng)格和不同主題的界面,內(nèi)容涵蓋了App制作中的軟件基礎(chǔ)和設(shè)計(jì)技巧。全書以“先理論、后案例”的形式進(jìn)行編寫,包含44個(gè)案例(34個(gè)基礎(chǔ)案例和10個(gè)商業(yè)案例)。每個(gè)基礎(chǔ)案例均包含設(shè)計(jì)思路和詳細(xì)的制作步驟;每個(gè)商業(yè)案例都有明確的制作提示。
本書不僅可作為普通高等院校相關(guān)專業(yè)的教材,也適合有志于從事App設(shè)計(jì)、UI設(shè)計(jì)等工作的人員使用。
1.系統(tǒng)地講解了App的基礎(chǔ)知識(shí),可讓不熟悉App設(shè)計(jì)的人群迅速了解App的類型、設(shè)計(jì)規(guī)范等。
2.有Ps基礎(chǔ)的人群可快速上手制作出App常用圖形和組件、不同風(fēng)格的圖標(biāo)和界面,同時(shí),本書還通過綜合案例講解了常用的影音App、社交App、電商App的制作方法,初學(xué)者學(xué)完本書,可從事App設(shè)計(jì)工作。
3.提供了43個(gè)案例的操作視頻,掃描書中二維碼即可在線查看。
1 進(jìn)入App的世界
1.1 初識(shí)App 002
1.1.1 什么是App 002
1.1.2 為什么開發(fā)App 003
1.1.3 App的開發(fā)過程 004
1.2 App的獲取途徑 008
1.2.1 蘋果應(yīng)用商店 009
1.2.2 谷歌應(yīng)用商店 010
1.2.3 小米應(yīng)用商店和魅族應(yīng)用中心 010
1.3 運(yùn)行App的三大系統(tǒng) 012
1.3.1 Android系統(tǒng) 013
1.3.2 iOS系統(tǒng) 014
1.3.3 Windows 10 Mobile系統(tǒng) 016
1.4 App的類型 016
1.4.1 影音類App 017
1.4.2 電商類App 017
1.4.3 社交類App 018
1.4.4 音樂類App 018
2 App設(shè)計(jì)基礎(chǔ)
2.1 App的界面構(gòu)成 020
2.1.1 狀態(tài)欄 020
2.1.2 導(dǎo)航欄與菜單欄 021
2.1.3 內(nèi)容區(qū)域 022
2.1.4 虛擬鍵盤 022
2.1.5 簡(jiǎn)化操作 022
2.2 App界面設(shè)計(jì)規(guī)范 023
2.2.1 手機(jī)屏幕尺寸 023
2.2.2 手機(jī)屏幕分辨率 024
2.2.3 手機(jī)像素密度 024
2.2.4 常用的屏幕分辨率 025
2.3 App圖標(biāo)設(shè)計(jì)規(guī)范 026
2.3.1 圖標(biāo)尺寸 027
2.3.2 圖標(biāo)格式 027
2.4 快速顏色搭配 028
2.4.1 取色配色法 029
2.4.2 同色系配色法 029
2.4.3 鄰近色配色法 030
2.4.4 類似色配色法 030
2.4.5 互補(bǔ)色配色法 030
2.5 App設(shè)計(jì)與用戶體驗(yàn) 031
2.5.1 App設(shè)計(jì)的要點(diǎn) 031
2.5.2 用戶體驗(yàn) 035
2.6 常用的設(shè)計(jì)軟件 037
2.6.1 Photoshop CS6 038
2.6.2 Illustrator CS6 038
3 使用Photoshop創(chuàng)作App
3.1 繪制各種圖形的工具 040
3.1.1 正方形和長(zhǎng)方形 040
案例:矩形工具制作圖標(biāo) 041
3.1.2 圓和橢圓 044
案例:橢圓工具制作圖標(biāo) 045
3.1.3 圓角矩形 048
案例:圓角矩形工具制作圖標(biāo) 049
3.1.4 自定義形狀 052
案例:自定義形狀工具制作圖標(biāo) 052
3.2 App常見的組件制作 055
3.2.1 按鈕 056
案例:制作按鈕 056
3.2.2 滑動(dòng)條 059
案例:制作滑動(dòng)條 059
3.2.3 對(duì)話框 064
案例:制作對(duì)話框 064
3.2.4 選項(xiàng)框 067
案例:制作選項(xiàng)框 067
3.3 圖形的效果處理 070
3.3.1 鏡面效果 071
案例:制作鏡面效果 071
3.3.2 倒影效果 073
案例:制作倒影效果 073
3.3.3 畫中畫效果 074
案例:制作畫中畫效果 074
3.3.4 彌散陰影效果 077
案例:制作彌散陰影效果 077
3.3.5 長(zhǎng)陰影效果 080
案例:制作長(zhǎng)陰影效果 080
3.3.6 缺角陰影效果 083
案例:制作缺角陰影效果 084
4 不同風(fēng)格App圖標(biāo)設(shè)計(jì)
4.1 扁平化風(fēng)格圖標(biāo) 088
4.1.1 時(shí)鐘圖標(biāo) 090
案例:制作時(shí)鐘圖標(biāo) 090
4.1.2 火箭圖標(biāo) 094
案例:制作火箭圖標(biāo) 094
4.2 擬物化風(fēng)格圖標(biāo) 100
4.2.1 水晶質(zhì)感按鈕 101
案例:制作水晶質(zhì)感按鈕 101
4.2.2 調(diào)節(jié)按鈕圖標(biāo) 106
案例:制作調(diào)節(jié)按鈕圖標(biāo) 106
4.3 卡通風(fēng)格圖標(biāo) 111
4.3.1 描邊卡通一 111
案例:制作描邊卡通一 111
4.3.2 描邊卡通二 116
案例:制作描邊卡通二 116
5 不同風(fēng)格App界面設(shè)計(jì)
5.1 淺談App界面設(shè)計(jì) 122
5.2 扁平化界面風(fēng)格 123
案例:安卓手機(jī)扁平化風(fēng)格鎖屏界面 123
案例:安卓手機(jī)扁平化風(fēng)格主題界面 129
案例:iOS手機(jī)扁平化風(fēng)格聊天界面 136
案例:iOS手機(jī)扁平化風(fēng)格對(duì)話窗口界面 140
案例:Windows手機(jī)扁平化風(fēng)格主界面 143
案例:Windows手機(jī)扁平化風(fēng)格撥號(hào)界面 146
5.3 擬物化界面風(fēng)格 148
案例:木紋風(fēng)格界面 149
案例:金屬風(fēng)格界面 153
5.4 真實(shí)照片界面風(fēng)格 160
案例:照片制作社交App界面 160
案例:照片制作App登錄界面 165
5.5 根據(jù)主題制作的App 169
案例:美食主題App制作 170
案例:醫(yī)療主題App界面 176
5.6 常見工具界面 182
案例:天氣界面 182
案例:手電筒界面 187
6 影音App
6.1 登錄界面 194
案例:制作登錄界面 196
6.2 主界面 206
案例:制作主界面 206
6.3 熱門界面 219
案例:制作熱門界面 219
6.4 篩選界面 226
案例:制作篩選界面 226
7 電商App
7.1 主界面 236
案例:制作主界面 238
7.2 商店界面 246
案例:制作商店界面 246
7.3 商品界面 252
案例:制作商品界面 252
7.4 購(gòu)物車界面 261
案例:制作購(gòu)物車界面 261
8 社交App
8.1 個(gè)人界面 270
案例:制作個(gè)人界面 271
8.2 主界面 281
案例:制作主界面 281
附錄
A 網(wǎng)站資源共享 289
B 圖標(biāo)資源共享 290
C 圖片資源共享 291
D App設(shè)計(jì)禁忌 291
收起全部↑