伴随着人们对移动端设备大屏的追求,苹果的Pad系列产品推出了大屏的Pro,大屏设备的出现自然也产生了IOS分屏功能。IOS9之后开始支持分屏多任务功能,给用户的日常使用带来了新的体验,方便用户高效的使用iPad来完成工作,或者是畅享娱乐带来的乐趣。
IOS分屏交互
Slide Over:用户可以通过从屏幕右边缘向左滑动,呼出Slide Over,Slide Over会展示支持分屏的应用。Split View(分屏视图):在Slide Over左侧位于中间有个小按钮,点击该按钮,正式进入分屏,把两个应用隔开分别显示,用户可以对分屏的应用进行单独操作。在Slide Over状态下,全屏显示的应用为主要APP。Slide Over内容上的应用是次要APP。进入分屏视图状态下,可调整分屏的比例,左侧的应用是主要APP,右侧的是次要APP。
![6486920d4c38f5e52bcec9e3b5fbc419.png](https://i-blog.csdnimg.cn/blog_migrate/4fc846e0342168b1fd9fd17f5db62d62.jpeg)
Vimeo for Pad
目前已经有许多App支持分屏特性,但视频类的App比较少,Vimeo客户端6.0.1在支持IOS分屏中做到了切换过渡自然、无缝衔接,给体验打下良好基础。接下来在唤出的Slide Over中,打开Vimeo进入3:7的分屏视图。
此时Vimeo还没有进入分屏视图状态,左侧的主要App仍然是全屏状态,只是位于蒙版之后。当前打开的Vimeo仍位于Slide Over的状态下,可以通过点击左侧的按钮进入分屏视图,若向左拖动按钮至屏幕中央可以进入5:5分屏视图,向右拖动则关闭分屏功能。
![1de34182226f880e51583b7353c2dfeb.png](https://i-blog.csdnimg.cn/blog_migrate/2efac55c4521f09c51421077c44bf648.jpeg)
进入分屏视图后,主要APP的蒙版消失,并由原来的全屏显示进入3:7的分屏视图。Vimeo作为次要APP,此时的展示比例是30%,界面布局上的设计接近于Vimeo手机客户端的布局设计。分类上的布局与交互形式都和手机客户端一致,支持左右滑动查看分类内容,滑动时上下两行一起滚动。视频内容展示支持分段加载,向下无限加载内容。此时的Vimeo相当于是一个手机的界面,无论是APP的信息架构、界面布局,还是交互效果完全与手机端保持一致,使得多屏操作体验一致,无学习成本,也降低了开发成本。
![eb7dd451ec01b50a000adebfa126e77c.png](https://i-blog.csdnimg.cn/blog_migrate/8eee290a9ba463855670435de3327a3c.jpeg)
![5d1331efd7ff1d5e8aa4b8b50cb0720a.png](https://i-blog.csdnimg.cn/blog_migrate/6985a9a277c6913e4eed2444cbe3c533.jpeg)
在3:7的分屏下向左拖曳分屏按钮到达屏幕中央,进入5:5的分屏视图。此时主要APP的屏幕占比与次要APP持平。由于Vimeo从3:7的小屏视图过度到5:5的半屏视图,屏幕空间增大,如果继续使用手机客户端的界面布局会造成屏幕空间利用率低,不适合浏览。在分类上由两行变为一行展示,分类卡片的比例大小保持不变,底部的标签栏等元素大小也保持不变。如此一来可以减少切换之后带来过多的变化,让用户产生困惑,也让过渡变得自然流畅。视频内容排布上,由原来的左图右文变化为上图下文的结构,等比放大了图片,使得在5:5的分屏状态下内容显得饱满而又不密集。从3:7小屏视图切到5:5的半屏视图说明用户对次要APP的重视,展示大图更能引起用户对内容的关注。
![abee1d44c4fc443b4eac7c292bf6c695.png](https://i-blog.csdnimg.cn/blog_migrate/536c72b86b75c8a734c69d84061ba78f.jpeg)
当5:5的分屏视图再继续向左拉动时就展开成全屏的显示状态,全屏状态下分类卡片的比例大小保持不变,按照原来5:5的布局增加个数。视频内容从原来5:5的一行展示两个适应为5个,比例上等比缩小,使得第一屏状态下展示更多的内容。可以看到5:5的分屏状态过渡到全屏状态的布局改变并不大,如此一来视觉观感会保持一致,若用户频繁切换分屏对设备的资源占用也不高。
![b2d1090608cfb80110adb3cf12053d6c.png](https://i-blog.csdnimg.cn/blog_migrate/5bdd281fae61a941afdf8aa0d1ef3940.jpeg)
当Vimeo作为主要APP时,在7:3的视图中,默认以全屏的布局展示,视频内容在比例上等比缩小。分屏是一种辅助状态,并不需要太浮夸的展现,简单易操作,过渡平滑是贯穿分屏始终的理念。
![56931a6b2f4de7e2608ca9b2b58fba80.png](https://i-blog.csdnimg.cn/blog_migrate/955dce50db7bc01f23fc1a5e761991f9.jpeg)
要在IOS分屏上有优异的表现,APP在运行上对设备资源的使用应该要合理。因为分屏意味着在屏幕界面上同时运行显示两个APP,也有可能其他APP正在播放画中画视频,后台也还有其他APP正在运行。目前iPad的性能还是有一定局限性,所以IOS分屏设计不同于正常情况下的应用设计,在设计过程中要有意针对这个问题进行思考,尽量在设计上规避。比如,不要使用过复杂的布局或交互方式,避免数据过载、消耗设备性能过大等情况。Vimeo在分屏设计中,标签栏等元素固定不变,内容上样式也没有过多变化,让Pad端的设计与Phone端保持一致,减少用户认知,提高阅读性,也减少对性能的消耗。
爱读微课(iread360.com) | 色技手稿