钻研网页设计得出结论：间距形状等排版及结构影响信息传达
这两天刚好承接了一单私人的单子，针对网页设计进行了一番钻研，并且还和业内称得上大佬的人士做了诸多探讨，进而得出了下面这些结论，现将其分享出来（篇幅有点长，请耐心把它看完）：存在着一种看不见的力量：间距以及形状（涉及排版还有结构方面）您的“数据与墨水”的比率。
多留意应用，空白增多，“数据/墨水比率”就会越高，这是信息设计大师Edward Tufte所提出的概念，它是每滴墨水传递信息多少（或者在移动和网页设计情形下）的函数，也是每一个像素传递信息多少的函数。
在左侧呈现的图形，相较于右侧所展示的图形，具备着更高一些的数据与墨水之间的比例关系。就该图形而言，其对于是否真的需要运用“墨水”去进行填入这种情况，答案是否定的。因为它能够以一种适宜的方式，与点以及线达成良好的信息传达效果。
如果您更进一步，然后删除线，只留下点，该怎么办？
此刻，沟通已然破裂了。没错，您能够瞧见全部的数据点，然而当下您已然丧失了有关数据怎样随时间产生变化的“故事”。此外，极难与简单的散点图区分开来，在散点图当中，“时间”并非变量之一，数据也并非呈线性发展。
认为更接近的项目是相关的
我们知晓了元素的对齐方式怎样去暗示这些元素相互之间的关系，同样关键的是这些元素相互之间的距离究竟如何 。
这只是一个简单的正方形网格，就像地板上的瓷砖一样。
然而，要是于正方形的垂直行当中去构建更为宽泛的水平间距，那么此刻便存在一系列 。
所以，要是上图里面的数据出现急剧的变化之时，大脑说不定会想着以错误的顺序去连接点哦，缘由在于有一个点跟另一个点相比更近呢。
将空白用于干净的布局
这些原理，超越了线形图，它们存在于您所设计的所有内容里，尤其是在为小屏幕进行设计之时，您并不希望浪费像素，而是要去设计那种具备高数据与墨水比的设计。
设计师职员常有这样一种偏向，这种偏向就是运用网格去辅助组织布局之中的那些信息，网格这般做能够助力将元素予以对齐，比如说文本行这种元素，随后再去构建彼此之间存在关联的信息区域 。
此项乃是于网格之上所设计的基础基本布局情况，左侧部分为导航，存在着一个较大的区域，该区域之中涵盖包含主要内容 。
这般布局挺不错的，然而要注意，导航相互之间的空白，跟主要内容区域里头的文本列间的空白，是一样的 。
稍微扩大导航区域和主要内容区域之间的装订线是有意义的。
现在，导航跟主要内容之间出现了更为清晰的界限，我们所要做的便是添加一些空白，。
使用空格进行清晰的排版
对于我们而言，得知大小调整乃是能够用以构建印刷层次结构的诸多因素当中的一个，这是我们所了解到的情况 。此外，空格同样能够对您组织排版起到协助作用 。
例如，查看此标头，元数据和正文。
因为它们的尺寸是从各异的比例里头挑选出来的，所以它们相互之间有着和谐的尺寸关联，然而它们看上去十分粗糙！
问题是没有考虑这些元素之间的负空间。
元数据行跟标头区分得挺好，它大小不一样，大写小写都特别突出，就连间隔都特别小。
一种相当不错的窍门是运用元数据类型的高度去明确它跟标头之间理应存在多少空间，情形如下：
通常情况下，您会凭借眼球将此间距甄别出来。不存在数学办法能够精确无误地告知您究竟是多少间距。它属于行高，鉴于所运用的边距或者填充量，以及特定字体的特征函数。
现在，那个身体副本怎么样？
元数据切实相当靠近标头而是有意义的，然而标头没必要太过靠近正文副本，事实上，标头与元数据能够是它们自身的单元。
您呀，能够去运用那从标题顶部一直到元数据底部之间的距离当作指引，并且呢，要把这距离的一半放置在元数据和正文两者之间 。
结论
考虑应当怎样去塑造布局，还要与空白空间展开交流，如此一来，您此次的设计，会显得更为清晰，清晰程度进一步提升，与此同时也会更加具备实用性，而且相应的转换效果也更为出色。
看不见的力：大小，对比度和平衡更大的东西看起来更重要
显而易见，当您将元素放大时，它看起来比较小的元素更重要。
然而，此情形需同会对视觉层次造成作用的别的因素一块儿予以思量。举例来讲，这两样元素具备一样的重要性等级，原因在于它们的尺寸相等：
如果有的话，您将在看到底部元素之前先看到顶部元素。
但是，如果将底部元素设置为大于顶部元素，它将显得更为重要。
但是却存在着其他的因素，比如说视觉重量，也就是那种您究竟使用的是粗体字体还是浅色字体，或者是颜色对比，这些情况有可能让较大尺寸所产生的效果发生逆转 。
在此插图中，较轻的元素看起来不那么重要，即使它更大。
然而，只是借助给同样的那幅插图赋予深色的背景，当下，较为轻浅（以及较大尺寸）的元素便占据了主导地位，这是由于它跟较小的元素相比较而言，于背景上所形成的反差更为显著的缘故 。
进行有意义的尺寸更改
对当今时代小屏幕进行设计时，您得有目的地去运用尺寸更改。若没这个必要，把字体增大，也就是去占用屏幕中宝贵的空间，这没有任何意义。
只要存在可能性，您皆能够运用上述那些因素去改变视觉层次，然而早晚得让一件事情比另一件事情显得大些。只是别随意去做 。
看一下这些不同的元素，每个元素都比前一个更大。
现在，对您来说更清晰地读：是该布局还是该布局？
依变化的比例来确定大小的是第二个示例之中的元素，每个字体大小都跟下一个最小大小存在关联，且和较大字体保有一样的数学关系、。
可变比例的字体大小，相互之间存有比例关系，这一比例，对让设计的各个部分看上去好像它们是归属于一块儿而言，是有帮助作用的。
您可以在MailChimp徽标中看到实际的比例。
彼此之间相关系数为0.75的每一个圆圈，构成了黑猩猩的诸多特征，比如说，组成身体的许多圆之中，那组成腹部的圆相应比例为0.75，而设计这个徽标的公司，便是Hicks Design，其乃是特意这般去做的！
不要一味崇拜黄金比
你们当中好多人或许正在思索那所称的“黄金比例”，此比例被大力宣扬，黄金比率大概是1：1.618。没错，如果将黑猩猩构建于黄金分割率之上，其依旧会颇具吸引力，然而客观来讲，它并不会更具吸引力。尽管有大肆宣扬的情况，但并无证据表明“黄金比例”比其他受欢迎的比例（像是.75或者.67）更具吸引力。
需说明此点，我曾针对我的电子邮件列表展开调查，去知晓其发现上述哪一个矩形更具吸引力，其中一个是正方形，一个是0.75矩形，一个是0.67矩形，还有一个是“金色”矩形，哪个矩形对你最具吸引力呢？
以下是民意调查结果：
以您之所见，那被称作金色矩形者，其效果相当不错，然而它并非是最为吸引人眼球的矩形 。
处在这样的情形下，2比3的矩形会取得胜利，然而请不要过度去阅读，重要的是，从黄金分割率起到3比4的任意事物都会比正方形更有吸引力。
您能够运用这方面的知识，使得您排版看上去美观，并且节省时间，要是您跟您预先的排版设置以不一样的规模去运行 。
打个比方，这些便是我始终运用的字体大小。每一个尺寸大概是之前尺寸的0.75（稍微存有四舍五入）。
使用零点七五刻度而非黄金分割比例的附带好处是，数学在您脑海里变得容易许多：百分之十六的百分之七十五是多少？简单！十六的百分之六十一点八是多少？嗯。
结论
经过对您实行的那尺寸予以一番掂量查看，您这个设计自会变得愈发明晰，愈发明晰，与此同时实则用度越发好，并且整个转换呈现出来的效果会比较棒 ！加入采用不一样的那个比例，事实上能够更为迅速地弄出优秀的设计！
隐形力：对齐，方向和焦点
设计蕴含着那种“无形的力量”，这些力量全都对达成清晰的沟通有所助益。要是您不情愿仅仅获取正确的字体，或者仅仅挑选正确的颜色组合情况，若您对这些看不见的力量不加留意，那您的设计将会遭遇惨败。
关于这些力，这是由三部分构成的系列文章里的第一篇，所以，我们要起始于对齐，方向以及聚焦 。
介绍“元素”
要切实地借助设计的那种无形的力量去进行思考，您得摒弃把设计仅仅视作字体、颜色、图像以及文本的这种看法，转而开始把所有的这些事物当作“元素” 。
每一个您的标题，皆是一个“元素”，正文当中的每一段落，均为一个大的“元素”，每一幅图像，都是一个“元素”。
有某种另一个元素可被称作“子元素”，每个元素里均存在它，您的徽标大概会有“符号”元素与“文本”元素，文本部分当中的每个别的字母能够被看成自身单独的元素 。
不论是谁，只要参与关乎所有这些元素的讨论，就不由得会让我联想起化学课，而我呢，从未参加过化学课，然而实际上，这是恰如其分的 。要是您把那些元素正确地排列起来，那么，您会发现从页面上蹦出爆炸性事物 。要是您随心所欲地安排它们，那么，您就会觉得自己傻里傻气的 。
对准
设计具备挑战性，这是由于您得去占据乏味的二维空间，进而把它变得有趣起来，与此同时还得清晰地展开交流。特别在当下，对于微小的可移动屏幕以及可穿戴屏幕而言，尽可能高效地完成此项操作是很关键的。每个小像素都得把工作做好。
这便是为何对齐这般重要的缘由，借由让元素相互对齐，您能够表达诸多内容 。
例如，这些正方形全部对齐。
而且，如果我们改变对齐方式，则会完全改变构图。
而且，如果我们打破这种一致，那就显得混乱了。
假设，我们运用社交媒体图标去替换正方形，那么，能够直接瞧见，对齐方式怎样变得具备效用 。
方向
以假想线来实现元素对齐之际，能够借其创建方向感，而真正具幻想特质的设计师会将这样的假想线直呼之为“轴”哦，此轴可被视作车轮上那一用以撑起车轮上所有重量围绕其进行旋转的轴，这一状态下必须得维持好平衡才行，同样的道理，轴对控制合成物的平衡有着助力作用 。
看到所有排列的元素了吗？您可以将它们称为此合成的轴。
如果在该轴附近对齐其他元素，它仍将主导并控制构图。
您能够对文本进行排列：处于中间位置，朝着左边整齐平齐或者向着右边整齐平齐（防止在网络上对齐字体），接着顺着该对齐方式打造出一个轴。
在把文本进行居中操作之际，会创建出一个轴，文本的全部粗细都是围绕着这个轴来旋转的。而其余的构图呢，同样期望是以这个轴作为中心的。
那么，要是您于处于中间位置的文本附近放置一些左对齐的文本齐平，则这样的组合一开始进行起来就会变得杂乱无章。当下您拥有两条相互产生对峙的轴，这难道不是一个值得令人心生畏惧的想法吗？
出现例外情形的是，处于居中对齐状态的元素跨越了构图所具有的宽度，而且存在将元素朝着左边平移或者向右边平移的情况，平移发生在这个构图范围之内。如此一来，轴之间便不会产生互相冲突的状况了。
请注意，两列内容都设置为向左对齐。
或者，您能够借助让一列朝着右边进行平移，与此同时另一列往左边平移的方式，在排水沟的外面将轴给创建出来 。
焦点
迄于如今，我始终聚焦于垂直轴，你亦能够拥有水平轴，或者对角线，然而这在网页与移动设计里相对鲜见。
即便两个强轴相交，通常也会创建一个焦点区域，眼睛自身会自然地跟随任意一个强轴，因此一旦两个轴相交，那么眼睛势必将在该位置消耗大量时间。
于网络设计之时，于移动设计之时，在任意给定的时刻当中，您大概会期望用户能够全神贯注，所以呢，您能够运用相互交叉的轴，以此来吸引对于那个点的注意力 。
结论
运用对齐去构建轴，把控方向并确立焦点区域，如此一来，您能够更出色地达成您的设计目标，这个目标，要么是提升可读性，要么是推动转换。
这便是网页设计关于排版的理论，希望能助您一臂之力~奥利给
请小编喝杯咖啡吧！