UI設計必修課:Sketch移動界面設計教程(全彩)(含DVD光盤1張)
定 價:79.9 元
- 作者:李萬軍
- 出版時間:2017/9/1
- ISBN:9787121324109
- 出 版 社:電子工業(yè)出版社
- 中圖法分類:TP311.1
- 頁碼:
- 紙張:膠版紙
- 版次:1
- 開本:128開
本書通過大量的案例分析,詳細介紹了Sketch 4在設計移動UI中的一樣分別針對Sketch繪制線框原型、設計圖標、設計移動UI、設計網(wǎng)站UI和UI的輸出與交互進行了講解。通過學習讀者應該熟悉移動UI設計的規(guī)范和設計要點。同時掌握移動UI的輸出以及交互動效的添加方法。本書在每一章中都根據(jù)該章節(jié)內(nèi)容添加專家支招,為讀者解答一些與實際工作相關的疑難問題。
本書采用循序漸進的方式指引設計者了解并掌握Sketch 4設計制作移動UI的方法和技巧。
本書遵守廣大設計者的需求,采用循序漸進的方式指引設計者了解并掌握Sketch 4設計制作移動UI的方法和技巧。本章共分為7章,逐級滲透的講解方法,全面的向讀者講解Sketch 4的使用。
第1章 移動UI設計師入門。主要講解了移動UI的發(fā)展、移動UI設計師的工作流程、iOS和Android設計特色、移動UI設計師應了解的基本常識等內(nèi)容。第2章 初識Sketch。主要講解了Sketch的安裝和啟動、Sketch的歡迎介紹、Sketch的主界面、Sketch的快捷鍵、Sketch的系統(tǒng)偏好設置、Sketch的標志、參考線和網(wǎng)格和Sketch的常見問題等內(nèi)容。第3章 使用Sketch繪制線框原型。主要講解了線框原型的基本概念、繪制線框原型的注意事項、Sketch繪制線框原型、使用Sketch繪制線框原型和完整線框原型的繪制等內(nèi)容。第4章 使用Sketch設計圖標。主要講解了圖標的設計準則、圖標集的制作過程、使用Sketch插入面板、圖形的布爾運算、繪制iOSAPP圖標、繪制音樂應用圖標和圖標的源文件格式等內(nèi)容。第5章 使用Sketch設計移動UI。主要講解了移動UI的設計原則、移動界面的色彩搭配與視覺效果、Ios應用界面設計規(guī)范、安卓界面及Material Design設計規(guī)范、移動界面中色彩應用、文字的創(chuàng)建與編輯、使用共享樣式、文字的導出、繪制iOS音樂播放器界面、繪制iOS社交APP界面和繪制iOS支付APP界面等內(nèi)容。第6章 使用Sketch設計網(wǎng)站UI。主要講解了網(wǎng)頁設計PC端和移動端的區(qū)別、扁平化設計在UI設計中的應用、編輯繪制的圖形、位圖的編輯、應用樣式、組件、繪制企業(yè)PC端網(wǎng)站界面、繪制企業(yè)PC端網(wǎng)站界面等內(nèi)容。第7章 UI的輸出與交互設計。主要講解了適配多分辨率移動界面、實現(xiàn)在設備上實時預覽、分享設計稿、交付給開發(fā)的文件、使用Sketch切圖、使用Sketch標注、設計移動交互特效、使用Sketch插件等內(nèi)容。本書的目的在于編寫一本對讀者真正有幫助的移動界面設計教材,讓讀者在閱讀過本書以后可以輕松的掌握Sketch設計移動界面的方法。在制作移動界面的過程中起到事半功倍的作用,由于互聯(lián)網(wǎng)的更新較快,書中所提供的網(wǎng)址僅供參考。
李萬軍:北京市骨干教師 北京市骨干教師 北京市骨干教師北京市重點專業(yè)申報人 、負責北京市重點專業(yè)申報人 、負責北京市重點專業(yè)申報人 、負責北京市重點專業(yè)申報人 、負責北京市重點專業(yè)申報人、負責中國商業(yè)統(tǒng)計學會 中國商業(yè)統(tǒng)計學會 中國商業(yè)統(tǒng)計學會理事。平面設計、網(wǎng)頁設計專家,出版專業(yè)教材多本,有豐富的教學經(jīng)驗。
Chapter 01 移動UI設計師的入門
1.1 移動UI的發(fā)展 ...................................................................... 2
1.1.1 早期設計保證軟件可用性 ............................................................. 2
1.1.2 中期設計保證軟件易用性 ............................................................. 2
1.1.3 后期設計保證軟件實用性 ............................................................. 4
1.1.4 未來UI設計的展望 ......................................................................... 5
1.2 移動UI設計師的工作流程 .................................................. 6
1.3 iOS和Android設計特色 ...................................................... 7
1.3.1 iOS的設計特色 ............................................................................... 7
1.3.2 Android的設計特色 ...................................................................... 11
1.4 移動UI設計師應了解的基本常識 .....................................14
1.4.1 移動UI設計中用到的單位 ........................................................... 14
1.4.2 iOS的界面設計規(guī)范 ..................................................................... 16
1.4.4 Android的界面設計規(guī)范 .............................................................. 18
1.4.5 為觸控而設計 ............................................................................... 20
1.4.6 從iOS10的特點看設計趨勢 ......................................................... 20
1.5 專家支招 .............................................................................22
1.5.1 移動UI設計師常用的設計工具有哪些? ................................... 22
1.5.2 什么是屏幕密度? ....................................................................... 23
1.6 本章小結 ..............................................................................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)偏好設置 .......................................................44
2.5.1 通用選項卡 ................................................................................... 45
2.5.2 畫布選項卡 ................................................................................... 46
2.5.3 圖層選項卡 ................................................................................... 47
2.5.4 插件選項卡 ................................................................................... 48
2.5.5 預設選項卡 ................................................................................... 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 本章小結 ..............................................................................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 畫板預設 ....................................................................................... 64
3.3.4 畫板檢查器 ................................................................................... 65
3.3.5 圖層面板 ....................................................................................... 66
3.3.6 關于模版 ....................................................................................... 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線框圖的繪制 .....