距离折叠屏手机正式发售的日子越来越近,三星Galaxy Fold将于9月在韩国开卖,华为Mate X近期也将在国内销售。面对折叠屏,大众充满好奇、新鲜感,现在看来硬件已完备,只欠东风,这股东风就是“对于折叠屏上的移动应用使用场景,设计师可以探索怎样的设计模式”。本篇文章依据折叠屏的使用场景,简要分析可能会出现的界面设计方法。
折叠屏既具备手机的灵活性、也具备平板的扩展性,折叠后易于携带,展开后就是小平板,展开后的大屏可以显示更多内容,同时也有利于增加更丰富的交互形式。具体到页面,按照场景列举几个利用第二屏的案例。
目前手机浏览页面是纵向的上下滑动,这意味着首屏和靠前位置的信息将得到最高曝光率,但是对于页面中部及尾部的内容,曝光率是递减的。
许多用户对首屏失去兴趣之后,即便尾部可能有感兴趣的内容,也不再继续浏览了,所以此时可以将尾部的次级内容展现在第二屏,使“首屏”曝光呈现更多内容。
案例1:在手机淘宝的设计场景中,首页第二屏内容是猜你喜欢模块,采用分屏显示之后,用户可以直接浏览原本在首页最底部的猜你喜欢商品。
案例2:在云集APP中,首页第二屏内容模块“限时特卖、一件批发价”,采用分屏呈现之后,用户可以直接查看限时特卖优惠商品。
对于含有多个导航标签、或者多个筛选项的单张页面,单屏浏览时需要点击切换导航进入相应的页面、或者多次重置筛选项查看不同筛选条件的页面内容。但是有时候用户需要将不同导航下的内容进行对比浏览。另外对于筛选项较多的页面,目前需要重置条件后再重新筛选查看,不能同时对比同一页面的不同筛选结果。我们可以依据这个场景,进行这样的设置:若在此单屏使用场景下,用户选择将折叠屏展开成为双屏模式,此时在单屏页面的右侧出现悬浮功能按钮“对比查看”,点击该按钮,将该页面分别在左右屏幕中显示,此时用户可对左右屏幕的页面独立操作(当然实现这个功能需要考虑对应的开发方案,在此不做单独的讨论)。案例:购房或租房的用户使用贝壳找房App,经常碰到的一个场景是:对不同区域、不同房型、不同价格的房屋进行对比查看。有了折叠屏可以分屏对比查看不同筛选维度的房屋。
折叠屏展开后相当于使用平板的效果,所以针对一些页面元素的列表式布局,双屏下的自适应采用“内容横向拉伸延展、以及等比放大的方式”。
这样做的目的是充分利用大屏空间,更详细的呈现页面单个元素的内容,这种自适应方式可能更适用于杂志文章阅读类应用。
多任务我总结了两种使用场景:第一种是“主任务与子任务之间频繁切换”,会给用户带来相对较高的操作成本。第二种是“两个主任务之间切换使用”,用户也需要频繁的来回切换,有时候切换还可能造成应用重启。采用分屏可以解决以上问题。
用户当前正在浏览一个页面,称之为主任务,经常会在当前页面提示应用内的消息弹窗等分支的子任务,而查看子任务目的是辅助主任务的达成。当用户在处理主任务时,需要与子任务进行交互操作,此时可以让子任务在第二屏显示,从而避免页面之间来回切换跳转。有些使用场景下可能是当前页面出现弹层。案例:使用手机淘宝查看商品详情页时,同时与客服聊天,此时“聊天页面”是从属于“查看详情”这个主任务的子任务,分屏后用户可以一边查看详情,一边咨询客服。
这种呈现方式就好像PC端的桌面应用、或者平板上查看邮件的界面布局。在单屏上只能通过前进或者后退操作查看父子页面,而折叠屏展开后的双屏可以充分利用,一个屏展示列表页,另一个屏展示列表页具体某个内容元素的详情页。案例:有道云笔记的主要页面是笔记的列表页和详情页,在折叠屏上的界面布局和交互操作可以如下图示意。
手机端经常会出现同时使用两个应用协作配合的场景,目前只能在两个应用之间来回切换,操作成本相对比较高。如果分屏之后,可以在一个单屏下显示一个应用的页面,这样就可以左右屏对比更高效的操作使用。案例:比如在某个应用浏览文章时,需要把文字记录到另一个笔记应用中,不需要再来回切换,只需要分屏显示两个应用,边看文章边记录。
移动端的主要优势之一是“随时随地浏览数据或报表”,很多业务场景(尤其是B端产品)会涉及到数据的展示。双屏可以提升展示效率,这种情况下需要针对折叠屏展开后的双屏,进行页面元素布局的自适应。
对于在页面中展示各种数据元素,目前只能是单张页面纵向浏览。如果在折叠屏查看各项数据,类似于PC端的桌面应用,双屏能够查看到更多维度的数据模块。
折叠屏展开非常有利于丰富交互形式,目前由于屏幕尺寸限制,在移动端查看数据走势图还是不够方便,即使趋势图可以采用放大到全屏模式查看,对于细节仍然需要进一步放大查看。有了大屏之后,单个图表就可以直接展开,有利于图表的细节展示。
本文依据用户的使用场景,简要分析几个未来针对折叠屏设计,可能会出现的界面设计模式。折叠屏不是简单的增加了一种手机端的自适应类型,如果针对单个移动应用,则需要结合产品自身业务属性、产品主要用户群体的使用场景、以及现有界面组织方式,进行折叠屏的适配,充分利用好第二屏的展示空间。