移動(dòng)界面設(shè)計(jì)：視覺(jué)營(yíng)造的風(fēng)向標(biāo)

目 錄
序：致我們的時(shí)代
前言
第1章 移動(dòng)互聯(lián)時(shí)代到來(lái)1
1.1 移動(dòng)互聯(lián)時(shí)代的UI設(shè)計(jì)2
1.1.1 一個(gè)偉大的時(shí)代——移動(dòng)互聯(lián)2
1.1.2 互聯(lián)網(wǎng)思維2
1.1.3 移動(dòng)互聯(lián)時(shí)代對(duì)從業(yè)者的新要求3
1.1.4 移動(dòng)互聯(lián)時(shí)代的特點(diǎn)4
1.1.5 新時(shí)代的UI設(shè)計(jì)6
?1.2 HTML59
1.2.1 HTML5概況9
1.2.2 響應(yīng)式設(shè)計(jì)9
1.2.3 HTML5的應(yīng)用領(lǐng)域11
1.2.4 為什么HTML5備受關(guān)注？13
?1.3 移動(dòng)設(shè)備的特點(diǎn)14
1.3.1 移動(dòng)端與PC端的區(qū)別17
1.3.2 移動(dòng)設(shè)備的特點(diǎn)19
第2章 決定設(shè)計(jì)的先決條件22
?2.1 工欲善其事，需先利其器–常用
?UI設(shè)計(jì)工具23
2.1.1 Photoshop的應(yīng)用領(lǐng)域23
2.1.2 矢量圖和位圖的概念26
2.1.3 Photoshop的操作界面27
2.1.4 Sketch的功能特點(diǎn)32
2.1.5 Sketch的使用方法35
2.1.6 Sketch 常用快捷鍵匯總36
?2.2 設(shè)計(jì)的方法論37
?2.3 大平移式布局41
2.3.1 移動(dòng)界面的布局方式41
2.3.2 關(guān)于大平移式布局42
2.3.3 大平移式布局的用途及使用方法44
2.3.4 大平移式布局的優(yōu)缺點(diǎn)47
?2.4 宮格式布局48
2.4.1 宮格式布局的視覺(jué)表現(xiàn)方式51
2.4.2 宮格式布局的優(yōu)缺點(diǎn)55
?2.5 側(cè)滑式布局55
2.5.1 手機(jī)界面的特點(diǎn)56
2.5.2 側(cè)滑式布局簡(jiǎn)介56
2.5.3 側(cè)滑式布局的優(yōu)缺點(diǎn)59
?2.6 列表式布局60
2.6.1 列表式布局的特點(diǎn)61
2.6.2 列表式布局的設(shè)計(jì)方式61
2.6.3 列表式布局的優(yōu)缺點(diǎn)64
?2.7 標(biāo)簽式布局66
2.7.1 iOS系統(tǒng)中的標(biāo)簽式布局68
2.7.2 安卓系統(tǒng)中的標(biāo)簽式布局69
2.7.3 Windows Phone系統(tǒng)中的標(biāo)簽式
布局70
2.7.4 標(biāo)簽式布局的優(yōu)缺點(diǎn)71
?2.8 合理規(guī)劃布局72
第3章 視覺(jué)設(shè)計(jì)中的字體與色彩75
?3.1 界面中的文字排版76
3.1.1 文字的起源和字體的性格76
3.1.2 文字的重構(gòu)80
3.1.3 文字間的溝通86
?3.2 靠譜的配色技巧92
3.2.1 制作自己的調(diào)色盤92
3.2.2 明度、飽和度、色相的概念
及使用96
3.2.3 移動(dòng)端視覺(jué)界面顏色選色
原則99
第4章 界面中的細(xì)節(jié)營(yíng)造106
?4.1 偽扁平化的時(shí)代107
4.1.1 什么是扁平化設(shè)計(jì)？109
4.1.2 扁平化設(shè)計(jì)的發(fā)展112
4.1.3 扁平化設(shè)計(jì)的優(yōu)缺點(diǎn)114
4.1.4 偽扁平化設(shè)計(jì)風(fēng)格115
4.1.5 關(guān)于MBE設(shè)計(jì)風(fēng)格116
4.1.6 扁平化設(shè)計(jì)的方法117
?4.2 經(jīng)典的卡片式設(shè)計(jì)118
4.2.1 卡片內(nèi)容至上120
4.2.2 卡片設(shè)計(jì)的優(yōu)勢(shì)120
4.2.3 卡片的組織性121
4.2.4 卡片的視覺(jué)效果122
?4.3 界面設(shè)計(jì)中的細(xì)節(jié)127
第5章 移動(dòng)端產(chǎn)品的可用性原則128
?5.1 手機(jī)界面特點(diǎn)129
?5.2 手機(jī)APP的可用性原則130
5.2.1 準(zhǔn)確性與便捷性130
5.2.2 一致性原則133
5.2.3 可逆性原則134
5.2.4 容錯(cuò)性原則136
5.2.5 提示語(yǔ)言的親和力140
5.2.6 產(chǎn)品的易學(xué)習(xí)性141
第6章 了解原生安卓系統(tǒng)143
?6.1 原生安卓系統(tǒng)144
6.1.1 安卓系統(tǒng)的導(dǎo)航方式147
6.1.2 單個(gè)項(xiàng)目的操作148
6.1.3 布局方式148
6.1.4 實(shí)體物理控件149
6.1.5 動(dòng)效規(guī)范149
?6.2 走進(jìn)Material Design設(shè)計(jì)
?語(yǔ)言150
6.2.1 Material Design的動(dòng)畫效果151
6.2.2 圖標(biāo)的處理方式153
6.2.3 圖片的選取方式155
6.2.4 系統(tǒng)字體的規(guī)范性155
6.2.5 系統(tǒng)布局的規(guī)范性156
第7章 界面設(shè)計(jì)的后續(xù)工作169
?7.1 視覺(jué)設(shè)計(jì)師的職責(zé)與職業(yè)發(fā)展
?規(guī)劃170
7.1.1 移動(dòng)聯(lián)網(wǎng)行業(yè)現(xiàn)狀170
7.1.2 設(shè)計(jì)師的職業(yè)發(fā)展規(guī)劃171
?7.2 視覺(jué)設(shè)計(jì)稿的標(biāo)注175
7.2.1 什么是標(biāo)注175
7.2.2 產(chǎn)品的標(biāo)注方法182
?7.3 切圖文件的處理技巧182
7.3.1 iOS系統(tǒng)的切圖方式183
7.3.2 安卓系統(tǒng)的切圖方式184
?7.4 適配及命名186
7.4.1 像素的概念186
7.4.2 像素密度及屏幕倍率187
7.4.3 安卓的適配原則188
7.4.4 邏輯像素190
第8章 視覺(jué)設(shè)計(jì)師的擴(kuò)展技能——手繪插畫191
?8.1 手繪插畫的世界192
8.1.1 關(guān)于插畫192
8.1.2 游戲UI的重要性193
?8.2 游戲UI設(shè)計(jì)194
8.2.1 游戲UI的概念194
8.2.2 繪制游戲UI的要求195
?8.3 手繪插畫設(shè)計(jì)游戲UI200
8.3.1 繪制游戲UI的工具200
8.3.2 游戲UI的繪制方法以及案例
分享201
后記206