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

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