干货满满的信息可视化设计大科普（小白白篇）

干货满满的信息可视化设计大科普（小白白篇）

当下，随着互联网和新媒体的技术兴起，艺术门类又一次成为读大学的一个捷径。而这种情况造成的必然结果学生们的艺术基础薄弱和艺术修养亟需提高。很多同学在上大学前甚至没有经过正规的美术基础训练。因此针对设计小白白们，我总结了一下各位十分容易出现的设计错误和此后做设计的技术路径。也就是说，设计的好与坏咋们先不讨论，因为那是修养和审美的事，需要长期的积累。而设计的对与错，这件事，可以通过有效的训练和练习，甚至死记硬背来做到正确。同时，这些知识点不单单可以应用到信息可视化上面，还可以在排版设计，书籍设计，PPT和各种报告上使用，希望对大家有帮助。题外话，此篇文章中我所讲的任何内容在这个互联网高度发达的世界，都可以找到源头，但我尽量以极其朴实的语言和简单易懂的例子给大家科普，以区别现在网上各种为了赚点击和博眼球的设计类洗稿文。

前方高能！！！

1. 对齐，对齐，对齐

重要的事情真的需要说三遍，做设计一定要检查自己的内容是否对齐。
现在发现这是一个设计师的基本修养问题，而在实践中发现，很多同学在作品中并没有很好的体现。那么作为任何设计的一项基本常识，这个概念我把它放在首位。在讲“对齐”这个概念时，我来复盘一下一名设计教师经常会碰到情况：

老师：同学们，咱们这次设计作业一定要注意对齐，懂了吗？

同学们：好的老师没有问题！

几天后。。。

老师：小A，你有没有认真听课呀，你看你的作品这里那里这里。。。。

小A：老师，我觉得我对齐了呀～

在生活中，因为从小生活环境、成长经历的不一样会造成一定的认知的差别。同理，设计中的师生而言，造成师生双方较难get到对方信息，需求无法对齐的很大一部分原因就是因为：双方的认知不统一（在心理学上，将认知定义为人的最基本的心理过程。首先是人脑接收外界输入的信息，然后经过自身头脑的加工处理，最后转换成内在的心理活动和行为的一个过程）为了解决这个设计教学沟通中的认知的根源问题，Up主 小洋胖子 提出三大原则：

统一目的，目的具体化，表达客观化

那么现在回到“对齐”这个要求上，套用上面的模式为：设计后第一要检查对齐情况；对齐是为了设计作品的统一和有条理；应该做到句句对齐，图图对齐，图文对齐。

关于对齐的形式，优点等等，请参考下面链接，写的很好，支持原创：

https://www.zcool.com.cn/article/ZNjE4MzIw.html

关于对齐，无论是PS，AI还是PPT中，都已经有很好的工具了提供了。还有两样法宝，是对齐中必不可少的，那就是网格和参考线。了解和使用网格和参考线来进行设计是设计中至关重要的。它可以确保页面中元素之间保持逻辑和视觉上的和谐统一。这样可以保证设计整体的凝聚力和关联性。你不必在每次创建元素时都使用网格。然而，当你了解如何使用网格与参考线，你会慢慢离不开它们，并在排版设计中带来很多好处。

2. 文字，文字，文字

重要的事情说三遍，在文字这个大的题目下，主要是文字的字体和文字的排列。套用公式后：设计后第二要检查文字中的字体使用和篇幅排列情况；此举的目的是正确表达设计思想，避免低级错误，体现设计师专业性；字体使用方面应该做到风格统一，大小合适，避免怪异；篇幅排列方面应该做到中西差异，间距合适，标点正确；而当二者结合之后就需要层次分明，3-3制原则。下面我从字体使用方面开始来说：

风格统一：设计中建议最多不要超过3种字体类型，不然会使作品看起来松散和不专业。并且设计中使用的类型一定要风格接近或者统一。比如汉子现代字体中的宋体和黑体就是两种风格。

区别在于宋体对于汉子比划进行了粗细变化和修饰，而黑体则保持着单纯的文字线型，这也就是为何很多重视设计的公司的中文界面比较偏爱黑体风，比如苹果，小米等（不信的仔请去他们官网看看）。

英文字体这方面，风格请参考下图，尽可能选择标准字体，近几年网页中通常使用思源黑体，PingFang，英文可以使用Arial，Calibri或者其他常见的易于屏幕阅读的黑体字，如没有特殊概念指导尽可能避免使用衬线字体。

