2023-11-14 博博
作者：蓝蓝设计奥博
自适应与响应式设计的差异：
之前我们经常利用自适应布局的方式来解决多终端适配的问题。而响应式与自适应时常被混淆，为更清晰的理解这两种实现方式的差异，我们来概括一下它们之间的区别：
a.自适应布局特点：
根据设备分辨率的不同，分别为不同分辨率的屏幕进行布局定义，创建多个固定布局。这种适配方法需要根据不同使用场景设计及开发多套界面，且屏幕分辨率变化时，页面中的元素无法灵活的做适应，无论是从产品体验还是维护成本上看，都不算是高质高效。
b.响应式布局特点：
描述响应式最著名的一句话就是 “Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样流淌”。
响应式是基于同一套代码、同一套设计语言，能够兼容多尺寸、多终端设备的展示。在保障业务高效发展的前提下，制定一套在多终端间流转的设计规则，为用户提供更好的浏览体验。
响应式设计带来的好处：
a. 开发成本更低：一套代码
响应式的设计只需要开发一套代码，就可以兼容多种尺寸的终端，不需要开发单独的客户端版本，同一个客户端产品运行在不同尺寸的设备上，使用统一的后台系统，一次开发，多端生效。
b. 设计成本更低：一套设计
透过响应式制定了一套能在多终端流转的界面自适应设计方案，横向拉通页面以及容器布局的适配规则。一套设计规则高效适配多终端，解放设计资源。
c. 业务迭代更快：一次运营
响应式客户端产品，业务方在迭代过程中，会考虑多终端不同的使用场景、业务特性，基于同一个客户端、后台和运营系统。一次运营多端同步生效，保障业务发展效率最大化。
优酷的响应式设计策略：
参考网页产品响应式设计思路，让客户端产品内的页面框架、抽屉组件、坑位布局、样式元素等，能在既定的设计语言和风格的指引下， 跟随屏幕尺寸调整展示效果 。
实现一套代码适配所有尺寸变化及设计语言规范化、产品化和工具化，提升产研效能。
a. 响应式设计思路
响应式在多终端的适配上，不能只是粗暴的1比1迁移，我们需要保障体验的一致性，核心需要让用户的浏览体验是舒适的。
如何在不同尺寸与分辨率的屏幕下，有效的做展示？这就需要设计侧通盘考虑所有尺寸的屏幕，拉通不同宽高比例的设计规则，动态调整可见元素的布局（包括元素的列数以及尺寸等），在不同尺寸的设备上都能达到最佳显示效果。
b. 设计标准化建设
设计标准化是我们管理设计系统性的核心能力之一，我们透过抽离出框架层上影响视觉风格的原子，包括颜色、字号、间距、圆角、栅格、尺寸等使其工程化可控制。通过统一的协作语言对视觉原子进行描述定义，一处替换全端生效。
以前，设计师在针对视觉属性调整时，涉及到要修改的场景众多，点对点修改成本高；现在，通过设计标准化，我们把视觉样式进行工程化统一管理，实现的是⼀整套设计体系化的调整。
c. 持续不断的update优化
在设计标准化1.0时，我们针对统一化的视觉原子抽离做全局的控制，统一且高效。但随着业务的脚步跑的越快，我们也发现了应用上的受限与不足。
例如多终端响应式上，终端设备的不同、使用场景的不同，都会带来较大的差异。为了扩大设计标准化的覆盖面，我们进行了设计标准化2.0升级。
以间距为例：
我们按照手机为基准端，在映射到不同终端设备时可以根据设备的不同做展示的差异化映射；例如在手机上栏距为9，但在大屏设备如Pad上展示效果变为12；
响应式设计规范：
良好实现响应式的前提有两点：一是页面布局具有规律性，建立灵活的栅格布局基础；二是摆脱像素，容器按比例实现，不固定宽高；这两点本身也是栅格系统自身的特点，我们透过栅格化布局的设计系统为响应式适配打下良好的基础。
a.设计适配基本原则
定义响应式的设计规则时，我们除了遵循一些基础的布局原则外，还需要因应业务的属性去做结合，以下是优酷响应式核心覆盖的几个通用适配方法：
1）拉伸布局：
内容在屏幕显示区域内进行相对拉伸，以达到布局完整。这种实现方式成本低，在响应式中大量的被运用。
2）等比缩放：
内容在屏幕的相对位置进行等比例缩放，这种方式不会产生任何布局重构影响，适配简单。一般在带有图片显示场景中使用，需要注意图片素材放大后清晰度的问题。
3）扩展布局：
内容可灵活按照屏幕比例进行增加或减少、扩展为多行或多列等。采用此方案需要做数据源的补足，保证内容展示合理。
4）固定布局：
内容在横屏、竖屏状态下始终展示固定，不受任何设备及屏幕尺寸影响。
5）分栏布局：
充分利用不同设备、不同屏幕尺寸的差异化，通过分栏布局形式重新对内容展示做位置变化，进行整个屏幕更合理化的分配。此布局页面结构产生变化，需要重构UI框架，有一定的开发成本。
b. 不同终端的针对性调整
为了满足各终端用户的使用习惯，我们更进一步的探究各终端的用户画像及设备特性，思考各端差异化赋能和机会点。
1）以平板端为例：
手机为我们基准端，当它映射到平板端时，屏幕大小的差异特别明显，这时我们需要考虑如何合理的利用屏幕；
平板端拥有大屏幕尺寸的优势，还有多任务的差异化模式，我们需要针对同设备上屏幕比例切换做响应式适配，自动调整相对应的页面布局与元素。
示例：
手机端布局大部分是单、双列布局，但通过响应式适配映射，我们能根据不同的终端实现不同的页面变化布局，更好的利用了大屏设备的优势。
2）以车机端为例：
不同车机的屏幕尺寸多种多样，目前主流的屏幕分为横向屏幕比例、竖向屏幕比例两大类，所以车机应用需要兼顾横向、竖向两种屏幕布局，页面能够动态调整内容的显示，以满足不同尺寸设备的适配需求。
基于对用户观察模型的研究分析得出，用户使用手机距离约为30公分，但驾驶舱对车机屏幕的使用距离约为70公分，这时我们面对的不仅仅是屏幕大小、分辨率的差异，还有用户使用距离的差异。
我们在车机的适配映射上除了对功能的简化外，还针对展示上做了放大处理，界面元素大小需要达到手机基准端的2倍，才能更好的保障用户的易读与易操作的良好体验。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、用户体验公司、软件界面设计公司、软件qt开发、软件wpf开发、软件vue开发。
您可以选择一种方式赞助本站
支付宝转账赞助
