伴随着人们对移动端设备大屏的追求,苹果的Pad系列产品推出了大屏的Pro,大屏设备的出现自然也产生了IOS分屏功能。IOS9之后开始支持分屏多任务功能,给用户的日常使用带来了新的体验,方便用户高效的使用iPad来完成工作,或者是畅享娱乐带来的乐趣。

IOS分屏交互

Slide Over:用户可以通过从屏幕右边缘向左滑动,呼出Slide Over,Slide Over会展示支持分屏的应用。Split View(分屏视图):在Slide Over左侧位于中间有个小按钮,点击该按钮,正式进入分屏,把两个应用隔开分别显示,用户可以对分屏的应用进行单独操作。在Slide Over状态下,全屏显示的应用为主要APP。Slide Over内容上的应用是次要APP。进入分屏视图状态下,可调整分屏的比例,左侧的应用是主要APP,右侧的是次要APP。

Vimeo for Pad

目前已经有许多App支持分屏特性,但视频类的App比较少,Vimeo客户端6.0.1在支持IOS分屏中做到了切换过渡自然、无缝衔接,给体验打下良好基础。接下来在唤出的Slide Over中,打开Vimeo进入3:7的分屏视图。

此时Vimeo还没有进入分屏视图状态,左侧的主要App仍然是全屏状态,只是位于蒙版之后。当前打开的Vimeo仍位于Slide Over的状态下,可以通过点击左侧的按钮进入分屏视图,若向左拖动按钮至屏幕中央可以进入5:5分屏视图,向右拖动则关闭分屏功能。

进入分屏视图后,主要APP的蒙版消失,并由原来的全屏显示进入3:7的分屏视图。Vimeo作为次要APP,此时的展示比例是30%,界面布局上的设计接近于Vimeo手机客户端的布局设计。分类上的布局与交互形式都和手机客户端一致,支持左右滑动查看分类内容,滑动时上下两行一起滚动。视频内容展示支持分段加载,向下无限加载内容。此时的Vimeo相当于是一个手机的界面,无论是APP的信息架构、界面布局,还是交互效果完全与手机端保持一致,使得多屏操作体验一致,无学习成本,也降低了开发成本。

在3:7的分屏下向左拖曳分屏按钮到达屏幕中央,进入5:5的分屏视图。此时主要APP的屏幕占比与次要APP持平。由于Vimeo从3:7的小屏视图过度到5:5的半屏视图,屏幕空间增大,如果继续使用手机客户端的界面布局会造成屏幕空间利用率低,不适合浏览。在分类上由两行变为一行展示,分类卡片的比例大小保持不变,底部的标签栏等元素大小也保持不变。如此一来可以减少切换之后带来过多的变化,让用户产生困惑,也让过渡变得自然流畅。视频内容排布上,由原来的左图右文变化为上图下文的结构,等比放大了图片,使得在5:5的分屏状态下内容显得饱满而又不密集。从3:7小屏视图切到5:5的半屏视图说明用户对次要APP的重视,展示大图更能引起用户对内容的关注。

当5:5的分屏视图再继续向左拉动时就展开成全屏的显示状态,全屏状态下分类卡片的比例大小保持不变,按照原来5:5的布局增加个数。视频内容从原来5:5的一行展示两个适应为5个,比例上等比缩小,使得第一屏状态下展示更多的内容。可以看到5:5的分屏状态过渡到全屏状态的布局改变并不大,如此一来视觉观感会保持一致,若用户频繁切换分屏对设备的资源占用也不高。

当Vimeo作为主要APP时,在7:3的视图中,默认以全屏的布局展示,视频内容在比例上等比缩小。分屏是一种辅助状态,并不需要太浮夸的展现,简单易操作,过渡平滑是贯穿分屏始终的理念。

要在IOS分屏上有优异的表现,APP在运行上对设备资源的使用应该要合理。因为分屏意味着在屏幕界面上同时运行显示两个APP,也有可能其他APP正在播放画中画视频,后台也还有其他APP正在运行。目前iPad的性能还是有一定局限性,所以IOS分屏设计不同于正常情况下的应用设计,在设计过程中要有意针对这个问题进行思考,尽量在设计上规避。比如,不要使用过复杂的布局或交互方式,避免数据过载、消耗设备性能过大等情况。Vimeo在分屏设计中,标签栏等元素固定不变,内容上样式也没有过多变化,让Pad端的设计与Phone端保持一致,减少用户认知,提高阅读性,也减少对性能的消耗。


爱读微课(iread360.com) | 色技手稿

