网页设计中栅格设计

6 sec read

栅格设计系统又称网格设计系统,是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,已成为今日出版物设计的主流风格之一。栅格设计的特点是重视比例、秩序、连续感和现代感。 以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡,以便让信息可以更快速、更便捷、更系统和更有效率的读取;另外最重要的一点是,负空间的规划(即:留白)也是栅格系统设计当中非常重要的部分。

网页中的栅格设计

对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。

曾经流行的960栅格布局

由于上个世纪的PC分辨率都是1024*728,那时候手机互联网也还没有流行。网页在浏览器中打开的尺寸大概是974 x 650,考虑浏览器右侧有滚动栏17px,大部分网站选择使用960栅格设计,将网页设计程960px或950px。

追究起来为什么使用960,而不是使用其他数字,除了960比较接近全屏的呈现外,还有一个原因是960这个数字的本身。

960 = 2^6 * 3 * 5,经过排列组合,其可以行程26种不同宽度的组合。

对于前端开发人员来说,栅格系统的使用,给整个网站的页面结构定义了一个标准,大大提高了网页的规范性。在栅格系统下,页面中所有组件的尺寸都是有规律的可重用的,这对于大型网站的开发和维护来说,能节约不少成本。

但是并不是所有的网站都适合使用栅格化设计。

  • 企业类网站,比如引导APP下单类的,或介绍单一产品的。
  • 功能型网站,比如后台管理系统
  • 艺术类网站,设计的比较有特色的。

栅格化设计更多适合使用在有大量信息的页面,比如新闻类网站等。

参考资料:

设备的多样化带来的挑战

随着科技的发展,PC的分辨率越来越大,而移动互联网也将网页带进了小屏机的设计时代,以下为2017年12月份的用户浏览器分布情况:

屏幕分辨率 浏览量占比
1920×1080 12.58%
1600×900 2.26%
1440×900 3.74%
1366×768 5.13%
1024×768 2.31%
800×600 1.70%
640×360 1.76%
414×736 3.81%
375×667 5.48%
360×640 35.75%
320×568 1.57%
其他 23.93%

可以看到,屏幕宽度从最大的1920到最小的320,跨度非常的大,传统的栅格系统已经无法满足当前的需求。那么不得不考虑引入响应式设计,具体如何去做呢?

单独开发移动版页面

并不是每个网站都需要单独开发移动版,但是对于类似电商性质的网站,如果不做成单独的网站,那么不管是性能和体验都会非常的差。如果开发移动版本的网页,一般将宽度设为100%即可。

 采用定宽的设计

采用定宽的设计也非常的简单,只需要先确定想要兼容的最小分辨率即可。在需要兼容的宽度上确定页面的宽度,针对大分辨率的网页采用两侧留白即可。

另外,如果想要针对屏幕做更好的呈现,可以设计2-3种不同的定宽设计,根据屏幕的分辨率不同,加载不同的样式或内容。

采用自适应模式进行开发

自适应网页设计涉及的内容较多,在下篇文章中再做梳理。

打赏作者
微信支付标点符 wechat qrcode
支付宝标点符 alipay qrcode

优秀的产品经理/糟糕的产品经理

每个产品经理都希望自己时优秀的,而不是糟糕的。但如何定义是否优秀却没有一个统一的标准。最近看到了一片文章,中间
1 sec read

Paul Graham 的创业建议

描述创业的13句话 选择好合伙人 快速发布 让你的创意进化 (大多数创意来自实现过程) 理解你的用户 (许多成
19 sec read

享受性质量 HQ

为了支持非任务相关方面的用户体验研究,Hassenzahl等(2002)开发了一份评估享受性质量(Hedoni
3 sec read

发表评论

电子邮件地址不会被公开。 必填项已用*标注