有一种“奇怪的”现象会经常的看到“很多设计师没有办法清楚的跟其他人解释他们是如何设计的,越细致的地方可能越是如此。比如,这个菜单的宽度为什么是200px?250px或者190px是否可以?图片的尺寸为什么是278px*196px?如何确定网页的宽度?“
软件界面的设计师除了视觉本身以外,对于设计是否可以实现、大概以何种方式实现、规范可否被理解并且复制执行、设计实现的性价比与时间比等纬度都应有相当高度的认识。就像建筑设计师一样,他们一定很了解建筑材料以及如何建筑,虽然他们不会去亲自砌墙。:)
希望通过此文可以交流关于栅格化和盒子比例的设计方法。
栅格化
对于网页的宽度,设计师之间基本上比较容易达成共识,比如:950px、960px、1000px、1190px、1200px。但是如果接下来让 每一个设计师设计一个左右布局的版式,左边是一个树形菜单,右边是主要内容区域。那么可能会有很多结果。但是这些结果基本上是比较接近的。如果这些设计师 都服务于一个品牌下的话,这种情况并不是一个好的事情。会给人以没有一致性的感觉。
图1:一个产品站点,同样是980px的页面宽度,但是菜单宽度分别为:200px和245px