Photoshop移動UI設(shè)計基礎(chǔ)與案例教程

第1章\t
初入移動UI設(shè)計的世界\t015
1．1 認(rèn)識移動UI設(shè)計\t016
1．1．1 什么是移動UI設(shè)計\t016
1．1．2 移動UI設(shè)計的目的和重要性\t017
1．1．3 平面設(shè)計和移動UI的不同\t018
1．1．4 移動UI設(shè)計的重要元素\t019
1．2 移動UI設(shè)計的原則\t020
1．2．1 功能決定界面設(shè)計風(fēng)格\t020
1．2．2 界面設(shè)計要統(tǒng)一\t020
1．2．3 界面設(shè)計要清晰\t021
1．2．4 界面設(shè)計內(nèi)容要實用\t022
1．2．5 界面設(shè)計要有層次感\(zhòng)t022
1．3 移動設(shè)備的主流平臺\t023
1．3．1 iOS系統(tǒng)平臺\t023
1．3．2 Android系統(tǒng)平臺\t027
1．3．3 其他系統(tǒng)平臺\t028
第2章
設(shè)計優(yōu)秀移動UI的條件\t029
2．1 移動UI設(shè)計常用軟件\t030
2．1．1 Photoshop\t030
2．1．2 Illustrator\t031
2．1．3 3ds Max\t032
2．2 移動UI設(shè)計常用圖像格式\t033
2．2．1 JPEG格式\t033
2．2．2 PNG格式\t033
2．2．3 GIF格式\t034
2．2．4 有損壓縮與無損壓縮\t034
2．3 移動設(shè)備的尺寸標(biāo)準(zhǔn)\t035
2．3．1 英寸\t035
2．3．2 分辨率\t035
2．3．3 屏幕密度\t036
2．3．4 圖標(biāo)尺寸大小\t036
2．4 移動UI的設(shè)計布局和分類 \t038
2．4．1 界面設(shè)計的布局\t038
2．4．2 界面設(shè)計的分類\t039
2．5 移動UI的色彩搭配\t042
2．5．1 色彩的心理效應(yīng)\t042
2．5．2 色彩的搭配原則\t042
2．6 如何制作出優(yōu)秀的移動UI 044
2．6．1 設(shè)計的UI與常規(guī)思維保持一致\t044
2．6．2 用戶能自由操作界面\t044
2．6．3 對用戶群的了解\t045
2．6．4 設(shè)計要做到簡約\t046
2．6．5 UI的文本清晰\t047
2．7 移動UI設(shè)計的流程\t048
2．7．1 設(shè)計前的交流討論\t048
2．7．2 草圖設(shè)計\t048
2．7．3 用軟件繪制界面\t049
2．8 如何提升自己的設(shè)計能力\t050
2．8．1 保證繪制圖形的形狀\t050
2．8．2 美術(shù)基礎(chǔ)\t050
2．8．3 對色彩的敏感度\t050
2．8．4 視覺體驗\t051
2．8．5 精細(xì)的細(xì)節(jié)\t052
第3章
移動UI的基本繪制 053
3．1 基礎(chǔ)圖形的繪制\t054
3．1．1 選框工具\(yùn)t054
3．1．2 形狀工具\(yùn)t055
實戰(zhàn)：使用矩形工具繪制移動地圖圖標(biāo)\t055
實戰(zhàn)：使用圓角矩形工具繪制計算器圖標(biāo)\t057
實戰(zhàn)：使用橢圓工具繪制音樂圖標(biāo)\t058
實戰(zhàn)：使用多種工具繪制移動UI圖標(biāo)\t059
3．1．3 鋼筆工具\(yùn)t060
實戰(zhàn)：使用鋼筆工具繪制天氣圖標(biāo)\t060
3．2 必知的三大功能\t062
3．2．1 文字工具\(yùn)t062
3．2．2 漸變工具\(yùn)t062
3．2．3 蒙版\t063
3．3 必備的樣式效果\t064
3．3．1 斜面與浮雕\t064
3．3．2 描邊\t065
3．3．3 內(nèi)陰影\t065
3．3．4 漸變疊加\t065
3．3．5 圖案疊加\t066
3．3．6 外發(fā)光\t066
3．3．7 投影\t066
3．4 添加畫面質(zhì)感\(zhòng)t067
3．4．1 模糊\t067
3．4．2 雜色\t067
實戰(zhàn)：制作翻頁日歷圖標(biāo)\t068
第4章
移動UI的控件制作\t077
4．1 常見控件的制作\t078
4．1．1 圖標(biāo)\t078
實戰(zhàn)：制作圖標(biāo)\t079
4．1．2 狀態(tài)欄\t080
實戰(zhàn)：制作狀態(tài)欄\t080
4．1．3 導(dǎo)航欄\t082
實戰(zhàn)：制作導(dǎo)航欄\t083
4．1．4 工具欄\t084
實戰(zhàn)：制作工具欄\t084
4．1．5 標(biāo)簽欄\t085
實戰(zhàn)：制作標(biāo)簽欄\t086
4．1．6 搜索欄\t087
實戰(zhàn)：制作搜索欄\t087
4．1．7 選擇欄\t088
實戰(zhàn)：制作選擇欄\t088
4．1．8 滾動條\t090
實戰(zhàn)：制作滾動條\t091
4．1．9 切換器\t092
實戰(zhàn)：制作切換器\t093
4．2 控件構(gòu)成界面的制作\t096
4．2．1 Assistive touch按鈕\t096
實戰(zhàn)：制作Assistive touch按鈕\t096
4．2．2 3D Touch\t099
實戰(zhàn)：制作3D Touch\t099
4．2．3 iOS 9上拉菜單\t101
實戰(zhàn)：制作iOS 9上拉菜單\t101
第5章
不同平臺的控件設(shè)計\t103
5．1 iOS系統(tǒng)的發(fā)展及標(biāo)準(zhǔn)\t104
5．1．1 iOS系統(tǒng)的發(fā)展\t104
5．1．2 iOS的控件構(gòu)成和尺寸\t106
5．2 iOS系統(tǒng)的控件特點(diǎn)\t108
5．2．1 界面美觀\t108
5．2．2 一致性\t108
5．2．3 控制\t108
5．2．4 反饋\t108
5．2．5 設(shè)計元素\t109
5．3 iOS控件界面設(shè)計\t110
實戰(zhàn)：制作通知界面\t110
實戰(zhàn)：制作iOS 10上拉界面\t114
實戰(zhàn)：制作音樂上拉界面\t118
5．4 Android系統(tǒng)的界面元素\t122
5．5 Android系統(tǒng)的控件特點(diǎn)\t122
5．5．1 設(shè)計原則\t122
5．5．2 風(fēng)格\t122
5．5．3 Android的控件構(gòu)成和尺寸\t124
5．6 Android控件界面設(shè)計\t125
實戰(zhàn)：制作鬧鐘設(shè)置界面\t125
實戰(zhàn)：制作社交界面\t130
實戰(zhàn)：制作設(shè)置界面\t134
第6章
不同風(fēng)格的UI設(shè)計\t141
6．1 小清新風(fēng)格手機(jī)界面\t142
6．2 時尚風(fēng)格手機(jī)界面\t147
6．3 可愛風(fēng)格手機(jī)界面\t154
6．4 手繪風(fēng)格手機(jī)界面\t156
6．5 卡通風(fēng)格手機(jī)界面\t162
6．6 方格風(fēng)格手機(jī)界面\t167
6．7 扁平化風(fēng)格手機(jī)界面\t171
6．8 線性風(fēng)格手機(jī)界面\t181
第7章
iOS界面設(shè)計\t197
7．1 扁平化風(fēng)格界面\t198
7．1．1 iOS應(yīng)用主界面\t198
7．1．2 iOS應(yīng)用評論界面\t202
7．1．3 iOS側(cè)邊選項欄\t204
7．2 冷色系風(fēng)格界面\t206
7．2．1 iOS音樂界面\t206
7．2．2 iOS日歷界面\t211
第8章
Android界面設(shè)計 219
8．1 線稿風(fēng)格界面\t220
8．1．1 Android主界面\t220
8．1．2 Android撥號界面\t224
8．2 創(chuàng)意風(fēng)格界面\t228
8．2．1 Android鎖屏界面\t228
8．2．2 Android菜單界面\t235