优酷APP响应式布局技术概述 | 《优酷响应式布局技术全解析》第一章

简介: 本章介绍 优酷APP响应式布局技术概述

下一章:优酷APP响应式布局技术之Android篇 | 《优酷响应式布局技术全解析》第二章>>>

作者| 阿里巴巴文娱技术 叮东

一、背景

近年来,大屏手机、安卓Pad、iPad、折叠屏手机、车机大屏等大尺寸设备发展迅猛。尤其是2020年二季度中国平板市场出货量达到661万台,同比增长17.7%,其中苹果 iPad市场份额占比41.8%,华为平板市场份额占比37.1%。

image.png

安卓系统运行在越来越多尺寸的设备上,开发的手机App如何适配到不同尺寸上,是安卓开发者遇到的痛点。同时苹果也推荐开发适配手机和iPad的Universal版本,支持iPad的诸多新特性,例如侧拉、分屏使用等。基于以上背景,我们启动了优酷APP响应式,适配不同屏幕尺寸下的显示效果。

image.png

二、什么是响应式

描述响应式最著名的一句话就是“Content is like water”,翻译成中文便是“如果将屏幕看作容器,那么内容就像水一样流淌”。
响应式就是基于同一套代码,开发一个APP能够兼容多尺寸、多终端设备的显示,能够动态调整页面的布局以及容器的布局,充分利用当前屏幕的尺寸,为用户显示更多的内容,提供更好的浏览体验,同时提升APP的开发效率,迭代速度更快,保障多终端业务同步发展。

image.png

三、响应式的优势

image.png

1、开发成本更低 —— 一套代码

想要在不同尺寸屏幕的终端上获取良好的显示效果,传统的应用适配方案是针对不同尺寸的终端设备开发多个APP,例如很多厂商都会针对Pad推出HD版本。而响应式的APP可以根据屏幕具体的物理尺寸自适应的显示,只需要开发一套代码,就可以兼容多种尺寸的终端,不需要开发单独的HD版本。
不同的终端的App,由不同的垂直团队开发,会带来不同的后台系统和客户端技术方案,前后端技术能力会走向分化。响应式是同一个APP运行在不同尺寸的设备上,使用统一的后台系统,一次开发,多端生效。

image.png

2、设计成本更低 —— 一套设计规则

响应式使用了一套界面自适应的布局方案,横向拉通页面以及容器布局的适配规则,提高了屏幕的显示效率,面对不同分辨率的设备适应性更强,最大化提升用户的操作体验。一套设计规则,适配不同的尺寸,做到以不变应万变,大大节约了设计的成本。

image.png

3、业务迭代更快 —— 多端业务同步发展,一次运营多端生效

响应式APP多端保持一致的版本发布节奏,业务方在迭代过程中,会考虑多端的不同使用场景,业务特性能快速在多端同步推进。
往往不同终端有不同的运营系统,可能存在多个垂直运营团队,一次运营动作需要操作多次。响应式基于同一个客户端、后台和运营系统,运营收敛到一个团队,一次运营多端同步生效。

四、响应式的设计思路

如何在不同尺寸不同分辨率的屏幕下,有效的利用屏幕的尺寸?最简单的理解就是在大屏幕上显示更多的内容。这就需要在设计侧通盘考虑所有尺寸的屏幕,拉通不同宽高比例的设计规则,动态调整可见元素的布局(元素的列数以及尺寸等),在不同尺寸的设备上都能达到最佳的显示效果。

image.png

1、基本原则

1) 内容自动伸缩,保证适配内容填满当前屏幕;
2) 坑位列数可灵活按照屏幕的宽高比例进行适当增加或减少进行排版布局;
3) 组件内的内容可根据页面的宽度自动隐藏或显示部分内容,进行整个屏幕的适配,减少留白;
4) 页面边距间距用物理尺寸dp表示。在不同的设备上保证左右边距、间距的物理尺寸不变,内容做自适应;
5) 在不同机型适配上,交互方式符合大部分用户的使用习惯,体验是连贯统一的;
6) 同一页面在不同大小和比例及分辨率下看起来都是舒适的、合理的;
7) 内容在多尺寸响应适配下如遇适配成本过高或适配不了的情况,设计&产品&开发需要基于体验、业务、实现成本考虑达成一致,以低成本无损体验方式来完成适配

