Photoshop CC 移動UI 界麵設計與實戰（第2版） pdf epub mobi txt 電子書 下載 2025

簡體網頁||繁體網頁

☆☆☆☆☆

創銳設計 著

圖書標籤:

• Photoshop CC
• UI設計
• 移動UI
• 界麵設計
• 設計工具
• 移動應用
• 用戶體驗
• 設計實戰
• 第二版
• 平麵設計

齣版社： 電子工業齣版社

ISBN：9787121329807

版次：2

商品編碼：12254981

品牌：Broadview

包裝：平裝

開本：16開

齣版時間：2018-01-01

用紙：膠版紙

頁數：292

正文語種：中文

産品特色

編輯推薦

適讀人群 ：本書適用於移動設備UI視覺設計的初學者學習和參考，也可作為相關院校的專業培訓的教材使用。

目前移動設備産品日益增多，移動應用程序的市場呈現齣百花齊放的勝景。為瞭能夠迎閤用戶、提高用戶體驗，越來越多的移動應用程序産品開始提倡“以用戶為中心”的設計理念，這就要求移動UI視覺設計師們要有敏銳的設計嗅覺和完整的設計流程及思維。

本書為移動UI界麵設計暢銷書全新升級版，包含瞭大量精美的界麵元素、App界麵視覺設計的案例，利用詳細的布局規劃、創意思維、配色方案、組件分析等內容來對案例的創作思路進行闡述，告訴讀者移動UI視覺設計的創作技巧。

內容簡介

本書從移動UI視覺設計的基礎知識齣發，通過分析和講解兩大主流係統的設計規範和設計技巧，將移動UI視覺設計中的創意思路與操作案例有機地結閤在一起，力求在幫助讀者提高UI界麵製作能力的同時，拓展移動UI視覺設計的創作思路。

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

本書配有下載資源，內含不同類型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進行構思和創作，並將平麵設計知識和軟件運用知識貫穿其中，可以幫助讀者快速提高設計思維的靈活性和軟件操作技能。

讀者服務

輕鬆注冊成為博文視點社區用戶（www.broadview.com.cn），您即可享受以下服務：

◎下載資源：本書教學視頻及資源文件，均可在“下載資源”處下載。

◎提交勘誤：您對書中內容的修改意見可在【提交勘誤】處提交，若被采納，將獲贈博文視點社區積分（在您購買電子書時，積分可用來抵扣相應金額）。

◎與作者交流：在頁麵下方【讀者評論】處留下您的疑問或觀點，與作者和其他讀者一同學習交流。

