"来源:| |MICU设计id: micudedesign "
相信很多伙伴在设计中总能遇到一些困惑。现在产品的屏幕尺寸和手机差别很大，一个横屏一个竖屏，信息量也不一样。今天，边肖获得了这种设计作品的授权。一起来看看吧！
提前收藏干货！微信官方账号改版后，推送不会按顺序显示。还是设为星标吧，每一条干货经验和方法都会被微信置顶！
作者:娱乐设计中心来源:AlibabaDesign
优酷设计师:
随着智能设备的不断发展，电脑、大屏手机、平板电脑、折叠屏手机、大屏汽车等大尺寸设备发展迅速。在视频娱乐产业成熟且竞争激烈的背景下，优酷多终端的设计是我们无法回避的话题。
为了更高效地服务于我们的产品和用户，保证质量，并跟上市场竞争的变化，我们需要制定一套适合多终端的响应式设计策略。
超30000+大厂设计师被授予星标。
适应性设计和响应性设计之间的差异；
之前我们经常用自适应布局来解决多终端适配的问题。响应性和适应性经常被混淆。为了更清楚地理解这两种实现之间的区别，让我们总结一下它们之间的区别:
A.自适应布局功能:
根据设备的不同分辨率，定义不同分辨率的屏幕布局，创建多个固定布局。这种适配方式需要根据不同的使用场景设计开发多套界面，而且当屏幕分辨率发生变化时，页面中的元素无法灵活适配，无论从产品体验还是维护成本来看，都不是优质高效的。
B.响应式布局的特征:
形容响应性最著名的一句话是“内容如水”，翻译成中文就是“如果把屏幕看成一个容器，那么内容就像水一样流动”。
Response基于同一套代码和设计语言，可以兼容多尺寸多终端设备的显示。在保证业务高效开展的前提下，制定一套在多个终端间流转的设计规则，为用户提供更好的浏览体验。
响应式设计的优势:
A.降低开发成本:一套代码
响应式设计只需要开发一套代码就可以兼容各种尺寸的终端，不需要开发单独的客户端版本。相同的客户端产品运行在不同大小的设备上，使用统一的后端系统。可以一次制定，多端生效。
B.降低设计成本:一套设计
通过response，制定了一套可以在多个终端流动的界面适配设计方案，横向拉通页面和容器布局的适配规则。一组设计规则有效地适应多个终端，释放设计资源。
C.更快的业务迭代:一次操作
响应式客户端产品，在迭代过程中，业务端会考虑多个终端的不同使用场景和业务特性，基于相同的客户端、后台和操作系统。多头运作一次同时生效，保证业务发展效率最大化。
优酷的响应式设计策略:
参考web产品的响应式设计思想，使页面框架、抽屉组件、坑布局、风格元素等。在客户端产品可以在既定的设计语言和风格指导下，根据屏幕大小调整显示效果。
实现一套代码适应所有尺寸变化和设计语言标准化、产品化、工具化，提高生产和科研效率。
A.响应式设计理念
多终端适配中的响应性不能只是粗略的1对1迁移。我们需要保证体验的一致性，核心需要让用户的浏览体验舒适。
如何在不同尺寸和分辨率的屏幕下有效显示？因此，需要在设计侧面板时考虑所有尺寸的屏幕，通过不同长宽比的设计规则，动态调整可视元素的布局，从而在不同尺寸的设备上实现最佳的显示效果。
B.设计标准化建设
设计标准化是我们设计系统管理的核心能力之一。我们可以通过提取框架层上影响视觉风格的原子，包括颜色、字体大小、间距、圆角、网格、大小等，使其在工程上可控。视觉原子由统一的协作语言描述和定义，一个地方生效。
以前设计师在调整视觉属性时涉及到很多要修改的场景，点对点修改成本高；现在通过设计的标准化，统一管理视觉风格，实现整个设计的系统化调整。
C.持续更新优化
在标准化1.0的设计中，我们全局控制统一的可视化原子提取，统一高效。然而，随着业务节奏的加快，我们也发现了应用中的局限性和缺点。
比如多终端响应模式，不同的终端设备，不同的使用场景都会带来很大的差异。为了扩大设计标准化的覆盖面，我们升级了设计标准化2.0。
以间距为例:
根据手机作为参考终端，映射到不同的终端设备时，可以根据不同的设备进行差异化映射；比如手机上条间距是9，但在Pad等大屏幕设备上显示效果变成了12；
响应式设计规范:
实现良好的响应性有两个前提:一是页面布局规则，建立灵活的网格布局基础；二是去掉像素，容器按比例实现，宽度和高度不固定；这两点也是网格系统本身的特点。我们通过网格布局设计系统为响应性适应打下了良好的基础。
A.设计调整的基本原则
在定义响应式设计规则时，不仅要遵循一些基本的布局原则，还要根据业务属性进行组合。以下是优酷响应式核心覆盖的一些通用改编方法:
1)拉伸布局:
内容屏幕显示区域相对拉伸，以实现完整的布局。这种实现成本低，响应广泛。
2)比例缩放:
内容屏幕相对位置的缩放不会对布局重建有任何影响，适配简单。一般用于有图片的场景，需要注意放大图片素材的清晰度。
3)扩展布局:
内容可以根据屏幕比例灵活增减，扩展成多行或多列等。该方案需要补充数据源，以保证合理的内容展示。
4)固定布局:
内容始终在横屏和竖屏状态下显示和固定，不受任何设备和屏幕大小的影响。
5)栏目布局:
充分利用不同设备、不同屏幕尺寸的差异，通过分栏布局再次改变内容显示的位置，更合理的分配整个屏幕。布局页面结构变化，UI框架需要重构，有一定的开发成本。
B.不同终端的针对性调整
为了满足每个终端用户的使用习惯，进一步挖掘每个终端的用户画像和设备特性，考虑每个终端的差异化赋能和机会点。
1)以平端为例:
手机是我们的标杆终端，映射到平板终端，屏幕尺寸的差异特别明显。这时候就需要考虑如何合理利用屏幕；
平板电脑的优势在于屏幕尺寸大，多任务差异化模式。我们需要对同一设备上的屏幕比例切换做出响应性的适应，并自动调整相应的页面布局和元素。
示例:
手机布局多为单双排布局，但通过响应式自适应映射，我们可以根据不同的终端实现不同的页面布局变化，更好地利用大屏设备的优势。
2)以车载机端为例:
不同车机的屏幕尺寸各不相同。目前主流屏幕分为横屏占比和竖屏占比两大类。因此，车机应用需要兼顾横向和纵向屏幕布局，页面可以动态调整内容的显示，以满足不同尺寸设备的适配需求。
通过对用户观察模型的研究分析，得出用户与手机的距离约为30 cm，但驾驶舱与车载屏幕的距离约为70 cm。这时候我们面临的不仅仅是屏幕大小和分辨率的差异，还有用户距离的差异。
除了简化功能之外，我们还放大了车-机自适应映射中的显示。界面元素的大小需要是手机基准终端的两倍，这样才能更好的保证用户易读易操作的体验。
结束摘要
响应式设计策略的应用解决了成本和体验的难题，这也是它至今仍受欢迎的原因。但是我们都知道，多终端和场景的差异不是简单的响应式设计可以解决的。
响应式设计项目由优酷的生产和研究团队推动。目前已经在多个终端上应用，包括手机、平板、电脑、汽车。感谢我们优酷引以为傲的制作和研究伙伴。
响应式设计材料共享
PS:在文章的最后，我还会给大家分享一些相当不错的响应式设计系统规范的源文件，大家可以下载研究一下。
彩蛋福利:给大家“大厂元件库源文件10套”。感兴趣的朋友可以全部拿下！
收集方法如下:
