移動界面設計：視覺營造的風向標

目 錄
序：致我們的時代
前言
第1章 移動互聯(lián)時代到來1
1.1 移動互聯(lián)時代的UI設計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設計6
?1.2 HTML59
1.2.1 HTML5概況9
1.2.2 響應式設計9
1.2.3 HTML5的應用領(lǐng)域11
1.2.4 為什么HTML5備受關(guān)注？13
?1.3 移動設備的特點14
1.3.1 移動端與PC端的區(qū)別17
1.3.2 移動設備的特點19
第2章 決定設計的先決條件22
?2.1 工欲善其事，需先利其器–常用
?UI設計工具23
2.1.1 Photoshop的應用領(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 設計的方法論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 列表式布局的設計方式61
2.6.3 列表式布局的優(yōu)缺點64
?2.7 標簽式布局66
2.7.1 iOS系統(tǒng)中的標簽式布局68
2.7.2 安卓系統(tǒng)中的標簽式布局69
2.7.3 Windows Phone系統(tǒng)中的標簽式
布局70
2.7.4 標簽式布局的優(yōu)缺點71
?2.8 合理規(guī)劃布局72
第3章 視覺設計中的字體與色彩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 什么是扁平化設計？109
4.1.2 扁平化設計的發(fā)展112
4.1.3 扁平化設計的優(yōu)缺點114
4.1.4 偽扁平化設計風格115
4.1.5 關(guān)于MBE設計風格116
4.1.6 扁平化設計的方法117
?4.2 經(jīng)典的卡片式設計118
4.2.1 卡片內(nèi)容至上120
4.2.2 卡片設計的優(yōu)勢120
4.2.3 卡片的組織性121
4.2.4 卡片的視覺效果122
?4.3 界面設計中的細節(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)品的易學習性141
第6章 了解原生安卓系統(tǒng)143
?6.1 原生安卓系統(tǒng)144
6.1.1 安卓系統(tǒng)的導航方式147
6.1.2 單個項目的操作148
6.1.3 布局方式148
6.1.4 實體物理控件149
6.1.5 動效規(guī)范149
?6.2 走進Material Design設計
?語言150
6.2.1 Material Design的動畫效果151
6.2.2 圖標的處理方式153
6.2.3 圖片的選取方式155
6.2.4 系統(tǒng)字體的規(guī)范性155
6.2.5 系統(tǒng)布局的規(guī)范性156
第7章 界面設計的后續(xù)工作169
?7.1 視覺設計師的職責與職業(yè)發(fā)展
?規(guī)劃170
7.1.1 移動聯(lián)網(wǎng)行業(yè)現(xiàn)狀170
7.1.2 設計師的職業(yè)發(fā)展規(guī)劃171
?7.2 視覺設計稿的標注175
7.2.1 什么是標注175
7.2.2 產(chǎn)品的標注方法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章 視覺設計師的擴展技能——手繪插畫191
?8.1 手繪插畫的世界192
8.1.1 關(guān)于插畫192
8.1.2 游戲UI的重要性193
?8.2 游戲UI設計194
8.2.1 游戲UI的概念194
8.2.2 繪制游戲UI的要求195
?8.3 手繪插畫設計游戲UI200
8.3.1 繪制游戲UI的工具200
8.3.2 游戲UI的繪制方法以及案例
分享201
后記206