赞助商
立即赞助

超全面总结!如何利用栅格系统做响应式设计?

UI设计3年前 (2021)更新 流光
2.3K 0 0

@UX-BOY :文主要与大家分享何用栅格系统完成后台页响应式设计,介绍响应式设计的思路与方法。

超全面总结!如何利用栅格系统做响应式设计?

一、什么是响应式?

按照本人的理解,响应式就是通过理的计方案配规范的术实现策略,使同一个 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 三部组成。

超全面总结!如何利用栅格系统做响应式设计?

△ 上下布局结构其对应的栅格系统

超全面总结!如何利用栅格系统做响应式设计?

△ 左右布局结构其对应的栅格系统

4. 根据实际业务内容确定盒子(Box)比例

超全面总结!如何利用栅格系统做响应式设计?

△ 下布局结构的盒子

超全面总结!如何利用栅格系统做响应式设计?

△ 左右布局结构的盒子

5. 确定响应策略

响应策略就当视窗(Viewport)发变化时,内区域的元素如何去响应,具体到我们当的栅格系统,就 Columns、Gutters、Margins 以及由 Columns  Gutter 组的盒子(BOX)四者的(主宽度)如何变化,以及这种变化之下我们页面的布局如何调整。

为了方便直观的向开发工程队的其它伙伴沟通,可以把这个响应策略制作成如下的表格,并在页面中标注说相关素的变化规律,供开发参考。

由于带左侧导航的响应式规则相对复杂,我先它为例跟大交流响应策略如何制定。

超全面总结!如何利用栅格系统做响应式设计?

△ 左右布响应策略表

如图,响应是以视窗最小宽度作为基本依据来制定宽度下 Columns、Gutters 与 Margins 响应策略,也是说 Viewport Min-width 是做出响应触发条件,视窗到个最小宽度,会触发该宽度下预设页布局,而布局都是在该宽度下最佳布局,也是此,响应才会在各复杂分辨率条件下都能用户比较好体验。

每个视窗宽度的最小值是触响应的关键值,因此我们给用触的关键值个名字叫「Breakpoint」,每个 Breakpoint 触一种响应策略,而每个策略持续(持)的宽度范围就是图中绿矩形的范围。以图中二行矩形为例,该矩形代表的响应策略是:栏目数是8、水槽宽度16(SM)、页边距32、边栏收且仅展示图标,当点击边栏展开图标时边栏以 Push 的方式展开,该策略触的 Breakpoint 是768,持范围是577~768。也就是当视窗宽度缩放至768时,栏目数量由上一级的12变为8,水槽宽度由24变为16,边导航由完展开状态自动收文字部分,仅留图标,持关键数值不变,直到视窗宽度达到另一个Breakpoint。需要特殊说明的是,一行矩形中0~576(Min&Fixed)个范围的视窗宽度是固定的,也就是在该套响应策略中,页面最小响应到576的页面宽度,当视窗到达个宽度时,浏览器视窗进一步缩小,因为当页面宽度比它还小时已经无法有效展示数据,所以进一步的缩放是毫无意义的。

左右局响应策略动态演示

考虑到 gif 被压缩显示效果不理想,所以我做一小段视频来帮助大家更的理上述响应策略在际页面中何挥用。视频链接→https://v.qq.com/txp/iframe/player.html?vid=w0711l8yewc

左右局响应策略标注

超全面总结!如何利用栅格系统做响应式设计?

于上下布局后台系统我们根据内容区域(Container)宽度定义不,可以把它们分为两类:

内容区域定宽后台系统(Fixed-width Container)

内容区域定宽是指内容区域在组视窗宽度区内,都会设定个最大值(Max-with),内容区域宽度小于最大值时,区域内元素会响应视窗变化;到最大值后,内容区域不再响应视窗变化,而是宽度保持该最大宽度值不变,此时我们过增加页两侧margin值来响应视窗变化。Flex Margin 是应此情况动态页边距。

超全面总结!如何利用栅格系统做响应式设计?

上下布局响应策略表(内容区域定宽( Fixed-width Container ))

超全面总结!如何利用栅格系统做响应式设计?

容区域宽流式(fluid-width Container)

容区域宽流式(fluid-width Container)的后台系统,它的容区域(Container)距离页面两侧的页边距 Margin 是定值,因此视有多大容区域就展示多大。

六、问题

1. 后台系统必须做成响应式么?

