你的布局设定方法靠谱吗？

再看下面一个示例3列等分。

如果目标是1200px左右的话，则W=1180；(3*400px-20px)如果是1000左右的话。W可以等于970px；(3*330px-20px)或者是1000px（3*340px-20px）；

在管理控制台一致性到达一个里程碑之后，现在我们为了一致性以及解决上面描述的问题，开始在腾讯云和DNSpod中去落地，并且希望要求中心内所有设计师遵循此方法。（下图仅为示意）

所以我们的栅格化系统为（30+20）*24-20=1180px

比例

这是一个重要的问题，极大的帮助我们确定字体和行高以及盒子的宽高。

对于字体和行高的比例，大多数也会存在难以统一，甚至可以用杂乱来表示。我曾经在sohu的时候见过同一个新闻列表，14px的宋体，行高居然有22px，23px，24px，25px，27px。设计师的马虎可能是一方面，另外一方面在长达1年的配合中，我竟然发现他并没有这样一个概念，这种细节基本上就是凭感觉。因为在设计这些文字的时候，内心并没有一个“理性”的方法，而是依赖于专业的背景和当时的感觉。和栅格化一样，我们应需要一个方法，一个比例或者几个比例在不同的场景下应用。我推荐1:1.5和1:2的比例（如果你有一个你自己的比例请留言，谢谢）。我本身并不是设计专业，但我能保证这两个比例是一个大多数人都会认为是好的比例。因为：

这是现成的设计“大师”推荐的比例。如果你是果粉的话，基本也会喜欢1:1.2。

所以，当实际字体和行高的时候推荐比例1:1.2；1:1.5；1:2。

我们要如何确定网页中最大的盒子的大概宽度是多少？然后在这个宽度中进行栅格化。现在在这里解释。以我们的用户客户端占比分辨率最大的1920*1080为场景，说说我们可以如何确定网页的宽度。

还是寻找一个大家觉得“好看”的比例作为方法，如果是16:9的比例。那宽度大概是1080px；这个比例又可以赢得果粉的青睐了，因为：

而且16:9被大量的采用到了屏幕的尺寸中，最开始的宽屏显示器。所以这个比例很可能一直在你的生活中陪伴着你。PC显示器，14寸笔记本，手机，电视……

另外的主流比例是4:3。比如1024*768已经大多数的电视信号源比例。如果你采用这个比例，那么页面宽度就是1440px基准。

根号2也是一个“好”的比例，所有的标准纸张的宽高都是这个比例，如果你手边有A4纸的话，你现在就可以按照下面的方法去确认一下。按照这个比例的话就是1357px为基准。

大概认知度最高的比例就是黄金分割比了。

黄金分割奇妙之处，在于其倒数为自身减1，即：1.618的倒数为0.618 = 1.618 – 1

1.618倍和0.618倍

我们会发现有很强艺术背景的人很容易就会找到这个点（或者附近的位置），但是其他人就难以找到。当我看到下面的图的时候，简直是不可思议。

还有一些比例你可以尝试，比如1.43:1，这个是IMAX的比例。比如7:5，这个是5R相片的比例。

上面所说的所有方法，就方法本身而言可能会引起诸多专业人士的挑战，但是从一致性的角度来讲我们需要在一个范围内统一设计方法。从我所从事的职业来说，理解设计师的设计原理会让沟通更加顺畅，减少更多的细节沟通，并且可以制作出更多复用性更强，代码更优雅的web。

附：页面的留白也是有比较“理性”的方法来设计的。如下图：

期待讨论，期待赐予“理性”的设计方法。

腾讯ISUX (http://isux.tencent.com/20984.html)

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!