動(dòng)靜之美：Sketch移動(dòng)UI與交互動(dòng)效設(shè)計(jì)詳解

目錄 CHAPTER 01 移動(dòng)UI設(shè)計(jì)師的入門 011 1.1　移動(dòng)UI的發(fā)展　012 1.1.1　第一階段：移動(dòng)UI設(shè)計(jì)的目的是保證軟件的可用　012 1.1.2　第二階段：從可用到易用　012 1.1.3　第三階段：內(nèi)容為王的設(shè)計(jì)追求減法和好用　013 1.2　移動(dòng)UI設(shè)計(jì)師的工作流程　014 1.3　不同移動(dòng)平臺之間的差異　015 1.4　移動(dòng)UI設(shè)計(jì)師應(yīng)了解的基本常識　018 1.4.1　移動(dòng)UI設(shè)計(jì)中用到的單位　019 1.4.2　常用移動(dòng)設(shè)備的尺寸　019 1.4.3　文字設(shè)計(jì)注意事項(xiàng)　021 1.4.4　為觸控而設(shè)計(jì)　022 1.4.5　從iOS9的特點(diǎn)看設(shè)計(jì)趨勢　023 1.5　本章小結(jié)　024 CHAPTER　02 初識Sketch　025 2.1　Sketch的安裝　026 2.2　Sketch的界面介紹　027 2.2.1　歡迎界面　028 2.2.2　Sketch的主界面　029 2.3　Sketch的快捷鍵　032 2.3.1　Sketch的快捷鍵列表　033 2.3.2　自定義快捷鍵　036 2.4　Sketch的常見問題　037 2.5　本章小結(jié)　038 CHAPTER　03 從線框原型開始　039 3.1　線框原型的基本概念　040 3.2　繪制線框原型的注意事項(xiàng)　041 3.2.1　導(dǎo)航菜單的樣式　041 3.2.2　線框原型中的層次　042 3.2.3　線框原型風(fēng)格對設(shè)計(jì)的影響　043 3.3　使用Sketch繪制線框原型　044 3.3.1　注冊頁線框原型的繪制　044 引申知識點(diǎn)01——回到Sketch文檔的歷史版本　045 引申知識點(diǎn)02——Sketch的畫板預(yù)設(shè)　046 引申知識點(diǎn)03——畫板的檢查器　048 引申知識點(diǎn)04——圖層面板　049 引申知識點(diǎn)05——模板　052 引申知識點(diǎn)06——圖層組的檢查器　054 引申知識點(diǎn)07——形狀圖層的檢查器　055 引申知識點(diǎn)08——文字圖層的檢查器　057 3.3.2　內(nèi)容列表頁線框原型的繪制　059 3.3.3　完整線框原型的繪制　061 3.3.4　繪制線框原型的思考　062 3.4　本章小結(jié)　062 CHAPTER　04 移動(dòng)UI界面的設(shè)計(jì)　063 4.1　iOS應(yīng)用界面設(shè)計(jì)規(guī)范思考　064 4.2　安卓應(yīng)用界面及Material Design設(shè)計(jì)規(guī)范思考　067 4.3　移動(dòng)界面中文字的設(shè)計(jì)思考　069 4.4　移動(dòng)界面中顏色的設(shè)計(jì)思考　071 引申知識點(diǎn)09——Sketch的顏色面板　072 引申知識點(diǎn)10——Sketch的插件及安裝　076 4.5　使用Sketch設(shè)計(jì)移動(dòng)界面　080 4.5.1　注冊登錄頁面和注冊頁面的設(shè)計(jì)　081 引申知識點(diǎn)11——Sketch輸入框的運(yùn)算　081 引申知識點(diǎn)12——文本共享樣式　082 引申知識點(diǎn)13——符號　084 引申知識點(diǎn)14——位圖圖層的檢查器　086 引申知識點(diǎn)15——位圖的插入　086 引申知識點(diǎn)16——毛玻璃效果　087 引申知識點(diǎn)17——圖層共享樣式　089 4.5.2　內(nèi)容頁面的設(shè)計(jì)　092 引申知識點(diǎn)18——內(nèi)容填充插件Content-generator-sketch-plugin　097 4.5.3　使用Sketch設(shè)計(jì)移動(dòng)界面的注意事項(xiàng)　098 4.6　移動(dòng)界面的多分辨率適配　100 引申知識點(diǎn)19——自適應(yīng)設(shè)計(jì)插件Fluid　for Sketch　101 4.7　本章小結(jié)　102 CHAPTER　05 移動(dòng)UI圖標(biāo)的設(shè)計(jì)　103 5.1　移動(dòng)UI中圖標(biāo)設(shè)計(jì)的思考　104 5.1.1　功能型圖標(biāo)設(shè)計(jì)的思考　104 5.1.2　展示型圖標(biāo)設(shè)計(jì)的思考　106 5.2　功能型圖標(biāo)的繪制　107 5.2.1　繪制功能型圖標(biāo)之前　108 5.2.2　使用Sketch進(jìn)行功能型圖標(biāo)的設(shè)計(jì)　108 引申知識點(diǎn)20——鋼筆工具　110 引申知識點(diǎn)21——像素視圖模式　113 引申知識點(diǎn)22——布爾運(yùn)算　115 引申知識點(diǎn)23——剪刀工具　118 5.3　展示型圖標(biāo)的繪制　120 5.3.1　繪制展示型圖標(biāo)之前　120 5.3.2　使用Sketch進(jìn)行展示型圖標(biāo)的繪制　121 5.4　圖標(biāo)資源的獲取和使用　124 5.4.1　專業(yè)的圖標(biāo)網(wǎng)站　124 5.4.2　圖標(biāo)的源文件　125 5.5　本章小結(jié)　126 CHAPTER　06 設(shè)計(jì)稿的后續(xù)處理　127 6.1　在移動(dòng)設(shè)備上實(shí)時(shí)預(yù)覽　128 6.2　將設(shè)計(jì)稿進(jìn)行分享　129 6.3　交付給開發(fā)的文件　130 6.4　使用Sketch進(jìn)行切圖、標(biāo)注和導(dǎo)出　131 6.4.1　Sketch畫板和圖層的導(dǎo)出　131 6.4.2　使用Sketch的切片工具進(jìn)行切圖　133 引申知識點(diǎn)24——切片圖層檢查器　134 6.4.3　使用Sketch進(jìn)行標(biāo)注　135 6.5　展示型圖標(biāo)的導(dǎo)出　141 6.6　本章小結(jié)　142 CHAPTER　07 Apple Watch界面的設(shè)計(jì)　143 7.1　了解Apple Watch　144 7.2　使用Ske