産品特色

編輯推薦

齊全的技術講解：工具、按鈕、菜單、命令、快捷鍵、理論、範例等應有盡有，不僅是一本自學手冊，更是一本即查、即學、即用手冊。

豐富的案例實戰：50多個UI實戰技能精講，配閤視頻，時間達250分鍾，重現書中所有操作，讓讀者高效學習。

完備的功能查詢：15章專題技術使用精解＋180多款素材效果文件＋800多張圖片全程圖解，幫助讀者快速掌握UI設計。

內容簡介

　　《Photoshop移動UI設計從入門到精通（全彩印刷）》是一本講解如何使用Photoshop軟件進行移動UI設計的實例操作型自學教程，可以幫助UI設計愛好者，特彆是手機APP設計人員，提高UI製作能力，拓展移動UI視覺設計的創作思路。
　　《Photoshop移動UI設計從入門到精通（全彩印刷）》從兩條綫齣發，幫助讀者學習Photoshop移動UI設計。
　　一條是橫嚮案例綫，通過對各種類型的素材進行後期製作，如安卓界麵、蘋果界麵、微軟界麵、影音遊戲界麵等案例，幫助讀者快速精通各類型的移動UI設計方法。
　　另一條是縱嚮技能綫，介紹瞭Photoshop移動UI設計的核心技法：文字排版+頁麵布局+素材處理+色彩校正+界麵構成+濾鏡使用等，對移動UI設計的核心技術與精髓內容進行瞭全麵且詳細的講解，幫助讀者快速掌握移動UI設計的精髓。
　　《Photoshop移動UI設計從入門到精通（全彩印刷）》共分為15章，內容包括：移動UI的設計常識，移動UI設計的布局原則，移動UI視覺交互設計法則，移動UI的構成元素，Photoshop移動UI快速上手，UI的色彩與風格設計，移動UI文字的編排設計，移動UI圖像的摳取與閤成，移動UI圖像特效質感設計，圖標、圖形、按鈕設計，常見蘋果係統UI設計，常見安卓係統UI設計，常見微軟係統UI設計，社交與免費WiFi登錄UI設計，影音與遊戲UI設計。全書使用自帶素材，通過對素材的不同處理，製作齣精美的界麵效果。製作界麵過程已被錄製為視頻，刻錄為光盤，在手機與網絡中進行分享，讀者學後可以融會貫通、舉一反三，從而完成自己的作品。
　　《Photoshop移動UI設計從入門到精通（全彩印刷）》結構清晰，語言簡潔，實例豐富，版式精美，適閤Photoshop移動UI設計初、中級讀者閱讀，包括廣大UI設計愛好者、UI設計工作者，同時也可以作為各類計算機培訓中心、技工學校和大中專職業院校的輔導教材。

作者簡介

蔣珍珍，知名電商設計師，擅長各電商平颱（天貓、淘寶、京東、微店等）店麵整體形象設計，優化商品視覺美感。同時也是一名UI設計師，精通UI界麵各元素的設計，特彆是移動APP基於用戶體驗、人機交互的圖形化設計，以及H5的設計與製作，有著豐富的一綫實戰經驗。

內頁插圖

目錄

第1章 新手導航：移動UI的設計常識
1．1 便捷生活：認識移動UI設計
1．1．1 連接工具和人的界麵
1．1．2 連接用戶和手機的界麵
1．1．3 移動UI的設計特點
1．1．4 移動UI的設計基礎
1．2 主流係統：深入瞭解UI的操作平颱
1．2．1 榖歌Android係統
1．2．2 蘋果iOS係統
1．2．3 微軟Windows Phone係統
1．3 熟悉界麵：瞭解手機與平闆的界麵
1．3．1 手機界麵
1．3．2 平闆電腦界麵
1．3．3 流程分析
1．3．4 注意事項

第2章 掌控布局：移動UI設計的布局原則
2．1 初級布局：解析移動UI的縱橫布局
2．1．1 竪嚮排列布局
2．1．2 橫嚮排列布局
2．1．3 九宮格排列布局
2．2 高級布局：解析移動UI的特殊布局
2．2．1 彈齣框式布局
2．2．2 熱門標簽布局
2．2．3 側邊欄式布局
2．2．4 陳列館式布局
2．2．5 分段菜單式布局
2．2．6 點聚式布局
2．2．7 轉盤式布局
2．2．8 導航欄置底式布局
2．2．9 磁貼狀態式布局
2．2．10 超級菜單式布局
2．2．11 導航欄置頂式布局
2．2．12 幻燈片式布局
2．3 優化布局：掌握移動UI的布局策略
2．3．1 圖錶信息布局的設計方法
2．3．2 界麵細節的設計方法
2．3．3 移動UI的布局規則

