移動端APP UI設計與交互基礎教程（微課版）

吳豐，曾出版多部相關教材：1）網頁設計與製作（Dreamweaver CS6+HTML5+CSS3版），獨著，ISBN編號: 9787302403845，清華大學出版社，2015年12月出版。2）HTML5+CSS3 Web前端設計基礎教程，獨著，ISBN978-7-115-45577-2，人民郵電出版社。

第1章APP UI設計與交互概述001 

1.1 UI設計行業的發展前景002 
1.1.1認識相關概念002 
1.1.2就業前景003 
1.2如何學習UI設計004 
1.2.1 UI設計師的常用軟件介紹004 
1.2. 2 UI設計師的設計理論知識儲備006 
1.3 UI設計理論基礎006 
1.3.1色彩三要素006 
1.3.2 UI設計配色基礎007 
1.4 APP頁面分類及其作品欣賞009 
1.5淺析APP產品開發流程013 
1.6職場經驗分享015 
1.7學習反思016 

第2章UI圖標設計017 

2.1初識移動設備尺寸及其相關概念018 
2.1.1 px、pt和ppi等相關概念018 
2.1.2 iPhone機型屏幕尺寸規格018 
2.2 UI圖標設計019 
2.2.1圖標的分類019 
2.2.2常見存儲格式與圖標尺寸021 
2.2.3 APP啟動圖標的常見創意設計方法022 
2.3線性圖標023 
2.3.1線性圖標概述023 
2.3.2線性圖標的製作（ Wi-Fi圖標） 024
2.3.3課堂鞏固練習（Keep圖標） 026 
2.4剪影類圖標026 
2.4.1剪影類圖標概述026 
2.4.2剪影類圖標的製作（抖音APP圖標） 027 
2.4.3課堂鞏固練習（微信圖標） 030 
2.5扁平化與長陰影類圖標030 
2.5.1知識點概述030 
2.5.2扁平化與長陰影類圖標的製作（指南針圖標） 031 
2.5.3課堂鞏固練習（一組扁平化圖標） 034 
2.6擬物類圖標的製作035 
2.6.1知識概述035 
2.6.2擬物類圖標的製作（木紋質感翻頁日曆） 035 
2.6.3課堂鞏固練習（擬物齒輪） 040 
2.7學習反思041 

第3章常見APP組件的設計與實現043 

3.1 UI Kit概述044 
3.2按鈕044 
3.2.1按鈕概述044 
3.2.2按鈕的按壓狀態046 
3.2.3按鈕的種類046 
3.2.4按鈕的設計要點048 
3.2.5扁平化按鈕的製作049 
3.2.6質感按鈕的製作050 
3.2.7課堂鞏固練習（水晶按鈕） 055 
3.3滑動條055 
3.3.1扁平滑動條的製作055 
3.3.2質感滑動條的製作056
3.3.3課堂鞏固練習（QQ音樂播放器） 059 
3.4表單059 
3.4.1表單結構與設計要點059 
3.4.2單選按鈕與復選框的製作061 
3.4.3文本框與下拉框的製作063 
3.4 .4課堂鞏固練習
（反饋頁表單） 064 
3.5數據圖表065 
3.5.1認識數據圖表065 
3.5.2數據圖表的製作067 
3.5.3課堂鞏固練習（環形數據圖表） 071 
3.6學習反思072 

第4章交互設計與原型圖繪製073 

4.1初識交互設計074 
4.1.1交互設計概述074 
4.1.2產品開發中的層級關係075 
4.1.3相關工作經驗076 
4.2初識產品原型077 
4.3原型製作工具——Axure RP 078 
4.3.1 Axure RP界面認知078 
4.3.2 Axure RP基本操作079 
4.3.3繪製手機原型存放於自己的元件庫081 
4.3.4多頁面鞏固練習（金融類APP原型圖繪製） 083 
4.4 Axure RP常見的交互應用084 
4.4.1頁面跳轉084 
4.4.2引導頁左右滑動效果085 
4.4.3長頁面上下滾動效果088
4.4.4彈出消息框效果090 
4.4.5側邊欄菜單滑入效果093 
4.4.6表單驗證與登錄交互095 
4.5學習反思099 

第5章APP界面設計與實戰100 

5.1認識APP應用程序及其相關概念101 
5.1.1常見術語101 
5.1.2常見手機屏幕尺寸103 
5.2設計規範106 
5.2.1 iOS設計規範106 
5.2.2 Android設計規範107 
5.2.3邊距與間距108 
5.2.4內容佈局110 
5.2.5常用顏色111 
5.3 APP項目實戰——“UI社”APP產品設計與實現111 
5.3.1產品定位與背景簡要分析111 
5.3.2競品分析112 
5.3.3 “UI社”產品架構梳理117 
5.3.4繪製低保真原型圖118 
5.3.5 “UI社”APP的視覺規範119 
5.3.6 APP產品啟動圖標的製作121 
5.3.7 “引導頁”效果圖製作121 
5.3.8 “登錄頁”效果圖製作122 
5.3.9 “首頁”效果圖製作122 
5.3.10 “發現頁”效果圖製作123 
5.3.11 “上傳頁”效果圖製作123
5.3.12 “動態頁”與“動態詳情頁”效果圖製作123 
5.3.13 “我的頁”效果圖製作124 
5.3.14其他頁面效果圖125 
5.4學習反思126 

第6章標註與切圖128 

6.1標註129 
6.1.1標註工具介紹129 
6.1.2 Markman（馬克鰻）的使用方法130 
6.1.3標註哪些信息132 
6.1.4 “UI社”APP項目“引導頁”標註132 
6.1.5 “UI社” APP項目“登錄頁”標註133 
6.1.6 “UI社”APP項目“首頁”標註134 
6.1.7 “UI社”APP項目“教程列表頁”標註134 
6.2切圖135 
6.2.1切圖概述135 
6.2 .2圖片資源命名規範136 
6.2.3切圖工具——Cutterman 136 
6.2.4 iOS平台與Android平台下的切圖137 
6.2.5點9圖140 
6.3學習反思142