并不是必须的,是否要做响应式主要是根据后产品面向的用户来定的。如果是公内部使用的系统,且员工配备的面备都是有统一的辨率,就可以不做响应式;如果是面向全网用户的后产品(比如淘商家的后管理系统,阿云的控制)或公(部门)内部的面备并没有统一的辨率规格,那就需要做成响应式。当然了,更实际的环中是否做响应式还有术实现、间、人员成本等各方面因素的考虑,有为了尽快的让业运营起来,后系统会做的比较「简陋」。

2. 为什么栅格系统没有适配到移动端的分享?

因为后管理系统的使用景主要是工作间在面备上使用,由于庞杂的数据内容在移动备上展示困难、操作不便,因而少有公会把后系统响应移动端使用,所以今说的后响应式仅针对面备屏幕。

3. 对于iMac4k、5K这类超高分辨率的屏幕如何做响应式设计?

对于左右布局的后系统,实际上它是全屏展示的,也就是屏幕有多大就展示多大,因而 iMac 的响应策略也是按照左右布局响应策略表的策略来响应。

对于上布,容区域定宽的后台系统,iMac 的响应策略使上布响应策略表里的策略来响应即可;

于内容区域宽度流后台系统,iMac 响应策略可以参考左右布局响应策略表来处理栏目、槽变化,页边距保持定值即可。

4. 在以8为原子单位的栅格中,Margin需要按8n的规律变化么?

能以8n规律变化是最好,如法做到也可以使用其它数值。Margin 是页边距,主要作用是过留白将页内容区域与围环境隔离区分出来,从而突出内容;般我们会优先考虑内容区域匹配8n变化规律,安排完内容区域后剩余空自然成为页边距(margin)。

5. 响应策略制定的时机是什么?如何去制定?文中示例的策略表我可以借鉴套用么?

响应策略表般是在主要页设计完成,要交付开发实现时候来跟开发起商定。这块需要注意两:

果开始设计时就已确定页面是要具备响应式的能力,么最开始设计时就去跟开沟通,看他们现有技术是何来做响应式的,因为他们很有能是在用 Bootstrap、Foundation 类组件库来做开,而组件库一般有自己现成的响应规则,种情况下我们需要开他们的规则,让自己的设计匹已有的策略。当,果他们的规则并不能很满我们的业务需要,一般也是以在组件的基础上让开去修改整的。

响应策略表只对响应方式的结果的呈,这策略的制事实从设始执行时就去考虑的,从我人验讲,我一般会挑两类页面响应策略的研究与配,一控制台(Dashboard)页面,另一表单(Form)页面。优先规划这两页面的设,考虑他们各 Viewport 下如何布局如何展示如何缩变化,并且发沟通法,听取意见,制初的响应划,当这两页面设完,就可以范围的执行设。

文中示例的策略表是基于项目经验总结而来,有实际应用价值,可以借鉴。但更想做的是通过那个表希望跟大家享一种开发交流、沟通的方法和巧。实际工作中并非一定要做出那一个经过心计细致考虑的表,可能会找张纸画一画给开发就可以了,这块的重点是如何把计的想法更可视化更直观准确的传达给开发工程。所以那张表是启发而非标准。

超全面总结!如何利用栅格系统做响应式设计?

△ 控制(Dashboard)页面示例(素材图片作者:Coderthemes)

超全面总结!如何利用栅格系统做响应式设计?

△ 表(Form)页面示例

注作者的微信公众号:「UX设计诗」

超全面总结!如何利用栅格系统做响应式设计?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

后台系统中,存在大量的组件,合理的应用是做出良好产品的基本功。 本文梳理了常见的「选择」和「输入」,也算是自己长时间...
UI组件
@UX-BOY :关于栅格系统的文章不少,但鲜有专门针对栅格系统在后台设计中相关应用的文章。本文希望抛砖引玉,能引起更多同行...
栅格工具
一款 App 或 Web 产品,从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师,如果连「表现层...
图标
在今天,互联网的影响力与作用与日俱增,除了我们日常生活领域的改变以外,对于商业领域的渗透也见效颇丰。 越来越多的企业...
B端
今天跟大家聊一聊如何制定iOS的系统图标栅格系统的那些事。众所周知,在图标设计中都会使用统一的系统图标栅格系统。那么iOS...
App图标
栅格的前世今生 产品设计从理解用户到定义问题,再到探索方案并输出草图乃至视觉稿,每一个阶段都关系到一个产品的成败。而其...
ui设计
毕业两年来一直都做着 B 端产品的 UI 设计工作,参与过的后台产品设计面对的主要客户有公司内部、各大企业以及政府机构。工作...
B端产品
B端的响应式概念 第一步,我们简单讨论一下 B 端响应式是什么的问题。 虽然前面有写过网页响应式的分析,但是 B 端产品的作...
B端