第3章 透析本質：移動UI視覺交互設計法則
3．1 博人眼球：把握UI的視覺特色
3．1．1 打造簡潔與抽象美感
3．1．2 營造趣味視覺畫麵
3．1．3 塑造華麗視覺效果
3．1．4 把握色彩的使用特點
3．2 挖掘內涵：提升UI的文字設計
3．2．1 內容設計簡化
3．2．2 字體設計閤理
3．2．3 突齣文字層次
3．2．4 信息錶達清晰
3．2．5 掌握文字間距
3．2．6 文字顔色設計
3．2．7 畫麵美感設計
3．2．8 實用性能優化
3．3 精益求精：優化移動UI的圖案效果
3．3．1 分辨率影響美感
3．3．2 拉伸影響美感
3．3．3 特效美化界麵
3．3．4 交互動作特性
3．3．5 增加真實感
3．3．6 透析事物關係
3．3．7 展現復雜效果
……

第4章 深入解析：移動UI的構成元素
第5章 軟件進階：Photoshop移動UI快速上手
第6章 視覺美感：UI的色彩與風格設計
第7章 畫龍點睛：移動UI文字的編排設計
第8章 界麵閤成：移動UI圖像的摳取與閤成
第9章 界麵特效：移動UI圖像特效質感設計
第10章 常用元素：圖標、圖形、按鈕設計
第11章 蘋果係統：常見蘋果係統UI設計
第12章 安卓係統：常見安卓係統UI設計
第13章 微軟係統：常見微軟係統UI設計
第14章 登錄界麵：社交與免費WiFi登錄UI設計
第15章 影音遊戲：影音與遊戲UI設計

精彩書摘

第11 章 蘋果係統：常見蘋果係統UI 設計

學習提示

蘋果公司的移動産品( 如iPhone 係列手機、iPad 平闆電腦、iPod 音樂播放器等) 如今已風靡全球，其iOS 操作係統對硬件性能要求不高，應用程序豐富，操作非常流暢，其獨特的魅力吸引瞭越來越多的用戶。本章主要介紹蘋果係統UI 的設計方法。

本章重點導航

設計天氣控件界麵的背景效果

設計天氣控件界麵的主體效果

設計日曆APP 界麵的背景效果

設計日曆APP 界麵的主體效果

11.1 天氣界麵：掌握天氣控件界麵的設計

在蘋果智能移動設備上經常可以看到各式各樣的天氣軟件，這些天氣軟件的功能都很全

麵，除瞭可以隨時隨地查看本地甚至其他地方連續幾天的天氣和溫度，還有其他資訊小服務，

是移動用戶居傢旅行的必需工具。本實例最終效果如圖11-1 所示。

圖11-1 實例效果

素材文件

素材 第11 章 蘋果係統天氣控件背景.jpg、天氣控件界麵狀態欄.psd、天氣圖標1.psd、天氣圖標2.psd

效果文件

效果 第11 章 蘋果係統天氣控件界麵.psd、蘋果係統天氣控件界麵.jpg

視頻文件

視頻 第11 章11.1.1 設計天氣控件背景效果.mp4、11.1.2 設計天氣控件主體效果.mp4

11.1.1 設計天氣控件界麵的背景效果

下麵主要使用“亮度/ 對比度”命令、“麯綫”命令、“USM 銳化”命令及圖層混閤模式等，設計蘋果係統天氣控件界麵的背景效果。

步驟 01 選擇“文件”|“打開”命令，打開“蘋果係統天氣控件背景”素材圖像；選擇“圖像”|“調整”|“亮度/ 對比度”命令，彈齣“亮度/ 對比度”對話框，設置“亮度”為18、“對比度”為31，單擊“確定”按鈕，即可調整背景圖像的亮度與對比度，效果如圖11-2 所示。

步驟 02 選擇“圖像”|“調整”|“麯綫”命令，彈齣“麯綫”對話框，在麯綫上添加一個控製點，設置“輸齣”和“輸入”的參數值分彆為187、175，然後在麯綫上添加另一個控製點，設置“輸齣”和“輸入”的參數值分彆為70、77，如圖11-3 所示，單擊“確定”按鈕，即可調整背景圖像的色調。

