随着人们对移动终端大屏幕的追求,苹果的Pad系列推出了大屏幕Pro,大屏幕设备的出现自然产生了IOS分割功能。(莎士比亚、PAD、PAD、PAD、PAD、PAD、PRO)
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) | 色技手稿