2、适配规则

1) 拉伸布局,内容元素在相对宽度内通过结合内容的展示隐藏来进行进行相应的拉伸适配,比如顶导航底导航;

image.png

2) 等比缩放,界面中元素在相对位置内按照一定比例进行缩放;

image.png

3) 扩展布局,通过内容元素的增加或减少,扩展为多行或者多列重复排列;

image.png

4) 组合布局,模块与模块进行组合,去适配宽度;

image.png

5) 内容固定居左,横屏&竖屏下固定布局,大小尺寸不变居左展示;

image.png

6) 内容固定居中,在横屏竖屏下比例不变 保证内容居中展示;

image.png

7) 分栏布局,页面的结构发生变化,按照屏幕宽度左60%,右40%占比进行分两栏展示。在优酷视频中,分栏布局主要用于播放页的展示,左60%宽度提供良好的播放体验,右40%宽度方便用户操作,推荐相关视频内容和评论;

image.png

五、响应式的架构设计

响应式的核心是拉通多终端的适配规则,开发一套界面,一个APP兼容多尺寸终端设备的显示,能够根据用户的行为以及设备的环境(屏幕尺寸、屏幕方向、是否分屏等)进行相应的页面布局以及容器尺寸的调整。为此响应式SDK提供了响应式状态管理、横竖屏切换、容器列数换算规则、容器尺寸适配规则、页面宽高获取方法、响应式基础控件等基础能力。业务方只需要接入响应式SDK,就能够方便快捷的解决在不同尺寸下的适配问题。

image.png

从结构上看,响应式由响应式SDK、响应式页面布局、响应式容器布局三部分相互配合完成,在这些的基础上支撑了首页、频道页、播放页、会员页、搜索、个人中心等众多的业务场景。
在Android和iOS上,如何进行响应式状态的管理?如何解决分屏下页面宽高的获取?如何解决多尺寸多终端下的页面布局以及组件容器的布局?具体细节请看以下两篇文章:
《响应式技术架构(Android)》
《响应式技术架构(iOS)》

六、响应式的业务改造

经过前期的技术调研,确定了Android、iOS、Flutter、Weex、H5等技术栈的适配方案,并以首页、频道页、播放页三大业务场景为切入点,完成初期响应式适配,进行效果演示。验证适配方案可行性后,决定在优酷所有核心业务场景落地。为了推进项目的顺利进行,召集了相关核心业务场景的技术、产品、设计、测试同学,进行项目kick off,介绍项目背景以及价值,明确相关业务团队具体的工作和节奏,经过1个月所有同学的努力,顺利在所有核心场景上线。
具体参与改造的核心业务场景有:首页、频道页、播放页、搜索、会员、会员交易、动态、个人中心、二级页、互动、评论等,部分场景适配效果如下所示:

image.png

响应式业务改造涉及众多的业务场景以及技术栈,如何在实际的适配过程中,确保所有的业务场景和技术栈都能低成本高效的适配,是响应式落地的关键。那么业务方在适配过程中具体做了哪些工作?如何解决多技术栈的响应式改造?如何保障响应式适配后的用户体验?由于优酷的业务场景非常多,分发场景和消费场景是其中最典型也最重要的,推荐查看以下这两个场景的落地文章:

《优酷响应式在消费场景的落地 Android》
《优酷响应式在消费场景的落地 iOS》

七、响应式的测试与上线

优酷响应式适配对测试来说面临着很大的挑战,既要保证不同尺寸上的适配效果,又要保证业务的完整。这就要求在测试过程中需要进行功能测试、稳定性测试、性能测试以及兼容性测试,具体细节请看以下文章:
《优酷响应式测试方案》

