本書是一本講解如何使用Photoshop進(jìn)行移動UI設(shè)計的案例操作型自學(xué)教程，可以有效幫助讀者提高設(shè)計能力，拓展創(chuàng)作思路，從此踏上成長為移動UI設(shè)計高手的征程。
全書共11章。第1章講解移動UI設(shè)計的基礎(chǔ)知識，包括移動UI設(shè)計的流程、原則、布局方式等內(nèi)容。第2章和第3章分別介紹了當(dāng)前兩大主流移動操作系統(tǒng)iOS和Android的特點(diǎn)和UI設(shè)計規(guī)范。第4章講解移動UI設(shè)計中常用的Photoshop功能，包括圖形繪制、文本添加、圖像合成、樣式設(shè)置等內(nèi)容。第5章講解圖標(biāo)、按鈕、開關(guān)、搜索欄、Tab標(biāo)簽、進(jìn)度條、列表框、對話框等移動UI中常用元素的設(shè)計方法。第6～11章為項目實戰(zhàn)練習(xí)，按照不同的設(shè)計風(fēng)格，分別講解了旅游、購物、美食、音樂、智能家居、兒童早教等App的UI設(shè)計和制作流程，通過詳解設(shè)計思路和操作步驟，指導(dǎo)讀者綜合應(yīng)用前面所學(xué)，設(shè)計出完整的UI作品。
本書內(nèi)容實用，案例典型，圖文并茂，可操作性強(qiáng)，特別適合移動UI設(shè)計的初學(xué)者學(xué)習(xí)，對Photoshop使用者、平面設(shè)計師、App開發(fā)設(shè)計人員也具有較高的參考價值。
隨著移動互聯(lián)網(wǎng)的興起，移動設(shè)備App的開發(fā)成了一個熱門領(lǐng)域。移動設(shè)備App的用戶界面設(shè)計稱為移動UI設(shè)計。本書是一本移動UI設(shè)計的案例操作型自學(xué)教程，以Photoshop為設(shè)計工具，循序漸進(jìn)地帶領(lǐng)讀者掌握移動UI設(shè)計的精髓。
◎內(nèi)容結(jié)構(gòu)
本書共11章。第1章講解移動UI設(shè)計的基礎(chǔ)知識，包括移動UI設(shè)計的流程、原則、布局方式等內(nèi)容。第2章和第3章分別介紹了當(dāng)前兩大主流移動操作系統(tǒng)iOS和Android的特點(diǎn)和UI設(shè)計規(guī)范。第4章講解移動UI設(shè)計中常用的Photoshop功能，包括圖形繪制、文本添加、圖像合成、樣式設(shè)置等內(nèi)容。第5章講解圖標(biāo)、按鈕、開關(guān)、搜索欄、Tab標(biāo)簽、進(jìn)度條、列表框、對話框等移動UI中常用元素的設(shè)計方法。第6～11章為項目實戰(zhàn)練習(xí)，按照不同的設(shè)計風(fēng)格，分別講解了旅游、購物、美食、音樂、智能家居、兒童早教等App的UI設(shè)計和制作流程，指導(dǎo)讀者綜合應(yīng)用前面所學(xué)，設(shè)計出完整的UI作品。
◎本書特色
- 案例典型，學(xué)以致用：本書通過精心設(shè)計，將知識點(diǎn)融入貼近實際應(yīng)用的典型案例中進(jìn)行講解，讓學(xué)習(xí)過程變得輕松、不枯燥，能夠有效提高讀者的閱讀興趣和學(xué)習(xí)效率。
- 圖文并茂，清晰直觀：本書在講解操作步驟時采用一步一圖的方式，非常清晰、直觀，讓讀者能夠輕松和快速地掌握操作要領(lǐng)。
- 技巧豐富，延展學(xué)習(xí)：書中穿插了許多從實踐中總結(jié)出來的技巧提示，讓讀者在掌握軟件操作的同時還能汲取專業(yè)設(shè)計人員的工作經(jīng)驗，快速提高實戰(zhàn)能力。
- 資源完備，輕松自學(xué)：本書配套的學(xué)習(xí)資源提供所有案例的相關(guān)文件。讀者按照書中講解，結(jié)合文件動手操作，學(xué)習(xí)效果立竿見影。
◎讀者對象
本書特別適合移動UI設(shè)計的初學(xué)者學(xué)習(xí)，對Photoshop使用者、平面設(shè)計師、App開發(fā)設(shè)計人員也具有較高的參考價值。由于編者水平有限，在編寫本書的過程中難免有不足之處，懇請廣大讀者指正批評。
第1章 了解移動UI設(shè)計
1.1 認(rèn)識移動UI設(shè)計
1.2 UI設(shè)計的流程
1.3 移動UI設(shè)計的原則
1.3.1 一致性原則
1.3.2 習(xí)慣性原則
1.3.3 清晰性原則
1.3.4 易用性原則
1.3.5 人性化原則
1.4 提升用戶體驗的UI設(shè)計技巧
1.4.1 簡化操作流程
1.4.2 手勢與動畫的結(jié)合
1.4.3 選擇適當(dāng)?shù)膱D像尺寸與格式
1.4.4 使用高對比度配色方案
1.4.5 使用易讀的字體
1.5 移動UI設(shè)計常用的布局方式
1.5.1 列表式布局
1.5.2 陳列館式布局
1.5.3 宮格式布局
1.5.4 選項卡式布局
1.5.5 旋轉(zhuǎn)木馬式布局
1.5.6 行為擴(kuò)展式布局
1.5.7 多面板式布局
1.5.8 圖表式布局
1.6 移動UI設(shè)計常用尺寸單位
第2章 iOS系統(tǒng)特點(diǎn)及設(shè)計規(guī)范
2.1 iOS系統(tǒng)的發(fā)展歷程
2.2 iOS系統(tǒng)的UI特色
2.2.1 以內(nèi)容為核心
2.2.2 保證清晰度
2.2.3 用深度來體現(xiàn)層次
2.3 iOS系統(tǒng)的基礎(chǔ)UI組件
2.3.1 欄
2.3.2 內(nèi)容視圖
2.3.3 臨時視圖
2.4 了解主流的iOS設(shè)備
2.5 iOS系統(tǒng)的UI設(shè)計規(guī)范
2.5.1 文字
2.5.2 顏色
2.5.3 圖標(biāo)
2.5.4 邊距和間距
第3章 Android系統(tǒng)特點(diǎn)及設(shè)計規(guī)范
3.1 Android系統(tǒng)的優(yōu)勢
3.2 Android系統(tǒng)UI設(shè)計的演變歷程
3.2.1 鎖屏
3.2.2 桌面
3.2.3 Android應(yīng)用商店
3.2.4 通知面板
3.2.5 圖庫
3.2.6 音樂播放器
3.2.7 撥號界面
3.2.8 設(shè)置界面
3.3 Android系統(tǒng)UI的構(gòu)成
3.3.1 主屏幕和任務(wù)列表
3.3.2 系統(tǒng)欄
3.3.3 通知面板
3.3.4 通用UI組件
3.4 Android系統(tǒng)的UI設(shè)計規(guī)范
3.4.1 度量單位和像素密度
3.4.2 UI尺寸
3.4.3 字體
3.4.4 顏色
3.4.5 圖標(biāo)
第4章 Photoshop常用功能
4.1 圖形的繪制
4.1.1 基礎(chǔ)圖形的繪制
4.1.2 自定義形狀的繪制
4.1.3 其他復(fù)雜圖形的繪制
4.2 文本的應(yīng)用
4.2.1 文本的添加
4.2.2 設(shè)置文本屬性
4.2.3 編輯段落文本
4.3 圖像的選擇
4.3.1 規(guī)則圖像的選擇
4.3.2 不規(guī)則圖像的選擇
4.3.3 根據(jù)顏色選擇圖像
4.4 圖像的合成
4.4.1 圖層蒙版
4.4.2 矢量蒙版
4.4.3 剪貼蒙版
4.5 必備的樣式效果
4.5.1 斜面和浮雕
4.5.2 投影和內(nèi)陰影
4.5.3 漸變疊加
4.5.4 圖案疊加
4.5.5 內(nèi)發(fā)光和外發(fā)光
4.5.6 描邊
第5章 移動UI常用基本元素設(shè)計
5.1 圖標(biāo)設(shè)計
5.1.1 輕擬物化圖標(biāo)設(shè)計
5.1.2 扁平化圖標(biāo)設(shè)計
5.1.3 線性圖標(biāo)設(shè)計
5.1.4 立體圖標(biāo)設(shè)計
5.2 常規(guī)按鈕設(shè)計
5.2.1 多彩下載按鈕設(shè)計
5.2.2 金屬質(zhì)感按鈕設(shè)計
5.3 開關(guān)設(shè)計
5.3.1 單選按鈕開關(guān)設(shè)計
5.3.2 復(fù)選框開關(guān)設(shè)計
5.3.3 ON/OFF開關(guān)設(shè)計
5.4 搜索欄設(shè)計
5.4.1 清新自然的搜索欄設(shè)計
5.4.2 木紋效果的搜索欄設(shè)計
5.5 Tab標(biāo)簽設(shè)計
5.5.1 線性風(fēng)格的Tab標(biāo)簽設(shè)計
5.5.2 圖文結(jié)合的Tab標(biāo)簽設(shè)計
5.6 進(jìn)度條設(shè)計
5.6.1 線形進(jìn)度條設(shè)計
5.6.2 圓形進(jìn)度條設(shè)計
5.6.3 藍(lán)色創(chuàng)意進(jìn)度條設(shè)計
5.7 列表框設(shè)計
5.7.1 簡潔列表框設(shè)計
5.7.2 立體化列表框設(shè)計
5.8 對話框設(shè)計
5.8.1 半透明的登錄對話框設(shè)計
5.8.2 可愛的游戲?qū)υ捒蛟O(shè)計
第6章 扁平化風(fēng)格的旅游App
6.1 分析用戶需求
6.2 定義設(shè)計風(fēng)格
6.3 顏色搭配技巧
6.4 案例操作詳解
第7章 清新風(fēng)格的電商App
7.1 分析用戶需求
7.2 定義設(shè)計風(fēng)格
7.3 顏色搭配技巧
7.4 案例操作詳解
第8章 絢彩風(fēng)格的美食App
8.1 分析用戶需求
8.2 定義設(shè)計風(fēng)格
8.3 顏色搭配技巧
8.4 案例操作詳解
第9章 時尚風(fēng)格的音樂App
9.1 分析用戶需求
9.2 定義設(shè)計風(fēng)格
9.3 顏色搭配技巧
9.4 案例操作詳解
第10章 線性風(fēng)格的智能家居App
10.1 分析用戶需求
10.2 定義設(shè)計風(fēng)格
10.3 顏色搭配技巧
10.4 案例操作詳解
第11章 活潑可愛的早教App
11.1 分析用戶需求
11.2 定義設(shè)計風(fēng)格
11.3 顏色搭配技巧
11.4 案例操作詳解
書單推薦