ios分屏_大屏时代来临,到底应该如何分屏相关推荐

  1. teablue数据分析_大数据时代来临,再不抓住风口你就out了

    在大数据时代,数据分析师这个职业似乎应运而生,作为一名数据分析师,我觉得我有必要向大家科普一下这个职业.下面是我的数据分析师证书. 首先数据分析师其实分为两类,一类是业务数据分析师,一类是大数据分析师 ...

  2. iOS 14要被大改造:开发小程序,主屏大换血,支付宝入驻ApplePay,还接入第三方壁纸...

    白交 发自 凹非寺  量子位 报道 | 公众号 QbitAI 船新iPhone还要等一等,但iOS 14,已有一大波新功能来袭. 有意思的有:"小程序".接入支付宝.主屏布局大换血 ...

  3. 本地差分隐私 随机响应_大数据时代下的隐私保护

    本文作者程越强.孙茗珅.韦韬 1 引言 在大数据的时代,越来越多的服务和产品是围绕用户数据(隐私)建立的.这样虽然带来了个性化的服务,提高了服务质量和精度,但是在数据收集.使用以及公布的过程中,用户隐 ...

  4. BIG DATA 大数据时代来临

    "大数据时代"已经来临,并对各个领域都产生了深远的影响.在商业.经济及其他领域中,决策行为将日益基于数据和分析而作出,而并非基于经验和直觉:而在公共卫生.经济发展和经济预测等领域中 ...

  5. spark on yarn 完全分部署_大数据Spark面试题(一)

    1.spark的有几种部署模式,每种模式特点?(☆☆☆☆☆) 1)本地模式 Spark不一定非要跑在hadoop集群,可以在本地,起多个线程的方式来指定.将Spark应用以多线程的方式直接运行在本地, ...

  6. 什么叫大数据人物画像_大数据时代,如何构建精准用户画像,直击精细化运营...

    移动互联网时代,精细化运营逐渐成为企业发展的重要竞争力,"用户画像"的概念也应运而生.用户画像是指,在大数据时代,企业通过对海量数据信息进行清洗.聚类.分析,将数据抽象成标签,再利 ...

  7. 分组后统计总数_大数据时代看排球:排球技术统计能告诉你什么?

    2020-08-25 中国排协排球技术统计是将排球比赛行为按照一定的规则和排列方式进行记录,再将记录的数据汇总形成统计表格的一种统计行为.国际排联(FIVB)和中国排球协会(CVA)公布的一系列技术统 ...

  8. 大数据时代时代舍恩伯格书资源_大数据时代的特征和思维

    随着信息技术的发展和应用, 人类进入了一个大数据时代.大数据时代和我们以前的时代有什么不同?什么又是大数据时代的特征,和应具备的思维呢? 维克多·舍恩伯格在<大数据时代>一书中将大数据时代 ...

  9. python中的大数据品牌运营策划营销_大数据时代的品牌营销

    龙源期刊网 http://www.qikan.com.cn 大数据时代的品牌营销 作者:肖明超 来源:<销售与管理> 2015 年第 10 期 去年一年到现在参加的很多营销峰会或者论坛, ...

最新文章

  1. css3宽度变大动画_不会仪表?太尴尬了。14种动画让你轻松掌握各种流量计工作原理...
  2. Secure CRT 自动记录日志和时间戳功能配置
  3. YOLO学习-2:win10(64位)+ python3.6 + TensorFlow-GPU + keras + yolov3测试实践(增加笔记本显卡GPU加速)
  4. 用反卷积(Deconvnet)可视化理解卷积神经网络还有使用tensorboard
  5. 记录WIN10下ISE14.7安装和关联modelsim10.1的安装要点
  6. composer 的快速安装
  7. wcf 接收post数据_简单聊下HTTP中POST和GET请求本质区别
  8. Python编程实践—打印 九九乘法表的几种方法
  9. 人人商城小程序消息服务器配置,人人商城小程序订阅消息设置方法和几个坑!...
  10. 用英雄联盟的方式讲解JavaScript设计模式
  11. .NET Framework 3.5 安装错误:0x800F0906、0x800F081F、0x800F0907
  12. 360度全景标定方法_一种360度全视角鸟瞰全景行车辅助标定方法与流程
  13. php百度坐标转腾讯坐标,PHP实现腾讯与百度坐标转换
  14. 《微信小程序商城界面设计实战》--学习笔记作业
  15. 关于自行修改人人商城模板文件目录指引
  16. 计算机安装操作系统的目的是什么,装系统
  17. java modify的使用方法图解,经过JDT修改(Modify)Java代码的流程步骤
  18. numpy PIL tensor之间的相互转换
  19. 劢领AT|五分钟,使用AT指令读写U盘文件
  20. PDF 与 PS页面描述语言与PDF文件解析(转)

热门文章

  1. 如何用PS给钢笔选中区域进行填充
  2. r7 2700X装Linux,AMD 锐龙 7 2700X 装机
  3. 信息安全 day01 基本介绍
  4. 嗨!不来看一下如何骚气十足的登陆MySQL嘛?
  5. csv文件导入后台乱码_用Excel打开CSV格式文件乱码,三种方法可以处理好!
  6. C++ primer plus 课后练习题
  7. 笔记本电脑连不上蓝牙耳机怎么办
  8. 网站选择按钮点击无反应?_实用图片素材网站推荐,高清、免费、无版权!
  9. 火山PC锐浪报表(Grid++Report)-订单打印教程
  10. win7安装计算机的更新,Win7电脑提示部分更新没有安装怎么办?