移動界面設(shè)計：視覺營造的風(fēng)向標(biāo)

目 錄
序：致我們的時代
前言
第1章 移動互聯(lián)時代到來1
1.1 移動互聯(lián)時代的UI設(shè)計2
1.1.1 一個偉大的時代——移動互聯(lián)2
1.1.2 互聯(lián)網(wǎng)思維2
1.1.3 移動互聯(lián)時代對從業(yè)者的新要求3
1.1.4 移動互聯(lián)時代的特點4
1.1.5 新時代的UI設(shè)計6
?1.2 HTML59
1.2.1 HTML5概況9
1.2.2 響應(yīng)式設(shè)計9
1.2.3 HTML5的應(yīng)用領(lǐng)域11
1.2.4 為什么HTML5備受關(guān)注？13
?1.3 移動設(shè)備的特點14
1.3.1 移動端與PC端的區(qū)別17
1.3.2 移動設(shè)備的特點19
第2章 決定設(shè)計的先決條件22
?2.1 工欲善其事，需先利其器–常用
?UI設(shè)計工具23
2.1.1 Photoshop的應(yīng)用領(lǐng)域23
2.1.2 矢量圖和位圖的概念26
2.1.3 Photoshop的操作界面27
2.1.4 Sketch的功能特點32
2.1.5 Sketch的使用方法35
2.1.6 Sketch 常用快捷鍵匯總36
?2.2 設(shè)計的方法論37
?2.3 大平移式布局41
2.3.1 移動界面的布局方式41
2.3.2 關(guān)于大平移式布局42
2.3.3 大平移式布局的用途及使用方法44
2.3.4 大平移式布局的優(yōu)缺點47
?2.4 宮格式布局48
2.4.1 宮格式布局的視覺表現(xiàn)方式51
2.4.2 宮格式布局的優(yōu)缺點55
?2.5 側(cè)滑式布局55
2.5.1 手機界面的特點56
2.5.2 側(cè)滑式布局簡介56
2.5.3 側(cè)滑式布局的優(yōu)缺點59
?2.6 列表式布局60
2.6.1 列表式布局的特點61
2.6.2 列表式布局的設(shè)計方式61
2.6.3 列表式布局的優(yōu)缺點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)缺點71
?2.8 合理規(guī)劃布局72
第3章 視覺設(shè)計中的字體與色彩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 移動端視覺界面顏色選色
原則99
第4章 界面中的細節(jié)營造106
?4.1 偽扁平化的時代107
4.1.1 什么是扁平化設(shè)計？109
4.1.2 扁平化設(shè)計的發(fā)展112
4.1.3 扁平化設(shè)計的優(yōu)缺點114
4.1.4 偽扁平化設(shè)計風(fēng)格115
4.1.5 關(guān)于MBE設(shè)計風(fēng)格116
4.1.6 扁平化設(shè)計的方法117
?4.2 經(jīng)典的卡片式設(shè)計118
4.2.1 卡片內(nèi)容至上120
4.2.2 卡片設(shè)計的優(yōu)勢120
4.2.3 卡片的組織性121
4.2.4 卡片的視覺效果122
?4.3 界面設(shè)計中的細節(jié)127
第5章 移動端產(chǎn)品的可用性原則128
?5.1 手機界面特點129
?5.2 手機APP的可用性原則130
5.2.1 準確性與便捷性130
5.2.2 一致性原則133
5.2.3 可逆性原則134
5.2.4 容錯性原則136
5.2.5 提示語言的親和力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 單個項目的操作148
6.1.3 布局方式148
6.1.4 實體物理控件149
6.1.5 動效規(guī)范149
?6.2 走進Material Design設(shè)計
?語言150
6.2.1 Material Design的動畫效果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è)計的后續(xù)工作169
?7.1 視覺設(shè)計師的職責(zé)與職業(yè)發(fā)展
?規(guī)劃170
7.1.1 移動聯(lián)網(wǎng)行業(yè)現(xiàn)狀170
7.1.2 設(shè)計師的職業(yè)發(fā)展規(guī)劃171
?7.2 視覺設(shè)計稿的標(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章 視覺設(shè)計師的擴展技能——手繪插畫191
?8.1 手繪插畫的世界192
8.1.1 關(guān)于插畫192
8.1.2 游戲UI的重要性193
?8.2 游戲UI設(shè)計194
8.2.1 游戲UI的概念194
8.2.2 繪制游戲UI的要求195
?8.3 手繪插畫設(shè)計游戲UI200
8.3.1 繪制游戲UI的工具200
8.3.2 游戲UI的繪制方法以及案例
分享201
后記206