响应式设计落地教程.docxVIP

响应式设计落地教程 响应式设计概念自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端，其核心是追求产品完美表达，再降级适配到限制更大的移动端设备； 渐进增强：优先考虑移