Photoshop CC 移動UI 界面設計與實戰（第2版）

Photoshop CC 移動UI 界面設計與實戰（第2版）

玩轉移動UI基礎，掌控兩大主流系統，精通APP套用設計，圖文詳解、配套視頻，系統、全面、從新手到高手！

創銳設計 編著

ISBN 978-7-121-32980-7

2018年1月出版

定價：79.00元

292頁

16開

基本介紹

• 書名：Photoshop CC 移動UI 界面設計與實戰（第2版）
• 作者：創銳設計
• ISBN：978-7-121-32980-7
• 頁數：292
• 定價：79
• 出版社：電子工業出版社
• 出版時間：2018-1-1
• 開本：16

內容提要

《Photoshop CC 移動UI 界面設計與實戰（第2版）》從移動UI視覺設計的基礎知識出發，通過分析和講解兩大主流系統的設計規範和設計技巧，將移動UI視覺設計中的創意思路與操作案例有機地結合在一起，力求在幫助讀者提高UI界面製作能力的同時，拓展移動UI視覺設計的創作思路。

《Photoshop CC 移動UI 界面設計與實戰（第2版）》包含三部分，共12個Part的內容。第1部分為基礎篇（Part1~Part3）：介紹移動UI視覺設計的基礎知識，Photoshop軟體的常用操作功能，以及移動UI界面中基礎元素的設計規範；第2部分介紹兩大主流系統（Part4~Part5）：分別對兩大系統進行有針對性的講解，通過相關的案例介紹移動UI視覺設計的製作方法和技巧；第3部分講解App套用實例（Part6~Part12）：以完整的App界面設計為主要內容，展示不同風格移動UI界面設計的特點和製作方法。

《Photoshop CC 移動UI 界面設計與實戰（第2版）》配有下載資源，內含不同類型App套用設計的講解視頻，以及書中的實例源檔案及相關素材，讀者可以更好、更快地學習移動UI界面設計。

　　

目錄

Part 1 移動UI設計基礎 / 1

1.1 UI設計存在的意義 / 2

1.1.1 人機互動的橋樑 / 2

1.1.2 操作邏輯系統的展現 / 3

1.1.3 展現系統的整體風格 / 3

1.2 移動UI設計的原則 / 4

1.2.1 視覺一致性原則 / 4

1.2.2 視覺簡易性原則 / 5

1.2.3 從用戶的習慣考慮 / 6

1.2.4 操作的靈活性及人性化 / 8

1.3 兩大主流作業系統的特點對比 / 9

1.4 不同系統UI視覺的主要組成要素及特徵 / 10

1.4.1 iOS系統中的組成要素及特徵 / 10

1.4.2 Android系統中的組成要素及特徵 / 11

1.5 認識移動終端的解析度和像素 / 13

1.6 移動UI的創意與靈感收集 / 14

1.6.1 各種經驗和靈感的記錄 / 14

1.6.2 將對象抽象化 / 15

1.6.3 設計靈感的轉移 / 16

1.7 移動UI的視覺設計流程 / 18

Part 2 PS在移動UI設計中的常用功能簡介 / 21

2.1 繪圖工具的介紹 / 22

2.1.1 規則形狀的繪製 / 22

2.1.2 自定義形狀的繪製 / 23

2.1.3 繪製任意所需的形狀 / 25

2.2 圖層樣式的運用 / 26

2.2.1 增強立體感的圖層樣式 / 26

2.2.2 發光效果的圖層樣式 / 28

2.2.3 更改色彩的圖層樣式 / 29

2.3 蒙版的編輯 / 31

2.3.1 圖層蒙版 / 31

2.3.2 剪貼蒙版 / 32

2.4 文字的添加 / 34

2.4.1 文字的添加與設定 / 34

2.4.2 文字的高級編輯 / 35

Part 3 移動UI界面中基本元素的製作 / 37

3.1 按鈕 / 38

3.1.1 按鈕設計的基礎知識 / 38

3.1.2 扁平化按鈕的設計 / 39

3.2 開關 / 42

3.2.1 開關設計的基礎知識 / 42

3.2.2 簡易色塊開關的設計 / 44

3.2.3 擬物化開關的設計 / 45

3.3 進度條 / 47

3.3.1 進度條設計的基礎知識 / 47

3.3.2 扁平化進度條的設計 / 49

3.3.3 層次感強烈的進度條設計 / 50

3.4 搜尋欄 / 54

3.4.1 搜尋欄設計的基礎知識 / 54

3.4.2 扁平化搜尋欄的設計 / 56

3.5 列表框 / 61

3.5.1 列表框設計的基礎知識 / 61

3.5.2 簡易列表框的設計 / 62

3.5.3 立體化列表框的設計 / 64

3.6 標籤欄 / 68

3.6.1 標籤欄設計的基礎知識 / 68

3.6.2 線性化標籤欄設計 / 69

3.6.3 木紋質感的標籤欄設計 / 70

3.7 圖示欄 / 73

3.7.1 圖示欄設計的基礎知識 / 73

3.7.2 線性化圖示欄設計 / 74

3.7.3 紙箱紋理的圖示欄設計 / 77

Part 4 iOS系統及其組件的設計 / 81

4.1 iOS系統設計特點 / 82

4.1.1 充分利用整個螢幕 / 82

4.1.2 使用半透明底板 / 82

