移動UI界面設(shè)計(jì)

第 1章　初識移動UI設(shè)計(jì)　1
1．1　移動App產(chǎn)品開發(fā)的基本流程　2
1．2　移動UI設(shè)計(jì)的三大操作系統(tǒng)　4
1．2．1　Android系統(tǒng)　5
1．2．2　iOS系統(tǒng)　6
1．2．3　Windows Phone系統(tǒng)　6
1．3　移動UI設(shè)計(jì)常用的軟件　7
1．3．1　Photoshop　8
1．3．2　Illustrator　8
1．3．3　Axure RP　9
1．4　移動UI設(shè)計(jì)中常用的圖片存儲格式　10
1．4．1　JPEG（．jpg）　10
1．4．2　GIF（．gif）　10
1．4．3　PNG（．png）　10
1．4．4　點(diǎn)九PN（．9．png）　10
1．5　與設(shè)計(jì)尺寸相關(guān)的術(shù)語　11
1．5．1　屏幕尺寸　11
1．5．2　分辨率　11
1．5．3　屏幕像素密度　12
1．6　制作Apple Watch App鬧鐘圖標(biāo)　13
1．6．1　圖標(biāo)概述　13
1．6．2　圖標(biāo)的分類　15
1．6．3　圖標(biāo)的設(shè)計(jì)方法　19
1．6．4　演示案例——制作Apple Watch App鬧鐘圖標(biāo)　20
本章總結(jié)　21
本章作業(yè)　21
第　2章 移動UI圖標(biāo)設(shè)計(jì)規(guī)范　23
2．1　移動UI圖標(biāo)設(shè)計(jì)原則　24
2．1．1　可識別性　24
2．1．2　一致性　25
2．1．3　兼容性　27
2．2　制作iOS系統(tǒng)口袋商城啟動圖標(biāo)　28
2．2．1　iOS系統(tǒng)圖標(biāo)概述　29
2．2．2　iOS系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范　29
2．2．3　演示案例——制作iOS系統(tǒng)口袋商城啟動圖標(biāo)　31
2．3　制作Android系統(tǒng)電影啟動圖標(biāo)　33
2．3．1　Android系統(tǒng)圖標(biāo)概述　33
2．3．2　Android系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范　34
2．3．3　演示案例——制作Android系統(tǒng)電影啟動圖標(biāo)　37
2．4　制作雙系統(tǒng)下商場啟動圖標(biāo)　39
2．4．1　雙系統(tǒng)下的啟動圖標(biāo)　39
2．4．2　雙系統(tǒng)下啟動圖標(biāo)的差異　40
2．4．3　演示案例——制作雙系統(tǒng)下商場啟動圖標(biāo)　41
本章總結(jié)　43
本章作業(yè)　43
第3章　扁平化風(fēng)格圖標(biāo)設(shè)計(jì)　45
3．1　制作扁平化風(fēng)格相機(jī)圖標(biāo)　46
3．1．1　扁平化風(fēng)格概述　46
3．1．2　扁平化風(fēng)格的設(shè)計(jì)原則　49
3．1．3　演示案例——制作扁平化風(fēng)格相機(jī)圖標(biāo)　52
3．2　制作折紙風(fēng)格“設(shè)置”圖標(biāo)　54
3．2．1　折紙風(fēng)格圖標(biāo)概述　55
3．2．2　折紙風(fēng)格圖標(biāo)的藝術(shù)特征　55
3．2．3　演示案例——制作折紙風(fēng)格“設(shè)置”圖標(biāo)　57
3．3　制作長陰影風(fēng)格Safari圖標(biāo)　58
3．3．1　長陰影風(fēng)格圖標(biāo)的特點(diǎn)　59
3．3．2　演示案例——制作長陰影風(fēng)格Safari圖標(biāo)　60
本章總結(jié)　61
本章作業(yè)　61
第4章　擬物化風(fēng)格圖標(biāo)設(shè)計(jì)　63
4．1　制作擬物化風(fēng)格日歷啟動圖標(biāo)　64
4．1．1　擬物化風(fēng)格的概念　65
4．1．2　擬物化風(fēng)格的特點(diǎn)　67
4．1．3　演示案例——制作擬物化風(fēng)格日歷啟動圖標(biāo)　69
4．2　制作擬物化風(fēng)格抽屜郵件啟動圖標(biāo)　70
4．2．1　擬物化風(fēng)格圖標(biāo)的設(shè)計(jì)流程　71
4．2．2　擬物化風(fēng)格圖標(biāo)的設(shè)計(jì)原則　75
4．2．3　演示案例——制作擬物化風(fēng)格抽屜郵件啟動圖標(biāo)　78
4．3　制作擬物化風(fēng)格相機(jī)圖標(biāo)　81
4．3．1　擬物化風(fēng)格圖標(biāo)的造型設(shè)計(jì)手法　82
4．3．2　擬物化風(fēng)格圖標(biāo)的質(zhì)感表現(xiàn)手法　83
4．3．3　演示案例——制作擬物化風(fēng)格相機(jī)圖標(biāo)　85
本章總結(jié)　87
本章作業(yè)　88
第5章　Android系統(tǒng)UI設(shè)計(jì)規(guī)范　89
5．1　制作Android系統(tǒng)手機(jī)界面模板　90
5．1．1　Android系統(tǒng)手機(jī)界面設(shè)計(jì)概述　90
5．1．2　Android系統(tǒng)手機(jī)的設(shè)計(jì)尺寸與常見術(shù)語　92
5．1．3　Android系統(tǒng)中的欄　93
5．1．4　Android系統(tǒng)中的按鈕與可點(diǎn)擊區(qū)域　95
5．1．5　建立適合Android系統(tǒng)的網(wǎng)格系統(tǒng)　96
5．1．6　Android系統(tǒng)中的字體與字號　97
5．1．7　演示案例——制作Android系統(tǒng)手機(jī)界面模板　98
5．2　制作Android系統(tǒng)手機(jī)UI套件　99
5．2．1　Android系統(tǒng)的手機(jī)控件　99
5．2．2　演示案例——制作Android系統(tǒng)手機(jī)UI套件　105
5．3　制作Android系統(tǒng)郵箱界面　106
5．3．1　Android系統(tǒng)界面中的列表和網(wǎng)格　107
5．3．2　演示案例——制作Android系統(tǒng)郵箱界面　109
本章總結(jié)　111
本章作業(yè)　111
第6章　iOS系統(tǒng)UI設(shè)計(jì)規(guī)范　113
6．1　制作iOS系統(tǒng)手機(jī)界面模板　114
6．1．1　iOS系統(tǒng)手機(jī)設(shè)計(jì)概述　115
6．1．2　iOS系統(tǒng)手機(jī)的設(shè)計(jì)尺寸與常見術(shù)語　115
6．1．3　iOS系統(tǒng)中的欄　117
6．1．4　iOS系統(tǒng)的按鈕與可點(diǎn)擊區(qū)域　120
6．1．5　iOS系統(tǒng)中的字體與字號　121
6．1．6　演示案例——制作iOS系統(tǒng)手機(jī)界面模板　121
6．2　制作iOS系統(tǒng)手機(jī)UI套件　122
6．2．1　iOS系統(tǒng)的手機(jī)控件　123
6．2．2　演示案例——制作iOS系統(tǒng)手機(jī)UI套件　131
6．3　制作iOS系統(tǒng)控制中心界面　132
6．3．1　iOS系統(tǒng)界面的布局　133
6．3．2　演示案例——制作iOS系統(tǒng)控制中心界面　135
本章總結(jié)　137
本章作業(yè)　137
第7章　“生活幫幫幫”App項(xiàng)目的設(shè)計(jì)與制作　139
7．1　Android系統(tǒng)應(yīng)用程序項(xiàng)目案例——“生活幫幫幫”項(xiàng)目　140
7．1．1　項(xiàng)目背景　140
7．1．2　設(shè)計(jì)要求及主要功能　141
7．2　App類型及界面設(shè)計(jì)技巧　143
7．2．1　App的類型　143
7．2．2　App的界面設(shè)計(jì)技巧　146
7．2．3　項(xiàng)目實(shí)現(xiàn)流程　148
7．3　“生活幫幫幫”界面設(shè)計(jì)實(shí)現(xiàn)思路　148
7．3．1　內(nèi)容優(yōu)先和布局合理　148
7．3．2　界面的繪制和構(gòu)建　149
7．3．3　功能架構(gòu)　149
7．3．4　色彩運(yùn)用　151
7．3．5　技術(shù)要點(diǎn)　151
7．3．6　設(shè)計(jì)前的注意事項(xiàng)　151
本章總結(jié)　152
本章作業(yè)　152