ios|APP底部弹出控件( 三 )


在“豆瓣”的案例中(下图左侧),使用从底部拖出的面板来承载互动相关的需求,就好像容器中的“第二张纸”,在y轴上创造出比拟z轴的空间。券商类产品“长桥”(下图右侧)也尝试将自选股的最新动态放入“第二张纸”中,与自选股列表紧密的粘合在一起。
两张纸理论上都可以承载无限的内容,如此便完美的实现了在一个场景中、两个需求的“并行”。
ios|APP底部弹出控件
文章插图
5. 定制除了以上几种存在共性的“自定义”,还有一些被各业务定制出来的用法。比如下图中的股票快捷下单、外卖点餐、编辑图片、发送弹幕等,各业务场景下的“自定义”都需要具体问题具体分析。确保交互的合理、体验感受的顺畅即可,本文在此不做展开。
ios|APP底部弹出控件
文章插图
二、从“模棱两可”到“使用清晰”刚刚我们先解决了“什么时候用底部弹出控件”以及“什么场景使用哪类用法”的问题。不过观察下来发现,再往下落到一些具体细节时,仍然存在很多“模糊”地带。
1. 动作菜单与数据项菜单动作菜单对应到原生控件,就是iOS中的Action Sheet和安卓中的Dropdown Menu。顾名思义,动作菜单,承载的选项应该是一个操作、或者通过点击菜单链至一个新的去向。比如微信iOS中Action Sheet的一些使用案例。
ios|APP底部弹出控件
文章插图
所以,如果你要收纳的菜单不是一个操作或者一个去向,那么他们大概率是用作筛选的数据项菜单。数据少的时候推荐使用下拉菜单,好处是离触发区近且多端体验一致;数据多的时候可以采用上文提到的自定义底部面板或者右侧弹出抽屉。
ios|APP底部弹出控件
文章插图
2.全屏模态视图、模态面板、向右进入新页面“全屏模态视图”(Full Screen / Full-screen Dialog)和“向右进入新页面”在层级的叠加上,成本是一样的。不过“全屏模态视图”除了可以向左回退,在微信中也培养出了可以一直向下关闭页面、退出层级的认知。
二者根本的区别在于,“全屏模态视图”可以一键退出该任务流程,而“向右进入新页面”因为属于“层级导航”,想退出只能原路返回、一层层的回到起点。
所以我们会看到,在层级较深的位置,不会使用“向右进入新页面”再展开一个多步骤的任务,它更多用于进一步呈现详细、完整的信息。
苹果在iOS13将“模态面板”(Modal Sheets)调整为卡片形式后,至此没有再更新其用法。除了苹果自己的系统在广泛使用这个控件,只有“印象笔记”等个别产品能看到它的集中使用。我认为原因在于,脱离了苹果系统的使用场景,“模态面板”在其他App中表现出使用不清晰、通用性不好的问题,微信也干脆没用,依靠“全屏模态视图”完成了大部分多层级的场景。
但是全靠“全屏模态视图”去堆叠层级,难免会在一些场景给用户带来迷失感。所以更建议大家将“全屏模态视图”与上文提到的“自定义底部面板”结合使用,先保证全端交互的一致性。后续iOS如有通用性更好的用法,再考虑将其加入控件库。
ios|APP底部弹出控件
文章插图
3. 模态的退出方式① 点击“遮罩层”退出。除了“全屏模态视图”,剩余底部弹出控件都可支持。
② 点击“关闭”退出。常用于收纳信息。
③ 既可点击“关闭”、又可点击“确定”退出。一般用于“确定”需要被激活的情况,所以同时提供“关闭”的方式。