写点什么

当手机淘宝遇见折叠屏,让购物更随心

  • 2019-12-17
  • 本文字数:2680 字

    阅读完需:约 9 分钟

当手机淘宝遇见折叠屏,让购物更随心

华为 5G 新品发布会上,Mate X 正式亮相,淘宝也作为重点展示应用出现在发布会的 PPT 上,同时也成为折叠屏生态联盟应用矩阵的第一位。




现场华为折叠屏上的淘宝多任务演示


伴随手淘技术团队对华为折叠屏适配工作的展开。半年前还只是概念方案的分屏设计方案已正式实现。华为折叠屏上的淘宝已全面支持分屏多任务,以后商品比价、边逛边聊更加轻松便捷,为大家带来不一样的购物体验。



折叠屏第二屏的多任务模式

01 华为折叠屏形态简介

华为 mate x 屏幕形态分为三种:


  • 展开态 显示比例 8:7.1(分辨率 1536x2200)

  • 折叠态正面屏 显示比例 19.5:9(分辨率 2480x1148)

  • 折叠态背面屏 显示比例 25:9(分辨率 2480x892)



用户可以在三种形态上进行随意切换,因此第一步需要保证手淘在三种屏幕形态下的主功能没问题。

02 折叠屏适配原则

  • 应用不在屏幕上不留黑边(Aspect-ratio 最小最大比例支持,最小宽高比 1.0,最大宽高比 2.4)

  • 屏幕切换、分屏 Switch/Resize 操作不能有 Crash/ANR

  • 屏幕切换、分屏 Switch/Resize 操作后布局正常(无内容缺失/重叠等)

  • 屏幕切换、分屏 Switch/Resize 操作 Activity 尽量不 Restart

  • Activity 支持 Multi-Resume(分屏应用失去焦点视频播放不停止/再次播放不重放等)

03 折叠屏适配点

允许改变应用尺寸。要适配折叠屏,首先是要让应用支持动态改变尺寸,需要在 menifest 中的 Application 或对应的 Activity 下声明。


<activity           android:name="com.test..TestActivity"           android:resizeableActivity="true"           android:configChanges="orientation|screenSize|keyboardHidden"           android:screenOrientation="portrait"           android:exported="false"
复制代码


在 Manifest 文件的节点中增加数据,设置最大/最小支持比例。


<meta-data android:name="android.max_aspect" android:value="2.4" />  <meta-data android:name="android.min_aspect" android:value="1.0" />
复制代码


APP 支持 Multi-Resume(Android P 开始支持),在 Manifest 文件的节点中增加数据, 在设置了该元数据后,应用在分屏模式下失去焦点后不会收到 onPause() 回调,如果需要知道用户“焦点”是否还在应用上,使用 onWindowFocusChanged() 回调判断。


<meta-data android:name="android.allow_multiple_resumed_activities" android:value="true" />
复制代码


Activity 支持显示动态尺寸/比例变化不重启,在 manifest 文件的节点中的 android:configChanges 属性增加 screenSize|smallestScreenSize|screenLayout 字符串。


当屏幕比例变化时,系统会回调 Activity 的 onConfigurationChanged() 方法,而避免 Activity 重新启动。应用复写 onConfigurationChanged() 方法,通过该方法的 Configuration 参数获得屏幕的分辨率等信息,就可以针对不同比例屏幕下的应用界面布局做相应调整,如切换布局、调整控件位置和间距等。


如果 Activity 走 Restart 销毁模式,需要处理 onSaveInstanceState() 保存状态,以免信息丢失。在分屏模式下,如果希望获得应用实际显示的尺寸,使用 Activity 的 Context 调用 getDisplayMetrics 获取。

04 体验升级,Magic Window 探索

经过几个月的适配,终于完成了第一个折叠屏可用版本的安装包。但是由于手淘是针对窄屏设计的 App ,在展开屏状态下,宽高比接近 1:1 ,可视内容会变得很少,无法发挥折叠屏的大屏优势。为了给用户最佳的使用体验。手淘团队决定适配华为 mate X 的 Magic Window 方案。


Magic window,是华为提供的系统级分屏的解决方案。应用可以根据自身业务设计分屏显示 Activity 组合,以实现符合应用逻辑的最佳单应用多窗口用户体验。


