13964452023
响应式设计概念自2010年提出以来，经过十多年的发展与普及，在我国已经有超30%的占有率，且正在以每年5%的速度，逐渐取代传统静态布局网页。经过断断续续近两个月的时间，我把自己在多年产品设计中积累的经验，整理分享如下。本文将从实际应用角度，介绍响应式设计思路及方法，供产品和设计师同学参考。
响应式设计之所以会成为主流趋势，是因为从各利益相关者角度，皆具有极大的九游娱乐优势。
从产品角度：在不同的用户设备上，保持一致性的使用体验，输出稳定的产品价值。
实现方法：前端写几套代码对应不同类型设备（如pc端、平板、手机），通过检测视口分辨率，来判断当前访问的是哪种设备，从而显示对应的代码。
设计方案：先为每类设备分别出一套设计，然后在一类设备的分辨率范围内指定元素的兼容方式；同一类设备的分辨率差异较小，因此兼容方式相对简单。
实现方法：前端只写一套代码，通过媒体查询，指定不同分辨率下页面如何显示。
设计方案：通常需要确定一套主设计方案，然后针对不同分辨率指定布局及元素的兼容方式。
①B和C中，自适应和响应式只是归纳叫法，后文中提到的前端布局方法并不一一对应。做一个多分辨率适配产品时，前端布局通常需要多种方法结合，比如最常见的自适应+流式布局的结合。
②很多分享提到，响应式设计是指“一套设计方案，适配所有设备”，这种说法并不完全正确。响应式设计的核心是确保用户体验一致，当产品功能和交互较为复杂时，设计师可能需要输出多套设计方案。
通过以上分析，显然不是所有的web端产品都需要响应式设计。应根据产品性质、用户设备、产品使用场景、公司资源（人力配置、时间预算、资金预算）等因素，合理选择产品设计方案。
根据产品设计需要，人为地把屏幕分辨率划分出多个临界点，这一系列临界点被称为屏幕断点。
下图为百度统计的web端分辨率占比，可以看出占比较多的分辨率有：1920、1536、1366、1440、1600等。
下图为百度统计的移动端分辨率占比，可以看出占比较多的分辨率有：320、414、375、320等。
以下这段代码，通过媒体查询的方式，指定了不同分辨率下字体大小的变化。这段代码对应的布局方案中，屏幕断点是1024，1100，1280，1366，1440，1680，1920。
通过以上可以看出，屏幕断点并不是固定的。在产品设计中，可参考成熟设计规范中的断点，也可根据实际需要定义自己的屏幕断点。一般可通过用户调研和市场调研，确定目标用户所使用的主要设备，以此来定义屏幕断点。
从实现技术角度，弹性布局、自适应布局、流式布局、响应式布局、网格布局，为多端适配提供了可能性。这部分前端开发的知识，感兴趣的同行可自行了解。从技术实现的核心，可以总结出以下6种设计手法。
在设计方案实施过程中，通常先确定基准分辨率，作为设计尺寸输出设计方案，再扩展到其他分辨率。分辨率扩展时遵循的策略，一般有以下3种。
优雅降级：优先考虑PC端，其核心是追求产品完美表达，再降级适配到限制更大的移动端设备；
渐进增强：优先考虑移动端，其核心是保证主要功能的完善性，再做增强扩展，目前业界认可度较高；
用户设备优先：这是我本人在工作中总结出的一种方法，针对自己的产品，如果可确定目标用户使用的设备中，某分辨率占比较多，我们可以以此为基准分辨率进行设计，再向其他分辨率扩展。
一般顶部为最高层级菜单或跳转链接，左侧为二级导航，同时也是核心业务相关的导航。一般用于B端后台类产品、工具类产品、或架构较为复杂的其他产品。
一般应用于产品框架较为扁平，但导航层级较多的情况。可与以上两种布局互相转换。
T型布局基本包含了其他两种布局的属性，故以T型布局为例，详细介绍响应式设计落地实操方法。
可以看出在栅格响应式中，栅格的宽度、列数，以及每块元素所占的列数，都会根据分辨率的变化而变化；通过媒体查询的方式，定义每个断点对应的列数和元素所占的列数；其核心依然是上面提到的6种方法。
这类布局中，卡片宽度用百分比表示，并设定最大最小尺寸，临界宽度后改变个数；外边距宽度（图中蓝色部分）、内边距宽度（图中橙色部分）根据设计表达需要，可以改变也可以固定。瀑布流等不规则布局，涉及到定位问题，但基本设计理念一致。
③针对断点单独设计：应用于对视觉表达要求极高，或布局不规律的页面；本质同自适应布局原理。
在设计方案落地过程中，首先调研用户使用的设备，据此制定出屏幕断点；筛选出一个典型的分辨率，在该分辨率下输出设计方案；然后确定如何向其他断点扩展，最后形成一整套响应式设计方案。
服务热线 13964452023 