Photoshop移動(dòng)UI設(shè)計(jì)從入門到精通

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