黑客与设计：剖析设计之美的秘密

黑客们崇尚分享，所以他们可以从相关社团及网上找到各种编程问题的解决方案，快速地完成开发项目。但是，对于设计，问题就不那么简单了。
许多设计教学书籍都有着大量的“须知”与“切忌”条目，以期让人能够迅速了解设计的惯例及规程，但这种表面化、程式化的方式往往无法令喜欢探究事物本质的黑客们满意。为了让自己的作品精彩出众，他们往往希望追溯到设计的源头，了解设计现象及趋势的本质。本书采用逆向解析方式，庖丁解牛般剖析了一众经典设计。从文艺复兴时期的雕塑，到印象派绘画，再到现代的Mac OS X的Aqua界面以及Twitter的页面设计，还原历史真相，细说风格由来，逐步讲解色彩、排版、比例等设计理论，并在此基础上提出了大量真切可行的设计实践。读来令人耳目一新，信心倍增。

David Kadavy，Kadavy公司总裁，兼500 Startups种子基金导师。Kadavy公司提供用户界面设计咨询服务，客户包括oDesk、PBworks和UserVoice等。早先，David曾领导过两家硅谷创业公司和一家建筑公司的设计部门，在大学教授过印刷课程。在爱荷华州立大学攻读平面设计专业美术学士学位期间，他曾在罗马学习古代印刷术。Communication Arts杂志刊登过他的设计作品，他曾在South by Southwest（SXSW）互动大会上做过演讲。你可以访问kadavy.net，阅读其关于设计和创业的文章，也可在Twitter上通过关注@kadavy，或借由david@kadavy.net与他联系。

★“Kadavy的书通俗易懂，理论联系实际，效果非常好。”
——Brad Feld，TechStars的联合创始人，《他山之石》作者

★“架构清晰，内容精彩，涉猎广泛。”
——Vitaly Friedman，Smashing Magazine

第一部分理解设计
第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．4Twitter用户体验逆向工程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．6Garamon字体现状：为什么不在网络上使用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．2Web 2．0平面设计48
4．2SEO也是设计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．22∶3矩形76
5．4．33∶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．3Lab色彩模型136
8．5颜色模型和数据驱动图形137
8．5．1颜色和定性数据137
8．5．2颜色和定量数据138
8．5．3连续调色板与离散调色板141
8．6十六进制颜色的思考：理解Web中的颜色141
8．6．1理解RGB142
8．6．2RGB的十六进制表示法144
8．6．3神游十六进制“立方体”144
8．6．4未来：HSL147
8．7色彩模型实践：为什么名片色彩和网站色彩(永远)不相配148
8．7．1RGB显示与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

“来看看我们公司的新宣传彩页。”前日闲聊时，朋友得意洋洋地递给我说。
宣传彩页印刷精美、图片绚烂，但我看到的则是正文字体偏小造成的质感失衡，小标题中英文字体的搭配不当，本应突显的亮点图片因缺少独立空间而黯然失色等问题。当我一一指出时，朋友的眼睛里写满了“吃惊”。
其实我自己也吃惊不已。因为近十年来我的工作重心一直在服务器端，对于架构、框架、模式、性能和安全这些内容，我可以信手拈来，侃侃而谈，但是对于字体、色调、边距和布局这些术语，过去我能做的也许就是点头微笑而已。
随着职责的转变，我不得不离开了我的职业舒适区，开始兼顾产品的方方面面，自然也就包括了UI设计。我不想因为我的无知，成为只会对UI设计师说“要大气上档次”、“出几版设计，下周交给我”的上司。我想更准确地表达自己的想法，也想更深刻地理解UI设计师们的设计哲学。于是，我开始尝试了解这个熟悉而又陌生的领域。
这就是我翻译这本书的初衷，因为在翻译中去理解UI设计，可要比单单阅读几本UI设计书籍深刻得多，我喜欢这种学习方式。
这本书的确没有让我失望。作者DavidKadavy并没有简单地将一些功利的视觉设计模式打包成速食快餐扔到我们面前，而是将视觉设计的方方面面制作成一份精致的法式大餐——开胃菜、汤、副菜、主菜、甜品和果品，一应俱全。在书中领略UI设计精华的同时，我还读到了古罗马万神殿、西方文字起源、印象派、印刷术、文艺复兴、颜色感知原理等等生动有趣的内容。这不是一本UI设计的入门教程，因为我相信里面的很多内容对于从事UI设计多年的朋友也很有价值，但它也可以作为UI设计的入门教程，对于初学者来说，系统全面的知识要比会几个PS技巧重要得多。我相信任何渴望提升自己UI设计能力，抑或像我一样希望同时提升鉴赏能力的朋友，都可以在这本书中找到想要的东西。
诚然，翻译并不是件轻松的事情，但能将一本如此优秀的UI设计书籍带给各位朋友，这一切都是值得的。由于受个人专业水平和时间的双重限制，译稿中难免会有错误或者不妥之处，在此诚恳地希望读者批评指正。你可以通过我的邮箱yuanyk@gmail.com和我探讨UI设计或者其他软件开发的相关话题。
在此要感谢我的妻子，她参与了部分章节的翻译和审校，使译文不仅仅忠实于原文，而且更为通俗流畅。还要感谢图灵公司的编辑李鑫、余倩、高楠、丁晓昀，他们的专业和耐心使我可以更从容仔细地完成本书的翻译，让这一切成为一种享受，而不是一份任务。
最后，感谢你花费时间来了解我对这本书的看法，相信本书也一定不会让你失望！
苑永凯，2013年春