网页设计中栅格设计

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

根据需求选择最佳客户旅程分析平台

越来越多的营销人员和客户体验专业人士正在寻找最佳的客户旅程分析平台,以便在个人层面上大规模地了解并与个人客户互
14 sec read

什么是 Customer Journey Analytics…

如果您发现自己在问“什么是客户旅程分析?”,那么您并不孤单。客户旅程分析是指客户与多个渠道之间以及随着时间的推
4 sec read

什么是In-DBMS Analytics?

多年来,数据分析在某种意义上一直是一种”移动”的体验。企业将他们想要分析的数据从数据库
0 sec read

发表评论

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