●Chapter 01  移動UI設計師的入門1.1 移動UI的發展 ...................................................................... 21.1.1  早期設計保證軟件可用性 ............................................................. 21.1.2  中期設計保證軟件易用性 ............................................................. 21.1.3  後期設計保證軟件實用性 ............................................................. 41.1.4  未來UI設計的展望 ......................................................................... 51.2 移動UI設計師的工作流程 .................................................. 61.3 iOS和Android設計特色 ...................................................... 71.3.1  iOS的設計特色 ............................................................................... 71.3.2  Android的設計特色 ...................................................................... 111.4   移動UI設計師應了解的基本常識 .....................................141.4.1  移動UI設計中用到的單位 ........................................................... 141.4.2  iOS的界面設計規範 ..................................................................... 161.4.4  Android的界面設計規範 .............................................................. 181.4.5  為觸控而設計 ............................................................................... 201.4.6  從iOS10的特點看設計趨勢 ......................................................... 201.5 專家支招 .............................................................................221.5.1  移動UI設計師常用的設計工具有哪些？ ................................... 221.5.2  什麼是屏幕密度？ ....................................................................... 231.6 本章小結 ..............................................................................23Chapter 02  初識Sketch2.1  Sketch的安裝和啟動 ...........................................................262.1.1  實戰――安裝Sketch .................................................................... 262.1.2  實戰――啟動Sketch .................................................................... 272.2  Sketch的歡迎介紹 ...............................................................282.3  Sketch的主界面 ...................................................................292.3.1  菜單欄 ........................................................................................... 292.3.2  工具欄 ........................................................................................... 31實戰――自定義工具欄 ........................................................................... 322.3.3  工具介紹 ....................................................................................... 332.3.4  畫布 ............................................................................................... 332.3.5  檢查器 ........................................................................................... 352.3.6  圖層面板 ....................................................................................... 362.3.7  畫板 ............................................................................................... 362.3.8  蒙板 ............................................................................................... 372.3.9  布爾運算 ....................................................................................... 372.3.10  符號與共享樣式 ......................................................................... 372.4  Sketch的快捷鍵 ...................................................................382.4.1  Sketch的快捷鍵列表 .................................................................... 392.4.2  實戰――自定義快捷鍵 ............................................................... 432.5  Sketch的繫統偏好設置 .......................................................442.5.1  通用選項卡 ................................................................................... 452.5.2  畫布選項卡 ................................................................................... 462.5.3  圖層選項卡 ................................................................................... 472.5.4  插件選項卡 ................................................................................... 482.5.5  預設選項卡 ................................................................................... 492.5.6  Cloud選項卡 ................................................................................. 492.6  Sketch的標尺、參考線和網格 ................................................ 492.6.1  標尺 ............................................................................................... 492.6.2  參考線 ........................................................................................... 502.6.3  網格 ............................................................................................... 512.7  Sketch的常見問題 ...............................................................532.7.1  Sketch是否支持Windows繫統？ ................................................. 532.7.2  Sketch能否替代Photoshop？ ....................................................... 532.7.3  Sketch是否有漢化版 .................................................................... 532.7.4  Sketch如何升級？ ........................................................................ 532.7.5  Sketch價格能不能優惠？ ............................................................ 542.8  專家支招 ..............................................................................542.8.1  Sketch怎麼兼容低版本文件？ .................................................... 542.8.2  Sketch是否有類似Axure的組件庫的功能？ .............................. 552.9  本章小結 ..............................................................................55Chapter 03  從線框原型開始3.1  線框原型的基本概念 ..........................................................583.2  繪制線框原型的注意事項 ..................................................593.2.1  巧用明暗對比的運用 ................................................................... 593.2.2  不使用截圖和顏色 ....................................................................... 603.2.3  標記屏高度 ........................................................................... 603.2.4  合理的布局和間距 ....................................................................... 613.3  Sketch繪制線框原型 ...........................................................613.3.1  文件的新建和保存 ....................................................................... 613.3.2  回到Sketch文檔的歷史版本 ........................................................ 633.3.3  畫板預設 ....................................................................................... 643.3.4  畫板檢查器 ................................................................................... 653.3.5  圖層面板 ....................................................................................... 663.3.6  關於模版 ....................................................................................... 703.3.7  圖層組的檢查器 ........................................................................... 713.3.8  形狀圖層的檢查器 ....................................................................... 733.3.9  文字圖層的檢查器 ....................................................................... 763.4  使用Sketch繪制線框原型 ...................................................783.4.1  實戰――計步APP線框圖的繪制 ................................................ 783.4.2  實戰――內容列表頁線框圖的繪制 ........................................... 823.5  完整線框原型的繪制 ..........................................................863.5.1  實戰――注冊頁1線框圖的繪制 ................................................. 863.5.2  實戰――注冊頁2線框圖的繪制 ................................................. 903.5.3  實戰――注冊頁3線框圖的繪制 ................................................. 923.5.4  實戰――注冊頁4線框圖的繪制 ................................................. 943.6  繪制線框原型的思考 ..........................................................953.7  專家支招 ..............................................................................963.7.1  畫好APP線框圖流程圖的要點有哪些？ .................................... 963.7.2  線框原型的優勢有哪些？ ........................................................... 973.8  本章小結 ..............................................................................97Chapter 04  使用Sketch設計圖標4.1  圖標的設計準則 ................................................................ 1004.1.1  圖標設計的必要性 ..................................................................... 1004.1.2  了解圖標的屬性 ......................................................................... 1024.1.3  不同繫統中的圖標格式 ............................................................. 1054.1.4  不同繫統圖標的更換方法 ......................................................... 1054.2  圖標集的制作過程 ............................................................ 1094.2.1  創建制作清單 ............................................................................. 1094.2.2  設計草圖 ..................................................................................... 1094.2.3  數字呈現 ..................................................................................... 1104.2.4  確定最終效果 ............................................................................. 1104.2.5  命名並導出 ..................................................................................1114.3  使用Sketch插入面板 ......................................................... 1114.3.1  插入矢量 ......................................................................................1114.3.2  插入鉛筆 ..................................................................................... 1154.3.3  插入形狀 ..................................................................................... 1164.3.4  插入文本 ..................................................................................... 1204.3.5  插入圖片 ..................................................................................... 1214.4  圖形的布爾運算 ................................................................ 1214.5  實戰――繪制iOS APP圖標 ............................................. 1244.6  實戰――繪制音樂應用圖標 ............................................ 1284.7  圖標的源文件格式 ............................................................ 1324.8  專家支招 ............................................................................ 1334.8.1  iOS繫統中圖標的尺寸 ............................................................... 1334.8.2  如何獲得專業圖標 ..................................................................... 1344.9  本章小結 ............................................................................ 134Chapter 05  使用Sketch設計移動UI5.1  移動UI的設計原則............................................................ 1365.1.1  視覺一致性原則 ......................................................................... 1365.1.2  視覺簡易性原則 ......................................................................... 1375.1.3  從用戶的考慮角度出發 ............................................................. 1375.2  移動界面的色彩搭配與視覺效果 .................................... 1385.2.1  冷暖色調的對比 ......................................................................... 1385.2.2  色彩的意向 ................................................................................. 1385.2.3  色彩的搭配技巧 ......................................................................... 1395.2.4  APP界面配色原則 ...................................................................... 1405.2.5  APP UI設計的用色規範 ............................................................. 1425.3  iOS應用界面設計規範...................................................... 1425.3.1  Sketch的iOS UI模板 ................................................................... 1435.3.2  模板使用的注意事項 ................................................................. 1445.4  安卓界面及Material Design設計規範 .............................. 1465.5  移動界面中色彩應用 ........................................................ 1475.5.1  Sketch顏色面板的使用 .............................................................. 1485.6  文字的創建與編輯 ............................................................ 1575.6.1  文本的添加 ................................................................................. 1585.6.2  文本的編輯 ................................................................................. 1585.6.3  文本路徑 ..................................................................................... 1605.6.4  文本轉換輪廓 ............................................................................. 1605.7  使用共享樣式 .................................................................... 1615.8  文字的導出 ........................................................................ 1635.9  實戰――繪制iOS音樂播放界面...................................... 1645.10  實戰――繪制iOS社交APP界面 .................................... 1685.11  實戰――繪制iOS支付APP界面 .................................... 1725.12  專家支招 .......................................................................... 1765.12.1  移動界面中的文字使用技巧 ................................................... 1765.12.2  移動界面中的色彩選擇 ........................................................... 1775.13  本章小結 .......................................................................... 178Chapter 06  使用Sketch設計PC端網站UI6.1  網頁設計PC端和移動端的區別 ....................................... 1806.1.1  屏幕尺寸不同 ............................................................................. 1806.1.2  操作方式不同 ............................................................................. 1806.1.3  網絡環境不同 ............................................................................. 1816.1.4  傳感器不同 ................................................................................. 1816.1.5  使用場景和使用時間的不同 ..................................................... 1816.1.6  軟件迭代時間和更新頻率不同 ................................................. 1816.1.7  功能設計上的區別 ..................................................................... 1816.2.1  圖標和徽章 ................................................................................. 1826.2  扁平化設計在UI設計中的應用........................................ 1826.2.2  圓角和折角 ................................................................................. 1836.2.3  標簽和條紋 ................................................................................. 1846.2.4  素 ..................................................................................... 1856.3.1  分組和取消分組 ......................................................................... 1866.3  編輯繪制的圖形 ................................................................ 1866.3.2  編輯和變換圖形 ......................................................................... 1876.3.3  旋轉圖形 ..................................................................................... 1876.3.4  蒙板 ............................................................................................. 1896.3.4  剪刀與描邊寬度 ......................................................................... 1926.4  位圖的編輯 ........................................................................ 1926.4.1  編輯位圖 ..................................................................................... 1936.4.2  色彩校正 ..................................................................................... 1956.5.1  陰影 ............................................................................................. 1956.5  應用樣式 ............................................................................ 1956.5.2  內陰影 ......................................................................................... 1966.5.3  模糊 ............................................................................................. 1966.6  混合模式 ............................................................................ 1986.7  組件 .................................................................................... 1996.7.1  創建組件 ..................................................................................... 2006.7.2  覆蓋文本 ..................................................................................... 2006.7.3  管理組件 ..................................................................................... 2016.8  實戰――繪制企業PC端網站界面 ................................... 2026.9  實戰――繪制企業PC端網站界面 .................................. 2056.10  專家支招 .......................................................................... 2156.10.1  理解以用戶為中心 ................................................................... 2156.10.2  界面設計中的內容與形式統一 ............................................... 2156.11  本章小結 .......................................................................... 216Chapter 07  UI的輸出與交互設計7.1  適配多分辨率移動界面 .................................................... 2187.1.1  適配安卓設備 ............................................................................. 2187.1.2  適配iOS設備 ............................................................................... 2187.1.3  使用自適應設計插件 ................................................................. 2187.2  實現在設備上實時預覽 .................................................... 2197.3  分享設計稿 ........................................................................ 2197.4  交付給開發的文件 ............................................................ 2207.5  使用Sketch切圖 ................................................................. 2217.5.1  切片圖層檢查器 ......................................................................... 2237.5.2  點九切圖 ..................................................................................... 2247.6  使用Sketch標注 ................................................................. 2277.7  設計移動交互動效 ............................................................ 2307.7.1  了解移動設備的手勢 ................................................................. 2307.7.2  移動交互動效設計的注意事項 ................................................. 2337.7.3  常見的動效制作軟件 ................................................................. 2347.8  使用Sketch插件 ................................................................. 2377.8.1  插件的安裝 ................................................................................. 2377.8.2  實用的插件 ................................................................................. 2387.9  專家支招 ............................................................................ 2407.9.1  如何多移動界面進行標注 ......................................................... 2407.9.2  常見角度動畫效果 ..................................................................... 2417.10  本章小結 .......................................................................... 242

本書通過大量的案例分析，詳細介紹了Sketch 4在設計移動UI中的應用，分別針對Sketch繪制線框原型、設計圖標、設計移動UI、設計網站UI和UI的輸出與交互進行了講解。通過學習讀者應該熟悉移動UI設計的規範和設計要點。同時掌握移動UI的輸出以及交互動效的添加方法。本書在每一章中都根據該章節內容添加專家支招，為讀者解答一些與實際工作相關的疑難問題。

李萬軍 著