內容簡介
本書以移動App設計為主線，全麵、係統地介紹移動UI設計方法和技巧，在內容編排上，分為UI設計入門篇、UI設計圖標篇、UI設計界麵篇和UI設計實戰篇。 本書聚焦設計能力培養，采用理論知識與案例相結合的方式，通過大量的實操案例，配以詳細的設計步驟，讓讀者切實融入設計中。本書為讀者提供內容結構圖，幫助讀者梳理知識，還安排知識拓展、課後實訓、本單元小結和課後練習題，幫助讀者提升技術水平。 本書配套資源包含書中所講案例的素材、源文件等，讀者可以跟隨步驟完成效果製作。
作者簡介
移動UI設計案例教程（微課版）移動UI設計案例教程（微課版）移動UI設計案例教程（微課版）移動UI設計案例教程（微課版）移動UI設計案例教程（微課版）移動UI設計案例教程（微課版）移動UI設計案例教程（微課版）移動UI設計案例教程（微課版）
目錄
封麵
版權信息
內容提要
前言
第1篇 UI設計入門篇
01 單元1 走進UI設計
1.1 UI設計介紹
1.1.1 UI設計的概念
1.1.2 UI設計原則
1.1.3 UI設計分類
1.1.4 UI設計尺寸相關知識
1.2 UI設計流程
1.2.1 需求分析
1.2.2 原型設計
1.2.3 視覺設計
1.2.4 切圖與標注
1.3 UI設計圖像
1.3.1 圖像類型
1.3.2 圖像格式
1.4 UI設計風格
1.4.1 扁平化風格
1.4.2 幾何風格
1.4.3 擬物化風格
1.4.4 玻璃風格
1.5 本單元小結
1.6 課後練習題
02 單元2 UI設計要素
2.1 UI設計布局
2.1.1 宮格布局
2.1.2 列表布局
2.1.3 卡片布局
2.1.4 瀑布流式布局
2.1.5 多麵板布局
2.2 UI設計色彩
2.2.1 色彩的構成
2.2.2 色彩的混合
2.2.3 色彩的調和
2.2.4 色彩的推移
2.2.5 色彩的聯想
2.2.6 色彩的心理應用
2.3 本單元小結
2.4 課後練習題
03 單元3 移動端操作係統
3.1 iOS
3.1.1 主題明確
3.1.2 色彩一致
3.1.3 留白設計
3.1.4 良好布局
3.2 Android係統
3.2.1 布局靈活
3.2.2 色彩豔麗
3.2.3 操作便捷
3.3 本單元小結
3.4 課後練習題
第2篇 UI設計圖標篇
04 單元4 移動App圖標基礎
4.1 圖標基礎概念
4.1.1 圖案的概念
4.1.2 圖標的概念
4.1.3 圖標的分類
4.2 圖標設計流程
4.2.1 明確主題
4.2.2 提煉核心形狀
4.2.3 草圖繪製
4.2.4 選擇標準色
4.2.5 圖標設計
4.2.6 切圖輸出
4.3 圖標設計初探
【課堂案例4-1】時鍾圖標繪製
【課堂案例4-2】學位帽圖標繪製
【課堂案例4-3】折頁圖標繪製
4.4 本單元小結
4.5 課後練習題
05 單元5 移動App圖標風格
5.1 剪影圖標設計
5.1.1 線性剪影圖標設計
【課堂案例5-1】線性天氣圖標繪製
【課堂案例5-2】線性開關圖標繪製
【課堂案例5-3】線性刪除圖標繪製
5.1.2 麵性剪影圖標設計
【課堂案例5-4】麵性確認圖標繪製
【課堂案例5-5】麵性設置圖標繪製
【課堂案例5-6】麵性笑臉圖標繪製
【課堂案例5-7】麵性相機圖標繪製
【課堂案例5-8】麵性文檔圖標繪製
5.2 扁平化圖標設計
5.2.1 純平麵扁平化圖標
【課堂案例5-9】純平麵扁平化電池圖標設計
5.2.2 折紙風扁平化圖標
【課堂案例5-10】折紙風扁平化信封愛心未讀圖標設計
【課堂案例5-11】折紙風扁平化信封愛心已讀圖標設計
5.2.3 長投影扁平化圖標
【課堂案例5-12】長投影下載圖標設計
5.2.4 輕折疊扁平化圖標
【課堂案例5-13】輕折疊多媒體圖標設計
【課堂案例5-14】輕折疊扁平化計算器圖標設計
5.2.5 微立體扁平化圖標
【課堂案例5-15】微立體定位圖標設計
5.3 擬物化圖標設計
5.3.1 擬物化圖標的特點
5.3.2 擬物化圖標案例
【課堂案例5-16】擬物化旋轉按鈕圖標設計
【課堂案例5-17】擬物化卡包圖標設計（橫版）
【課堂案例5-18】擬物化卡包圖標設計（豎版）
5.4 本單元小結
5.5 課後練習題
第3篇 UI設計界麵篇
06 單元6 界麵常用控件
6.1 滑塊設計
6.1.1 滑塊構成
6.1.2 滑塊分類
【課堂案例6-1】線條滑塊設計
【課堂案例6-2】旋轉滑塊設計
6.2 表單設計
6.2.1 表單類型
6.2.2 下拉列表框設計
【課堂案例6-3】類目下拉列表框設計
6.2.3 搜索框設計
【課堂案例6-4】移動端App搜索框設計
6.2.4 選擇器設計
【課堂案例6-5】日歷界麵設計
6.2.5 開關設計
【課堂案例6-6】開關設計
6.3 按鈕設計
6.3.1 按鈕類型
6.3.2 簡約按鈕設計
【課堂案例6-7】簡約確認按鈕設計
6.3.3 水晶按鈕設計
【課堂案例6-8】水晶確認按鈕設計
6.4 本單元小結
6.5 課後練習題
07 單元7 App界麵類型
7.1 啟動頁
7.1.1 啟動頁的意義
7.1.2 啟動頁的特點
【課堂案例7-1】啟動頁案例分析
7.2 閃屏頁
7.3 引導頁
7.3.1 引導頁的意義
7.3.2 引導頁的特點
【課堂案例7-2】引導頁案例分析
7.4 首頁
7.5 注冊登錄頁
7.5.1 注冊登錄頁的意義
7.5.2 注冊登錄頁的特點
【課堂案例7-3】注冊登錄頁案例分析
7.6 子頁
7.7 本單元小結
7.8 課後練習題
第4篇 UI設計實戰篇
08 單元8 iOS界麵設計
8.1 iOS界麵設計規範
8.2 iOS字體設計規範
8.3 iOS音樂App界麵設計實戰
8.3.1 音樂App項目分析
8.3.2 音樂App原型設計
8.3.3 音樂App風格分析
【項目實戰8-1】設計音樂App啟動圖標
【項目實戰8-2】設計音樂App主題界麵
【項目實戰8-3】設計音樂App啟動頁
【項目實戰8-4】設計音樂App引導頁
【項目實戰8-5】設計音樂App注冊登錄頁
【項目實戰8-6】設計音樂App首頁
【項目實戰8-7】設計音樂App播放頁
【項目實戰8-8】設計音樂App歌詞頁
8.4 本單元小結
8.5 課後練習題
09 單元9 Android係統界麵設計
9.1 Android係統界麵設計規範
9.2 Android係統字體設計規範
9.3 Android係統寵物App界麵設計實戰
9.3.1 寵物App項目分析
9.3.2 寵物App原型設計
9.3.3 寵物App風格分析
【項目實戰9-1】設計寵物App啟動圖標
【項目實戰9-2】設計寵物App引導頁
【項目實戰9-3】設計寵物App注冊登錄頁
【項目實戰9-4】設計寵物App首頁
【項目實戰9-5】設計寵物App寵物圈頁麵
【項目實戰9-6】設計寵物App購物車頁麵
【項目實戰9-7】設計寵物App設置頁麵
9.4 本單元小結
9.5 課後練習題
電子活頁（拓展閱讀1）界麵設計工具應用
電子活頁（拓展閱讀2）原型設計工具應用
版權信息
內容提要
前言
第1篇 UI設計入門篇
01 單元1 走進UI設計
1.1 UI設計介紹
1.1.1 UI設計的概念
1.1.2 UI設計原則
1.1.3 UI設計分類
1.1.4 UI設計尺寸相關知識
1.2 UI設計流程
1.2.1 需求分析
1.2.2 原型設計
1.2.3 視覺設計
1.2.4 切圖與標注
1.3 UI設計圖像
1.3.1 圖像類型
1.3.2 圖像格式
1.4 UI設計風格
1.4.1 扁平化風格
1.4.2 幾何風格
1.4.3 擬物化風格
1.4.4 玻璃風格
1.5 本單元小結
1.6 課後練習題
02 單元2 UI設計要素
2.1 UI設計布局
2.1.1 宮格布局
2.1.2 列表布局
2.1.3 卡片布局
2.1.4 瀑布流式布局
2.1.5 多麵板布局
2.2 UI設計色彩
2.2.1 色彩的構成
2.2.2 色彩的混合
2.2.3 色彩的調和
2.2.4 色彩的推移
2.2.5 色彩的聯想
2.2.6 色彩的心理應用
2.3 本單元小結
2.4 課後練習題
03 單元3 移動端操作係統
3.1 iOS
3.1.1 主題明確
3.1.2 色彩一致
3.1.3 留白設計
3.1.4 良好布局
3.2 Android係統
3.2.1 布局靈活
3.2.2 色彩豔麗
3.2.3 操作便捷
3.3 本單元小結
3.4 課後練習題
第2篇 UI設計圖標篇
04 單元4 移動App圖標基礎
4.1 圖標基礎概念
4.1.1 圖案的概念
4.1.2 圖標的概念
4.1.3 圖標的分類
4.2 圖標設計流程
4.2.1 明確主題
4.2.2 提煉核心形狀
4.2.3 草圖繪製
4.2.4 選擇標準色
4.2.5 圖標設計
4.2.6 切圖輸出
4.3 圖標設計初探
【課堂案例4-1】時鍾圖標繪製
【課堂案例4-2】學位帽圖標繪製
【課堂案例4-3】折頁圖標繪製
4.4 本單元小結
4.5 課後練習題
05 單元5 移動App圖標風格
5.1 剪影圖標設計
5.1.1 線性剪影圖標設計
【課堂案例5-1】線性天氣圖標繪製
【課堂案例5-2】線性開關圖標繪製
【課堂案例5-3】線性刪除圖標繪製
5.1.2 麵性剪影圖標設計
【課堂案例5-4】麵性確認圖標繪製
【課堂案例5-5】麵性設置圖標繪製
【課堂案例5-6】麵性笑臉圖標繪製
【課堂案例5-7】麵性相機圖標繪製
【課堂案例5-8】麵性文檔圖標繪製
5.2 扁平化圖標設計
5.2.1 純平麵扁平化圖標
【課堂案例5-9】純平麵扁平化電池圖標設計
5.2.2 折紙風扁平化圖標
【課堂案例5-10】折紙風扁平化信封愛心未讀圖標設計
【課堂案例5-11】折紙風扁平化信封愛心已讀圖標設計
5.2.3 長投影扁平化圖標
【課堂案例5-12】長投影下載圖標設計
5.2.4 輕折疊扁平化圖標
【課堂案例5-13】輕折疊多媒體圖標設計
【課堂案例5-14】輕折疊扁平化計算器圖標設計
5.2.5 微立體扁平化圖標
【課堂案例5-15】微立體定位圖標設計
5.3 擬物化圖標設計
5.3.1 擬物化圖標的特點
5.3.2 擬物化圖標案例
【課堂案例5-16】擬物化旋轉按鈕圖標設計
【課堂案例5-17】擬物化卡包圖標設計（橫版）
【課堂案例5-18】擬物化卡包圖標設計（豎版）
5.4 本單元小結
5.5 課後練習題
第3篇 UI設計界麵篇
06 單元6 界麵常用控件
6.1 滑塊設計
6.1.1 滑塊構成
6.1.2 滑塊分類
【課堂案例6-1】線條滑塊設計
【課堂案例6-2】旋轉滑塊設計
6.2 表單設計
6.2.1 表單類型
6.2.2 下拉列表框設計
【課堂案例6-3】類目下拉列表框設計
6.2.3 搜索框設計
【課堂案例6-4】移動端App搜索框設計
6.2.4 選擇器設計
【課堂案例6-5】日歷界麵設計
6.2.5 開關設計
【課堂案例6-6】開關設計
6.3 按鈕設計
6.3.1 按鈕類型
6.3.2 簡約按鈕設計
【課堂案例6-7】簡約確認按鈕設計
6.3.3 水晶按鈕設計
【課堂案例6-8】水晶確認按鈕設計
6.4 本單元小結
6.5 課後練習題
07 單元7 App界麵類型
7.1 啟動頁
7.1.1 啟動頁的意義
7.1.2 啟動頁的特點
【課堂案例7-1】啟動頁案例分析
7.2 閃屏頁
7.3 引導頁
7.3.1 引導頁的意義
7.3.2 引導頁的特點
【課堂案例7-2】引導頁案例分析
7.4 首頁
7.5 注冊登錄頁
7.5.1 注冊登錄頁的意義
7.5.2 注冊登錄頁的特點
【課堂案例7-3】注冊登錄頁案例分析
7.6 子頁
7.7 本單元小結
7.8 課後練習題
第4篇 UI設計實戰篇
08 單元8 iOS界麵設計
8.1 iOS界麵設計規範
8.2 iOS字體設計規範
8.3 iOS音樂App界麵設計實戰
8.3.1 音樂App項目分析
8.3.2 音樂App原型設計
8.3.3 音樂App風格分析
【項目實戰8-1】設計音樂App啟動圖標
【項目實戰8-2】設計音樂App主題界麵
【項目實戰8-3】設計音樂App啟動頁
【項目實戰8-4】設計音樂App引導頁
【項目實戰8-5】設計音樂App注冊登錄頁
【項目實戰8-6】設計音樂App首頁
【項目實戰8-7】設計音樂App播放頁
【項目實戰8-8】設計音樂App歌詞頁
8.4 本單元小結
8.5 課後練習題
09 單元9 Android係統界麵設計
9.1 Android係統界麵設計規範
9.2 Android係統字體設計規範
9.3 Android係統寵物App界麵設計實戰
9.3.1 寵物App項目分析
9.3.2 寵物App原型設計
9.3.3 寵物App風格分析
【項目實戰9-1】設計寵物App啟動圖標
【項目實戰9-2】設計寵物App引導頁
【項目實戰9-3】設計寵物App注冊登錄頁
【項目實戰9-4】設計寵物App首頁
【項目實戰9-5】設計寵物App寵物圈頁麵
【項目實戰9-6】設計寵物App購物車頁麵
【項目實戰9-7】設計寵物App設置頁麵
9.4 本單元小結
9.5 課後練習題
電子活頁（拓展閱讀1）界麵設計工具應用
電子活頁（拓展閱讀2）原型設計工具應用
最後修改：2025 年 12 月 23 日
© 允許規範轉載