4.1.3 信息的清晰呈現 / 83

4.2 iOS系統設計的規範 / 85

4.2.1 設計原則 / 85

4.2.2 色彩和字型 / 88

4.2.3 圖示的設計 / 92

4.3 iOS系統界面設計實訓 / 96

4.3.1 扁平化圖示的設計 / 96

4.3.2 半透明效果的界面設計 / 104

Part 5 Android系統及其組件的設計 / 111

5.1 Android系統的特點 / 112

5.2 Android系統的設計規範 / 114

5.2.1 度量單位 / 114

5.2.2 字型的使用標準 / 116

5.2.3 色彩的套用規範 / 117

5.2.4 四種類型的圖示 / 120

5.3 六種標準的Widget規範 / 122

5.3.1 Widget框架簡介 / 122

5.3.2 Widget框架的標準尺寸 / 124

5.3.3 4×1的Widget框架設計 / 125

5.3.4 3×3的Widget框架設計 / 129

5.3.5 2×2的Widget框架設計 / 133

5.3.6 4×1的加長Widget框架設計 / 136

5.3.7 3×3的橫向Widget框架設計 / 140

5.3.8 2×2的橫向Widget框架設計 / 145

5.4 Android系統界面設計實訓 / 150

5.4.1 立體化的圖示設計 / 150

5.4.2 超強立體感的界面設計 / 159

Part 6 孕媽幫手App設計 / 171

界面布局規劃 / 172

創意思路剖析 / 172

確定配色方案 / 173

定義組件風格 / 174

製作步驟詳解 / 174

Part 7 美食網站App設計 / 185

界面布局規劃 / 186

創意思路剖析 / 186

確定配色方案 / 187

定義組件風格 / 188

製作步驟詳解 / 188

Part 8 籃球運動App設計 / 201

界面布局規劃 / 202

創意思路剖析 / 202

確定配色方案 / 203

定義組件風格 / 203

製作步驟詳解 / 204

Part 9 流量銀行App設計 / 217

界面布局規劃 / 218

創意思路剖析 / 218

確定配色方案 / 219

定義組件風格 / 219

製作步驟詳解 / 220

Part 10 藏寶遊戲App設計 / 231

界面布局規劃 / 232

創意思路剖析 / 232

確定配色方案 / 233

定義組件風格 / 234

製作步驟詳解 / 234

Part 11 音樂播放App設計 / 247

界面布局規劃 / 248

創意思路剖析 / 248

確定配色方案 / 249

定義組件風格 / 250

製作步驟詳解 / 250

Part 12 旅遊資訊App設計 / 267

界面布局規劃 / 268

創意思路剖析 / 268

確定配色方案 / 269

定義組件風格 / 270

製作步驟詳解 / 270

前言

在科技高速發展的今天，移動設備已經成為人們生活和娛樂的必需品之一，移動設備的用戶界面及體驗越來越受到用戶的關注。對於一個優秀的App應用程式而言，其界面的視覺設計起著關鍵的作用，它是除互動式設計外，用戶能夠直接接觸到的東西。如果把App的功能比作人的肌肉和骨骼，那么移動UI的視覺設計就是人的外貌和品格，是一款成功的應用程式必不可少的重要組成部分。設計師如何才能設計出讓人過目不忘且實用美觀的界面呢？在本書中你可以找到答案。

本書從移動UI界面設計的基礎開始，針對當今主流的兩大移動系統，講述移動UI視覺設計的創意收集、設計重點、製作規範等一系列的知識，將理論與實踐進行有機結合，通過從無到有、從局部到整體的方式講解App應用程式的界面設計，幫助讀者建立正確、實用的移動UI視覺設計的思路與方法。

本書內容梗概

第1部分 基礎篇（Part 1~Part 3）：介紹移動UI視覺設計的基礎知識，講解移動UI視覺設計所使用到的Photoshop軟體的常用操作功能，以及移動UI界面中基礎元素的設計規範。

第2部分 兩大主流系統（Part 4、Part 5）：對兩大系統進行有針對性的講解，從界面的圖示、設計風格等角度入手，講述兩大系統各自的區別與特點，並利用相關的案例來介紹移動UI視覺設計的製作方法和技巧。

第3部分 App套用實例（Part 6~Part 12）：以完整的App界面設計為主要內容，通過對界面布局、創意、配色和組件等進行詳細分析，用不同功能的App的創作思維和製作步驟來展示不同風格的移動UI界面設計的特點和製作方法。

本書特色分析

全面系統的知識體系：書中將兩大主流系統的設計規範和風格進行了詳細介紹，通過圖文並茂、層次清晰的方式直觀地展示出全面而系統的移動UI視覺設計的相關知識，幫助讀者了解和掌握與移動UI視覺設計相關的概念和必備的基礎知識。

精闢的設計思路剖析：在本書的案例中，我們針對案例設計的創意思路、設計來源等進行詳細闡述，幫助讀者形成自己的設計思維，並將設計創意分析與軟體操作相結合，讓讀者在提升移動UI界面製作技能的同時，拓展創意和設計思維。

呈現精美的設計案例：書中包含了大量精美的App設計案例，每個案例都根據不同類型和功能的App進行構思和創作，並將平面設計知識和軟體運用知識貫穿其中，可以幫助讀者快速提高設計思維的靈活性和軟體操作技能。