百木园-与人分享,
就是让自己快乐。

响应式设计落地教程

响应式设计概念自2010年提出以来,经过十多年的发展与普及,在我国已经有超30%的占有率,且正在以每年5%的速度,逐渐取代传统静态布局网页。经过断断续续近两个月的时间,我把自己在多年产品设计中积累的经验,整理分享如下。本文将从实际应用角度,介绍响应式设计思路及方法,供产品和设计师同学参考。

一、适用范围

是不是所有的web端产品都需要响应式设计呢?且看分析。

1.1 响应式设计的意义

响应式设计之所以会成为主流趋势,是因为从各利益相关者角度,皆具有极大的优势。

从公司角度:一次开发成型,节省开发和运维成本,同时能提升品牌一致性。

从产品角度:在不同的用户设备上,保持一致性的使用体验,输出稳定的产品价值。

从用户角度:不限制设备,不限制使用时间和条件,使用更加便捷。

1.2 网页布局设计的分类

按照网页对分辨率的适配程度,把布局设计区分为三类。

A. 固定布局设计

实现方法:内容宽度固定,布局不根据设备分辨率改变。

设计方案:出一套设计方案,以像素做单位。

B. 自适应设计

实现方法:前端写几套代码对应不同类型设备(如pc端、平板、手机),通过检测视口分辨率,来判断当前访问的是哪种设备,从而显示对应的代码。

设计方案:先为每类设备分别出一套设计,然后在一类设备的分辨率范围内指定元素的兼容方式;同一类设备的分辨率差异较小,因此兼容方式相对简单。

C. 响应式设计

实现方法:前端只写一套代码,通过媒体查询,指定不同分辨率下页面如何显示。

设计方案:通常需要确定一套主设计方案,然后针对不同分辨率指定布局及元素的兼容方式。

注意:

①B和C中,自适应和响应式只是归纳叫法,后文中提到的前端布局方法并不一一对应。做一个多分辨率适配产品时,前端布局通常需要多种方法结合,比如最常见的自适应+流式布局的结合。

②很多分享提到,响应式设计是指“一套设计方案,适配所有设备”,这种说法并不完全正确。响应式设计的核心是确保用户体验一致,当产品功能和交互较为复杂时,设计师可能需要输出多套设计方案。

1.3 各种布局的特点及适用范围

通过以上分析,显然不是所有的web端产品都需要响应式设计。应根据产品性质、用户设备、产品使用场景、公司资源(人力配置、时间预算、资金预算)等因素,合理选择产品设计方案。

二、屏幕断点

根据产品设计需要,人为地把屏幕分辨率划分出多个临界点,这一系列临界点被称为屏幕断点。

2.1 分辨率占比统计

下图为百度统计的web端分辨率占比,可以看出占比较多的分辨率有:1920、1536、1366、1440、1600等。

下图为百度统计的移动端分辨率占比,可以看出占比较多的分辨率有:320、414、375、320等。

2.2 各大平台制定的屏幕断点

微软的屏幕断点:

微软设计文档中,划分的颗粒度较粗,仅将分辨率分为小、中、大三段。

Bootstrap的响应式断点:

极小设备portrait phones(576px,默认)、小型设备landscape phones(≥576px)、中型设备tablets(≥768px)、大型设备desktops(≥992px)、超大设备large desktops(≥200px)。

Ant design 的屏幕断点:

屏幕断点划分为320、576、768、992、1200。

2.3 断点的应用示例

以下这段代码,通过媒体查询的方式,指定了不同分辨率下字体大小的变化。这段代码对应的布局方案中,屏幕断点是1024,1100,1280,1366,1440,1680,1920。

通过以上可以看出,屏幕断点并不是固定的。在产品设计中,可参考成熟设计规范中的断点,也可根据实际需要定义自己的屏幕断点。一般可通过用户调研和市场调研,确定目标用户所使用的主要设备,以此来定义屏幕断点。

三、自适应设计的实现方法

从实现技术角度,弹性布局、自适应布局、流式布局、响应式布局、网格布局,为多端适配提供了可能性。这部分前端开发的知识,感兴趣的同行可自行了解。从技术实现的核心,可以总结出以下6种设计手法。

3.1 调整大小

3.2 重新定位

3.3 重新排列

3.4 显示/隐藏

例如在移动端,把一部分功能隐藏起来,并通过点击以浮层等方式显示。

3.5 替换

例如在移动端,把导航菜单替换为汉堡菜单,把列表替换为卡片等。

3.6 改变架构

例如在电脑端为左右布局,在移动端改变为多级页面。

其中,前三种多用于屏幕断点内响应,后三种多用于屏幕断点间响应。

四、设计方案落地

4.1 扩展策略

在设计方案实施过程中,通常先确定基准分辨率,作为设计尺寸输出设计方案,再扩展到其他分辨率。分辨率扩展时遵循的策略,一般有以下3种。

优雅降级:优先考虑PC端,其核心是追求产品完美表达,再降级适配到限制更大的移动端设备;

渐进增强:优先考虑移动端,其核心是保证主要功能的完善性,再做增强扩展,目前业界认可度较高;

用户设备优先:这是我本人在工作中总结出的一种方法,针对自己的产品,如果可确定目标用户使用的设备中,某分辨率占比较多,我们可以以此为基准分辨率进行设计,再向其他分辨率扩展。

4.2 三种典型页面框架

上下布局:

顶部为导航,导航以下为内容区。在C端产品或内容型网站中较为常见。

T型布局:

一般顶部为最高层级菜单或跳转链接,左侧为二级导航,同时也是核心业务相关的导航。一般用于B端后台类产品、工具类产品、或架构较为复杂的其他产品。

左右布局:

一般应用于产品框架较为扁平,但导航层级较多的情况。可与以上两种布局互相转换。

4.3 T型框架的响应式设计过程

T型布局基本包含了其他两种布局的属性,故以T型布局为例,详细介绍响应式设计落地实操方法。

A. 框架层响应

与设计分辨率对比,其他断点的扩展分别使用了以下方法:

  • 较大分辨率——使用的自适应手法:调整大小;
  • 较小分辨率——使用的自适应手法:调整大小、显示/隐藏、替换;
  • 更小分辨率——使用的自适应手法:改变架构、替换。

B. 内容区响应

①栅格布局:布局经过严格计算,适合大部分B端后台类页面。

可以看出在栅格响应式中,栅格的宽度、列数,以及每块元素所占的列数,都会根据分辨率的变化而变化;通过媒体查询的方式,定义每个断点对应的列数和元素所占的列数;其核心依然是上面提到的6种方法。

②流式布局:内容区是卡片式流,如图片、视频等。

这类布局中,卡片宽度用百分比表示,并设定最大最小尺寸,临界宽度后改变个数;外边距宽度(图中蓝色部分)、内边距宽度(图中橙色部分)根据设计表达需要,可以改变也可以固定。瀑布流等不规则布局,涉及到定位问题,但基本设计理念一致。

③针对断点单独设计:应用于对视觉表达要求极高,或布局不规律的页面;本质同自适应布局原理。

4.4 设备差异化交互响应

总结

在设计方案落地过程中,首先调研用户使用的设备,据此制定出屏幕断点;筛选出一个典型的分辨率,在该分辨率下输出设计方案;然后确定如何向其他断点扩展,最后形成一整套响应式设计方案。

给作者点赞,鼓励TA抓紧创作!


来源:https://www.woshipm.com/pd/5561072.html
本站部分图文来源于网络,如有侵权请联系删除。

未经允许不得转载:百木园 » 响应式设计落地教程