移動端APP UI設計與交互基礎教程（簡體書）

第1章講述UI相關設計理念與基本概念；第2章講解UI崗位中與軟件使用相關的主要操作方法；第3章講解移動端界面中還會遇到的其他類型的組件；第4章講解UI工作流程中，原型圖的繪製方法和基本概念；第5章講解APP設計規範，並按照產品開發流程，設計並實現整個APP效果圖；第6章將設計稿轉化為手機端的效果；第7章以實訓的方式，讓讀者從頭至尾再走一遍流程，加深學習記憶，提高團隊協作能力。

第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