网站设计之怎么通过一个简单的案例，理解视觉设计原则

不知道多少人和我一样，看到类似“三大配色原理”“七大流行趋势”“十大设计原则”这种干货类文章，都恨得牙痒痒，不看后悔，看了还是晕晕乎乎，什么也记不住。

但是下面小编想要跟大家分享的这篇文章，颠覆了我之前的看法，一起来看看设计师José Torre是怎么通过一个简单的案例，非常浅显易懂的解释基本的视觉设计原则的，一点也不干~

网站设计创意互动 www.shejiku.net

点线面

万丈高楼平地起，无论是极简还是繁复风格，一个小图标还是一张大海报，点、线、面毋庸置疑是设计的基本组成要素。

在几何学中，点可以看作x轴和y轴的交点，z轴出现就代表这是个三维空间，今天主要和大家探讨二维空间中的点线面。

点线面-形状

两点确定一条直线，一条线由无数个点组成，三点确定一个平面，就能得到一个形状，比如上图中，出现的三角形，我们可以在这个基本的三角形上做更多的演变，比如添加效果，填充颜色……所有的设计都是从最简单的元素开始，然后慢慢叠加效果。

颜色

可见光谱

人类的双眼能看到无数种不同的色彩，我们从小就学会赋予某些颜色特定的意义。

例如交通信号灯，我们都知道红灯停绿灯行黄灯警告，面对不同的颜色我们会产生不同的条件反射。

然而在我看来，这不是颜色固有的含义，而是来源于我们后天的学习。这些意义会根据我们各自的文化，所处的时代或地点发生变化。弄清我们的设计对象，才能找到适合的颜色，并赋予颜色更多特性与意义。

如图，添加了颜色和动效后，这个三角形，似乎变得更有趣了……

字体排印

动图从一个三角形到A

字体排印是我认为最重要也是最棘手的设计要素之一，文字的呈现方式往往比内容更受人关注。

一个合适的字体可以使平淡无奇的内容摆脱平庸。道理大家都懂，但是做起来难于登天。

要知道，很多字体都有各自特定的用途，比如，一些字体适用于长篇文本的阅读，一些适用于大标题，一些正式，一些有趣，一些甚至带有讽刺意味，我们完全可以先深入了解，再根据自己的喜好来选用。

现在已经有成百上千种字体供我们选择，除非你追求特异或创新，那么我还是建议沿用经典的字体。

如果遇到需要自己设计的情况（这很有挑战性），需要谨记的是空间平衡。

空间

空间的平衡原则是，要么牢牢遵守，要么大胆打破，尤其是排版。在维持元素之间的关联性的同时，需要给他们保留足够的呼吸空间，也就是我们常说的负空间。（字体本身是正空间）。

动图调整字间距

负空间需要纳入设计的考虑因素，过度的留白使设计看上去像个半成品，空间少又会使画面拥挤。

怎样才能找准正负空间的平衡点？这时就需要把握好平衡、韵律和对比

平衡、韵律和对比

平衡、韵律和对比为我们的设计注入活力和吸引力。

视觉重量是平衡的关键。比如说一个右下角黑色块会使画面产生视觉下沉，要么补偿这个便宜，要么移动色块的位置。

动图调整字体的视觉重量 创造韵律和对比

平衡感和对比兼具，才更和谐，更有韵律，更能吸引观众目光。

在这方面能帮助你的是比例。

比例

动图调整字体的大小比例

不是所有元素都同等重要，为了表现出优先级和韵律感，就需要用到比例了。

别忘记前面提到的空间原则，不要单单为了放大而放大。报纸就是个很好的例子。

拿到一份报纸，我们首先注意到的一定是短小精悍的大标题。可以快速浏览他们来决定是否深入阅读某篇新闻。其次是副标题，为我们提供更多的相关信息。

最后就是适合长篇阅读的最小的正文字体。因此，我们在决定优先级时，总是需要站在观众的视角来思考我们的设计。

说到报纸，又让我想到了网格。

网格

大家都玩过俄罗斯方块，堆积是为了清除。

借助网格使元素之间产生关联

当你打开一本书或一张报纸，没有网格，但它们实则暗中遵循着网格的设计准则。网格使版面看上去更整洁有序，观众也更容易摄入信息。无论你的设计有多么超乎常理，也得在混乱中寻求秩序。

对齐的重要性无需多说，通常，人们习惯于从左向右、从上到下地阅读，往往使中部和底部的信息难以被摄取。因为这个因素，我个人偏爱左对齐，不过有时候阅读顺序还是取决于我们的设计对象。

框架

框架式构图是摄影中一个重要的方法，也同样适用于视觉设计，它对整个版面起着决定性的影响。

动图重

构并添加一些其它元素

我们需要舍弃无用的信息，用框架式的构图将观众的焦点引向重要的内容。

如果还是感觉缺了些什么，那么你可以尝试添加纹理和图案。

纹理和图案

动图尝试噪点纹理

纹理和图案一般出现在饰品上，用上他们会使我们的设计更加生动有趣。

纹理有立体化的功能，曾经有段时间十分流行。它一般不被考虑在构图里，当我们需要打印我们的设计时，只需选择正确的纸张，再加上一些斜面、浮雕或UV光油。（译者注：UV光油，喷涂或滚涂在材质表面之后，经UV灯的照射，材质表面由液态转化为固态，从而硬化，耐刮耐划，表面光亮，美观、质感圆润。）瞬间使作品高大上起来。纹理一两个就够了，物极必反。

很多图案都是重复的，这时也可等同于纹理，一般用来补偿过多的负空间，使画面看上去不那么乏味。

最后，我想说的一点，也是被我视为视觉设计的灵魂的一点设计理念。

设计理念

动图一个创意灯(陈词滥调了 我知道)

视觉概念关乎我们的设计理念，也就是你的作品想传达的意思和深层含义是什么。

这是一个好的设计和一个你随便从网上down下来的一个模板的本质区别。

想一想，你在设计之前有确定一个视觉概念吗？你的设计素材有正确传达你的理念吗？如何借助这些理念将每个素材，恰当的结合在一起？选择什么字体最合适？
如果觉得自己的概念很棒，那就坚持下去，把这个想法实现，卖给你的客户、老板或任何人。

跟随流行趋势固然很好，但我真的相信一个好的设计不会跟随潮流，而是创造潮流。

结语

以上是我认为一个好的设计需要遵循的10个原则，其中第十条是我认为最必不可少的。

你可能有一个好的想法，但你得学会如何将这个想法通过我们的设计很好地传达出来。大家都说不能因为封面来判断一本书，但实际上很多人都是靠封面来判断一本书的。如果一本书的封面都不足以吸引读者，那又如何让读者有兴趣挖掘它的深层价值？

其实还有很多重要的原则我没有单独列出来，比如弄清设计对象、实现想法的途径，因为我认为这些都是视觉概念的重要组成部分，产品需求决定项目成败。

这些原则相信大家早已明白，但还是希望我这些简单的解构，对大家能够有所帮助。