响应式网站页面设计有哪些布局方式呢？

时间：2024-02-12 17:05:02 | 来源：网站运营

时间：2024-02-12 17:05:02 来源：网站运营

响应式网站页面设计有哪些布局方式呢？：希望我的文章可以帮到你吧！

近年来，市面上出现了许多新型设备，从智能手表到超宽屏电视，设备的屏幕尺寸、交互方式都在不断地变化。人们已经习惯在多个设备之间进行切换，多屏互动成为日常生活中必不可少的一部分。

「响应式设计」可以为不同设备的用户提供更好的视觉呈现与体验，越来越多的设计师与开发工程师采用这个技术，「响应式」已经成为多屏体验设计的必需品，用“大势所趋”来形容也不为过。

01「 什么是响应式?」

响应式的由来

过去，网页设计大多都是定制化的，只需要考虑适配主流设备的屏幕尺寸，分别定制一套设计方案就能满足需求。

但是，一旦有新的屏幕尺寸出现，现有页面就有很大机率会出现适配问题，让用户体验大打折扣。（如: 在小屏设备打开了一个仅适合在大屏设备浏览的页面）

显然, 基于一个固定尺寸对网页进行设计已经无法满足用户设备多样化的需求。理想的情况是为每一个设备都定制设计方案, 但这对大多数网站来说都是不切实际的, 因为实现成本太高。

2010年5月，著名网页设计师Ethan Marcotte提出「响应式布局」,即一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

响应式是为解决移动互联网浏览需求而诞生的, 大大地解放了设计师与开发工程师的劳动力，这一概念的提出迅速引起了业界的广泛关注。

直至今天，依然有很多设计师使用「响应式」解决多屏设计的适配问题，甚至运用到跨屏产品的创新体验当中。

响应式的定义与好处

「响应」就是系统对于外部变化的反馈跟适应，「响应式」就是系统做出这种反馈所依据的方案与策略。

对于一个网页而言，「响应式」响应的就是媒介与视窗的变化，响应的结果在视觉上表现为: 页面在不同媒介、不同视窗下会有不同的布局结构、版式设计、不同数量的信息展示等。

这个定义有点抽象, 给大家举个例子:

如上图,随着视窗的变化,页面有着不同的呈现,这就是通过响应式实现的。

判断一个网站是不是响应式，只需要用鼠标拖动边框，看看是否会产生响应变化。

响应式的好处是能实现一站多屏使用，实现和维护的成本比较低, 更重要的是能让用户通过不同的设备访问都能获得最佳的用户体验。

响应式的实现原理

响应式策略如何制定是由设计师来主导的, 所以, 设计师需要深入了解实现原理,这样有利于与开发工程师高效地协作。

- 断点

指页面布局发生变化的节点。设计师可以根据业务需求,定义不同断点区间下的视觉呈现。

- 媒体查询

媒体查询是开发工程师实现「响应式」的一个方法,「媒体查询」能在不同的条件下调用不同的样式，使页面在不同设备下达到不同的展示效果。

设计师需要设置好「断点」,而开发工程师需要通过「媒体查询」快速判断设备屏幕尺寸在哪个「断点」区间内, 然后展示对应区间的视觉样式, 如下图:

02「什么是栅格？」

栅格的定义与好处

网页的栅格就是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

在日常的设计工作中，我们常会用「参考线」让页面元素对齐，「栅格」其实也是一个帮助我们规范网页排版的好工具。

使用栅格有很多好处。除了能让页面设计更有规律、好看之外，还能作为全站设计遵循的框架与标准，减少设计决策成本，也便于团队协作。

从开发角度看，栅格能保证布局的一致性和可复用性，降低了设计师与开发工程师的沟通成本，可以提升效率；从用户角度看，栅格能让信息的展示更清晰，提升用户的阅读效率与体验。

栅格的组成元素

- 网格

网格是构成页面栅格的最小单位，而桌面端我们一般用8作为网格的最小单位。

8能被大部分桌面端的设备分辨率整除，能保证页面放大或者缩小时还能保持清晰；此外，增加8px或减少8px在视觉上比较容易区分差异，这样能保证在响应决策时的成本不会太大。

- 栏/槽/页边距

栅格是由「栏」和「槽」交替分布形成的。

「栏」是摆放网页内容的区域，「槽」用来调节相邻两个栏的间距，把控页面的留白，栏和槽的宽度都以网格作为基本单位。

「页边距」即栅格宽度外的边距，也就是页面两边的留白，通常作为自适应的距离，例如：小屏设备和大屏设备之间做响应变化，就会改变页边距。

为什么要用栅格设计响应式？

页面要实现响应式有两个前提条件：

1.页面布局具有规律性2.元素宽高可用百分比代替固定数值

这两个条件刚好是栅格所具备的，设计响应式时使用栅格可以事半功倍喔！

03「 如何设计响应式？」

第一步: 选择响应式方案

做响应式之前需要评估团队现有的资源和能力, 选择合适的响应式方案。在《U一点·料:阿里巴巴1688UED体验设计践行之路》中提到「常见的三种响应式类型」,我认为概括得很到位：

- 类型1: 多个固定尺寸切换的响应式

基于核心用户的设备,选择典型的分辨率,分别定制出几个尺寸的设计方案,投射到相应的设备中。

这个方案能让一些尺寸相邻的设备可共用一套页面,但不是真正意义上的响应式,因为只考虑了特定尺寸的体验。

