如何利用栅格系统做响应式设计

时间：2021.09.07作者：彩乐园浏览量：1825

一、什么是响应式？

响应式就是通过合理的设计计划配合规范的技术实现战略，使同一个 Web页面在各个终端（设备）差别区分率屏幕上都能有最佳的用户体验。

这里说是用户体验而不是视觉效果是因为用户体验包括了性能、交互、效率等多方面内容，也就是说，关于一个线上的响应式页面，我们不但要关注视觉上看到的，也要关注我们操作、使用时的感受，这些综合因素最终影响着用户使用后台系统时的效率与体验。

二、响应式响应的是什么？

响应就是系统关于外部变革的反响跟适应，响应式就是系统做出这种反响所依据的计划与战略。关于一个 Web页面，外部的变革是指媒介（Media）与视窗（Viewport）的变革，媒介指 Web页面运行在哪些设备的屏幕上（手机、平板、PC、Mac等），视窗指浏览器用来显示网页内容的窗口，也就是浏览器去掉标签栏、地点栏、工具栏之后显示内容的窗口巨细。所以关于一个 Web页面而言，响应式响应的就是媒介与视窗的变革，响应的结果在视觉上体现为页面在差别媒介、差别视窗下会有差别的结构结构、版式设计以及差别数量信息的展示。

三、响应式的目的是什么？

后台系统做响应式设计的目的：提高屏幕利用率，最大化操作效率。

提高屏幕利用率最简单的理解就是在大屏幕上显示更多内容，在小屏幕上通过数据筛选展示要害信息。一直以来各人普遍认为移动端碎片化严重，但实际上桌面端设备的区分率也是有着不太均匀的漫衍，而随着新设备的更新，更多高区分率屏幕不绝加入，这种碎片化的趋势会越创造显，因而要想利用好每一块屏幕，让差别区分率的用户都有好的体验，显然古板牢固的结构是做不到了。

后台系统的应用特性，决定了响应式在后台设计中具有很高的实用价值。后台系统有两大主要功效：检察与操作。检察主要是种种数据，是系统自动生成的内容；操作是需人工干预、人工决策的任务，检察的数据为操作提供了依据，而操作支撑了公司或部分业务的正常运行。所以后台系统设计最基础的目标之一是如何通过良好的数据展示资助用户提高操作、决策效率，而富足的展示空间显然是实现这一目标的基础，响应式设计通过为每个区分率设定合理的版式结构，使数据在每块屏幕上都尽可能展示的最佳。优化后的数据展示，资助用户更高效获取信息，从而提高了用户使用后台系统的效率与体验。

四、为何要利用栅格系统来进行响应式设计

响应式可以响应的前提有两点：页面结构具有纪律性；元素宽高可用百分比取代牢固数值，而这两点正是栅格系统自己就具有的典范特点，所以利用栅格系统进行响应式的设计是顺理成章的，也比较高效快捷，所以响应式与栅格化天生一对好伙伴。

五、利用栅格系统完成后台页面响应式设计的办法

1. 确立设计稿基准尺寸

设计稿基准尺寸是指我们从哪一个区分率开始设计，也就是我们新建画板时画板的尺寸应该是多大。而这个尺寸确定的主要依据是我们后台系统所面向的主要用户的屏幕区分率；我们分两大类情况来讨论这个问题。

如果我们的系统是给公司内部员工使用，由于公司批量采购设备的原因，公司内部员工的屏幕区分率往往会比较统一，这种情况下我们需要拿到这个数据，然后以它作为基准尺寸开始设计。因为虽然响应式设计的目标是让页面在每个区分率下都有最佳的体验，但实际开发中究竟保存损坏，设计还原很难100%，因而大大都情况下照旧基于基准尺寸的设计与开发，在用户端显示效果最佳、体验最好。

如果我们的系统是平台级面向全网用户，或者虽然是公司内部使用，可是并不可统计到内部员工屏幕区分率情况，就可以以1440*900作为基准尺寸开始设计。从统计数据来看，目前海内 PC端用户屏幕区分率排名前三的划分是1920*1080、1366*768、1400*900；1440的尺寸实际上是处于中间位置，如果以它为基准设计，最终向上向下响应适配后，相对误差最小，从而告竣用户体验的最大条约数。

2. 确定页面结构结构

页面的结构结构，是页面基本框架，后续的设计都是在这个大的框架下完成的，所以确定页面基准设计尺寸后，需要跟交互设计师或产品经理配合，凭据实际业务情况讨论确定页面结构结构。一般来讲，后台系统有两种最典范的页面结构结构：左右结构与上下结构。

上下结构的结构在古板网页中非经常见，而在后台系统中并不常用。这种结构的优点是切适用户认知，遵循用户从上而下浏览页面获取信息的习惯；贯串全屏的导航栏设计也使页面显得正式稳重，除却导航栏之后相对较大的空间也为内容展示提供了比较富足的空间。缺点是顶部一级导航受页面宽度限制，数量会比较局限，同时导航层级较深时，交互效率也不敷理想。

左右结构，拥有侧边导航的左右结构页面结构，是在后台系统中更常见的页面结构形式。侧边导航栏可以牢固也可以收起，相比照较灵活，同时文字横向排列的形式可以在竖向上展示更多内容，因此侧边导航比顶部导航能容纳更多一级内容，而层叠式的内容展示也使得一、二、三级导航内容关联更为顺畅，可扩展性也获得增强；由于侧边栏可以常驻在页面左侧，所以关于右侧内容的指示性也优于顶部导航，切换起来也越发便当。但同时，因为侧边栏的常驻，导致右侧内容区域空间被挤掉部分，所以相对上下结构的结构，左右结构的结构，内容区域空间会比较��；一般为了与页面其它区域做区分，导航部分会用更深的颜色、安排更多的图标和文字，这也导致了在视觉上左右结构的页面不敷平衡，会有左边重右边轻的感受。

3. 对内容区域建立栅格系统

凭据差别的结构类型，对页面内容区域建立栅格系统。关于一个利用栅格系统做响应式设计的页面来讲，主要有三大数值需要规范：Column、Gutter、Margin；关于 Column、Gutter 我们在内容中已经有很详细的介绍，不再赘述，而 Margin 是页边距，主要确定了内容区域距离页面边沿的距离，它漫衍在内容区域的两侧，主要作用是通过留白把内容区域与周围情况隔离出来，从而突出内容区域的显示，别的还可通过 Margin值来调解内容区域显示比例，使页面在视觉上有更好的泛起效果。所以一个用于响应式的栅格系统事实上由 Columns、Gutters、Margins 三部分组成。

上一篇 : 全方位带您了解C端和B端的产品特性

下一篇 : 如何让平面排版的条理更富厚？