Photoshop移動UI設計從入門到精通

目錄CONTENTS第1 章新手導航：移動UI 的設計常識……………………………………… 11.1　便捷生活：認識移動UI 設計 ………………………………………………… 21.1.1 連接工具和人的界面 ………………………………………………………21.1.2 連接用戶和手機的界面 ……………………………………………………21.1.3 移動UI 的設計特點 ………………………………………………………31.1.4 移動UI 的設計基礎 ………………………………………………………51.2 主流系統(tǒng)：深入了解UI 的操作平臺 ………………………………………… 71.2.1 谷歌Android 系統(tǒng) …………………………………………………………81.2.2 蘋果iOS 系統(tǒng) …………………………………………………………… 101.2.3 微軟Windows Phone 系統(tǒng) …………………………………………… 121.3 熟悉界面：了解手機與平板的界面 …………………………………………… 151.3.1 手機界面 ………………………………………………………………… 151.3.2 平板電腦界面 …………………………………………………………… 181.3.3 流程分析 ………………………………………………………………… 201.3.4 注意事項 ………………………………………………………………… 20第2 章掌控布局：移動UI 設計的布局原則……………………………… 212.1 初級布局：解析移動UI 的縱橫布局 ………………………………………… 222.1.1 豎向排列布局 …………………………………………………………… 222.1.2 橫向排列布局 …………………………………………………………… 222.1.3 九宮格排列布局 ………………………………………………………… 232.2 高級布局：解析移動UI 的特殊布局 ………………………………………… 242.2.1 彈出框式布局 …………………………………………………………… 242.2.2 熱門標簽布局 …………………………………………………………… 242.2.3 側邊欄式布局 …………………………………………………………… 252.2.4 陳列館式布局 …………………………………………………………… 262.2.5 分段菜單式布局 ………………………………………………………… 282.2.6 點聚式布局 ……………………………………………………………… 282.2.7 轉盤式布局 ……………………………………………………………… 292.2.8 導航欄置底式布局 ………………………………………………………292.2.9 磁貼狀態(tài)式布局 ………………………………………………………… 302.2.10 超級菜單式布局 ………………………………………………………… 302.2.11 導航欄置頂式布局……………………………………………………… 312.2.12 幻燈片式布局…………………………………………………………… 322.3 優(yōu)化布局：掌握移動UI 的布局策略 ………………………………………… 332.3.1 圖表信息布局的設計方法 ……………………………………………… 332.3.2 界面細節(jié)的設計方法 ……………………………………………………342.3.3 移動UI 的布局規(guī)則 ……………………………………………………36第3 章透析本質(zhì)：移動UI 視覺交互設計法則…………………………… 413.1 博人眼球：把握UI 的視覺特色 ……………………………………………… 423.1.1 打造簡潔與抽象美感 ……………………………………………………423.1.2 營造趣味視覺畫面 ………………………………………………………433.1.3 塑造華麗視覺效果 ………………………………………………………443.1.4 把握色彩的使用特點 ……………………………………………………453.2 挖掘內(nèi)涵：提升UI 的文字設計 ……………………………………………… 453.2.1 內(nèi)容設計簡化 …………………………………………………………… 463.2.2 字體設計合理 …………………………………………………………… 463.2.3 突出文字層次 …………………………………………………………… 483.2.4 信息表達清晰 …………………………………………………………… 503.2.5 掌握文字間距 …………………………………………………………… 523.2.6 文字顏色設計 …………………………………………………………… 523.2.7 畫面美感設計 …………………………………………………………… 543.2.8 實用性能優(yōu)化 …………………………………………………………… 553.3 精益求精：優(yōu)化移動UI 的圖案效果 ………………………………………… 563.3.1 分辨率影響美感 ………………………………………………………… 563.3.2 拉伸影響美感 …………………………………………………………… 573.3.3 特效美化界面 …………………………………………………………… 583.3.4 交互動作特性 …………………………………………………………… 593.3.5 增加真實感 ……………………………………………………………… 593.3.6 透析事物關系 …………………………………………………………… 603.3.7 展現(xiàn)復雜效果 …………………………………………………………… 613.3.8 展現(xiàn)簡單動畫 …………………………………………………………… 623.3.9 實現(xiàn)夸張想象 …………………………………………………………… 62第4 章深入解析：移動UI 的構成元素…………………………………… 634.1 專注體驗：掌握基本元素的設計技巧 ………………………………………… 644.1.1 用戶體驗 ………………………………………………………………… 644.1.2 模糊背景 ………………………………………………………………… 654.1.3 滾動功能 ………………………………………………………………… 664.1.4 色調(diào)搭配 ………………………………………………………………… 664.1.5 情景感知 ………………………………………………………………… 674.1.6 擬物設計 ………………………………………………………………… 694.1.7 簡潔提示 ………………………………………………………………… 704.2 對點切入：靈活地帶入情感元素 ……………………………………………… 714.2.1 情感切入點 ……………………………………………………………… 724.2.2 驚喜拉近距離 …………………………………………………………… 734.2.3 真實獲得認可 …………………………………………………………… 744.3 組件解析：熟知移動UI 的按鈕組件 ………………………………………… 754.3.1 常規(guī)按鈕設計 …………………………………………………………… 754.3.2 編輯輸入框設計 ………………………………………………………… 764.3.3 開關按鈕設計 …………………………………………………………… 764.3.4 瀏覽模式設計 …………………………………………………………… 774.3.5 文本標簽設計 …………………………………………………………… 784.3.6 警告框設計 ……………………………………………………………… 784.3.7 導航欄設計 ……………………………………………………………… 794.3.8 頁面切換設計 …………………………………………………………… 794.3.9 進度條設計 ……………………………………………………………… 804.3.10 ico 圖標設計 …………………………………………………………… 81第5 章軟件進階：Photoshop 移動UI 快速上手……………………… 835.1 軟件進階：Photoshop 移動UI 快速上手 ………………………………… 845.1.1 Photoshop CC 的安裝 …………………………………………………845.1.2 Photoshop CC 的卸載 …………………………………………………865.2 界面詳解：熟悉Photoshop CC 的工作界面 ……………………………… 875.2.1 菜單欄 …………………………………………………………………… 885.2.2 狀態(tài)欄 …………………………………………………………………… 895.2.3 工具屬性欄 ……………………………………………………………… 905.2.4 工具箱 …………………………………………………………………… 915.2.5 圖像編輯窗口 …………………………………………………………… 915.2.6 浮動控制面板 …………………………………………………………… 925.3 圖像知識：識別移動UI 設計的基本圖像 …………………………………… 935.3.1 位圖與矢量圖形 ………………………………………………………… 935.3.2 像素與分辨率 …………………………………………………………… 945.3.3 圖像顏色模式 …………………………………………………………… 965.3.4 存儲文件格式 …………………………………………………………… 985.4 圖像操作：了解移動UI 圖像的操作模式 …………………………………… 995.4.1 新建空白圖像文件 ………………………………………………………995.4.2 打開UI 圖像文件 ………………………………………………………1005.4.3 保存UI 圖像文件 ………………………………………………………1015.4.4 關閉UI 圖像文件 ………………………………………………………1025.4.5 完成圖像撤銷操作 ………………………………………………………1035.4.6 應用快照還原圖像 ………………………………………………………1035.4.7 恢復圖像初始狀態(tài) ………………………………………………………1045.5 窗口調(diào)節(jié)：掌握移動UI 圖像的窗口操作 …………………………………1045.5.1 調(diào)整還原窗口設置 ………………………………………………………1055.5.2 展開/ 折疊面板設置 ……………………………………………………1065.5.3 移動調(diào)整面板設置 ………………………………………………………1075.5.4 圖像編輯窗口排列設置 …………………………………………………1095.5.5 圖像編輯窗口切換設置 …………………………………………………1115.5.6 圖像編輯窗口大小調(diào)整 …………………………………………………1125.5.7 移動圖像編輯窗口 ………………………………………………………114第6 章視覺美感：UI 的色彩與風格設計…………………………………1156.1 色彩解析：了解移動UI 圖像的顏色屬性 …………………………………1166.1.1 色相區(qū)分 …………………………………………………………………1166.1.2 明度標準 …………………………………………………………………1176.1.3 色彩飽和度 ………………………………………………………………1176.1.4 顏色的分布狀態(tài) …………………………………………………………1186.1.5 顏色模式轉換 ……………………………………………………………1206.1.6 色域范圍的識別 …………………………………………………………1246.2 自動調(diào)色：自動校正移動UI 圖像的色彩 ………………………………… 1256.2.1 “自動色調(diào)”命令 ………………………………………………………1256.2.2 “自動對比度”命令 ……………………………………………………1266.2.3 “自動顏色”命令 ………………………………………………………1276.3 色調(diào)調(diào)整：調(diào)整移動UI 圖像的影調(diào) ……………………………………… 1296.3.1 “色階”命令 ……………………………………………………………1296.3.2 “亮度/ 對比度”命令 …………………………………………………1316.3.3 “曲線”命令 ……………………………………………………………1336.3.4 “曝光度”命令 …………………………………………………………135第7 章畫龍點睛：移動UI 文字的編排設計………………………………1377.1 文字排列：掌握移動UI 中文字的排列 …………………………………… 1387.1.1 常見文字類型 ……………………………………………………………1387.1.2 文字屬性設置 ……………………………………………………………1387.1.3 橫排文字輸入 ……………………………………………………………1417.1.4 直排文字輸入 ……………………………………………………………1427.1.5 段落文字輸入 ……………………………………………………………1447.1.6 選區(qū)文字輸入 ……………………………………………………………1467.2 完善效果：設置移動UI 中的文字效果 …………………………………… 1497.2.1 文字屬性的設置 …………………………………………………………1497.2.2 段落屬性的設置 …………………………………………………………1507.2.3 選擇和移動UI 圖像文字 ………………………………………………1527.2.4 設置文字的方向互換 ……………………………………………………1537.2.5 段落文本與點文本的切換 ………………………………………………1537.2.6 文字的拼寫檢查 …………………………………………………………1557.2.7 文字的查找與替換 ………………………………………………………157第8 章界面合成：移動UI 圖像的摳取與合成………………………… 1598.1 命令摳圖：掌握移動UI 圖像命令摳圖技法 ………………………………1608.1.1 “反向”命令 ……………………………………………………………1608.1.2 “色彩范圍”命令 ………………………………………………………1618.1.3 “擴大選取”命令…………………………………………………………1638.1.4 “選取相似”命令 ………………………………………………………1648.2 工具摳圖：掌握移動UI 圖像工具摳圖技法 ………………………………1658.2.1 快速選擇工具 ……………………………………………………………1658.2.2 魔棒工具 …………………………………………………………………1678.2.3 矩形選框工具 ……………………………………………………………1708.2.4 橢圓選框工具 ……………………………………………………………1738.2.5 套索工具 …………………………………………………………………1748.2.6 多邊形套索工具 …………………………………………………………1758.2.7 磁性套索工具 ……………………………………………………………1778.2.8 魔術橡皮擦工具 …………………………………………………………1798.2.9 鋼筆工具 …………………………………………………………………1818.2.10 自由鋼筆工具 ……………………………………………………………184第9 章界面特效：移動UI 圖像特效質(zhì)感設計………………………… 1879.1 特效解析：為移動UI 圖像添加簡單的特效 ………………………………1889.1.1 編輯智能濾鏡 ……………………………………………………………1889.1.2 添加波浪效果 ……………………………………………………………1899.1.3 添加玻璃效果 ……………………………………………………………1899.1.4 添加水波效果 ……………………………………………………………1909.1.5 添加旋轉扭曲效果 ………………………………………………………1909.1.6 添加點狀化效果 …………………………………………………………1919.1.7 添加彩塊化效果 …………………………………………………………1919.2 特效實操：為移動UI 圖像添加復雜的特效 ………………………………1929.2.1 添加彩色半調(diào)的方法 ……………………………………………………1929.2.2 添加液化的方法 …………………………………………………………1949.2.3 使用濾鏡庫編輯移動UI 圖像的方法 …………………………………1959.2.4 添加切變效果的方法 ……………………………………………………1989.2.5 添加波紋的方法 …………………………………………………………1999.2.6 添加海洋波紋的方法 ……………………………………………………2009.2.7 添加擴散亮光的方法 ……………………………………………………2019.2.8 創(chuàng)建智能濾鏡 ……………………………………………………………203第10 章常用元素：圖標、圖形、按鈕設計…………………………… 20510.1 圖標元素：掌握移動UI 圖標的設計 ……………………………………… 20610.1.1 音樂APP 圖標的背景效果設計 ………………………………………20610.1.2 音樂APP 圖標的主體效果設計 ………………………………………20810.1.3 音樂APP 圖標的細節(jié)效果設計 ………………………………………21010.2 圖形元素：掌握移動UI 圖形的設計 ……………………………………… 21410.2.1 切換條的背景效果設計 …………………………………………………21410.2.2 切換條的主體效果設計 …………………………………………………21510.2.3 切換條的細節(jié)效果設計 …………………………………………………21810.3 基礎元素：掌握移動UI 按鈕的設計 ……………………………………… 22210.3.1 搜索框的主體效果設計 …………………………………………………22210.3.2 搜索框搜索圖標的效果設計 ……………………………………………22410.3.3 搜索框二維碼的效果設計 ………………………………………………226第11 章蘋果系統(tǒng)：常見蘋果系統(tǒng)UI 設計…………………………… 22911.1 天氣界面：掌握天氣控件界面的設計 …………………………………… 23011.1.1 設計天氣控件界面的背景效果…………………………………………23011.1.2 設計天氣控件界面的主體效果…………………………………………23211.2 日歷界面：掌握手機日歷界面的設計 …………………………………… 23811.2.1 設計日歷APP 界面的背景效果 ………………………………………23911.2.2 設計日歷APP 界面的主體效果 ………………………………………241第12 章安卓系統(tǒng)：常見安卓系統(tǒng)UI 設計…………………………… 25312.1 鎖屏界面：掌握安卓系統(tǒng)個性鎖屏界面的設計 …………………………25412.1.1 設計安卓系統(tǒng)鎖屏界面的背景效果……………………………………25412.1.2 設計安卓系統(tǒng)鎖屏界面的主體效果……………………………………25812.2 程序界面：掌握安卓系統(tǒng)程序界面的設計 ………………………………26112.2.1 安卓應用程序界面的主體效果設計……………………………………26212.2.2 安卓應用程序界面的整體效果設計……………………………………267第13 章微軟系統(tǒng)：常見微軟系統(tǒng)UI 設計…………………………… 27513.1 撥號鍵盤：掌握微軟手機撥號鍵盤的設計 ………………………………27613.1.1 微軟手機撥號鍵盤界面的背景效果設計………………………………27613.1.2 微軟手機撥號鍵盤界面的主體效果設計………………………………28113.2 用戶界面：掌握微軟手機用戶界面的設計 ………………………………28413.2.1 微軟手機用戶界面的背景效果設計……………………………………28513.2.2 微軟系統(tǒng)用戶界面的整體效果設計……………………………………290第14 章登錄界面：社交與免費WiFi 登錄UI 設計………………… 29914.1 云社交：掌握云社交登錄界面的設計 …………………………………… 30014.1.1 云社交APP 登錄界面的背景效果設計 ………………………………30014.1.2 云社交APP 登錄界面的文字效果設計 ………………………………30414.2 免費WiFi：掌握免費WiFi 登錄界面的設計 ……………………………30714.2.1 免費WiFi 應用登錄界面的背景效果設計 ……………………………30814.2.2 免費WiFi 應用登錄界面的表單按鈕設計 ……………………………31214.2.3 免費WiFi 應用登錄界面的細節(jié)和文本設計 …………………………320第15 章影音游戲：影音與游戲UI 設計……………………………… 32515.1 視頻播放：掌握視頻播放APP 界面的設計 …………………………… 32615.1.1 視頻播放APP 界面的主體效果設計 …………………………………32615.1.2 視頻播放APP 界面的細節(jié)效果設計 …………………………………32815.2 休閑游戲：掌握休閑游戲APP 界面的設計 …………………………… 33115.2.1 休閑游戲界面的背景效果設計…………………………………………33115.2.2 休閑游戲界面的主體效果設計…………………………………………33415.2.3 休閑游戲界面的文本效果設計…………………………………………337