大小合适：太多的字体尺寸也会破坏设计布局，请在设计中保持大中小三种类型。这样的处理，就是为了保持节奏，节奏如音乐是要通过高低来调节的。同时字体的大小合适还有一层意思，就是不要轻易改变字体的比例。很多新手设计师会随意拉伸字体的长宽，这种操作是一种极其业务的方式，请各位同学注意。

避免怪异：在字体使用中，希望各位新手同学尽量不要放飞自我，谨慎，谨慎。比如在选择英文字体的时候，有些字体的个别字母极易混淆，特别是“i”和“L”（如下图所示）；以及文字之间的间距。许多中文字体在使用较小字体的时候笔画会粘到一起，不容易辨别；也不要选取一些看起来怪异的字体，而导致形式大于功能。

在这里，我给大家推荐两个诚意满满的字体网站，堪称业界良心。第一个是字体网站：https://www.fontfabric.com/ 这里面提供了大量优秀的英文字体，并且可以免费下载使用（供学习）。第二个网站的推荐是因为，很多同学有时看到很好的字体，但是不知道叫什么或者在哪里下载，这时候就需要这个网站：http://www.qiuziti.com/

聊完了字体方面，下面我们聊聊文字的另一方面，篇幅排列。

中西差异：下面我们将拿出两段普通的中文字体和英文字体来进行对比，中文适用的是方正兰亭纤黑，节选自（结构思考力）

1. 英文的段落几乎每一个单词的长度都是不一样的，而中文的段落字体都是方方正正的。这样从每一行的角度来说英文的每一行变化更多，而中文因为是方块字，所以缺乏变化，提高排版难度。这就是为什么有些同学喜欢排版英文，是因为英文排版确实比中文简单。

2. 英文的篇幅普遍比相同意义的汉字的篇幅要多，在设计时，英文本身更容易成为一个设计主体。这里我差一下，在信息可视化设计中，大篇幅的文字其实在信息可视化的作用很小，层级很低。以后我会专门写文章针对信息可视化金字塔原理而详述。这里请同学们记住，此类文字的作用更多的是一个小灰块。起到调节氛围的作用。例如下图远看时你已经很难看到文字的具体内容，但是在排版上起到占位作用。

此外因为英文单词的字母数量不一样，在编排时，对齐左边之后，右边都会产生自然的不规则的错落，这在汉字编排时不太可能出现的，汉字编排每个段是一个完整的”块”，很难产生这种错落感。因此请保留那些英文排版中的参差不齐，那才是原汁原味的英文。

间距合适：合适的间距首先从字与字的距离开始，关于字间距，我重点推荐的就是Adobe公司的内容，这家在设计史中举足轻重的公司。链接如下：

关于字间距（一）： 字间距在字库中的设置

https://blogs.adobe.com/CCJKType/2009/07/kern1.html

关于字间距（二）： InDesign 的字间距调整功能https://blogs.adobe.com/CCJKType/2009/08/kern2.html

同学们可以顺藤摸瓜，在这个论坛里多转转。

在字行排版中，我们有一个特殊的术语，用于表示行与行之间的距离：行间距（或行高）。为了保证文本的可读性和易读性，使文本形成线性的阅读感受，在信息可视化设计中，通常情况下将行间距控制在字体大小的1.5-2.0倍之间（中文字体）。英文字体推荐使用默认行间距，或根据默认行间距微调。

标点正确：最后来再说说标点符号，我国最早的古书是没有标点的。进入20世纪，现代白话文的使用日渐广泛，人们迫切需要有比较完备的新的标点符号。一些学人开始向国内介绍欧美最通行的一些标点符号，并根据古代的句读符号，参考西洋方法研究制定出了适合中国文字需要的我国最早的新式标点符号。这里强调的不是标点用法，而是在排版中标点的特殊对待方式。

一般句号、问号、叹号、逗号、顿号、分号、冒号等不能出现在行首；换言之，引号、括号、书名号等的前半部分不能出现在行末，后半部分不能出现在行首。这是很多设计小白同学的信息可视化作品中出镜率最高的错误了。为了解决这个问题，很多专业的排版软件比如Photoshop/Illustrator/Indesign在段落设置面板中都有如下图的设置：段落面板—避头尾法则设置：JIS严格

关于避头尾法则详细内容请转这里：https://thetype.com/2018/05/14501/

最后说一下就是二者结合之后就需要层次分明，3-3制原则。细心的同学可以发现，上面的文章很多地方都涉及到三这个数字，在设计中3确实是个很神奇的数字，所以我们一定要牢记上文中的3-3制原则。以后我的设计色彩分析篇中，也会有关于3的阐述。适当的情況下，用标题、副标题，正文这样清楚地分类，会让设计的可读性和层次感提升一个档次。

                                           转载于知乎@小洋胖子