优点是不用考虑同一断点区域内的拉伸规则,基于现有的设计与开发流程就能完成网站搭建。

- 类型2: 为移动端、桌面端分别打造两套区间尺寸的响应式

评估网站用户的设备类型、屏幕尺寸、网站定位以及不同终端环境的用户使用特性,分别为移动端和桌面端打造两套独立的页面。

这个方案工作量较大且会影响体验的一致性。另外,不同设备之间的界限已经逐渐模糊(如大屏手机与小屏平板、大屏平板和小屏笔记本电脑),在划分断点的时候会变得很困难。

对于一些内容较为丰富的综合型的网站来说,这套方案是一个不错的选择, 能够较好地考虑到设备的使用环境和用户的操作习惯。

- 类型3: 跨端无缝体验的响应式

从桌面端到移动端，覆盖所有用户的设备尺寸,能兼顾不同类型设备的交互行为差异,保证用户体验的一致性。

这套方案需要考虑不同设备的操作差异与各断点区间的内容如何进行适配。

跨端无缝体验的响应式对设计师与开发工程师的能力都提出了更高的要求,有很多难点需要攻克，如：核心业务的呈现、设计体验、跨端交互、页面性能等。

第二步: 选择断点与响应区间

设计师输出几套设计稿, 取决于采用哪一种响应方式。确定了响应方式,还需要根据目标用户的设备屏幕尺寸设定断点。

如果需要做一个全新的网站, 但无法获取目标用户的设备屏幕尺寸,建议可以查看一下行业内哪些尺寸的占比是比较多的,可以用占比多的尺寸作为断点(如:桌面端的屏幕尺寸占比前三分别是:1920*1080px、1366*768px、1440*900px)。

推荐大家阅读谷歌Material Design设计手册，里面有很多网站搭建的设计原则,也包括了主流设备的常用断点区间。




第三步: 思考布局与栅格

- 响应式设计一般从大屏往小屏做

我的个人习惯是从桌面端着手设计响应式,因为桌面端的信息是最多的,往移动端适配会比较流畅，就像我们平时做设计的时候,会先思考页面信息最多、最全的情况。

- 响应式常用布局

弹性布局以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度, 可以理解为页面中的元素不是固定尺寸的,而是会进行等比缩放的。

混合布局与弹性布局比较类似,只是采用了像素和百分比两种单位作为页面单位,也就是页面中部分的内容可以设置为固定尺寸,其余部分还是根据设备视窗的变化等比缩放。

- 响应式布局调整

在各个断点区间，我们都可以赋予该区间特有的视觉呈现。常见的有：内容增减、布局调整、样式调整。

内容增减某些内容在大屏端可以呈现得比较好，但到小屏端的体验会非常不好，可以选择把这些内容在小屏端隐藏掉。

布局调整比较常见的是模块的排列顺序与数量的变化，如：在桌面端一行展示5个模块，大屏移动端一行展示3个模块，而小屏移动端则变为一行展示1个模块。

样式变更针对不同的断点区间设计不同的样式，如: 在桌面端我们可以把导航栏信息展示完全，但是到了移动端，由于视窗变小，需要把信息收起，点击侧边栏才能展示完全，如下图:

- 响应式常用栅格

响应式常用「12栅格」或「24栅格」，也就是纵向有12栏或24栏。

12等分的栅格在前端开发开源工具库Bootstrap与Foundation中广泛使用，适用于业务信息较少，信息体积较大的页面设计。

24栅格变化更加灵活,适用于业务信息量大，信息分组较多，信息体积较小的页面设计。

- 设计灵感与自测

推荐大家使用everysize，它可以把响应式网站各区间的设计很直观地展示出来。一方面，可以学习一下优秀响应式网站的多屏信息处理，另一方面，可以测试自己做的网站效果。

第四步: 确定内容占比与排版

把框架定好了,接下来在划分好的区域内进行内容排版即可，就不展开说明了。

第五步: 制定响应策略

完成设计稿后,可以把响应策略制作成如下表格，在页面中标明相关元素的变化规律, 便于与开发工程师以及团队其他设计小伙伴进行沟通。

END

在文章的最后我为大家整理了一些常用工具以及实战总结，希望能帮助大家快速上手设计响应式吧！请点赞 / 在看 / 收藏三连喔，我们下期见！




Bootstrap优站精选https://www.youzhan.org/这里有海量的响应式网站,可以上去找找灵感

Everysizehttps://everysize.kibalabs.com/把好看的响应式网站导入可快速生成各断点的页面呈现,可以学习页面布局，也可以把自己设计的网站导入Everysize测试效果

谷歌Material Design设计手册https://material.io/design/

Grid.Guide栅格平台工具http://grid.guide/这是一个在线生成栅格的工具,十分方便！预览了大概的效果后,可以在sketch中直接制作栅格

参考: 《U一点·料:阿里巴巴1688UED体验设计践行之路》流动法则与响应度量—1688网站的响应式设计这本书在微信读书APP可看这篇实战文章总结得很全面，响应度量很值得学习

参考: 《超全面！栅格系统及其在后台设计中的应用总结》https://www.uisdc.com/grid-system-and-application-in-background-design虽然写的是后台设计,但这篇文章总结的设计策略很实用

更多干货文章,请关注我的微信公众号: 喵小大的手记