移動UI設計實戰(zhàn)（微課版）

項目1 移動UI界面設計基礎
1．1　熟悉移動UI設計　1
1．1．1　了解UI設計　1
1．1．2　了解移動UI設計　2
1．1．3　移動UI與平面UI　2
1．2　移動UI設計的平臺分類　4
1．2．1　Android系統(tǒng)　4
1．2．2　iOS系統(tǒng)　6
1．2．3　Wear OS系統(tǒng)和Watch OS系統(tǒng)　7
1．3　了解移動UI設計常用軟件　8
1．3．1　Axure RP和Adobe XD　8
1．3．2　Photoshop和Sketch　9
1．3．3　PxCook和Assistor PS　10
1．4　分析互聯(lián)網產品的需求　11
1．4．1　知識鏈接——互聯(lián)網產品設計流程　11
1．4．2　技術引入——了解互聯(lián)網產品職業(yè)劃分　11
1．4．3　實戰(zhàn)案例——分析互聯(lián)網產品需求　13
1．5　設計互聯(lián)網產品交互效果　15
1．5．1　知識鏈接——互聯(lián)網產品交互設計流程　15
1．5．2　技術引入——了解交互設計和交互設計師　16
1．5．3　實戰(zhàn)案例——分析互聯(lián)網產品交互設計　17
1．6　設計互聯(lián)網產品視覺效果　19
1．6．1　知識鏈接——互聯(lián)網產品配色趨勢　20
1．6．2　技術引入——頁面布局影響視覺效果　22
1．6．3　實戰(zhàn)案例——互聯(lián)網產品視覺設計流程　24
1．6　舉一反三——互聯(lián)網產品專屬色彩的變更　25
1．7　本章小結　27
1．8　課后測試　27
1．8．1　選擇題　27
1．8．2　判斷題　28
1．8．3　創(chuàng)新題　28
項目2　掌握移動UI圖標設計
2．1　圖標設計的必要性　29
2．2　了解圖標柵格系統(tǒng)　30
2．2．1　系統(tǒng)圖標柵格　31
2．2．2　不同造型圖標的柵格規(guī)范　31
2．3　圖標集的制作流程　33
2．31．　創(chuàng)建制作清單　33
2．3．2　設計草圖　33
2．3．3　數字呈現　34
2．3．4　確定最終效果　34
2．3．5　命名并導出　34
2．4　移動UI圖標設計形式　34
2．4．1　中文形式　34
2．4．2　英文形式　36
2．4．3　圖形形式　37
2．4．4　數字和特殊符號形式　37
2．5　設計制作工具圖標　38
2．5．1　知識鏈接——工具圖標的設計風格　38
2．5．2　技術引入——Android系統(tǒng)圖標分類和尺寸　39
2．5．3　實戰(zhàn)案例——設計制作產品工具圖標　41
2．6　設計制作裝飾圖標　45
2．6．1　知識鏈接——裝飾圖標設計風格　46
2．6．2　技術引入——iOS系統(tǒng)圖標尺寸　47
2．6．3　實戰(zhàn)案例——設計制作饒舌音樂風格裝飾圖標　48
2．7　設計制作啟動圖標　51
2．7．1　知識鏈接——啟動圖標設計形式　51
2．7．2　技術引入——啟動圖標設計要求與規(guī)范　52
2．7．3　實戰(zhàn)案例——設計制作收音機APP啟動圖標　54
2．8　舉一反三——設計制作iOS系統(tǒng)圖標　60
2．9　本章小結　60
2．10　課后測試　61
2．10．1　選擇題　61
2．10．2　判斷題　61
2．10．3　創(chuàng)新題　61
項目3　iOS系統(tǒng)電子商務APP界面設計
3．1　電子商務APP項目——“約起”界面設計　63
3．1．1　分析電子商務APP項目背景　63
3．1．2　繪制電子商務APP項目用戶畫像　64
3．2　電子商務APP草圖制作　64
3．2．1　電子商務類APP界面尺寸　64
3．2．2　電子商務類APP界面布局類型　65
3．2．3　實戰(zhàn)案例——設計制作電子商務APP“首頁”草圖　66
3．3　電子商務APP界面色彩搭配　69
3．3．1　電子商務APP界面主色的確定　69
3．3．2　電子商務APP輔色的確定　69
3．3．3　電子商務APP文本色確定　69
3．4　電子商務APP界面頁面元素分析　70
3．4．1　界面中的圖標設置　70
3．4．2　界面中的圖片設置　70
3．4．3　界面中的文字設置　71
3．4．4　實戰(zhàn)案例——設計制作電子商務APP圖標組　71
3．5　電子商務APP界面設計　73
3．5．1　知識鏈接——了解像素與分辨率　73
3．5．2　技術引入——iOS系統(tǒng)界面設計尺寸　74
3．5．3　實戰(zhàn)案例——設計制作電子商務APP界面　75
3．6　電子商務APP交互設計　80
3．6．1　交互設計的重要性　80
3．6．2　交互設計的基本流程　81
3．6．3　實戰(zhàn)案例——設計制作電子商務APP交互效果　82
3．7　電子商務APP界面的標注　84
3．7．1　位置與尺寸標注　84
3．7．2　色彩與字號標注　85
3．7．3　實戰(zhàn)案例——使用PxCook完成“首頁”界面的標注　85
3．8　電子商務APP界面適配　89
3．8．1　iOS系統(tǒng)向下和向上適配　89
3．8．2　適配切片命名規(guī)范　91
3．8．3　實戰(zhàn)案例——使用Adobe XD完成“首頁”界面的適配輸出　92
3．9　舉一反三——設計制作電子商務APP界面　94
3．10　本章小結　94
3．11　課后測試　95
3．11．1　選擇題　95
3．11．2　判斷題　95
3．11．3　創(chuàng)新題　95
項目4　iOS系統(tǒng)美食APP界面設計
4．1　美食APP項目——“吃吃喝喝”界面設計　97
4．1．1　分析美食APP項目背景　97
4．1．2　繪制美食APP項目用戶畫像　98
4．2　美食APP草圖制作　98
4．2．1　美食APP界面尺寸　98
4．2．2　美食APP界面布局類型　99
4．2．3　實戰(zhàn)案例——設計制作美食APP“首頁”草圖　100
4．3　美食APP界面色彩搭配　104
4．3．1　美食APP界面主色的確定　104
4．3．2　美食APP輔色的確定　104
4．3．3　美食APP文本色確定　105
4．4　美食APP界面頁面元素分析　105
4．4．1　界面中的圖片設置　105
4．4．2　界面中的文字設置　106
4．4．3　界面中的圖標設置　106
4．4．4　實戰(zhàn)案例——設計制作美食APP圖標組　107
4．5　美食APP界面設計　109
4．5．1　知識鏈接——了解APP界面中的邊距　109
4．5．2　技術引入——設置APP內容間距　110
4．5．3　實戰(zhàn)案例——設計制作美食APP界面　111
4．6　美食APP交互設計　115
4．6．1　Adobe XD檢查APP界面交互　115
4．6．2　實戰(zhàn)案例——設計制作電子商務APP交互效果　116
4．7　美食APP界面標注　118
4．7．1　APP界面標注內容　118
4．7．2　列一份總表　118
4．7．3　實戰(zhàn)案例——使用PxCook標注美食APP界面　119
4．8　美食APP界面適配與切圖　122
4．8．1　iOS系統(tǒng)適配iPhone X　122
4．8．2　切圖操作中的兩個重要因素　123
4．8．3　實戰(zhàn)案例——完成“首頁”界面素材切片輸出　123
4．9　舉一反三——設計制作外賣APP界面　125
4．10　本章小結　126
4．11　課后測試　126
4．11．1　選擇題　126
4．11．2　判斷題　127
4．11．3　創(chuàng)新題　127
項目5　Android系統(tǒng)創(chuàng)意家居APP界面設計
5．1　創(chuàng)意家居APP項目——“ICON”界面設計　128
4．1．1　完成創(chuàng)意家居APP思維導圖　128
4．1．2　繪制創(chuàng)意家居APP項目用戶畫像　130
5．2　創(chuàng)意家居APP草圖制作　130
5．2．1　創(chuàng)意家居APP界面布局分析　130
5．2．2　創(chuàng)意家居APP界面布局類型　131
5．2．3　實戰(zhàn)案例——設計制作創(chuàng)意家居APP草圖　132
5．3　創(chuàng)意家居APP界面色彩搭配　138
5．3．1　創(chuàng)意家居APP界面主色的確定　138
5．3．2　創(chuàng)意家居APP輔色的確定　139
5．3．3　創(chuàng)意家居APP文本色確定　139
5．4　創(chuàng)意家居APP界面頁面元素分析　139
5．4．1　界面元素間距設置　139
5．4．2　界面中的文本設置　140
5．4．3　界面中的圖標設置　141
5．4．4　實戰(zhàn)案例——設計制作創(chuàng)意家居APP圖標組　142
5．5　創(chuàng)意家居APP界面設計　146
5．5．1　知識鏈接——了解屏幕密度和開發(fā)單位　146
5．5．2　技術引入——了解Android系統(tǒng)的開發(fā)單位　147
5．5．3　實戰(zhàn)案例——設計制作創(chuàng)意家居APP界面　147
5．6　創(chuàng)意家居APP交互設計　152
5．6．1　交互設計需要考慮的內容　153
5．6．2　交互設計需要遵循的習慣　153
5．6．3　實戰(zhàn)案例——設計制作創(chuàng)意教具APP交互效果　154
5．7　創(chuàng)意家居APP界面標注　158
5．7．1　Android系統(tǒng)界面的標注　158
5．7．2　實戰(zhàn)案例——使用PxCook標注創(chuàng)意家居APP界面　159
5．8　創(chuàng)意家居APP界面切圖與適配　163
5．8．1　Android系統(tǒng)中的“點9”切圖　163
5．8．2　如何做到一稿兩用　166
5．8．3　實戰(zhàn)案例——完成“首頁”界面素材切片輸出　167
5．9　舉一反三——設計制作創(chuàng)意家居APP其他頁面　169
5．10　本章小結　169
5．11　課后測試　169
5．11．1　選擇題　169
5．11．2　判斷題　170
5．11．3　創(chuàng)新題　170