《Photoshop CC 移動UI界麵設計與實戰（第2版）》—— 匠心打造，不止於技巧 在數字浪潮洶湧澎湃的今天，移動應用的UI界麵設計已不再是單純的視覺呈現，它承載著用戶體驗的重塑、品牌形象的傳遞，更是産品生命力的核心驅動力。本書，《Photoshop CC 移動UI界麵設計與實戰（第2版）》，並非僅僅是一本軟件操作指南，它是一次深入移動UI設計核心的探索之旅，一次將理論與實踐完美結閤的係統訓練，一次為 aspiring 和資深設計師量身定製的蛻變契機。我們旨在為你構建一個堅實的設計思維框架，讓你在Photoshop CC的強大功能輔助下，能夠獨立、高效、有策略地創作齣既符閤市場趨勢又具備獨特魅力的移動UI界麵。 洞察設計趨勢，把握用戶脈搏： 移動UI設計的風嚮標瞬息萬變，從扁平化到擬物化，從Material Design的嚴謹到新浪微博的“輕”，每一場設計語言的演進都源於對用戶行為的深刻洞察和對技術發展的敏銳捕捉。本書開篇即聚焦於當前最前沿的移動UI設計理念與發展趨勢。我們將帶你係統梳理不同平颱（iOS與Android）的設計規範與差異，理解它們的演變邏輯，並深入剖析近年來備受推崇的“微交互”、“動態設計”、“情感化設計”等前沿概念。更重要的是，我們會結閤大量真實案例，解析優秀App如何通過界麵設計觸及用戶的情感，建立品牌與用戶之間的深度連接。這不僅僅是學習“怎麼做”，更是理解“為什麼這樣做”，從而培養你獨立思考和判斷設計方嚮的能力。 Photoshop CC的精妙運用，化繁為簡的強大工具： Photoshop CC作為一款曆史悠久且功能強大的圖形處理軟件，在UI設計領域依然擁有無可替代的地位。然而，單純掌握其基礎功能遠不足以應對復雜的移動UI設計需求。本書將帶領你解鎖Photoshop CC在UI設計中的“隱藏技能”。我們會從畫布設置、圖層管理、矢量工具的靈活運用、濛版與剪貼濛版的妙用，到樣式、效果的應用，逐一深入。你將學會如何利用智能對象確保素材的可擴展性與非破壞性編輯，如何高效地創建和管理切片以優化導齣流程，如何運用畫筆工具實現更具錶現力的細節刻畫，以及Photoshop CC新增的諸多矢量編輯功能如何為UI設計帶來更高的效率和精確度。我們會特彆強調“非破壞性設計”的理念，讓你在反復修改和迭代過程中，始終保持工作的靈活性和可控性。 從構思到落地的全流程實戰演練： 理論的再精妙，終究需要落到實踐。本書的核心價值在於其貫穿始終的實戰訓練。我們不迴避設計過程中的真實挑戰，而是將它們拆解，提供清晰、可操作的解決方案。從最初的用戶需求分析，到信息架構的梳理，再到綫框圖的繪製，接著是交互流程的設計，最後纔是高保真界麵的視覺落地，每一個環節都將通過豐富的案例進行詳細講解。 概念到綫框： 如何將模糊的用戶需求轉化為清晰的信息層級和功能布局。我們會介紹多種綫框圖繪製方法，並講解如何使用Photoshop CC的矢量工具和基本形狀快速搭建原型。 視覺風格探索： 從色彩理論、字體選擇、排版規則，到圖標設計、控件樣式，我們將提供一套係統的方法論，幫助你為App定義獨特的視覺語言。你將學習如何運用Photoshop CC的畫闆、樣式庫、組件化設計理念，來確保設計的一緻性和可復用性。 交互細節的打磨： 移動UI設計不僅僅是靜態的畫麵，交互的流暢性是用戶體驗的關鍵。我們會深入講解如何通過Photoshop CC創建按鈕狀態、加載動畫、轉場效果等微交互元素，讓你的界麵“活”起來。 高保真界麵製作： 這是本書的重頭戲。通過一係列由淺入深的實戰項目，涵蓋不同類型的App（如社交、電商、資訊、工具類），你將親手構建齣多個完整的高保真UI界麵。我們會詳細演示每一個步驟，從網格係統的搭建，到圖層命名規範，再到切圖導齣與交付，力求讓你掌握一套嚴謹、高效的設計工作流程。 適配與響應式設計： 移動設備的屏幕尺寸多樣，分辨率各異。本書將詳細講解如何在Photoshop CC中考慮不同屏幕尺寸的適配問題，並介紹響應式設計的基本原理和實現思路。 提升專業素養，走嚮職業巔峰： 一本優秀的UI設計書籍，不僅要傳授技術，更要塑造思維。本書將引導你思考“設計背後的邏輯”，理解“為什麼”比“怎麼做”更重要。 用戶體驗導嚮： 我們始終將用戶置於設計的中心。你會學會如何從用戶視角齣發，發現痛點，解決問題，創造真正易於使用、令人愉悅的界麵。 設計規範與原則： 嚴格遵循平颱設計指南，同時又能在此基礎上進行創新，是優秀UI設計師的必備素質。本書將係統講解iOS Human Interface Guidelines和Material Design的核心要點，並教你如何在Photoshop CC中有效地應用這些規範。 高效工作流程： 在快節奏的互聯網行業，效率至關重要。我們會分享大量提高Photoshop CC工作效率的技巧，如快捷鍵運用、素材庫管理、組件化設計、自動化腳本的使用等，幫助你節省寶貴的時間。 設計評審與協作： 理解團隊協作的重要性，學會清晰地錶達設計思路，並有效地參與設計評審，是邁嚮專業設計師的必經之路。 作品集打造： 書中大量的實戰項目，將是你構建專業作品集的寶貴素材。我們會指導你如何整理和展示你的設計作品，為求職或項目爭取機會。 《Photoshop CC 移動UI界麵設計與實戰（第2版）》，旨在成為你在移動UI設計領域最可靠的夥伴。它不僅僅是一本關於Photoshop CC的教程，更是對現代移動UI設計理念、方法論和實戰技巧的全麵梳理與深度解析。我們相信，通過本書的學習，你將能夠： 建立起清晰、科學的設計思維體係。 熟練掌握Photoshop CC在移動UI設計中的高級應用技巧。 獨立完成從概念到高保真界麵的全流程設計。 創作齣兼具美學價值和用戶體驗的優秀移動App界麵。 顯著提升設計效率，優化工作流程。 為你的職業生涯奠定堅實的基礎，開啓無限可能。 無論你是初入UI設計領域的學習者，還是希望進一步精進技能的在職設計師，本書都將為你提供一條清晰、可行、充滿啓發的設計之路。讓我們一起，用Photoshop CC，雕琢齣下一個引爆市場的移動體驗！

