第一部分　理解設計
第1章　為什麼需要設計　　2
1.1 　設計到底是什麼　　2
1.2 　設計不是什麼　　4
1.3 　設計的“層次”　　5
1.3.1 　目的　　5
1.3.2 　載體和技術　　6
1.3.3 　審美選擇　　6
1.4 　小結　　7
第2章　設計的目的　　8
2.1 　視覺設計與用戶體驗設計的關係　　9
2.1.1 　用戶體驗設計基礎要素　　9
2.1.2 　視覺設計對比　　10
2.2 　有時視覺設計夠用即好　　11
2.3 　視覺設計有時是産品優勢　　11
2.4 　Twitter 用戶體驗逆嚮工程　　13
2.4.1 　用戶角色　　13
2.4.2 　用例　　14
2.4.3 　綫框圖　　16
2.5 　小結　　16
第二部分　媒介和形式
第3章　排版的媒介和樣式　　18
3.1 　誤用的悲劇：Comic Sans 字體緣何惹人厭　　18
3.2 　排版的束縛：不變的文字　　23
3.3 　字母錶的組成　　24
3.4 　字母起源　　27
3.4.1 　羅馬帝國的“推特”　　27
3.4.2 　羅馬排版的巔峰之作　　28
3.5 　經久不衰的字體　　35
3.5.1 　印刷誕生發展簡史　　36
3.5.2 　製作字範：不變文字的搖籃　　36
3.5.3 　威尼斯與文藝復興　　37
3.5.4 　法國和 Garamond 字體　　38
3.6 　Garamond 字體現狀：為什麼不在網絡上使用 Garamond 字體　　38
3.6.1 　“網絡字體”的誕生　　38
3.6.2 　大躍進　　39
3.6.3 　縮小差距　　40
3.6.4 　包容局限性——即使會很拙劣　　42
3.7 　小結　　43
第4章　技術與文化　　44
4.1 　潮流興起的原因　　44
4.1.1 　印象主義的誕生　　44
4.1.2 　Web 2.0 平麵設計　　48
4.2 　SEO 也是設計　　55
4.2.1 　理解 SEO 的重要性　　57
4.2.2 　選擇恰當的關鍵字　　58
4.2.3 　頁麵內容與代碼　　59
4.3 　小結　　63
第三部分　排版
第5章　騙人的黃金比例：認識比例　　66
5.1 　什麼是比例　　66
5.2 　比例與設計　　68
5.3 　揭開黃金比例的傳奇麵紗　　69
5.3.1 　黃金比例與斐波那契數列：類似卻不相同　　70
5.3.2 　人體中的黃金比例　　71
5.3.3 　黃金比例的誤區　　73
5.4 　其他一些賞心悅目的比例　　75
5.4.1 　根號 2 矩形　　76
5.4.2 　2∶3 矩形　　76
5.4.3 　3∶4 矩形　　77
5.5 　世界中的比例　　77
5.5.1 　音樂和舞蹈　　77
5.5.2 　自然界　　78
5.5.3 　計算機和移動設備　　80
5.6 　設計中的比例　　81
5.7 　小結　　85
第6章　吸引眼球：設計構圖與設計原則　　86
6.1 　構圖關係　　86
6.1.1 　閱讀方嚮　　86
6.1.2 　以構圖方式引導用戶視綫　　88
6.1.3 　前景 / 背景的關係　　91
6.2 　設計原則　　93
6.2.1 　顯性優勢　　93
6.2.2 　相似性　　94
6.2.3 　節奏感　　95
6.2.4 　質感　　97
6.2.5 　方嚮感　　98
6.2.6 　對比關係　　101
6.3 　為什麼 MailChimp 的 Logo 如此漂亮：設計構成和設計原則的運用　　102
6.3.1 　前景 / 背景關係　　103
6.3.2 　顯性優勢　　104
6.3.3 　相似性　　104
6.3.4 　節奏感　　105
6.3.5 　質感　　106
6.3.6 　方嚮感　　107
6.3.7 　對比關係　　107
6.4 　小結　　108
第7章　激活信息：建立視覺層次結構　　109
7.1 　什麼是“層次結構”　　109
7.1.1 　層次結構富有錶現力　　110
7.1.2 　影響層次結構的諸多視覺因素　　111
7.2 　層次結構因素　　111
7.2.1 　空白區域　　112
7.2.2 　字體粗細和字號　　115
7.2.3 　顔色　　119
7.2.4 　視覺裝飾元素　　119
7.3 　設計中的層次結構　　122
7.4 　小結　　124
第四部分　色彩
第8章　色彩學　　126
8.1 　色彩是什麼　　127
8.2 　眼睛的騙局　　128
8.2.1 　同色異譜　　128
8.2.2 　色彩恒常性　　128
8.2.3 　殘留影像　　129
8.3 　視覺係統的工作機製　　130
8.3.1 　視錐細胞　　130
8.3.2 　三基色原理和對抗色覺理論　　131
8.3.3 　主波長組閤和色輪　　132
8.3.4 　色盲　　133
8.4 　定義顔色　　134
8.4.1 　濛賽爾色卡　　135
8.4.2 　色相、飽和度和亮度　　136
8.4.3 　Lab 色彩模型　　136
8.5 　顔色模型和數據驅動圖形　　137
8.5.1 　顔色和定性數據　　137
8.5.2 　顔色和定量數據　　138
8.5.3 　連續調色闆與離散調色闆　　141
8.6 　十六進製顔色的思考：理解 Web 中的顔色　　141
8.6.1 　理解 RGB　　142
8.6.2 　RGB 的十六進製錶示法　　144
8.6.3 　神遊十六進製“立方體”　　144
8.6.4 　未來：HSL　　147
8.7 　色彩模型實踐： 為什麼名片色彩和網站色彩（永遠）不相配　　148
8.7.1 　RGB 顯示與 CMYK 彩色印刷的不同　　148
8.7.2 　色域　　149
8.7.3 　跨媒體設計和色彩管理　　150
8.8 　小結　　153
第9章　色彩理論　　154
9.1 　對色彩的反應貫穿著整個人類曆史　　154
9.2 　色彩反應和人類生物學　　155
9.3 　紅色的魔力：為什麼你根本贏不瞭“Target 挑戰”　　155
9.3.1 　紅色對大腦的影響　　156
9.3.2 　前額葉皮層與理性思考　　156
9.3.3 　襲擊前額葉皮層　　157
9.3.4 　前額葉皮層與決策　　 158
9.3.5 　色彩和情境　　158
9.3.6 　這對你意味著什麼　　159
9.4 　其他顔色的研究　　159
9.5 　顔色和文化　　160
9.6 　配色和色輪　　161
9.7 　選色和 Web 設計約定　　162
9.7.1 　背景　　162
9.7.2 　圖像與文本　　163
9.7.3 　強調色　　165
9.8 　顔色的相互作用：為什麼莫奈從不使用黑色　　166
9.8.1 　印象派畫傢：色彩大師　　166
9.8.2 　色彩理論：印象派的發現　　167
9.8.3 　莫奈的用色技法　　170
9.8.4 　像莫奈那樣用色　　171
9.9 　配色方案　　173
9.9.1 　單一配色方案　　173
9.9.2 　相似配色方案　　174
9.9.3 　互補配色方案　　175
9.9.4 　分散互補配色方案　　177
9.9.5 　三色係配色方案　　178
9.9.6 　四色係配色方案　　180
9.9.7 　任意配色方案　　181
9.10 　用顔色營造氣氛　　182
9.10.1 　神秘或獨特　　182
9.10.2 　活潑動感　　183
9.10.3 　柔和安靜　　184
9.10.4 　自然清新　　185
9.11 　設計調色闆和配色方案的工具　　186
9.12 　小結　　188
附　　錄
附錄A 　字體的選擇和搭配　　190
A.1 　字體分類　　191
A.1.1 　襯綫字體　　192
A.1.2 　非襯綫字體　　193
A.1.3 　展示字體　　193
A.2 　觀察字母結構：骨架的樣式　　194
A.2.1 　人文主義字體　　194
A.2.2 　幾何字體　　194
A.2.3 　現實主義字體　　195
A.3 　字體配對　　195
A.3.1 　法則　　195
A.3.2 　例外情況　　196
A.3.3 　為什麼有些字體搭配效果良好　　197
A.3.4 　終極技巧：相信字體設計師的選擇　　201
A.4 　常用字體　　201
附錄B 　排版規範　　204
B.1 　不要篡改字體　　204
B.1.1 　仿粗體　　205
B.1.2 　仿斜體　　205
B.1.3 　仿小型大寫字母　　206
B.1.4 　拉伸字體　　207
B.1.5 　勾勒字體輪廓　　208
B.1.6 　帶圖片或者紋理的字體　　208
B.2 　正文設置　　209
B.2.1 　顯示段落間的變化　　209
B.2.2 　避免等距調整　　211
B.2.3 　避免寡行和孤行　　211
B.3 　注重排版細節　　212
B.3.1 　並非所有的引號都是相同的　　212
B.3.2 　大膽地使用破摺號　　212
B.3.3 　句點後麵使用一個空格，不是一對　　213
B.3.4 　使用連筆將字母連在一起　　213
· · · · · · (收起)