移動(dòng)端APP UI設(shè)計(jì)與交互基礎(chǔ)教程（微課版）

第1章　APP UI設(shè)計(jì)與交互概述　001
1．1　UI設(shè)計(jì)行業(yè)的發(fā)展前景　002
1．1．1　認(rèn)識(shí)相關(guān)概念　002
1．1．2　就業(yè)前景　003
1．2　如何學(xué)習(xí)UI設(shè)計(jì)　004
1．2．1　UI 設(shè)計(jì)師的常用軟件介紹　004
1．2．2　UI 設(shè)計(jì)師的設(shè)計(jì)理論知識(shí)儲(chǔ)備　006
1．3　UI設(shè)計(jì)理論基礎(chǔ)　006
1．3．1　色彩三要素　006
1．3．2　UI 設(shè)計(jì)配色基礎(chǔ)　007
1．4　APP頁(yè)面分類及其作品欣賞　009
1．5　淺析APP產(chǎn)品開發(fā)流程　013
1．6　職場(chǎng)經(jīng)驗(yàn)分享　015
1．7　學(xué)習(xí)反思　016
第2章　UI圖標(biāo)設(shè)計(jì)　017
2．1　初識(shí)移動(dòng)設(shè)備尺寸及其相關(guān)概念　018
2．1．1　px、pt 和ppi 等相關(guān)概念　018
2．1．2　iPhone 機(jī)型屏幕尺寸規(guī)格　018
2．2　UI圖標(biāo)設(shè)計(jì)　019
2．2．1　圖標(biāo)的分類　019
2．2．2　常見存儲(chǔ)格式與圖標(biāo)尺寸　021
2．2．3　APP 啟動(dòng)圖標(biāo)的常見創(chuàng)意設(shè)計(jì)方法　022
2．3　線性圖標(biāo)　023
2．3．1　線性圖標(biāo)概述　023
2．3．2　線性圖標(biāo)的制作（Wi-Fi 圖標(biāo)）　024
2．3．3　課堂鞏固練習(xí)（Keep圖標(biāo)）　026
2．4　剪影類圖標(biāo)　026
2．4．1　剪影類圖標(biāo)概述　026
2．4．2　剪影類圖標(biāo)的制作（抖音APP 圖標(biāo)）　027
2．4．3　課堂鞏固練習(xí)（微信圖標(biāo)）　030
2．5　扁平化與長(zhǎng)陰影類圖標(biāo)　030
2．5．1　知識(shí)點(diǎn)概述　030
2．5．2　扁平化與長(zhǎng)陰影類圖標(biāo)的制作（指南針圖標(biāo)）　031
2．5．3　課堂鞏固練習(xí)（一組扁平化圖標(biāo)）　034
2．6　擬物類圖標(biāo)的制作　035
2．6．1　知識(shí)概述　035
2．6．2　擬物類圖標(biāo)的制作（木紋質(zhì)感翻頁(yè)日歷）　035
2．6．3　課堂鞏固練習(xí)（擬物齒輪）　040
2．7　學(xué)習(xí)反思　041
第3章　常見APP組件的設(shè)計(jì)與實(shí)現(xiàn)　043
3．1　UI Kit概述　044
3．2　按鈕　044
3．2．1　按鈕概述　044
3．2．2　按鈕的按壓狀態(tài)　046
3．2．3　按鈕的種類　046
3．2．4　按鈕的設(shè)計(jì)要點(diǎn)　048
3．2．5　扁平化按鈕的制作　049
3．2．6　質(zhì)感按鈕的制作　050
3．2．7　課堂鞏固練習(xí)（水晶按鈕）　055
3．3　滑動(dòng)條　055
3．3．1　扁平滑動(dòng)條的制作　055
3．3．2　質(zhì)感滑動(dòng)條的制作　056
3．3．3　課堂鞏固練習(xí)（QQ音樂播放器）　059
3．4　表單　059
3．4．1　表單結(jié)構(gòu)與設(shè)計(jì)要點(diǎn)　059
3．4．2　單選按鈕與復(fù)選框的制作　061
3．4．3　文本框與下拉框的制作　063
3．4．4　課堂鞏固練習(xí)
（反饋頁(yè)表單）　064
3．5　數(shù)據(jù)圖表　065
3．5．1　認(rèn)識(shí)數(shù)據(jù)圖表　065
3．5．2　數(shù)據(jù)圖表的制作　067
3．5．3　課堂鞏固練習(xí)（環(huán)形數(shù)據(jù)圖表）　071
3．6　學(xué)習(xí)反思　072
第4章　交互設(shè)計(jì)與原型圖繪制　073
4．1　初識(shí)交互設(shè)計(jì)　074
4．1．1　交互設(shè)計(jì)概述　074
4．1．2　產(chǎn)品開發(fā)中的層級(jí)關(guān)系　075
4．1．3　相關(guān)工作經(jīng)驗(yàn)　076
4．2　初識(shí)產(chǎn)品原型　077
4．3　原型制作工具——Axure RP　078
4．3．1　Axure RP界面認(rèn)知　078
4．3．2　Axure RP基本操作　079
4．3．3　繪制手機(jī)原型存放于自己的元件庫(kù)　081
4．3．4　多頁(yè)面鞏固練習(xí)（金融類APP原型圖繪制）　083
4．4　Axure RP常見的交互應(yīng)用　084
4．4．1　頁(yè)面跳轉(zhuǎn)　084
4．4．2　引導(dǎo)頁(yè)左右滑動(dòng)效果　085
4．4．3　長(zhǎng)頁(yè)面上下滾動(dòng)效果　088
4．4．4　彈出消息框效果　090
4．4．5　側(cè)邊欄菜單滑入效果　093
4．4．6　表單驗(yàn)證與登錄交互　095
4．5　學(xué)習(xí)反思　099
第5章　APP界面設(shè)計(jì)與實(shí)戰(zhàn)　100
5．1　認(rèn)識(shí)APP應(yīng)用程序及其相關(guān)概念　101
5．1．1　常見術(shù)語(yǔ)　101
5．1．2　常見手機(jī)屏幕尺寸　103
5．2　設(shè)計(jì)規(guī)范　106
5．2．1　iOS設(shè)計(jì)規(guī)范　106
5．2．2　Android設(shè)計(jì)規(guī)范　107
5．2．3　邊距與間距　108
5．2．4　內(nèi)容布局　110
5．2．5　常用顏色　111
5．3　APP項(xiàng)目實(shí)戰(zhàn)——“UI社”APP產(chǎn)品設(shè)計(jì)與實(shí)現(xiàn)　111
5．3．1　產(chǎn)品定位與背景簡(jiǎn)要分析　111
5．3．2　競(jìng)品分析　112
5．3．3　“UI社”產(chǎn)品架構(gòu)梳理　117
5．3．4　繪制低保真原型圖　118
5．3．5　“UI社”APP的視覺規(guī)范　119
5．3．6　APP產(chǎn)品啟動(dòng)圖標(biāo)的制作　121
5．3．7　“引導(dǎo)頁(yè)”效果圖制作　121
5．3．8　“登錄頁(yè)”效果圖制作　122
5．3．9　“首頁(yè)”效果圖制作　122
5．3．10　“發(fā)現(xiàn)頁(yè)”效果圖制作　123
5．3．11　“上傳頁(yè)”效果圖制作　123
5．3．12　“動(dòng)態(tài)頁(yè)”與“動(dòng)態(tài)詳情頁(yè)”效果圖制作　123
5．3．13　“我的頁(yè)”效果圖制作　124
5．3．14　其他頁(yè)面效果圖　125
5．4　學(xué)習(xí)反思　126
第6章　標(biāo)注與切圖　128
6．1　標(biāo)注　129
6．1．1　標(biāo)注工具介紹　129
6．1．2　Markman（馬克鰻）的使用方法　130
6．1．3　標(biāo)注哪些信息　132
6．1．4　“UI社”APP項(xiàng)目“引導(dǎo)頁(yè)”標(biāo)注　132
6．1．5　“UI社”APP項(xiàng)目“登錄頁(yè)”標(biāo)注　133
6．1．6　“UI社”APP項(xiàng)目“首頁(yè)”標(biāo)注　134
6．1．7　“UI社”APP項(xiàng)目“教程列表頁(yè)”標(biāo)注　134
6．2　切圖　135
6．2．1　切圖概述　135
6．2．2　圖片資源命名規(guī)范　136
6．2．3　切圖工具——Cutterman　136
6．2．4　iOS平臺(tái)與Android平臺(tái)下的切圖　137
6．2．5　點(diǎn)9圖　140
6．3　學(xué)習(xí)反思　142