圖11-2 使用“亮度/ 對比度”命令調節圖像 圖11-3 設置“麯綫”參數值步驟 03 選擇“濾鏡”|“銳化”|“USM 銳化”命令，彈齣“USM 銳化”對話框，設置“數量”為30%、“半徑”為3.6 像素、“閾值”為19 色階，單擊“確定”按鈕，即可銳化背景圖像，如圖11-4 所示。

圖11-4 銳化背景圖像

步驟 04 展開“圖層”麵闆，按Ctrl+J 組閤鍵復製“背景”圖層，得到“圖層1”圖層，設置“圖層1”圖層的“混閤模式”為“疊加”、“不透明度”為60%，即可改變圖像效果，如圖11-5 所示。

步驟 05 打開“天氣控件界麵狀態欄.psd”素材圖像，將其拖曳至“蘋果係統天氣控件背景”圖像編輯窗口中的閤適位置處，效果如圖11-6 所示。

圖11-5 調整圖像效果 圖11-6 添加狀態欄素材圖像

11.1.2 設計天氣控件界麵的主體效果

下麵主要使用矩形工具、“投影”圖層樣式、漸變工具、魔棒工具、橫排文字工具等，設計蘋果係統天氣控件界麵的主體效果。

步驟 01 在“圖層”麵闆中，新建“圖層2”圖層，設置前景色為淺藍色(RGB 參數值為121、140、239)，如圖11-7 所示。

圖11-7 設置前景色

步驟 02 選擇工具箱中的矩形工具，在工具屬性欄中設置“選擇工具模式”為“像素”，繪製一個矩形。雙擊“圖層2”圖層，彈齣“圖層樣式”對話框，勾選“投影”復選框，保持默認設置即可，如圖11-8 所示。

圖11-8 勾選“投影”復選框

步驟 03 單擊“確定”按鈕，應用“投影”圖層樣式，效果如圖11-9 所示。

步驟 04 在“圖層”麵闆中，為“圖層2”圖層添加圖層濛版，如圖11-10 所示。

圖11-9 應用“投影”圖層樣式效果 圖11-10 添加圖層濛版

步驟 05 使用漸變工具，從右至左填充黑色到白色的綫性漸變，效果如圖11-11 所示。

步驟 06 在“圖層”麵闆中設置“圖層2”圖層的“不透明度”為60%，如圖11-12 所示。

圖11-11 填充綫性漸變效果 圖11-12 設置圖層的不透明度

步驟 07 復製“圖層2”圖層，得到“圖層2 拷貝”圖層，將“圖層2 拷貝”圖層中的圖像拖曳至相應位置處，效果如圖11-13 所示。

步驟 08 按Ctrl+T 組閤鍵，調齣變換控製框，適當調整圖像的大小和位置，按Enter 鍵確認操作，如圖11-14 所示。

圖11-13 復製並移動圖像 圖11-14 調整圖像的大小和位置

步驟 09 選擇工具箱中的魔棒工具，單擊調整後的圖像，創建選區，如圖11-15 所示。

步驟 10 設置前景色為藍色(RGB 參數值為78、111、231)，按Alt+Delete 組閤鍵，為選區填充前景色，按Ctrl+D 組閤鍵，取消選區，效果如圖11-16 所示。

圖11-15 創建選區 圖11-16 填充效果

步驟 11 在“圖層”麵闆中，復製“圖層2”圖層，得到“圖層2 拷貝2”圖層，適當調整“圖層2 拷貝2”圖層中圖像的大小和位置，效果如圖11-17 所示。

步驟 12 選擇工具箱中的魔棒工具，單擊調整後的圖像，創建選區，如圖11-18 所示。

圖11-17 調整圖像大小和位置 圖11-18 創建選區

步驟 13 設置前景色為白色，按Alt+Delete組閤鍵，為選區填充前景色，按Ctrl+D組閤鍵，取消選區，效果如圖11-19 所示。

步驟 14 設置“圖層2 拷貝2”圖層的“不透明度”為80%，即可改變圖像效果，如圖11-20 所示。

圖11-19 填充效果 圖11-20 調整圖層的不透明度

步驟 15 選擇“圖層2 拷貝2”圖層，按住Ctrl+Alt 鍵的同時嚮下拖曳，復製兩個圖層，如圖11-21 所示。

步驟 16 適當調整各圖像的位置，效果如圖11-22 所示。

圖11-21 復製圖層 圖11-22 調整圖像的位置

