作者：[美]David Kadavy著
出版社：北京图灵文化发展有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
黑客与设计：剖析设计之美的秘密试读：
译者序
“来看看我们公司的新宣传彩页。”前日闲聊时，朋友得意洋洋地递给我说。宣传彩页印刷精美、图片绚烂，但我看到的则是正文字体偏小造成的质感失衡，小标题中英文字体的搭配不当，本应突显的亮点图片因缺少独立空间而黯然失色等问题。当我一一指出时，朋友的眼睛里写满了“吃惊”。
其实我自己也吃惊不已。因为近十年来我的工作重心一直在服务器端，对于架构、框架、模式、性能和安全这些内容，我可以信手拈来，侃侃而谈，但是对于字体、色调、边距和布局这些术语，过去我能做的也许就是点头微笑而已。
随着职责的转变，我不得不离开了我的职业舒适区，开始兼顾产品的方方面面，自然也就包括了UI设计。我不想因为我的无知，成为只会对UI设计师说“要大气上档次”、“出几版设计，下周交给我”的上司。我想更准确地表达自己的想法，也想更深刻地理解UI设计师们的设计哲学。于是，我开始尝试了解这个熟悉而又陌生的领域。
这就是我翻译这本书的初衷，因为在翻译中去理解UI设计，可要比单单阅读几本UI设计书籍深刻得多，我喜欢这种学习方式。
这本书的确没有让我失望。作者David Kadavy并没有简单地将一些功利的视觉设计模式打包成速食快餐扔到我们面前，而是将视觉设计的方方面面制作成一份精致的法式大餐——开胃菜、汤、副菜、主菜、甜品和果品，一应俱全。在书中领略UI设计精华的同时，我还读到了古罗马万神殿、西方文字起源、印象派、印刷术、文艺复兴、颜色感知原理等等生动有趣的内容。这不是一本UI设计的入门教程，因为我相信里面的很多内容对于从事UI设计多年的朋友也很有价值，但它也可以作为UI设计的入门教程，对于初学者来说，系统全面的知识要比会几个PS技巧重要得多。我相信任何渴望提升自己UI设计能力，抑或像我一样希望同时提升鉴赏能力的朋友，都可以在这本书中找到想要的东西。
诚然，翻译并不是件轻松的事情，但能将一本如此优秀的UI设计书籍带给各位朋友，这一切都是值得的。由于受个人专业水平和时间的双重限制，译稿中难免会有错误或者不妥之处，在此诚恳地希望读者批评指正。你可以通过我的邮箱yuanyk@gmail.com和我探讨UI设计或者其他软件开发的相关话题。
在此要感谢我的妻子，她参与了部分章节的翻译和审校，使译文不仅仅忠实于原文，而且更为通俗流畅。还要感谢图灵公司的编辑李鑫、余倩、高楠、丁晓昀，他们的专业和耐心使我可以更从容仔细地完成本书的翻译，让这一切成为一种享受，而不是一份任务。
最后，感谢你花费时间来了解我对这本书的看法，相信本书也一定不会让你失望！苑永凯，2013年春
鸣谢
我本无权署名于这本书，毕竟它是众人工作、智慧和灵感的结晶。我所做的仅是用这些年来所得的经验，尽我所能地将其归纳总结、筛选并处理成文。
我最想感谢的是策划编辑Chris Webb，是他的远见和胆识使这本被另一家出版商蔑为“起点太高”的书得以出版。感谢编辑Elizabeth Kuball，她的宝贵意见和写作技巧，帮我将一些支离破碎的东西变成了令我引以骄傲的文字。在此，我还要感谢技术编辑Jason Simanek，很庆幸我们的观点既默契又互补，能够顺利合作，而且他也准备好了迎接各种挑战。
感谢几位热心的审读人，他们无私地贡献了自己的时间和智慧来阅读本书。除了提前满足了好奇心，他们并没有什么额外的报酬。因此，感谢Chris Duesing、Zack Gilbert、Jacob Rus以及Paul Stamatiou。
虽然大量的有用知识都收藏在图书馆中，但是网络上也有海量的信息和可视化资源，所以本书写起来容易了很多。感谢所有为互联网做出杰出贡献的人，感谢维基百科贡献者，感谢博主，感谢遵循知识
[1]共享 协议许可在Flickr、Wikimedia或其他地方发布作品的摄影师和插画师。
我在本书呈现的观点，部分受到了爱荷华州立大学各位教授的影响。感谢Arthur Croyle，他是我在罗马学习印刷术起源时所遇到的最好老师。也非常感谢Gary Tartakov，他在课上从社会经济学的角度，分享了关于设计和艺术史的独到见解。感谢Paula Curran，他关于设计问题的系统解决方法给了我很大启发。
本书的内容和观点也受到了其他一些人的影响，这些人包括：艺术家、作家、设计师、建筑师、教师、企业家，以及所有那些满怀勇气、超越自身、力图创新并改造世界的人。我肯定会遗漏某些需要感谢的朋友，但我会尽量避免：感谢扬·奇肖尔德、罗伯特·布林赫斯特、马尔科姆·格拉德威尔、赛斯·高汀、蒂莫西·费里斯、史蒂夫·乔布斯、梵高、戴夫·艾格斯、简·奥斯汀以及路德维希·密斯·凡德罗。感谢所有人，第一个发现如何生火的人，以及那些具有开创和传播精神的人们。
如果不是一连串不可思议的境遇，使我有机会在硅谷最热血的时期来到这里生活和工作，那么可能也就不会写下这本书。在那段时期，我遇到了最有创意的伙伴，所以感谢你们所有人，以及那些像你们一样富有创意但不在硅谷的人。感谢把我带到硅谷的Jeff Cannon 和Jon Stevenson。感谢Vinnie、Kristine Lauria、Noah Kagan、Paul Bragiel和Ramit Sethi，感谢你们以自己的方式鼓舞着我。其实我应该先感谢你们，但因为是私交，放在前面会感觉怪怪的。
感谢Ryan Halvorsen、Joe Avella和Matt Taets给予我的鼓励。感谢Ziad Hussain，是你的一句话促成了这本书的诞生。
最后，感谢此刻那些或站或坐或躺、阅读本书的各位，以及通过未来科技设备吸收这些思想和理念的朋友。你们的眼球运动（或突触）、心跳，以及通过博客评论、微博、邮件或者当面所说的那些激励话语，抑或建设性的批评，都为我提供了动力，帮助我完成了迄今为止我生命中最大的工程。很激动能与各位分享知识。你们愿意读我的书，这令我惊喜万分。非常感谢。注释
[1]. Creative Commons是一个非营利组织，也是一种创作的授权方式。知识共享组织的主要宗旨是使得著作物能更为广泛地流通与改作，作为其他人据以创作及共享的基础，并以这种许可方式确保上述理念延续下去。——译者注
引言
小学时，我最差的科目就是书法。我的字写得很烂，就像是土拨鼠将一堆树枝吐在了纸上。所以，每学期结束我带成绩簿回家的时候，上面满是A和B，而书法课却只有C-。
我从来不是一个盲目接受传统的人，我曾想：即使写得一手好字，那又怎样？因此对我来说，认为练字“很无聊”甚至是在“浪费时间”，也就毫不奇怪了。我当时太年轻，对于自己无法获得成功的事情，不会尊重其价值。（虽然我真的认为，以书法来打分本身就是一件既无聊而又浪费时间的事情。）
无论我问多少次，每次都得到相同的答案：“等你长大了，工作了，需要与人清楚地沟通时，就需要写得一手好字了。”
多亏了计算机时代的来临。我写字仍然很烂。我可以绘制字符，但仍然写不好。
现在我明白了，老师的意图从根本上来说是有意义的：清楚地沟通是成功的关键。幸运的是，我很少依赖书写的方式来与人进行清楚的沟通。我可以简单地打一封电子邮件，做个幻灯片，或者写本书，借助整洁漂亮的排版就能呈现出来。很多字体在500年前就已经非常完善，至今它们仍然有力清晰地承载着文字。
此外，我曾花费数年的时间，研究视觉传播的微妙之处。孩提时代生活在内布拉斯加州，我时常在家中画画，度过了无数个无聊的日子。大学里，我读尽了图书馆中所有关于排版和设计的书籍，忙于进行排版和几何方面的实验而不是参加聚会，最终取得了平面设计学位。在古罗马帝国遗址之上，我研究过现代印刷术的起源。在建筑公司工作时，我甚至探讨过如一块砖、一片木头等简单事物背后的深层意义。最后，在硅谷快节奏的创业公司里，我将这些实践和分析的成果应用到了实处。设计和视觉传播已深深地印入我的脑海，以至于我几乎意识不到它们的存在。虽然我写的字仍然很烂。
设计素养
有天晚上，我和朋友Ziad在一家咖啡馆里“办公”，为我博客的WordPress模板做些设计改进。Ziad总能说出些深奥的话，打断我的注意力却又让我思路大开，今晚也不例外。他说：“设计很神秘。懂设计的人却似乎无法诠释它。就像如果让他们教你如何去做设计，他们会说这要看天赋。”
Ziad的话让我觉得很有趣，但直到一年后，我才理解这句话的深刻含义。我首先领悟到的是，只有非职业设计师才真正想学习设计，而设计的能力对我来说是件理所当然的事。这是项很棒的技能，尤其是在创作自己的应用程序或参加周末黑客马拉松（例如Django Dash 或 Rails Rumble）时。我可以凭空创造这种质量的感知，这种价值。但我不是后端程序员，我很清楚，如果没有背后开发人员创建的不可思议的机器语言，我的设计什么也不是。
其次，我意识到设计技能是一种新的读写能力。我之所以受烂书法的连累，就是因为写字是沟通的一部分。我可以写出东西的唯一原因是我受过教育。
这个理念听起来非常简单，但是从人类历史上看还是相当新颖的。今天大多数人都会读会写，但几百年前可并非如此。对于想学习文字书写的人，必须先知道如何阅读；对于想学习阅读的人，又不得不接触文字书写。为了使阅读者能接触到文字，那些有读写能力的人就需要创作些带字的东西，比如书籍。
但文明社会中的普通人，却直到近代才买得起书的。公元1455年，约翰内斯·古腾堡印制了第一本书，俗称“四十二行圣经”（参见第3章）。在随后的几百年中，书的价格快速下降。不过，在古腾堡圣经出现之前，所有的书都是手写的，所以，当时除了神职人员之外几乎没人知道如何读写也就毫不奇怪了。
当今世界已发生了翻天覆地的变化。大部分人都知道如何读写，而且也不必再担心自己的书法如何。对于生活在工业化世界的我们来说，桌面出版乃至互联网发布，都已是稀松平常了。
我们不仅可以发布文字，还可以对其进行设计。现在有数千种字体可供我们使用。点击几下鼠标就可以改变字体的颜色和尺寸。我们还可以在文字旁边配上照片和插图。
我们都是现代印刷工。我们可以制作传单、明信片，以及带动画效果的PPT。我们可以创作博客、海报，甚至咖啡杯图案。
但只有极少人具备设计素养。诚然，设计品味问题也慢慢进入了我们的视野。人们抨击、反对丑陋的字体，如Comic Sans（参见第3章）。没有设计素养，就像写字很烂一样，会辞不达意、沟通不畅。字体、颜色、版面编排以及留白，都会影响我们所要传达的信息，而且几乎所有人都有能力操控这些要素。这个世界需要设计素养。
黑客精神
黑客，可谓是从设计素养中获益最多的群体。我所说的黑客并不是那些侵入网络盗窃密码的人，甚至都不必是软件工程师。我说的是那些富有创新头脑、不拘旧制的一群人，他们改变了我们生活、工作和交互的方式。“黑客”一词起源于20世纪60年代的麻省理工学院，当时用来指代计算机和软件发烧友，现在意义变得更加宽泛。Eric Steven Raymond 在其文章“如何成为一名黑客”（www.catb. org/～esr/faqs/hacker-howto.html）中，列举了黑客精神的五个信条：
世界充满了需要解决的迷人问题；
一个问题不应该被解决两次；
无聊和乏味是罪恶；
崇尚自由；
态度不能替代能力。
简而言之，黑客珍视知识，他们学习为实现梦想所需的一切知识。在当今世界，这通常意味着至少要学一些编码知识，但是黑客精神却适用于所有解决问题的行为。
遵循黑客精神的人富有求知欲，他愿为自己的目标全力以赴。他们具有创业精神，注重技能和知识，胜过职称和经验。
黑客运动的先锋组织是黑客资讯（Hacker News）社区（http://news.ycombinator.com），该新闻聚合网站由Paul Graham 的创业孵化器Y Combinator 创建，内容由用户提交。Y Combinator会挑选运用自身技能和黑客精神打造超酷产品的小型黑客团队，为他们提供资金。这些小团队包括：提供客户支持大众化服务的UserVoice（www.uservoice.com），大众化新闻网站Reddit（www. reddit.com），提供简易自动备份方案的Dropbox（www.dropbox.com），以及为家有空房者和游客牵线搭桥的AirBNB（www.airbnb.com）。
黑客是现代世界的文人。他们创建的产品和业务，不仅自身会传达信息，而且可让用户与之交互，以及与其他用户彼此沟通交流。只要一台笔记本、一个创意，以及几个小时的编码，黑客就能创造出影响数百万人的东西。
黑客之所以能在这么短的时间内取得如此大的成果，是因为他们来自以知识共享为基础的社区。社区成员共同投入了无数时间，编写软件、指南和其他教程，令社区中的每个人都有所裨益。
黑客可以学习各种解决手头问题所需的东西。碰到编程问题，他们会在Google上快速搜索或者阅读手册；当事业刚刚起步需要做财会和记账时，他们可以在网络上找到尽可能多的资料，也可以从图书馆借阅书籍。
设计知识的匮乏
让黑客最头疼的事情就是学习设计。黑客们明白，若要以弱小的力量与商业巨头竞争，他们需要良好清晰的设计，但是学习设计的资源却很难找。当然他们可以雇个设计师，但是好的设计师费用昂贵，而且当你刚刚开始创业时，并没有那么多钱来支配。
学习设计之所以困难，主要因为设计师很难清楚地描述其做设计的过程。事实上，很多设计师在设计上有一定的天赋和兴趣，然后历经无数的练习和实验，他们开创出了自己独特的设计方式。结果是，现在的很多设计要点要么过于简单，要么过于复杂。比如说，有没有人跟你说过只要“运用留白”就好？如果你没听懂，那她可能只会耸耸肩，说自己生下来就知道如何做设计。
然而事实是，设计背后真的存在一种思维过程——决策框架。例如，留白的细微差别，实际上受到几何比例的影响，这一点我将在第5章中谈及。留白是重要的构图部分，我将在第6章中解释这些。最后，留白可以使得重要信息更加明确，我将在第7章中介绍这一点。
我希望本书不只是给出一些过分简化的设计规范，还能揭示我多年来通过实验和分析得出的系统设计思维架构——就连与开发团队合作在单个周末进行快速的产品开发，或在资金有限的情况下为客户提供解决方案时，我也会应用这种设计思维架构。通过对设计过程展开“逆向工程”，我希望可以给读者足够的知识来应对各种不同的情况。
如果你想学习如何独立创造伟大的设计，如果你想提高设计素养，仅仅掌握设计规范是行不通的。因此，我要为你开拓全新的视角，让你重新认识世界。也许读过本书之后，你对自己接下来的设计还不甚满意。但是当你再遇到喜欢的设计时，就可以用一种全新的方式去领会它。你会明白为什么这种字体适合这种主题，你会明白不同设计单元之间为什么是这种比例，你会注意到设计者如何清晰区分各种信息片段，你会理解不同颜色是如何协调和表现的。
这就是我为黑客社区所做的一点微薄贡献。下面我期待着与你共同分享。第一部分理解设计第1章 为什么需要设计
既然你已经开始阅读本书，也许我就不必费太多口舌来向你说明设计是多么重要了。毫无疑问，良好的设计已成为全球许多大公司成功的重要因素，而且在过去几十年里，对设计的兴趣和关注度呈爆炸式增长。但设计到底有哪些影响呢？进一步讲，什么限定了设计的范围？
巧妙运用良好的设计可以创造打动人的体验。同时，好的设计可以通过改进的交互和明晰程度，让产品或服务更易于使用。好的设计可以提高公司的信誉度，最终影响客户的决策。巧妙运用好的设计可以影响受众情感，树立信誉，并赢取信任。最终，良好的设计确实能让产品或服务更易于使用。但要真正达到这些效果，需要全面地理解设计。
我曾在世界上最古老的一个仍在使用的建筑中亲眼目睹了设计的力量。当时，我正在罗马研究现代印刷术的起源，我的工作室离万神殿只有几个街区的距离。我在万神殿里坐了好几个小时，观察参观者。我一般对观察人没有兴趣，但坐在万神殿里观察别人，有一种与在其他地方不同的感觉。为什么？因为在这可以看到第一次走进这座神殿的人的各种反应。
虽然第一次走进万神殿的人各式各样，但基本上遵循一个可预见的模式：手里拿着旅游指南，脚上踏着舒服的运动鞋，急匆匆地跨进门来。可一旦抬头看上一眼，他的举止就会彻底地发生变化：脚步放慢，引颈仰望，就像第一次看到烟花的孩子；目瞪口呆，不由自主地“哇”一声，并发出惊讶的叹息声；或许还会举起相机，试图留下些可供日后回味的影像。
这就是我喜欢在万神殿里观察人们的原因。我也曾有着和他们一样的体验，当然万神殿至今仍让我感到非常震撼。这么一堆按特定方式排列的石头，就让观者产生了这么强烈的反应，真是件神奇的事情。1.1 设计到底是什么
史蒂夫·乔布斯曾说过：“在多数人的字典里，设计是虚饰，是室内装潢，是沙发罩的面料。但对我来说，设计是根本。设计既是人造物的固有灵魂，又必然会经由产品外在表现层次而得以体现。”以万神殿为例，这种层次，即不同要素间的关联性，就通过外在的视觉效果很好地展现出来。
我在万神殿内曾多次见证到人们对其所萌生的情绪反应，而那恰恰是建造者所要达到的预期效果。公元126年，罗马皇帝哈德良一声令下，万神殿开始修建，其最初目的是为了供奉古罗马的全体神祗。所以，假如能让人们步入其中，继而由衷表示惊叹，怕是与这个愿景最为合适不过——换句话说，如果这座建筑足以讨好爱与美之女神维纳斯，那么也势必会让你我这种凡夫俗子叹为观止。有意为之的震撼，这就是万神殿设计背后的意图，它绝对可算是史蒂夫·乔布斯所指的那种“层次”。
通过内部空间对天堂的概念性表现，万神殿达成了设计者预想的效果。毕竟这是诸神之家，哈德良皇帝希望每个进入万神殿的人都充满敬畏之情。圆柱型的墙体加上半球形的穹顶，使万神殿内部形成了完美的球面（高宽相同）。万神殿高43.3米，这个高度使得它在建成近两千年之后，仍是世界上最高的无钢筋混凝土结构的穹顶建筑。在穹顶的最高点，有一个直径9米的圆孔，阳光通过圆孔投射进来，照亮万神殿内部。这就是为什么万神殿会给人如此大的震撼的原因。进入殿内，你将置身于另外一个世界，这个世界拥有它自己的“太阳”（见图1-1）。图1-1 万神殿是世界上最高的无钢筋混凝土的穹顶建筑。光（有时是雨）从穹顶圆孔倾泻而入
万神殿的部分震撼效果，来自这种不可思议的空间体验和所用建造材料之间的关系。为了实现这种造型，万神殿将所用材料发挥到了极限，这也就能解释，为什么后来再也没有用同样的技术建造的类似高度的穹顶建筑了。要让这样的穹顶屹立不倒，加固手段非常重要，因而穹顶基部的厚度会达到6米，但顶部圆孔边缘只有1.2米厚。
为了更好地控制混凝土的重量，穹顶基部的混凝土中添加了坚固耐用的玄武岩，越往上混凝土越轻，到圆孔处便只用到了浮石。在这种建造方式下，穹顶基部就有足够的重量和强度来支撑整个穹顶，而轻薄的穹顶上部又减轻了基部的负担。
为了使穹顶材质更加轻盈，穹顶内壁设计了一系列的内凹方格，也就是花格镶板。花格镶板的存在既是工程的需要，又提升了殿内的设计效果。花格镶板从穹顶圆孔整齐地向外辐射而出，和圆孔边缘光滑的混凝土内壁对比鲜明，形成了非常有趣的视觉效果。
为了配合这些技术上的考虑，万神殿的设计者也运用了一些美学设计。殿内的地面太大，无法用一整块大理石制成，因此便用各种各样的大理石块拼接而成。这些大理石块以基本的圆形和方形排列在一起，与殿内的其他几何元素保持了协调。
并且万神殿内所用的大理石都有着不同的颜色，所以设计师必须巧妙安排，确保不同颜色的石块之间的搭配和相互作用能绽放出和谐之美。
所有这些元素巧妙地结合在一起，使万神殿成为建筑史上最具影响力的建筑之一。从圣彼得大教堂（位于梵蒂冈城，顺着万神殿旁的大路一直走下去就到了）到美国国会大厦，世界各地的不少建筑都受到了万神殿设计的启迪。
所有设计“层次”的精心结合，使得设计漂亮、永恒，并最终实现了其设计目标。设计意图、施工技术，以及造型、几何因素以及颜色之间的和谐，相得益彰。所有这些因素、所有这些层次，彼此之间有着千丝万缕的联系，它们共同构成了真正的设计。1.2 设计不是什么
正如史蒂夫·乔布斯所说，很多人认为设计是某种后续追加的东西——比如沙发上的坐垫，名片上的Logo，抑或网站上按钮的外观。许多抱有这种想法的人，在寻求设计真谛的道路上越走越偏。他们可能会去学习如何制造一个特殊的视觉效果，反复参考设计准则，或者在设计中添加些毫无用处反而造成混乱的视觉元素。
为了创作好的设计，你需要学习如何理解创作优秀设计所涉及的所有层次。要想创作良好的设计，那么请记住：别只会画小马。
也许小学时，你们班里就有这么一个被大家当作画家的小孩。他最大的秘密是，只会画一种东西。我三年级的时候，班上就有一个会画小马的女孩。她可以画出漂亮的马。这些马儿有着水汪汪的大眼睛，长长的、飘逸的鬃毛，以及光滑的、强有力的肌肉，一个个跃然纸上。班上的其他孩子总是簇拥着看她画完一个又一个。忽然有一天，有个孩子想要她给自己绘张像。“画下我吧！”那小孩说。女孩看起来很惊慌，其他孩子跟着起哄：“对，画吧。”她不情愿地开始给小男孩画像，结果那画像一点都不像那小男孩。眼睛毫无生气，像泄了气的足球；头发也是胡乱的涂鸦。“我不是很善于画人像。”女孩羞怯地说。孩子们看起来都很失望，但是仍然想相信她是一个好画家。
小时候我弄不懂她为什么会出现这种反差，长大后我明白了。她画的所有小马基本上都是一样的：它们大多数姿势相同，头的角度也一样。每个小马的前蹄都腾起，像是准备好了去飞奔。她可能是看到了某份杂志的照片，从而学会了怎么画一两种角度下的小马，剩下的仅仅是一个接一个地重复而已。她不过是善于以这种方式来画马。
然而这个女孩并没有真正理解马。她没有弄懂组成马的“层次”。不过，她才小学三年级而已，可以理解。她不懂马解剖学，就不知道马的肌肉分布，也不知道马变化姿势时肌肉形状会如何改变。
她画不好同学也是因为她不懂人体解剖学。她不知道泪腺是眼睛内部的组成部分，不知道眼皮是怎么构成的，也不知道眼皮是如何折缩在眉骨之下。她不知道人的头发是怎样相互缠绕，一簇簇地长在一起的。她既不懂这些事物运作的科学原理，也不懂观者会如何感知这些事物，自然也就不懂如何用纸和笔来为这两个世界架起沟通的桥梁。
当然，她可以不懂这些事情——她只是个三年级学生而已。但可能有朝一日，她会成长为一名画家，或者今天她已经是最著名的绘马画家了。
若要真正善于设计某样事物，就必须懂得它的运作方式。你必须理解自己所要创造事物的本质，别人会如何感知它，以及如何运用手中的工具来实现心中所想。否则，你并不是在设计，而只是在制作一个徒有其表的外壳，像小女孩那样画小马。你可别只会画小马呀。1.3 设计的“层次”
设计者必须要对设计的层次构成有很好的认识，因为要想创作美观实用并最终能打动用户的设计，关键就在于协同设计好各个层次。
比起其他领域，恰当地使用设计的各层对Web设计的成功尤为关键。今天人们接触的信息比以往多得多，可并没有足够的时间或精力去处理它们。所以，我们使用快捷的方法来决定哪些信息值得我们花费宝贵的精力。
在心理学上，这些快捷的方法被称为启发法。借助这些启发法，人们能够运用人类进化过程所固化的或从经历中学到的“规则”，来解决复杂问题，制定复杂决策。
如果在购物时看到一双鞋子，你会立刻做出判断，这个牌子的鞋是不是适合你。外形怎么样？颜色是否有吸引力？风格与你搭调么？你会根据这双鞋和以往曾经买过的鞋子的相似度，使用启发法做出决定。
在网络上，人们也大量使用各种启发法制定决策。比如，我们可以瞬间判断出，电商网站处理我们付款是否安全可信。
事实证明，在所有这些情况下，当判断一个网站是否可信时，设计是我们所用到的最重要的启发法（没有之一）。
影响设计的因素不计其数，而且界限模糊。如果问上十几位设计专家“一件设计会受哪些因素影响”，尽管会得到十几种不同的答案，但几乎都涵盖了同样的内容。在这本书中，我会谈谈下面这些设计中的“层次”。1.3.1 目的
每件设计都有其目的或者意图。万神殿被建造为众神的庙宇，iPod作为便携式音乐播放器而生，同样每个网站或者应用程序的存在也都有自己的目的。
设计的目的也和经济因素相关联。字母的样式一直受语言传播效率的需求影响（参见第3章）。我将在第2章中说明，这些经济因素有助于控制设计的质量，而且这已在Fogg的研究中得到证明——参与者对漂亮得不恰当的网站持怀疑态度（请参见下面的补充内容“在网络上，设计如何影响可信度”）。
设计的目的及意图与用户的需求及特征有着一定的相互作用和影响。第2章将探讨如何在做结构设计时更好地迎合用户特性，第9章将会介绍如何应对色彩的文化因素。
每个用户都能清楚地获取信息，这种传达就是设计的基础。在第3章，我会在历史背景下解释各种字体的差异。附录A会解释历史因素如何影响字体传达的气氛，附录B将展示一些非常细微的排版细节如何对要传达的信息产生巨大的影响。最重要的是，第7章将说明如何给予设计中的各种信息适当的重点。1.3.2 媒介和技术
每件设计作品都是使用一定的创作手法，由一系列特定材料创建的。由于混凝土穹顶的条件限制，万神殿的整个穹顶都配有内嵌的方格。最新的MacBook Pro 采用了一体化铝制外壳，这就是制造上的考虑对产品设计产生了影响。第4章还将提到，由HTML和CSS构建的设计往往都有某些特点，这使得这些设计受限于所用技术的功能和限制。
在第4 章中，我将更为详细地阐述互联网背后的技术如何打造设计趋势，比如Web 2.0 的外观。第3章将说明由于像素的限制，一些历史悠久的字体设计为何并不适用于网络。第8章将介绍在为不同媒介或信息图形挑选颜色时，色彩呈现技术怎样影响我们的选择。附录A将解释，创作字符的各种技术是如何创建出各种新字体样式的。1.3.3 审美选择
与设计意图及媒介和特性相呼应的，是设计的审美考虑。听到这个词时，你可能会想起大部分人所认为的设计——外表虚饰。但是在很多方面，设计的审美选择并不是可见的。
设计中各元素之间的几何关系不太容易察觉，但是它们对视觉和谐、内容组织的感觉以及设计的整体“简洁”程度，都有着巨大的影响。我将在第5章讨论这些隐藏的几何关系，并在第6章讨论如何把这些几何关系和其他隐性的设计准则结合起来。
设计中所使用的颜色当然是可见的。但是设计师在使用颜色时会做出一些重要且不可见的选择。第8章将解释人们如何使用视觉系统感知颜色，以及如何使用各种技术呈现颜色，之后的第9章，将说明颜色如何影响我们的情绪，以及颜色之间如何相互影响，另外我还将给出一些各颜色融洽搭配的常用规则。
在网络上，设计如何影响可信度
在斯坦福大学的一项研究中，B. J. Fogg和他的同事向参与者展示了两个网站，要求人们对网站的可信度进行排名，并解释排名依据。
在处理调查结果的过程中，Fogg发现，参与者在评定网站可信度时，设计对他们的判断有着非常重要的影响。在人们的评价中，认为网站可信度和设计有关的评价就达到了惊人的46%。人们认为可信的网站“看上去更专业”、“高品质的外观和感觉”，或者“就是（看上去）更可靠”。一些参与者甚至明确提到了那些看上去可靠的网站配色和字体。
设计良好的网站享有较高的可信度评级，设计粗劣的网站被视为缺少可信度。如果一个网站“看上去不怎么专业”、“设计草率马虎”，或者看起来“像五分钟做出来的”，那么参与者就不会信任它。
但是，正如只会画漂亮的小马并不能让你成为好画家，同样，只会构建一个炫丽的网站也不能让你成为好的设计师。参与者对过分炫丽的网站也持怀疑态度，给出了负面评价，认为这种网站看上去像是“营销团队设计的”。
网站设计必须恰到好处，创作卓越设计的关键就在于兼顾构成优秀设计的所有层次。
除了视觉效果对网站可靠性有着非常重要的影响外，Fogg的研究结果还表明，设计中的一些更加细微的方面也非常重要。在研究中，关于信息设计和网站结构的评价数量位居第二，在所有评价中的比例超过28%。一些网站因“结构清晰”而受到参与者的称赞，而其他网站则因为“信息呈现方式糟糕”而备受批评。
所以，在关于参与者信任网站与否的研究中，网站视觉效果加上信息组织方式，占评价总数近75%。另外，参与者对不适合网站的设计很敏感。
用户知道你什么时候在“画小马”，所以要创作成功的设计，就需要了解设计各层之间是如何互相影响的。1.4 小结
理解了影响设计的各种因素，你就可以创作出能够打动人、清晰明确且美观大方的设计。在本书的其余部分，我会将所有这些因素分解开来，这样你就可以通过全新的视角来审视设计。让我们开始吧，好吗？第2章 设计的目的
设计是组成产品的众多不同“层次”的表现。所以，有些东西可能只是显得不错，但却未必能成为“好”的设计。好的设计对这些“层次”很敏感，而这些层次会影响产品的最终设计。织物的图案，甚至网站上按钮的图形样式，这些常被误解为是设计，但实际上都和设计的定义相去甚远。视觉特性当然是设计的组成部分，但设计是诸多因素的产物。
设计和其他相关学科之间没有鲜明的界限，就本书而言，我主要讨论视觉设计。视觉设计关乎产品的视觉外观，或者说“美观”。顾名思义，它主要是和你能看到的东西有关，比如设计元素布局、排版效果或者颜色选择，但这些又都受一些非常具体的东西影响，如产品目的、文化或技术。
在后面几章里，我将详细地阐述这些设计因素。第3章和第4章将解释在历史进程中，文化和技术是如何影响排版和设计的。第5章和第6章将介绍隐藏的几何和组合力量，如何在设计中创造出秩序感和有趣的视觉效果。第7章分解这些设计因素，阐述每一项如何在设计布局中创造出视觉上的秩序感。第8章和第9章将讲解我们是如何感知颜色的，如何借助各种技术来组织和呈现颜色，以及这两者如何与我们的文化及色彩认知反应相互影响。最后，在附录中，我将通过不同的字体和排版规范的微妙细节来说明一些排版效果。
通过“逆向工程”的角度来透彻地理解优秀设计因素，你的设计探索之路将更加顺畅。视觉设计将不再只是有天赋者的看似随性的神秘作品。就像金门大桥所彰显的结构要素一样，你将能够洞察所有设计决策的结构，无论其设计作品是永恒之美，还是刚好够用。
但这方面的知识是不可能从类似“优秀设计诀窍”、“前十榜”，或“好设计简明法则”之类的东西中获得的。这些方式很少有效，而且也不会让你达到那种高度。相反，我希望为各位提供一种全新的视角，让你注意到此前从未注意过的东西。你会发现微妙的弧度能使一种字体看起来严肃，又能让另一种字体显得俏皮活泼（参见附录A）。你也会开始注意隐藏的几何关系，大片留白能使某些设计变得活泼有生气，却让另一些变得死板呆滞（参见第5、6、7章）。颜色也不再那么神秘，你将开始明白它们如何相互影响，根据彼此的关系改变突出程度和意义（参见第9章）。你甚至可以在没有视觉参考的前提下，告诉朋友颜色#8989FC和#89CCFF的差异（参见第8章）。
我尽可能为新的视角提供些准则。视觉设计恰巧有一些非常好的规则。但更重要的是，我希望为你今后的成长打下一个良好基础。将来你可以用视觉词汇来阐明那些你认为漂亮，抑或不是很漂亮的设计。你将能够非常熟练地分析TechCrunch“初创企业”板块着陆页的设计，就如同在古根海姆诠释莫奈的画作一般。但在开始了解视觉设计各方面之前，我们首先需要对与视觉设计有关及塑造视觉设计的因素有一定了解。2.1 视觉设计与用户体验设计的关系
在网站或应用程序设计中，视觉设计是用户体验设计的组成部分之一。用户体验设计涉及产品与用户交互的方方面面。用户体验设计试图让产品令人难忘，且易于使用，并会包含若干设计原则，如易用性。
图2-1显示了在（网站和应用程序）用户体验设计中，视觉设计与其他设计原则的关系图。我们可以看到，视觉设计与产品的内容和易用性交织在一起。产品内容自然是视觉设计师真正想要阐明的东西；而易用性强烈地影响着视觉设计，确保最终用户能够有效地使用该产品。图2-1 视觉设计是用户体验设计的组成部分，并受到用户体验设计其他原则和组成部分的影响
这张图进行了简化处理，其实用户体验设计中还包含很多和这些原则重叠的其他原则。比如交互设计、人机交互、信息架构、认知心理学以及人为因素，这些都在用户体验设计中起到了重要作用。虽然本书也会讨论其他领域（像建筑和工业设计）的作品，但在分析用户体验设计和视觉设计之间的关系时，它们都不在讨论之列。2.1.1 用户体验设计基础要素
产品的用户体验设计本质上是介于产品意图和用户特征之间的。正是用户体验的基础塑造了产品，从根本上约束了视觉设计决策。
如果由我来设计一把锤子，那么它的用途会是钉钉子，偶尔也可能用来拔钉子。然后我会对锤子的用户做一番假设——但愿预算允许我做些小小的研究以落实这些假设。如果用户用手作业，我就会为锤子设计一个手柄。考虑到把钉子钉入木头需要一定的力度，我会让锤子头足够坚硬、沉重。有时很难准确地敲中钉子，为此锤子头要足够大，以减少失误，又得足够小以免太沉而不利于挥动。
现在，锤子的雏形就出来了：一头带有重物的棍子。但这依然有改进的空间。通过对原型的测试，我可能会注意到，在没有准确敲中钉子时，锤头容易扭动，因此我会仔细均匀地平衡重量。现在，锤头不仅有敲钉子的一头，而且还有另一头来平衡重量。这样就可以完美地把拔钉子的功能结合到锤头的另一头上。
我会尝试各种不同的材料，最终发现在合适的价格范围内，钢锤头能满足耐用性的需求。至于把手，我会发现木制把手够便宜、质轻，并且有相当好的减震效果。
在考虑产品目的和用户需求的过程中，我完成了锤子的基本设计。锤子是敲钉子和拔钉子的绝佳工具，正如老话常说的那样，当你拿着一把锤子，“任何东西看起来都像钉子”。
更复杂的需求因素可能会推进锤子的设计。也许竞争对手也出售类似的锤子，我就得想办法让我的锤子与众不同，并让其更加好用。通过跟客户交流，我可能会发现一些客户抱怨用我的锤子钉了一天钉子后会感到不适，那么我就会尝试各种不同的材料，如玻璃纤维，来寻找最佳的减震效果。可能一些客户在抓握手柄时感到吃力，为此我可能会尝试使用橡胶手柄，并根据人们的手型对把手塑型处理，以便更好的把握。
我创造锤子的整个过程都属于用户体验设计范畴。我不仅为客户设计了产品，而且还根据他们的需求做了优化，提高了产品的市场竞争力。2.1.2 视觉设计对比
上面这些因素只会稍微影响锤子的视觉设计。如果你在www.homedepot.com上搜索“锤子”，会得到上百条搜索结果。听起来可能很多，但不同类型的锤子适用于不同的情形。有用于钉钉子和拔钉子的传统锤子，有用于金属加工的圆头锤，有用于安装、卸除瓦片的压紧锤，还有甚至不能称为锤子的锤子，比如头部大而钝的木槌，以及安装篱笆桩的打桩器。有些锤子则在比拼材质（比如有全钢的锤子）和价格（从2美元到50美元不等）。
但锤子在视觉设计上差异并不大。而相比之下，另一种用途明确单一的简单发明——鞋子，在视觉设计方面有着极大的差异。Zappos.com上销售一千多种品牌的鞋，每个品牌都有各种各样的款式。当然，就像锤子一样，不同的场合对应不同的鞋，但许多款式的鞋子又有多种颜色可选。
显然，视觉设计的重要性对卖鞋和卖锤子来说是有区别的。原因有很多。比如，鞋子是消耗品，即使人一次只能穿一双鞋，一生中也会穿上好几十双鞋。锤子的寿命会长很多——这取决于你用锤子的频率，它可能会陪伴你一生。另外，我们每天都会穿鞋，而很多人可能都没有自己的锤子。
但有一个根本的区别在于我们与鞋的交互方式：鞋和我们的个人身份有着非常紧密的联系。我们将鞋直接穿在脚上，走路时所有人都能看到它。鞋是时尚的一部分，虽然时尚转瞬即变，并且反复无常，但正是主要因为这个原因，我们才需要各种各样的鞋子设计，而不是各种锤子设计。
视觉设计已经成为鞋子的重要卖点。制鞋企业创新鞋子的方法，可以尝试的只有这么多。他们可以尝试不同的材质和不同的款式，可以在鞋内加入气垫或者加上高跟，可以改变鞋底的厚度，甚至设计成分趾的样子。最终，无论消费者是否承认，在他们挑选鞋子时，视觉设计都是非常重要的考虑因素。然而，挑选锤子时，视觉设计显然就不是多么重要了。市场已经证明了这一点。2.2 有时视觉设计够用即好
在前面小节中，我说明了不同产品视觉设计重要性不同。下面我要指出：尽管你我都热爱设计，但成功的产品并不总是需要引人注目的视觉设计。产品是否需要引人注目的视觉效果，取决于市场。
以单枪匹马就使得数百家报纸和分类广告公司破产的Craigslist为例，Craigslist的视觉设计很丑（或者说根本就没有视觉设计）。为了使Craigslist前端页面更具吸引力，人们曾做过很多尝试，甚至干脆重新设计，但Craigslist的设计依然极其简陋，只有定期的小调整。即使这样， Craigslist仍可年入近1.5亿美元。
Craigslist的成功可以归功于其好用的功能，解决了市场中极其棘手的问题。以前，如果你想寻找室友、出售汽车或者寻觅约会，就必须拿起电话给那些坐在高大办公楼里面的大型报业公司的人打电话，并付钱发布广告，这听上去仿佛有点原始吧。由于按行收费，所以想要省钱的话，就得让广告尽量短。然后就是等待。如果够幸运，你的广告第二天就能发布，紧接着就开始接电话。在找到室友、卖出汽车或者觅得约会对象之后，你还会不停地接到电话，有时会持续几个星期，因为你的广告还在，而你却不能把它撤下来。
但Craigslist用更好用的产品改变了这一切。最让人惊讶的是，它的产品（大部分功能类别）现在仍然是免费的。因此Craigslist不需要优美的设计也就不足为奇了。事实上，这种粗糙的设计激起了社区驱动、反大公司和草根主义的精神。通过使用这种粗糙、社区驱动的网站，人们表达了对那些多年来赚取他们金钱、企业形象光鲜靓丽的商业报纸的不满。2.3 视觉设计有时是产品优势
当然，Craigslist是个特例，而且它的市场份额正在被面向各类领域的服务网站所蚕食。比如，AirBNB（www.airbnb.com）、TaskRabbit（www.taskrabbit.com）和oDesk（www.odesk.com），这些网站都针对其特定垂直市场的需求提供解决方案，并且拥有更吸引人的视觉设计。
没有比苹果从设计中受益更多的公司了。1997年，在离开苹果12年之后，史蒂夫·乔布斯回归苹果，挖掘出了乔纳森·艾维以及由其领导的此前未受充分重视的设计研究室。自那时起，苹果就开始向世人推出了一款又一款设计绝妙的创新产品，并获得了巨大成功。现今，苹果已成为世界上最大的科技公司，是其1997年时市值的百倍之多。
通过发布一款又一款绝佳产品，苹果取得了惊人的成功，但要说起为这成功奠下坚实基础的产品，当然要说是iPod。在iPod之前，只有少数狂热的果粉会追捧苹果优雅的设计，这就好比是说，苹果造的锤子非常棒，但因为价格贵得离谱，只有很少人能够用上，而iPod却改变了一切，它使得性能优异的苹果产品在价格上显得更为亲民。
自iPod发布以来，苹果公司的股价超出了微软股价的30倍以上——iPod在其中发挥了巨大的作用。当时，Windows系统的电脑占据了个人电脑市场98%的市场份额；而现在，苹果在个人电脑市场中的份额翻了3倍，超过7%，并且由于iPad的推出，使得苹果几乎占据了平板电脑市场近95%的份额。
iPod诞生之时，大多数人用电脑做的事情和今天差不多：上网和编写文档。当时，由于微软的Office套件在办公软件市场占主导地位，对于企业来说非常重要，因此几乎不可能让用户切换到Mac平台上来。于是，苹果转攻更感性的音乐方向。“音乐是每个人生活的一部分。对，每个人。音乐一直陪伴着我们，也仍将一直在我们身边。”史蒂夫·乔布斯在2001 年发布iPod 时说道。那时，人们在电脑上听音乐已有好几年了，但是便携式数字音乐播放器市场才刚刚兴起。在iPod推出之时，市场上的许多播放器都庞大笨重，很难向其中传送音乐，而且界面亦如乔布斯所说“难以置信地糟糕”。于是，为了让人们更便利地享受音乐，摆脱PC的束缚，苹果的机会来了，随之应运而生的设备就是iPod。
iPod自发布以来已售出了3亿部，iTunes商店也售出了100多亿首歌曲（在2006年全美合法音乐下载市场中占据了88%的下载量）。苹果向消费者展示了自己创造出了多么伟大的产品，通过建立这种信任，苹果开始销售越来越多的个人电脑，市场占有率提高了两倍。苹果惊人的数字音乐销售成绩已经杀死了一大批音乐商店。2010年10月，苹果推出了闪存存储的MacBook Air，最终彻底杀死了CD唱片。
苹果的成功可以归功于很多因素，但如果没有占苹果主导地位的产品设计，那就完全没有可能成功。虽然苹果曾经推出过多种颜色的iMac，给电脑领域带来了独特的风格，有点像设计了一把非常漂亮的锤子。但现在苹果有机会将时尚引入真正需要的地方：人们随身携带的音乐播放器。
音乐本就是一种感性的东西，非常私人。加之便携式音乐播放器是人们在公共场合随身携带着的东西，它几乎就是一个时尚配饰。因此，出众的设计是赢取便携式音乐播放器市场的关键。人们常把自己的身份和自己对音乐的偏好联系起来，同样，人们对音乐播放器的选择也影响着他们的自我感觉。今天，人人都能认出苹果标志性的白色耳机。
苹果赢得便携式音乐市场，取得今天辉煌的成绩，并不是靠存储容量和功能上的提升击败竞争对手，iPod在这些方面并未做出开创性的创新。它之所以与众不同的主要因素就是设计。苹果在这么个漂亮小东西的帮助下，让自己的市场份额增长了两倍。2.4 Twitter用户体验逆向工程
如图2-2所示，Twitter为各种各样的用户需求提供了出色的用户体验。在本小节中，我会对Twitter的用户体验做一个非常简单的“逆向工程”研究。可以肯定的是，Twitter在重构其服务时，所做的远比这要深远得多。通过这次简单的逆向工程，我希望各位能大体了解用户体验设计流程中用到的结构化思维。图2-2 Twitter最新设计的用户体验，很好地契合了不同用户的需求（图片复制已获Twitter许可 ）
注意 我总是强调，用户体验设计没有绝对正确的方法，尤其是在小项目中做独立设计时。重要的是，你需要学会如何去思考用户体验，找到一种适合自己的设计方式，把想法化为现实。2.4.1 用户角色
Twitter拥有广泛的用户群——不同的年龄段、生活方式以及文化背景。但在这里，我们只考虑典型的Twitter用户：有技术头脑，并且[1]紧密关注网络社会“蜂巢思维” 的最新话题与发展态势的人。
用户角色是对潜在用户的抽象，可用于指导开发和设计工作的决策。用户角色的复杂度取决于项目的预算和复杂度。在较大的项目中，需要花很多心思来尽可能地让用户角色接近不同目标市场和受众的特点。如果是针对团队用户，那么应该为每个用户角色起一个名字，比如“贝蒂”或者“鲍勃”。有时甚至要把用户角色的具体形象表现出来，这样，在与团队成员讨论时，你就能对某类用户有个更具象的认识。然后，便可以确定每个用户角色对产品的需求。通过以上方式，你就能打造出真正适合受众的解决方案。
许多用户体验设计资源推荐使用一些非常复杂的用户角色，而我这里只举一个非常简单的例子。你可以在很短的时间内构造出合适的用户角色。
名字：迈克
职业：Ruby on Rails（RoR）Web开发工程师/创业者
自述：“我希望通过Twitter 与高手进行有效的沟通，推广我众多的网络产品并且收集反馈信息。有时，在排除故障时，我喜欢在Twitter上询问，看看别人有什么建议。”
需求：能够记录对话，而且要能轻松浏览众多推文
这样，我们就知道迈克是位Web开发高手，在实验不同的创业项目。他不想错过技术和创业领域的最新动态（以及其他领域的新闻）。他希望能和其他高手交流，时不时地帮助别人或接受别人的帮助。有可能你就认识和迈克相像的Twitter用户。对了，你自己可能就有迈克的影子。
可以看到，即使只有短短几句话，我们也能获取很多关于典型用户的信息，以及他在产品使用方式上的很多要求及意见。迈克深谙技术，所以他大概可以理解稍微复杂的界面。此外，他希望Twitter易于交流，易于用来推广产品。2.4.2 用例
用例有时又被称为用户故事，有助于更有效地解决典型用户的一些重要问题和使用方式。用例可能与在构建用户角色中所列出的用户需求非常相似，甚至完全相同。从本质上说，用例是设计者预期用户会经常遇到的虚构场景。通过真实地模拟这种场景，并从用户角色的角度看问题，就能非常有针对性地思考对特定情况很有效的解决方案。
Twitter其实稍显杂乱：140字符以内的内容不断涌出，并没有什么结构来组织它们。当然，你可以选择关注的人，也可对其进行分组，但最终，信息流依然十分庞大。推文中可以包含许多其他的信息：一条推文可以提及其他Twitter用户，可以被其他用户转发，也可以只是众多对话中的一条。此外，推文的基本内容也可能是一个链接，链向多媒体，例如图片或者视频，抑或显示用户发推文时的地理位置信息。
化解这些混乱的诀窍是，让用户可以浏览所有推文，同时在不干扰当前信息流阅读的情况下，又能快速地获取每条推文所有相关的富数据。而矛盾之处在于，把富数据置入推文流中又会破坏用户浏览推文的便利性。所以，设计方案必须既允许用户访问这些富数据，又允许用户浏览推文流。
为了真正理解上述问题的最佳解决方案，我们可以制作几个用例，大体描绘用户如何消费推文信息，以及在一个具体的用例中，哪些因素在发挥作用。下面就是这样的一个用例。
此用例假设了这样的情况：你看到一条以@Reply开头的推文，想知道这条推文的作者是在回复什么消息。有时，你可能会在自己的推文流中看到诸如此类的推文：“@ 某某我一直有那样的问题。我更喜欢用Firebug。”当然，除非你能看到他在回复什么话题，否则就完全不知道他是在谈论什么。所以，你可能会概括出如下用例。
用例：引起回复的话题是什么？
描述：迈克看到一篇推文写道：“@某某但是创业公司喜欢推演指数增长曲线。”迈克想知道这条推文回复的是什么话题。它可能是一段讨论中的一部分，如果通过某种机制允许用户浏览这次讨论中的所有推文，那就太好了。另外，迈克可能并不认识推文中提到的那位用户，所以能够提供一些关于该用户的信息就更好了。
用户自述：“嗯，这个讨论好像很有趣。我想知道他们在讨论什么。另外，谁是@某某？”
需求：显示当前推文所回复的推文，显示对本推文做出回复的推文，显示推文中提及的用户信息。
仅仅从这么一个简单的用例（显然这样的用例还有很多），你就会慢慢理解Twitter为何会如此安排界面布局了。当你点击某条推文，旁边便会弹出“推文信息面板”，显示此推文的相关信息。对应前面的用例，你可以在信息面板中看到参与讨论的所有推文，从而满足用户需求。另外，信息面板中还会显示简单的用户资料。这样，在推文信息面板静止不动的情况下，我们的用户角色迈克仍然可以在左侧浏览自己的推文流（见图2-3）。图2-3 选中某条推文后，推文信息面板便会滑出，不仅能够提供选中推文的相关信息，而且还能让用户继续浏览自己的推文流（图片复制已获Twitter许可）
仅仅考虑这些最常见的用例，就能想出也适用于许多非常见用例的设计方案。推文信息框可以显示推文关联的多媒体信息，如图片或视频。这种设计既避免了链接跳转，把用户留在Twitter域名之下，又可以让用户看到推文的具体内容。2.4.3 线框图
基于目前的已有信息，加之更多的细节考量，你就可以开始草拟Twitter应用的前端“骨架”了。通常，这个过程叫做画线框图，因为只是画出简单布局，无需任何设计元素。线框图可以让你和团队直观地了解应用程序中各部分的位置。
项目不同，线框图复杂性也会有极大差异。一些人喜欢用类似Balsamiq Mockups这样的原型设计软件来制作功能原型；一些人喜欢在类似Adobe Illustrator 或者OmniGraffle 这样的矢量绘画软件中画线框图；而有些开发人员喜欢直接编码，用HTML和简单的CSS构建线框图，这种方式还有个好处，就是成果可以直接用于项目后续阶段。还有些人喜欢画非常粗糙简单的草图（见图2-4），或者结合使用以上所有的方式。图2-4 为后续开发理清思路，有这么一张简单的草图就足够了
重要的是，画线框图时，你可以把自己的想法表达出来，而不会被目前来说并不重要的微小细节所干扰，如字体和颜色。2.5 小结
视觉设计和组成用户体验设计的其他原则和组成门类相互交织。成功的设计必须依靠所有这些原则和门类的连通，因此在做项目时，对用户体验设计有所了解很重要。用户体验设计的结构化思维，可以保证你满足用户需求，完成产品雏形，而产品雏形会强烈地影响你的视觉设计。
整合视觉设计和用户体验时，请记住以下要点。
成功不一定需要良好的视觉设计。保持敏锐——了解用户需求，用户如何使用产品，以及你的产品如何融入竞争格局。
优秀的视觉设计取决于优秀的用户体验设计。在项目的早期，运用一些用户体验设计流程。用户角色、用例以及线框图都有助于你在深入细节之前，专注地研究用户体验的关键方面。注释
[1].“蜂巢思维”（hive mind）是《连线》杂志的创始人之一凯文·凯利在《失控：新生物文明的兴起》第2章中提出的一个概念。他认为在互联网的进化过程中，个体的价值和效应并不大，但是像蜂巢一样由个体构成的集体力量是非常强大的。也就是说，个人的意愿主要是通过集体的需求体现的。——编者注
试读结束[说明：试读内容隐藏了图片]