你真以为对对齐，归归类就做好设计了？

作者：维恩。作者授权早读课发表，转载请联系作者。

微信公众号：大宝的设计私语录（ID:cenferdesign）

欢迎投稿到早读课，投稿邮箱：[email protected]

“任何时候当超过一个元素被展示，就会暗含一种人类的处世动机，一种强加的规则行事。如果不能在混乱中简历秩序，设计就会失去意义。”设计不是只凭感觉的自我任性表达，懂得并运用既定的成熟规则会让你的设计更有价值。

今天推荐一本网页设计经典书籍——《秩序之美——网页中的网格设计》，除了网页设计师外，UI设计师、视觉设计师以及平面设计师都会从这本书中受益颇多。在阅读并实践本书的内容后，不但可以开拓眼界，更能提升自己的设计水平。

怎样的秩序？当然是一种能准确反映设计师世界观的秩序。世界应如何运转，设计师有着自己独特的见解和表达方式，由此创造出不同的秩序。它的力量微弱而有限，但世界的任何一个角落，都会受到影响。

2009年，著名的设计师、作家和设计思想家Ellen Lupton说：“要是说网格有限制，就等于说语言有限制或者排版有限制。”因此，我们可将网格想像成是创意的跳板。网格为设计师建立了一个基础，使他们可为或大或小的问题找到解决方法，从而进一步帮助读者，用户和观众找到全人类都在寻找的：混乱中的秩序感。

当然，我们都在找寻不同种类的秩序，或者说我们都在以自己独特的方式寻求秩序。尤其是设计师，与其他在视觉上受训较少的人相比，更是在寻找着不同的秩序。从专业的角度，我们告诉自己要善于发现视觉或变化的样式：各个元素都对齐了吗？它们的形状、比例和纹理相似吗？它们是否采用了相似的视觉处理方式？它们是否根据某种模式分类？甚至，在不能被立即察觉的元素间是否也存在连贯性？这就是当我们评估一个设计，当我们观看一个网页，或当我们遵循个人经验点击网站时所思考的事。

但是，大多数人倾向于不太严谨地寻找秩序，至少在视觉领域是这样。他们寻找的只是一种秩序感，而不一定是真正的秩序。他们有意识，或更多是下意识地问自己：各元素看起来是否有秩序感？它们是否遵循一些基本的逻辑规则？实际上，与其说人们在寻找有序感，不如说人们在试图消除无序感。

当然，网格是一种视觉有序系统。就像任何一种有序系统一样，它在两个层面上运作：首先是认知层面，然后是应用层面。也就是说，一个用户先要感知到网格，然后他才能进行使用。

毕达哥拉斯是认识黄金比例的第一人，黄金比例反映出两个具有特定关系的数字（大约是1:1.618）之间的和谐。通常也被称作黄金分割，它的精妙之处在于其复杂和富有挑战性，在历史上为一些最伟大的数学思想增添了无穷的魅力。自文艺复兴或更早以来，黄金分割也已成为艺术家和建筑师的灵感来源。那些在建筑建造过程中使用黄金比例或在绘画中运用黄金比例构图的人们发现了其无以伦比的价值，利用它能创造出从美学角度看令人愉悦的作品——历史上一些最重要的著作就是这样。

一般来说，斐波纳契数列由0开始，然后是1。接下来的每一个数字都等于前两个数字相加的总和，因此，数列的前几个数字分别是：

0、1、1、2、3、5、8、13、21、34、55、等等

斐波纳契数列中的每一个数字，如果除以其左边相邻的数字，所得的商将非常接近黄金分割的数值1.618，有时大一点，有时小一点。随着数字增大，商也无限接近1.618。对设计师来说更有意思的是，当斐波纳契数列表现为对数螺旋线时，就立刻构成了一个和谐而有逻辑的网格基础。

由（根号2）矩形也可以形成一个非常相似的网格，人们有时会将矩形和黄金矩形弄混。将矩形平分，就会得到两个和原矩形长宽比例相同的矩形。这对设计师来说很重要，因为这些矩形正是国际标准纸张尺寸（ISO216，以德国DIN476标准为基础）的精髓所在。虽然这种纸张标准在美国的主流商贸中并未使用，但却成功地广泛应用在欧洲以及许多其他的国家，它甚至被美国采用为官方文件格式。更为重要的是，这使纸张的制造、发行和使用都统一起来。当它在一个国家通用时，对平面设计师的工作产生了深远的影响，它为设计带来便利，并提供了一个标准，避免矛盾和争端。

而所谓的三分规则就不那么科学了，其实也不算什么规则，只是一种数学方法。它源自于十八世纪或更早，为画家、绘图员、摄影师和平面设计师（但很少包括建筑师）提供了一种经验法则，帮助他们从美学的角度完成和谐的构图。三分规则主张将图像在宽度和高度上各自等分成三列和三排，从而发掘出构成的力量。这些横线和竖线的交叉点将形成四个焦点，人眼将自然被其所吸引。三分规则认为，通过将各个元素与这些横竖线对齐，或将元素放置在这些焦点上，就能使图像散发出最大的魅力、活力或张力。

