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

本文不适合采用天才设计（Genius Design）方法的人士。

有一种“奇怪的”现象会经常的看到“很多设计师没有办法清楚的跟其他人解释他们是如何设计的，越细致的地方可能越是如此。比如，这个菜单的宽度为什么是200px？250px或者190px是否可以？图片的尺寸为什么是278px*196px？如何确定网页的宽度？“

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

希望通过此文可以交流关于栅格化和盒子比例的设计方法。

栅格化

对于网页的宽度，设计师之间基本上比较容易达成共识，比如：950px、960px、1000px、1190px、1200px。但是如果接下来让每一个设计师设计一个左右布局的版式，左边是一个树形菜单，右边是主要内容区域。那么可能会有很多结果。但是这些结果基本上是比较接近的。如果这些设计师都服务于一个品牌下的话，这种情况并不是一个好的事情。会给人以没有一致性的感觉。

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

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

每一个界面单独呈现的时候，并不会有不和谐的感觉，但是作为一个产品或者品牌下的一员，这种情况就会带来负面的影响。这种情况可能因为四种情况产生：1.宽度没有理论基础，凭借自身多年的经验取得了一个方便记忆的整数；2.有自己的设计方法，但是一个团队的下的设计师没有统一这个方法；3.设计的时候没有查看已有的类似设计；4.认为对方的（已有）的宽度不适合。

如果大家遵守一个栅格化的设计方法（希望您也可以贡献其他的方法）那么这个问题将会迎刃而解。

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

栅格化并不是一个新的概念，大家关注的点往往是他表面的950、960和1190。左边的三个数据的核心是一个24等分的栅格系统。可以被轻松的2等分、3等分、4等分、6等分、8等分、12等分，还可以做到1:2、1:3、1:5、2:4、1:7、3:5的不对称分割，并且可以精确到像素。由于3:5和3等分的需求，所以[3,8]得到了24这个结果。

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。

科普结束。

虽然A的值可以变成“任何”一个值，但有观点认为栅格化仍然是不太适合弹性布局。因为弹性布局的关键在用百分数单位来替代像素的单位（由于display:flex尚未成为Candidate Recommendation不适合大规模商用），用百分数来表示无法整出100的分割方案。就算是像6等分这样的诉求，每一份为16.66%，在视觉上也感知不到1像素级的差别。并且还可以转变为50%的33.33%保持对称和1像素级差别的感知。

好像如果在界面中有5等分的需求，整个栅格化系统将变得复杂[3,5,8]，也就是120等分。但其实并不需要如此，因为i并没有改变，只是把a缩小，但对于24等分的下的组合并没有产生变化。所以只需要设置每个A为20%，然后每个A的右测内边距为10即可以融入原来的24分的栅格化系统。

或者换一种更加容易理解的话语来描述栅格化：“栅格化是通过确定等分的单位宽度以及单位宽度之间的间距，把单位宽度进行组合的一种排版方式。”（这句是我自己总结的，求探讨）

板式的变化越复杂，栅格化系统越复杂，就像这个系统最开始被设计的时候：64*36=2304。

在实际操作中，推荐24的栅格化，插入5等分，i＝10，最大宽度1430px，最小宽度为950px。CSS采用百分比。

在设计自己产品的栅格化系统大致可以采用下面的流程：

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

其次确定页面大概的宽度（如何确定在“比例”的部分会详细说明），暂时采用1200px。

然后根据版式的预见性，确定模块和模块之前是否有清晰的“间隔”，这个间隔大概是多少？10px？15px？20px？个人认为认可设计方法都有一个目标是效率的提升，所以个位数个人建议是0或者5的话，方便计算，记忆和检验。当然你也可设置其他的数字，给自己挖坑。

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

1200px可以被24整除，所以W=1190px。

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

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