本次手淘适配 magic window ,使用自定义模式进行适配。即由设计师确定左右屏的交互逻辑,由技术同学针对交互逻辑在指定配置文件进行配置,实现分屏方案。


具体实现方法:在 Manifest 文件中新增标签


<meta-data android:name="EasyGoClient" android:value="true" />
复制代码


在 asserts 目录下新增 easygo.json 文件,文件格式如下:



在 magic window 模式下,折叠屏优势得到充分体现,以下是几个经典场景。



浏览商品同时咨询客服(设计稿)



商品对比(设计稿)


最终效果如下:



手淘技术团队秉承客户第一原则,一直致力于用户体验优化,未来我们将在用户体验上做出更多努力,给用户带来更好的体验。关于折叠屏适配,大家有什么不同的见解?欢迎下方留言区探讨。


本文转载自淘系技术公众号。


原文链接:https://mp.weixin.qq.com/s/vJ3_guFLJrLeM7E6yxgzgA


2019-12-17 18:10945

评论

发布
暂无评论
发现更多内容

学习web前端应该选择哪个培训机构?

小谷哥

可视化:数据可视化的作用

Data 探险实验室

数据分析 可视化 数据可视化 数据大屏

创新研发负载分担机制,天翼云IPv6网络带宽再升级!

天翼云开发者社区

负载均衡 网络 ipv6

数字先锋 | 主机、硬盘、CPU统统没有? 这个电教室有点“潮”!

天翼云开发者社区

云主机 云电脑

聚焦技术,锐意创新,GaussDB给世界一个更优选择

Geek_2d6073

中小企业运营自媒体为何多以失败告终

石头IT视角

LeaRun.net代码生成器 一键生成前后端代码

力软低代码开发平台

数据治理:聊聊数据血缘!

用友BIP

Docker进阶:step by step

无人之路

Docker

Verilog 时序控制

梦笔生花

Verilog Verilog语法 Verilog时序控制

spring boot+mybatis整合

@下一站

MySQL mybatis 12月日更 12月月更 springboot框架

武汉前端培训学习靠不靠谱?

小谷哥

迎接工业互联网的龙卷风暴,软通动力绘制了一张转型地图

脑极体

纷繁复杂见真章 华为云大型产品需求管理利器CodeArts Req解读

Geek_2d6073

开放云主机端口

好吃不贵

易观分析:手机银行季度活跃用户突破7亿人,个人养老金业务争夺战开启

易观分析

手机银行 个人养老金

重磅 | 招商局集团、招商局港口荣获CGMA年度大奖——九科信息与百年招商局共同探索财务数智化转型之路

九科Ninetech

安全可信 | 强墙出击!天翼云Web应用防火墙(原生版)硬核亮相!

天翼云开发者社区

安全 防火墙

FLStudio2023中文版远程安装下载

茶色酒

flstudio FLStudio21 FLStudio21.0.0

任务管理轻松实现大规模设备管理控制——设备管理类

阿里云AIoT

运维 监控 云安全 消息中间件 储存

柏睿数据完成阿里云PolarDB数据库产品生态集成认证

阿里云数据库开源

阿里云 polarDB PolarDB-X PolarDB-PG PolarDB for PostgreSQL

瓴羊Quick BI 权限管理:开拓数据分析效率和智能化水平的新高度

对不起该用户已成仙‖

Best Machine Learning Tools for Java

Mahipal_Nehra

Java AI Machine Learning tools best tools

大数据有没有必要参加培训?

小谷哥

零基础去程序员培训机构靠不靠谱?

小谷哥

ERP系统是什么?能起到什么作用?

优秀

ERP系统

Docker上手:step by step

无人之路

Docker

Java: 在Excel中插入和提取图片

Geek_249eec

Java Excel 图片

一名曾因线上P0故障导致月工资扣了10%的码农心得:如何在故障10分钟黄金时间快速排障

KINDLING

Java 运维 可观测性 线上故障 ebpf

零基础学习前端开发培训机构怎么选

小谷哥

那些你不知道的炫酷开关交互效果(12种)

南城FE

CSS 前端 交互设计

当手机淘宝遇见折叠屏,让购物更随心_语言 & 开发_淘系技术_InfoQ精选文章