首页

网页设计中,如何突破栅格的限制又保持协调?

周周

现如今,栅格已经几乎是所有网页设计的基础。这些隐形的线条创造出空间的节奏感和视觉的流畅感,他们是让网页变得更加和谐的基础。

但是,栅格存在的目的是帮你创造好的设计,当你开始逐渐适应栅格的存在,千万不要被它束缚住。你并没有必要100%地受限于栅格,偶尔打破栅格的设计可能会让你的设计更加抓人眼球。不过,想要打破栅格又保持网页的协调,是有技巧的,并非任何“破格”的设计都是好的。今天,我们来聊聊这个。

了解栅格系统

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

用心设计

屏幕快照 2016-01-03 5.54.05 AM.png

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

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

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

栅格化

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

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

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

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档