相关文章
|
3月前
|
小程序 安全 JavaScript
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
178 1
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
|
4月前
|
监控 测试技术 Android开发
App Trace技术解析:传参安装、一键拉起与快速安装
本文从开发者视角解析App Trace技术的关键功能与实现方法,涵盖传参安装、一键拉起和快速安装技术。详细介绍了Android和iOS平台的具体实现代码与配置要点,探讨了参数丢失、跨平台一致性及iOS限制等技术挑战的解决方案,并提供了测试策略、监控指标和性能优化的最佳实践建议,帮助开发者提升用户获取效率与体验。
|
7月前
|
传感器 人工智能 物联网
穿戴科技新风尚:智能服装设计与技术全解析
穿戴科技新风尚:智能服装设计与技术全解析
547 85
|
5月前
|
前端开发 开发工具 Android开发
小红书APP的全新鸿蒙NEXT端性能优化技术实践
从 2023 年开始,鸿蒙的优势愈发明显,已经成为可与 iOS、安卓媲美的第三大移动操作系统。从一些抖音视频中也可以看出,鸿蒙在流畅性方面甚至在某些层面上超过了 iOS。本次分享的主题是小红书在鸿蒙平台上的工程实践,主要聚焦于性能优化和探索。
307 10
|
7月前
|
人工智能 API 语音技术
HarmonyOS Next~鸿蒙AI功能开发:Core Speech Kit与Core Vision Kit的技术解析与实践
本文深入解析鸿蒙操作系统(HarmonyOS)中的Core Speech Kit与Core Vision Kit,探讨其在AI功能开发中的核心能力与实践方法。Core Speech Kit聚焦语音交互,提供语音识别、合成等功能,支持多场景应用;Core Vision Kit专注视觉处理,涵盖人脸检测、OCR等技术。文章还分析了两者的协同应用及生态发展趋势,展望未来AI技术与鸿蒙系统结合带来的智能交互新阶段。
395 31
|
7月前
|
编解码 监控 网络协议
RTSP协议规范与SmartMediaKit播放器技术解析
RTSP协议是实时流媒体传输的重要规范,大牛直播SDK的rtsp播放器基于此构建,具备跨平台支持、超低延迟(100-300ms)、多实例播放、高效资源利用、音视频同步等优势。它广泛应用于安防监控、远程教学等领域,提供实时录像、快照等功能,优化网络传输与解码效率,并通过事件回调机制保障稳定性。作为高性能解决方案,它推动了实时流媒体技术的发展。
358 5
|
7月前
|
数据采集 机器学习/深度学习 存储
可穿戴设备如何重塑医疗健康:技术解析与应用实战
可穿戴设备如何重塑医疗健康:技术解析与应用实战
237 4
|
7月前
|
机器学习/深度学习 人工智能 自然语言处理
AI技术如何重塑客服系统?解析合力亿捷AI智能客服系统实践案例
本文探讨了人工智能技术在客服系统中的应用,涵盖技术架构、关键技术和优化策略。通过感知层、认知层、决策层和执行层的协同工作,结合自然语言处理、知识库构建和多模态交互技术,合力亿捷客服系统实现了智能化服务。文章还提出了用户体验优化、服务质量提升和系统性能改进的方法,并展望了未来发展方向,强调其在客户服务领域的核心价值与潜力。
334 6
|
7月前
|
监控 负载均衡 安全
静态IP代理与动态IP代理:提升速度与保障隐私的技术解析
本文探讨了静态IP代理和动态IP代理的特性和应用场景。静态IP代理通过高质量服务提供商、网络设置优化、定期更换IP与负载均衡及性能监控提升网络访问速度;动态IP代理则通过隐藏真实IP、增强安全性、绕过封锁和提供独立IP保障用户隐私。结合实际案例与代码示例,展示了两者在不同场景下的优势,帮助用户根据需求选择合适的代理服务以实现高效、安全的网络访问。
217 1
|
7月前
|
负载均衡 JavaScript 前端开发
分片上传技术全解析:原理、优势与应用(含简单实现源码)
分片上传通过将大文件分割成多个小的片段或块,然后并行或顺序地上传这些片段,从而提高上传效率和可靠性,特别适用于大文件的上传场景,尤其是在网络环境不佳时,分片上传能有效提高上传体验。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章

推荐镜像

更多
  • DNS