移動UI界面設(shè)計

第 1章　初識移動UI設(shè)計　1
1．1　移動App產(chǎn)品開發(fā)的基本流程　2
1．2　移動UI設(shè)計的三大操作系統(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è)計常用的軟件　7
1．3．1　Photoshop　8
1．3．2　Illustrator　8
1．3．3　Axure RP　9
1．4　移動UI設(shè)計中常用的圖片存儲格式　10
1．4．1　JPEG（．jpg）　10
1．4．2　GIF（．gif）　10
1．4．3　PNG（．png）　10
1．4．4　點九PN（．9．png）　10
1．5　與設(shè)計尺寸相關(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è)計方法　19
1．6．4　演示案例——制作Apple Watch App鬧鐘圖標(biāo)　20
本章總結(jié)　21
本章作業(yè)　21
第　2章 移動UI圖標(biāo)設(shè)計規(guī)范　23
2．1　移動UI圖標(biāo)設(shè)計原則　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è)計規(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è)計規(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è)計　45
3．1　制作扁平化風(fēng)格相機圖標(biāo)　46
3．1．1　扁平化風(fēng)格概述　46
3．1．2　扁平化風(fēng)格的設(shè)計原則　49
3．1．3　演示案例——制作扁平化風(fēng)格相機圖標(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)的特點　59
3．3．2　演示案例——制作長陰影風(fēng)格Safari圖標(biāo)　60
本章總結(jié)　61
本章作業(yè)　61
第4章　擬物化風(fēng)格圖標(biāo)設(shè)計　63
4．1　制作擬物化風(fēng)格日歷啟動圖標(biāo)　64
4．1．1　擬物化風(fēng)格的概念　65
4．1．2　擬物化風(fēng)格的特點　67
4．1．3　演示案例——制作擬物化風(fēng)格日歷啟動圖標(biāo)　69
4．2　制作擬物化風(fēng)格抽屜郵件啟動圖標(biāo)　70
4．2．1　擬物化風(fēng)格圖標(biāo)的設(shè)計流程　71
4．2．2　擬物化風(fēng)格圖標(biāo)的設(shè)計原則　75
4．2．3　演示案例——制作擬物化風(fēng)格抽屜郵件啟動圖標(biāo)　78
4．3　制作擬物化風(fēng)格相機圖標(biāo)　81
4．3．1　擬物化風(fēng)格圖標(biāo)的造型設(shè)計手法　82
4．3．2　擬物化風(fēng)格圖標(biāo)的質(zhì)感表現(xiàn)手法　83
4．3．3　演示案例——制作擬物化風(fēng)格相機圖標(biāo)　85
本章總結(jié)　87
本章作業(yè)　88
第5章　Android系統(tǒng)UI設(shè)計規(guī)范　89
5．1　制作Android系統(tǒng)手機界面模板　90
5．1．1　Android系統(tǒng)手機界面設(shè)計概述　90
5．1．2　Android系統(tǒng)手機的設(shè)計尺寸與常見術(shù)語　92
5．1．3　Android系統(tǒng)中的欄　93
5．1．4　Android系統(tǒng)中的按鈕與可點擊區(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)手機界面模板　98
5．2　制作Android系統(tǒng)手機UI套件　99
5．2．1　Android系統(tǒng)的手機控件　99
5．2．2　演示案例——制作Android系統(tǒng)手機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è)計規(guī)范　113
6．1　制作iOS系統(tǒng)手機界面模板　114
6．1．1　iOS系統(tǒng)手機設(shè)計概述　115
6．1．2　iOS系統(tǒng)手機的設(shè)計尺寸與常見術(shù)語　115
6．1．3　iOS系統(tǒng)中的欄　117
6．1．4　iOS系統(tǒng)的按鈕與可點擊區(qū)域　120
6．1．5　iOS系統(tǒng)中的字體與字號　121
6．1．6　演示案例——制作iOS系統(tǒng)手機界面模板　121
6．2　制作iOS系統(tǒng)手機UI套件　122
6．2．1　iOS系統(tǒng)的手機控件　123
6．2．2　演示案例——制作iOS系統(tǒng)手機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項目的設(shè)計與制作　139
7．1　Android系統(tǒng)應(yīng)用程序項目案例——“生活幫幫幫”項目　140
7．1．1　項目背景　140
7．1．2　設(shè)計要求及主要功能　141
7．2　App類型及界面設(shè)計技巧　143
7．2．1　App的類型　143
7．2．2　App的界面設(shè)計技巧　146
7．2．3　項目實現(xiàn)流程　148
7．3　“生活幫幫幫”界面設(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　色彩運用　151
7．3．5　技術(shù)要點　151
7．3．6　設(shè)計前的注意事項　151
本章總結(jié)　152
本章作業(yè)　152