怎样使用栅格系统做响应式设计

时间：2021.09.07作者：pg电子游戏浏览量：1785

一、什么是响应式？

响应式就是通过合理的设计计划配合规范的手艺实现战略，使统一个 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端的产品特征

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