Chapter 01　移動UI設(shè)計師的入門
1.1 移動UI的發(fā)展 ...................................................................... 2
1.1.1　早期設(shè)計保證軟件可用性 ............................................................. 2
1.1.2　中期設(shè)計保證軟件易用性 ............................................................. 2
1.1.3　后期設(shè)計保證軟件實用性 ............................................................. 4
1.1.4　未來UI設(shè)計的展望 ......................................................................... 5
1.2 移動UI設(shè)計師的工作流程 .................................................. 6
1.3 iOS和Android設(shè)計特色 ...................................................... 7
1.3.1　iOS的設(shè)計特色 ............................................................................... 7
1.3.2　Android的設(shè)計特色 ...................................................................... 11
1.4　 移動UI設(shè)計師應(yīng)了解的基本常識 .....................................14
1.4.1　移動UI設(shè)計中用到的單位 ........................................................... 14
1.4.2　iOS的界面設(shè)計規(guī)范 ..................................................................... 16
1.4.4　Android的界面設(shè)計規(guī)范 .............................................................. 18
1.4.5　為觸控而設(shè)計 ............................................................................... 20
1.4.6　從iOS10的特點看設(shè)計趨勢 ......................................................... 20
1.5 專家支招 .............................................................................22
1.5.1　移動UI設(shè)計師常用的設(shè)計工具有哪些？ ................................... 22
1.5.2　什么是屏幕密度？ ....................................................................... 23
1.6 本章小結(jié) ..............................................................................23
Chapter 02　初識Sketch
2.1　Sketch的安裝和啟動 ...........................................................26
2.1.1　實戰(zhàn)安裝Sketch .................................................................... 26
2.1.2　實戰(zhàn)啟動Sketch .................................................................... 27
2.2　Sketch的歡迎介紹 ...............................................................28
2.3　Sketch的主界面 ...................................................................29
2.3.1　菜單欄 ........................................................................................... 29
2.3.2　工具欄 ........................................................................................... 31
實戰(zhàn)自定義工具欄 ........................................................................... 32
2.3.3　工具介紹 ....................................................................................... 33
2.3.4　畫布 ............................................................................................... 33
2.3.5　檢查器 ........................................................................................... 35
2.3.6　圖層面板 ....................................................................................... 36
2.3.7　畫板 ............................................................................................... 36
2.3.8　蒙板 ............................................................................................... 37
2.3.9　布爾運算 ....................................................................................... 37
2.3.10　符號與共享樣式 ......................................................................... 37
2.4　Sketch的快捷鍵 ...................................................................38
2.4.1　Sketch的快捷鍵列表 .................................................................... 39
2.4.2　實戰(zhàn)自定義快捷鍵 ............................................................... 43
2.5　Sketch的系統(tǒng)偏好設(shè)置 .......................................................44
2.5.1　通用選項卡 ................................................................................... 45
2.5.2　畫布選項卡 ................................................................................... 46
2.5.3　圖層選項卡 ................................................................................... 47
2.5.4　插件選項卡 ................................................................................... 48
2.5.5　預(yù)設(shè)選項卡 ................................................................................... 49
2.5.6　Cloud選項卡 ................................................................................. 49
2.6　Sketch的標尺、參考線和網(wǎng)格 ................................................ 49
2.6.1　標尺 ............................................................................................... 49
2.6.2　參考線 ........................................................................................... 50
2.6.3　網(wǎng)格 ............................................................................................... 51
2.7　Sketch的常見問題 ...............................................................53
2.7.1　Sketch是否支持Windows系統(tǒng)？ ................................................. 53
2.7.2　Sketch能否替代Photoshop？ ....................................................... 53
2.7.3　Sketch是否有漢化版 .................................................................... 53
2.7.4　Sketch如何升級？ ........................................................................ 53
2.7.5　Sketch價格能不能優(yōu)惠？ ............................................................ 54
2.8　專家支招 ..............................................................................54
2.8.1　Sketch怎么兼容低版本文件？ .................................................... 54
2.8.2　Sketch是否有類似Axure的組件庫的功能？ .............................. 55
2.9　本章小結(jié) ..............................................................................55
Chapter 03　從線框原型開始
3.1　線框原型的基本概念 ..........................................................58
3.2　繪制線框原型的注意事項 ..................................................59
3.2.1　巧用明暗對比的運用 ................................................................... 59
3.2.2　不使用截圖和顏色 ....................................................................... 60
3.2.3　標記第一屏高度 ........................................................................... 60
3.2.4　合理的布局和間距 ....................................................................... 61
3.3　Sketch繪制線框原型 ...........................................................61
3.3.1　文件的新建和保存 ....................................................................... 61
3.3.2　回到Sketch文檔的歷史版本 ........................................................ 63
3.3.3　畫板預(yù)設(shè) ....................................................................................... 64
3.3.4　畫板檢查器 ................................................................................... 65
3.3.5　圖層面板 ....................................................................................... 66
3.3.6　關(guān)于模版 ....................................................................................... 70
3.3.7　圖層組的檢查器 ........................................................................... 71
3.3.8　形狀圖層的檢查器 ....................................................................... 73
3.3.9　文字圖層的檢查器 ....................................................................... 76
3.4　使用Sketch繪制線框原型 ...................................................78
3.4.1　實戰(zhàn)計步APP線框圖的繪制 ................................................ 78
3.4.2　實戰(zhàn)內(nèi)容列表頁線框圖的繪制 ........................................... 82
3.5　完整線框原型的繪制 ..........................................................86
3.5.1　實戰(zhàn)注冊頁1線框圖的繪制 .....