如何设计页面布局？

说说你对布局的理解？说说你是怎么进行布局的？你如何肯定页面宽度？可能不少同窗在面试的时候都会遇到问到此类和布局相关的问题。估计大多数同窗听到此类大方向的问题都是不知所措，最多只能说说以前写页面的一些经验之谈。ok，这篇文章，教你如何装逼给10分。

细思极恐的事情

---

有没有想过这样的问题？好比，这个菜单的宽度为何是200px？250px或者190px是否能够？图片的尺寸为何是278px*196px？如何肯定网页的宽度？越细致的地方越是如此。这是细思极恐的事情，若是有人问你这样的问题，你又该怎么回答？估计大多数人得回答都是，美工UI怎么设计怎么作了，或者是，字体图片到了这个位置就这么宽了…这种回答是至关不专业的。

软件界面的设计师除了视觉自己之外，对于设计是否能够实现、大概以何种方式实现、规范能否被理解而且复制执行、设计实现的性价比与时间比等纬度都应有至关高度的认识。就像建筑设计师同样，他们必定很了解建筑材料以及如何建筑，虽然他们不会去亲自砌墙。

那有没有一种方案，能够比较好得回答或者处理此类问题？固然有，那就是栅格化和盒子比例的设计方法

(图1)

栅格化

---

若是问你这么一个问题，让你设计一个PC端的页面，页面宽度多少比较好？可能有人会回答，950px、960px、980px、1000px、1190px、1200px。这多是以前作页面的一些经验之谈。那么在这个基础之上，再设计一个左右布局的版式，左边是一个树形菜单，右边是主要内容区域。那么可能会有不少结果。可是这些结果基本上也是比较接近的。看一下下面的两种状况：

一个产品站点，一样是980px的页面宽度，可是菜单宽度分别为：200px和245px

（图2）

另一个产品站点，一样是1200px的页面宽度，可是菜单的宽度分别为：250px、230px、200px

（图3）

每个界面单独呈现的时候，并不会有不和谐的感受，可是做为一个产品下的一员，这种状况就会带来负面的影响。这种状况可能由于四种状况产生：

1.宽度没有理论基础，凭借自身的经验感受取得了一个方便记忆的整数；

2.有本身的设计方法；

3.设计的时候没有查看已有的相似设计；

4.认为对方的（已有）的宽度不适合。

若是你们遵照一个栅格化的设计方法，那么这个问题会比较好的统一

先科普一点栅格化的基础。

栅格化并非一个新的概念，你们关注的点每每是他表面的950、960和1190。左边的三个数据的核心是一个24等分的栅格系统。能够被轻松的2等分、3等分、4等分、6等分、8等分、12等分，还能够作到1:二、1:三、1:五、2:四、1:七、3:5的不对称分割，而且能够精确到像素。因为3:5和3等分的需求，因此[3,8]获得了24这个结果。

（图4）

W ＝ A * n – i; A = a + i; i:被分割的区块之间的间隔（为了方便计算，大都为10px）

整个公示中，i和n同样是核心，再肯定i，便可肯定整个栅格化系统。当n ＝ 24, i = 10;假如A＝40，则W＝950；假如A＝50，则W＝1190；假如A＝60，则W＝1430。

（图5）

虽然A的值能够变成“任何”一个值，但有观点认为栅格化仍然是不太适合弹性布局。由于弹性布局的关键在用百分数单位来替代像素的单位，用百分数来表示没法整出100的分割方案。就算是像6等分这样的诉求，每一份为16.66%，在视觉上也感知不到1像素级的差异。而且还能够转变为50%的33.33%保持对称和1像素级差异的感知。已经工做过的同窗，应该遇到过像素眼的这么一类人…

用一种更加容易理解的话语来描述栅格化：栅格化是经过肯定等分的单位宽度以及单位宽度之间的间距，把单位宽度进行组合的一种排版方式。

（图6）

（图7）

（图中红色部分表示横向计算，蓝色标记是纵向）

在设计本身产品的栅格化系统大体能够采用下面的流程：

首先分析等份的复杂度，若是版式仅仅是4等份、3等份的话，12列的栅格系统就能够知足需求。若是有较多不等分的可能，那么仍是建议采用24列的栅格系统，如上图，这样你能够灵活的设置。

其次肯定页面大概的宽度，暂时采用1200px。

而后根据版式的预见性，肯定模块和模块以前是否有清晰的间隔，这个间隔大概是多少？10px？15px？20px？设计方法都有一个目标是效率的提高，因此个位数我的建议是0或者5的话，方便计算，记忆和检验。固然你也可设置其余的数字，给本身挖坑。

看一下下面的两个例子，比较形象的说明，页面宽度到底该怎么肯定：

（图8）

蓝色区域是10px（为了更好的展现，实际是空白）

1200px能够被24整除，因此W=1190px。（50 * 24 - 10 = 1190忘记算法的请看图4）

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

这里间隔稍大，设置为20px，若是目标是1200px左右的话，则W=1180；(3*400px-20px)若是是1000左右的话。W能够等于970px；(3*330px-20px)或者是1000px（3*340px-20px；

不管你怎么设计，为了栅格化是为了解决一致性问题，以及数据化界面设计。因此只要给本身的网站定制一个你们均可以接受的栅格就好，如上图，整个栅格就是 （30+20）* 24 - 20 = 1180

比例

---

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

对于字体和行高的比例，大多数也会存在难以统一，甚至能够用杂乱来表示。我曾经在sohu的时候见过同一个新闻列表，14px的宋体，行高竟然有22px，23px，24px，25px，27px。这种细节基本上就是凭感受。由于在设计这些文字的时候，心里并无一个“理性”的方法，而是依赖于专业的背景和当时的感受。和栅格化同样，咱们应须要一个方法，一个比例或者几个比例在不一样的场景下应用。我推荐1:1.5和1:2的比例。我自己并非设计专业，但我能保证这两个比例是一个大多数人都会认为是好的比例。由于：

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

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

如何肯定页面宽度

---

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

仍是寻找一个你们以为“好看”的比例做为方法，若是是16:9的比例。那宽度大概是1080px；这个比例又能够赢得果粉的青睐了，由于：

（PS：下面的解释涉嫌装逼，若有不适，谨慎观看！）

并且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相片的比例。

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

此文章内容来自 腾讯ISUX ，为了便于你们阅读，稍微作了修改。