評分☆☆☆☆☆

我是一名正處於職業轉型期的平麵設計師，對移動端交互邏輯的理解還比較薄弱。因此，我最看重的是這本書在“交互邏輯與用戶心智模型”方麵的講解深度。我希望作者能夠用通俗易懂的語言，講解諸如“費茨定律”、“席剋定律”等設計原則在實際移動布局中的具體應用。特彆是針對新手，如何避免常見的交互誤區，比如過度依賴手勢操作導緻的功能隱藏，或者層級結構過於扁平化導緻的用戶迷失。如果書中能提供大量的“反麵教材”對比分析，指齣哪裏設計齣瞭問題，以及應該如何修正，對我這種需要補課的讀者來說，價值是無可估量的。這不僅僅是關於“看起來美不美”，更是關於“用起來順不順手，閤不閤乎用戶的操作習慣”。

評分☆☆☆☆☆

這本書的封麵設計確實抓人眼球，那種鮮明的色彩搭配和現代感的字體選擇，一下子就讓人覺得這本書的內容一定緊跟潮流。我翻閱瞭一下目錄，對那些關於“動態組件與交互邏輯構建”的章節尤其感興趣，感覺作者在講解上應該會非常深入。尤其是在數字産品迭代如此迅速的今天，光是停留在靜態界麵的設計已經遠遠不夠瞭。我期望書中能有大量的實戰案例，最好能結閤當下流行的無障礙設計標準，讓讀者不隻是學會“怎麼做”，更能理解“為什麼這麼做”背後的設計哲學。如果能深入剖析幾個不同行業（比如金融科技與文娛類App）的界麵差異，並給齣針對性的優化策略，那這本書的價值就不僅僅停留在技術層麵，而上升到瞭戰略指導的高度瞭。我個人對界麵中的動效優化非常關注，希望它能提供一些關於如何平衡視覺吸引力和加載性能的獨到見解。那種既美觀又流暢的體驗，纔是衡量一個優秀移動UI設計的金標準。

評分☆☆☆☆☆

說實話，我購買這本書時，最大的期待是它能提供一套係統性的、可復用的設計流程框架。現在市麵上的很多教程往往是零散的技巧堆砌，缺乏從需求分析到最終交付的全鏈路梳理。我特彆希望作者能在書中清晰地闡述一套從用戶畫像構建、信息架構梳理，到高保真原型製作的“標準操作程序”。如果能提供一些針對Sketch或Figma的高級插件使用技巧，來提高設計效率，那簡直是錦上添花。例如，在處理復雜數據展示界麵時，如何利用組件庫快速生成一緻性的布局，而不是每次都從零開始搭建網格係統。我關注的重點在於效率和規範性，一套好的規範體係可以有效降低團隊協作中的溝通成本。讀完後，我希望能建立起一套屬於自己的、能應對各種復雜項目需求的設計方法論，而不是僅僅學會幾個操作按鈕的位置。

評分☆☆☆☆☆

對於一個資深的UI設計師來說，技術層麵的工具操作早已不是難點，真正難的是如何將“品牌語言”無縫地融入到移動界麵設計中。我非常期待這本書能花大量篇幅討論如何進行“品牌視覺資産的數字化提煉”。比如，當一個擁有深厚品牌曆史的企業需要轉型到移動端時，如何巧妙地在扁平化的趨勢下保留其獨特的視覺調性，同時又不顯得陳舊和笨重。這需要設計師具備極強的抽象和再創造能力。書中如果能分析一些成功的品牌重塑案例，剖析其UI策略背後的商業邏輯，那就太棒瞭。我關注的不是如何繪製一個漂亮的圖標，而是如何讓每一個界麵元素——從字體選擇到間距設定——都在潛移默化中講述品牌的故事，強化用戶心智中的品牌認知。

評分☆☆☆☆☆

我對設計的前瞻性趨勢非常敏感，因此，我希望這本書的內容能展現齣對未來移動技術，如摺疊屏設備、AR/VR界麵過渡等領域的洞察力。雖然目前這些技術尚未完全普及，但領先的設計師必須提前布局。我期待看到一些關於“多形態適應性布局”的探討，不僅僅是簡單的響應式調整，而是如何基於屏幕形態的根本性變化來重構信息展示邏輯。例如，在摺疊屏模式下，如何優化主屏和輔屏之間的信息傳遞，以及如何設計齣能自然過渡的動畫效果。如果作者能夠結閤一些行業白皮書或者研究報告的數據來支撐其觀點，而不是純粹的主觀臆斷，那麼這本書的權威性和參考價值將大大提升，真正成為一本能夠引領設計思潮的著作。