ios|APP底部弹出控件

编辑导语：在日常生活中，我们经常会使用到手机。每当我们打开一个APP时，总能够发现在APP底部弹出的控件，你是否有注意到它们之间有何区别？怎样的弹出控件设计才是令人喜欢的？作者分享了一些关于APP底部弹出控件的交互规则，我们一起来看看吧。

文章插图
APP中从底部弹出的控件，因其自定义用法十分灵活，已经逐渐成为控件库中重要的基础建设。不过，面对市场上各式各样的用法，我们应该编写一套什么样的规则，能够更好的驾驭这些控件，让它们的体验更一致、使用更清晰呢？本文和大家分享我的思考过程。
一、常见的“自定义”用法现在“底部弹出控件”的自定义用法很丰富，并且一些新用法和其使用场景有着很高的契合度。
基于大体量APP呈现出的“界面元素、功能过饱和”现状，我们的设计并没有一味拘泥于iOS/安卓的使用建议，而是充分发挥了“底部弹出控件”的灵活性。
不过“灵活”的另一面，是给控件用法的统一带来了难度。以下归类主要覆盖了“自定义”用法使用率较高的5种情形。
1. 收纳收纳是最常见的场景，因为涵盖的情况难以用一种归类完全承载，所以我分别按照使用目的、交互形式和生效机制进行了归类。
下面配合一些线上例子，来呈现这些用法（“动作菜单”与“数据项菜单”会在后文中详述，此处略过）。

文章插图
（1）收纳信息
这个用法很好理解，但是同时我们也发现，底部面板的退出方式，3家产品已经存在3种不同的规则：点击“完成”、左侧点击“关闭”、右侧点击“关闭”。关于如何保持一致的问题，在后面“模态的退出方式”中会展开详述。

文章插图
（2）收纳服务
该用法最早源于对iOS中“Activiy View”的自定义，现在根据各业务不同诉求，运用的越来越成熟。乍看上去样式五花八门，本质上都是对当前场景所提供服务的一种收纳。
用法并不复杂，做好主次层级的划分、保证每个功能的合理去向，以及兼顾全端的一致性即可。

文章插图
（3）常驻于底部、由界面元素触发

文章插图
（4）即时生效、非即时生效
关于生效机制，刚好可以在飞书中分别找到对应的案例，这样我们可以更直观理解它们的不同之处。
即时生效：进行操作→面板收起→操作生效
有一种情况面板不会自动收起，即面板中的操作选项较多、且每个选项对应不同的界面效果，如果次次点击都收起面板反而效率很低。这种情况下，可以让用户自行决定关闭面板的时机。
非即时生效：所有操作需要点击“确认”/“完成”才可生效

操作单一：常用于筛选、提交申请、确认支付等场景。
操作多元：常用于编辑、设置等场景，操作类型除了数据的勾选和输入，一般还会涉及添加、删除、排序等。

文章插图
2. 响应、询问（1）即时响应
移动设备中的即时型反馈，一般使用 Toast 和 Snackbar 就够用了。不过有些情况，需要底部面板来帮忙：在图表/工具类场景中，存在这样一种交互形式，即随着手指完成操作、离开屏幕，会触发
某个控件的弹出。比如案例中的k线图场景（下图左一），手指完成2个位置的点击后，底部面板随即弹出。用户可以边对照k线图、边查看面板中的数据，操作完成后点击关闭退出“区间统计”。