步驟 17 打開“天氣圖標1.psd”素材圖像，將其拖曳至“蘋果係統天氣控件背景”圖像編輯窗口中的閤適位置處，效果如圖11-23 所示。

步驟 18 打開“天氣圖標2.psd”素材圖像，將其拖曳至“蘋果係統天氣控件背景”圖像編輯窗口中，並適當調整各圖像的位置，效果如圖11-24 所示。

圖11-23 拖入素材圖像 圖11-24 拖入素材圖像

步驟 19 選擇工具箱中的橫排文字工具，確認插入點，在“字符”麵闆中設置“字體係列”為“微軟雅黑”、“字體大小”為60 點、“顔色”為白色(RGB 參數值均為255)，如圖11-25 所示。

步驟 20 使用橫排文字工具在圖像中輸入相應文本，如圖11-26 所示。

圖11-25 設置文字屬性 圖11-26 輸入相應文本

步驟 21 使用橫排文字工具確認插入點，在“字符”麵闆中設置“字體係列”為“微軟雅黑”、“字體大小”為12 點、“顔色”為白色(RGB 參數值均為255)，如圖11-27 所示。

步驟 22 在圖像中輸入相應文本，完成蘋果係統天氣控件界麵的設計，最終效果如圖11-28所示。

圖11-27 設置文字屬性 圖11-28 最終效果

前言/序言

寫作驅動
本書是初、中級讀者全麵自學Photoshop 移動UI 設計的經典暢銷教程，作者從實用角度齣發，全麵、係統地講解瞭Photoshop 移動UI 設計的方法，基本上涵蓋瞭Photoshop 主要工具、麵闆和菜單命令。本書在介紹軟件功能的同時，還精心安排瞭50 多個具有針對性的實例，幫助讀者輕鬆掌握軟件使用技巧和具體應用，以做到“學用結閤”。此外，全部實例都配有視頻教學，詳細演示瞭實例製作過程。
本書特色
58 個專傢指點放送：本書在編寫時將平時工作中總結的軟件各方麵的實戰技巧、設計經驗等毫無保留地奉獻給讀者，不僅使本書更具有含金量，而且更方便讀者提升軟件實戰技巧與經驗，從而大大提高讀者學習與工作的效率，使讀者學有所成。
50 多個技能實例奉獻：本書通過大量技能實例來輔講軟件，達50 多個，幫助讀者在實戰演練中逐步掌握軟件的核心技能與操作技巧，與同類書相比，使讀者可以省去學煩瑣理論的時間，更能掌握超齣同類書的大量實用技能，讓學習更高效。
250 分鍾音視頻演示：本書中的軟件操作技能實例，全部錄製瞭帶語音講解的視頻，時間長度達250 分鍾（4 個多小時），重現書中所有實例操作過程，讀者可以結閤書本，也可以獨立觀看視頻演示，像看電影一樣進行學習，讓學習變得更加輕鬆。
180 多款素材效果奉獻：隨書光盤包含瞭105 個素材文件，80 個效果文件。其中，素材涉及商業素材、UI 素材、電影素材、天氣預報素材、風景素材、美食素材、係統界麵素材、係統按鈕素材等，應有盡有，供讀者使用。
800 多張圖片全程圖解：本書采用瞭800 多張圖片對軟件技術、實例製作，進行瞭全程式的圖解，通過這些清晰的圖片，讓實例的內容變得更通俗易懂，使讀者可以一目瞭然，快速領會，舉一反三，製作齣更多優秀的移動UI 作品。
編著者售後
本書由蔣珍珍編著，參與編寫的人員還有王碧清、劉勝璋、劉嚮東、劉鬆異、劉偉、盧博、周旭陽、袁淑敏、譚中陽、楊端陽、李四華、王力建、柏承能、劉桂花、柏鬆、譚賢、譚俊傑、徐茜、劉嬪、蘇高、柏慧等人，在此錶示感謝。由於編者知識水平有限，書中難免有錯誤和疏漏之處，懇請廣大讀者批評、指正。
編 者

有光盤素材內容還可以

很好

還行吧

希望對自己有用

快遞好快，書的內容也很充實，囊括瞭很多知識點，還有豐富的實戰案例，喜歡的朋友韆萬不要錯過！

學習瞭，書很不錯，技巧方麵的講解都很用心，就是快遞有點慢，不過算瞭，還是給好評瞭！

此用戶未填寫評價內容

還不錯的書，基礎知識比較多

還不錯，京東的物流沒話說，書還可以，等看完再追評