也许正因为其通俗易懂，在各种各样的“美学公式”中，三分规则显然是最有用的。它纯粹，所以具有说服力，而它三等分图像的简单技巧也很容易识记。对比我们上面讨论过的那些更为精妙复杂的数学方法，三分规则就显得特别有意义。黄金分割、斐波纳契数列和其他数学概念对网格概念的历史发展所作出的贡献是毋庸置疑的，但在多数常规情况下，它们固有的复杂性限制了其效用的发挥。

幸好，黄金比例——这些概念中对设计师来说最有价值的——并不需要学习到专家水平也能起作用。本书稍后将提供一些练习，包括黄金比例通常的应用方法。现在我们得出的关键结论就是：构建网格运用的方法越简单直接，搭建出的网格就会越有效。

网格以解决问题为首要任务，美观在其次。

网格可以显著提升任何一个设计的美感，因此比起功能，设计师更容易专注于形式。但最成功的网格却是以解决明确的问题为根本目的。不管是交流性的问题，组织性的问题，还是操作性的问题，网格通过完美地解决这些问题展现其魅力。

以下就是设计网格的主要步骤。

1． 进行调查，明确要求

2． 画线框图

3． 设计预备

• 基本草图

• 建立单元、栏、基线以及进行计算

• 页面草图

4． 正式设计

5． 制作（编写代码）

设计师应该找寻什么样的限制条件呢？我将它们主要归纳为以下三种类别:

技术限制条件决定了设计的表达方式。主要包括客户端的显示器分辨率和型号（或说是客户端网络浏览器版本的“新旧程度”）这两个主要的方面。以网站为介质展示内容的时候，由于技术问题的限制，会对设计师的设计流程的设计方法产生影响。这二者将依次影响设计师采用的设计方法。

商业限制条件决定了设计目的，不管是为了加强用户浏览网页的流畅度，或延长用户在网页上的停留时间，或提升广告点击率，或引导游客消费。这些目的对任何设计来说都是最重要的。设计师也应该考虑品牌、定位和市场相关。最后，设计师应该充分评估客户公司实现自己设计的能力：网格设计完成后该由谁接手，他们有哪些能力。

内容和排版限制条件决定了设计的内容。它们决定了设计可能采用的不同形式，比如文章选用的字体、篇幅以及标题和摘要的长度、引文、图片和插入的内容（比如视频和交互元素）、数据表和图表等。

设计问题越开放，限制条件越宽松，设计师就越难进行跳跃性的深入思考——而跳跃式的思考正是伟大设计的标志。不可更改的限制条件能刺激设计师进行跳跃性的思考。不管是限定了尺寸，约束了技术，规定了广告单元或设置了其他一些设计师必须解决的问题，比起让他们根据自己的需要随便修改，有一个强制的限制条件将对设计非常有益。

为了彻底解决设计问题，在纸上画草图是很有必要的，这对创建网格也特别有帮助。比起直接跳入设计阶段甚至直接编程，快速并大致绘制出栏可能的组合方式以及各种版式将更简单，而且可以节省大量时间，还能引导我们设计出更丰富更有创意的网格。

草图的绘制不一定要局限于网格创建过程中的某个阶段，或开始和结束于某个特定时间。记住这点也是很重要的——在整个项目的任何阶段都可能要画草图，而草图也可能要经过多次绘制才能完工。不过，最好早点开始画，这样更多的想法就可以快速地展现出来。任何时候，在手边准备好一支铅笔和一沓纸，无疑是设计师难能可贵的好习惯。

学习使用网格进行设计，再没有比亲自实践更好的方法。将所有的理论，史料和学习准备付诸实践。在这本书的后半部分集中讲解了如何在设计网站的时候应对各种实际的设计问题。当然，并不存在标准网站或标准网页设计问题。但是这本书后面讲解的内容结合了许多常见的网页类型，包括博客、个人页面和将五花八门的内容融为一体的主页。还举例说明了许多不同的设计问题，展示出的常规设计方法对实际的网格设计非常有益。在考虑所有限制条件的前提下，构建一个网格系统，并将其运用到网站的各种页面中。

此书的精华部分即是后半部分，作者以实际项目实例来一步步引导读者学习并思考网页中的网格设计，将上述步骤流程运用其中，详细介绍了网格设计成熟而经典的设计模式，强烈建议大家认真阅读全书，边读边思考，思考作者在设计网页时的每一步骤，以及为什么这样做，并将这些原则运用到自己的工作当中，然而切记不可生搬硬套，设计师必须适应并灵活改变这些原则，以便解决面临的设计问题。我们可以从网格过去的发展学习到很多知识，而现在也有许多新的方法需要我们掌握。但最重要的是，设计师必须深深理解需要解决的问题，并为其创造出真正合适的解决方式。

以上内容是对《秩序之美——网页中的网格设计》核心内容的整理和提炼，想要更进一步学习，鼓励大家去购买正版纸质书籍，真正收获知识的价值远远大于书籍本身的价格。

版权声明：早读课文章均来自作者投稿或者授权文章，部分文章为转载均尽量注明作者和来源，文章版权归作者所有，若涉及版权问题，请添加momo微信：qqj5211314，感谢。