移動UI界面設計

第 1章　初識移動UI設計　1
1．1　移動App產(chǎn)品開發(fā)的基本流程　2
1．2　移動UI設計的三大操作系統(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設計常用的軟件　7
1．3．1　Photoshop　8
1．3．2　Illustrator　8
1．3．3　Axure RP　9
1．4　移動UI設計中常用的圖片存儲格式　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　與設計尺寸相關的術語　11
1．5．1　屏幕尺寸　11
1．5．2　分辨率　11
1．5．3　屏幕像素密度　12
1．6　制作Apple Watch App鬧鐘圖標　13
1．6．1　圖標概述　13
1．6．2　圖標的分類　15
1．6．3　圖標的設計方法　19
1．6．4　演示案例——制作Apple Watch App鬧鐘圖標　20
本章總結　21
本章作業(yè)　21
第　2章 移動UI圖標設計規(guī)范　23
2．1　移動UI圖標設計原則　24
2．1．1　可識別性　24
2．1．2　一致性　25
2．1．3　兼容性　27
2．2　制作iOS系統(tǒng)口袋商城啟動圖標　28
2．2．1　iOS系統(tǒng)圖標概述　29
2．2．2　iOS系統(tǒng)圖標設計規(guī)范　29
2．2．3　演示案例——制作iOS系統(tǒng)口袋商城啟動圖標　31
2．3　制作Android系統(tǒng)電影啟動圖標　33
2．3．1　Android系統(tǒng)圖標概述　33
2．3．2　Android系統(tǒng)圖標設計規(guī)范　34
2．3．3　演示案例——制作Android系統(tǒng)電影啟動圖標　37
2．4　制作雙系統(tǒng)下商場啟動圖標　39
2．4．1　雙系統(tǒng)下的啟動圖標　39
2．4．2　雙系統(tǒng)下啟動圖標的差異　40
2．4．3　演示案例——制作雙系統(tǒng)下商場啟動圖標　41
本章總結　43
本章作業(yè)　43
第3章　扁平化風格圖標設計　45
3．1　制作扁平化風格相機圖標　46
3．1．1　扁平化風格概述　46
3．1．2　扁平化風格的設計原則　49
3．1．3　演示案例——制作扁平化風格相機圖標　52
3．2　制作折紙風格“設置”圖標　54
3．2．1　折紙風格圖標概述　55
3．2．2　折紙風格圖標的藝術特征　55
3．2．3　演示案例——制作折紙風格“設置”圖標　57
3．3　制作長陰影風格Safari圖標　58
3．3．1　長陰影風格圖標的特點　59
3．3．2　演示案例——制作長陰影風格Safari圖標　60
本章總結　61
本章作業(yè)　61
第4章　擬物化風格圖標設計　63
4．1　制作擬物化風格日歷啟動圖標　64
4．1．1　擬物化風格的概念　65
4．1．2　擬物化風格的特點　67
4．1．3　演示案例——制作擬物化風格日歷啟動圖標　69
4．2　制作擬物化風格抽屜郵件啟動圖標　70
4．2．1　擬物化風格圖標的設計流程　71
4．2．2　擬物化風格圖標的設計原則　75
4．2．3　演示案例——制作擬物化風格抽屜郵件啟動圖標　78
4．3　制作擬物化風格相機圖標　81
4．3．1　擬物化風格圖標的造型設計手法　82
4．3．2　擬物化風格圖標的質感表現(xiàn)手法　83
4．3．3　演示案例——制作擬物化風格相機圖標　85
本章總結　87
本章作業(yè)　88
第5章　Android系統(tǒng)UI設計規(guī)范　89
5．1　制作Android系統(tǒng)手機界面模板　90
5．1．1　Android系統(tǒng)手機界面設計概述　90
5．1．2　Android系統(tǒng)手機的設計尺寸與常見術語　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
本章總結　111
本章作業(yè)　111
第6章　iOS系統(tǒng)UI設計規(guī)范　113
6．1　制作iOS系統(tǒng)手機界面模板　114
6．1．1　iOS系統(tǒng)手機設計概述　115
6．1．2　iOS系統(tǒng)手機的設計尺寸與常見術語　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
本章總結　137
本章作業(yè)　137
第7章　“生活幫幫幫”App項目的設計與制作　139
7．1　Android系統(tǒng)應用程序項目案例——“生活幫幫幫”項目　140
7．1．1　項目背景　140
7．1．2　設計要求及主要功能　141
7．2　App類型及界面設計技巧　143
7．2．1　App的類型　143
7．2．2　App的界面設計技巧　146
7．2．3　項目實現(xiàn)流程　148
7．3　“生活幫幫幫”界面設計實現(xiàn)思路　148
7．3．1　內容優(yōu)先和布局合理　148
7．3．2　界面的繪制和構建　149
7．3．3　功能架構　149
7．3．4　色彩運用　151
7．3．5　技術要點　151
7．3．6　設計前的注意事項　151
本章總結　152
本章作業(yè)　152