今天来聊一聊苹果规范里两个令人迷惑的东西,action sheet和activity view。
两个组件都属于常见组件,其中action sheet出现得更早。之后出现的activity view在布局上违背了action sheet的部分设计理念和规则,而苹果规范又对此语焉不详,因此有些同学对如何设计一个底部浮层(或者面板)产生了很多疑问。因此今天我们就从它的发展史出发来讲讲他们的差异,以及应该如何看待“规范”。可以说规范的演变就是不断吃书的过程。
Action sheet的演变历史
action sheet是设计规范中提供的最早的一批标准组件,和其他组件相比,苹果对action sheet的定义和迭代的更新其实不算多,它的样式也没有特别大的变化。
在2008年iPhone OS 2时代的规范中,将action sheet和警告弹窗(alert)、模态视图(modal view)都归类为视图的不同类型。实际上“视图 view”这个说法一直都非常模糊,我猜测这个说法来源于MVC设计模式,是开发兼任设计时代遗留下来的名词。现在苹果将view解释为“应用程序用户界面的基本构件”,我个人把view按照原子系统理解为“页面模板”。
从创立之初,action sheet有两种用途:
- 收纳针对用户当前任务的多种操作。这样就不用在页面上把这些操作全部展示出来。
- 进行风险操作之前,可以用action sheet来做再确认。
根据这两个用途,2008年对action sheet的说明和规则总共有以下几点:
- 一定要有底部取消按钮,除了取消按钮之外至少提供2个操作按钮
- 点击操作按钮之后,action sheet将会消失
- Action sheet上不写说明文案,因为它是被用户主动点击弹出的页面,用户可以根据当前任务和按钮文案推断出这个浮层的作用。
根据以上几点我们可以看出2008年前后移动端的业态还是比较简单的。第2条规则让action sheet是一个只能承载操作按钮的临时不稳定容器,它杜绝了使用action sheet来做多级复杂任务的可能性,而且也并没有提到任何和扩展性相关的解决方案。
在2011年时,苹果对action sheet进一步作出了说明:
- 解释了将取消按钮放在页面底部的作用:鼓励用户看完所有选项后再做出选择。
- 强调风险/破坏性操作要用红色按钮。
- 不允许纵向滑动,因为:
- 过长的面板可能会导致用户花费过长的时间来思考每个选项
- 纵向滑动可能导致误触
自此,action sheet的几个比较重要的规范就都成型了。尽管在2014年取消了“点击操作按钮后action sheet会消失”和“action sheet上不写说明文案”的说明,让它的扩展性稍微强了一些,但是从苹果对其纵向滑动的限制、对【取消】按钮的强调上,可以看出action sheet仍然是暂时性的,倾向于不让用户停留太久、完成较为复杂的任务。
在iOS14之后,苹果提供了新的组件menu来收纳操作,因此进一步限制了action sheet的使用场景。iOS14版规范将action sheet归纳到alert警告弹窗中,“只有破坏性操作可以使用action sheet,否则都应该使用menu”。但在后续版本迭代中又更改了说法,现在action sheet基本上被用于承载与【用户发起的操作】直接相关的功能,比如删除/离开前的再确认,而不再承载“收纳主页面放不下的次级操作”的功能。
Activity view的演变历史
Activity view是为了“分享”这个功能定制的。目前为止它的使用场景基本限制在分享上,很少见其他场景使用这样的版式,但我个人认为它在未来有扩展场景的潜质。
苹果一直有“分享”功能,这个功能最开始使用action sheet实现,然后在iOS6时期由action sheet改版了图标样式(但是很可惜没有说为什么这样改)。iOS6时代苹果并没有成熟的App间分享功能,当时只支持facebook、twitter、微博等几个有限的App分享,因此在页面设计上面也没有考虑扩展性。到了iOS7后,苹果进行了两个重要的功能迭代:
- 允许App store中海量的第三方App接入“分享”功能。这导致分享页面上的操作数量不确定
- 上线了airdrop功能,并且可能由于早期对这个功能的推广,iOS7允许图片在当前页面内被多次分享给不同的人,因此只能支持单次操作的action sheet无法再满足诉求了。
于是基于这两个重要的功能变化,才产生了我们熟悉的这个横滑版的Activity view。
activity view的设计究竟想解决什么样的问题我们不得而知,因为它的规范中说的东西也比较语焉不详。只能说从它最终呈现的效果来看,和以往的设计有这些改变:
- Activity view首次在iOS7的规范中登场时,是一个“控制器”controller,而非一个完整页面,这让它可以添加“取消”按钮成为一个类似action sheet的模态,也可以作为页面上的一个元素,搭配页面左上角的“取消”按钮。
我个人认为这么设计其实挺冗余,页面允许横滑后,“取消”按钮非要放在页面底部的理由就根本不成立了,因为用户的视线并不一定是从上到下看完的,而有可能是从左到右,根本没往下看。没有必要为了遵守action sheet的规范而制作两套功能完全一样的版式。
- activity view采用了大图标而非纵向文字列表的样式。从迭代趋势来看,合理猜测是因为接入第三方平台后图片icon的识别效率比纯文字更高。
- Activity view允许横滑。这也违背了action sheet“面板不允许纵向滑动”的理由。很明显这样做是因为接入第三方平台app数量不确定,只能通过横滑来保证一些系统操作(复制/投屏等)能够在第一屏露出。
当然iOS7的activity view还有些其他的问题,比如
有些人提到:
这版设计过于强调airdrop、横滑滚动比纵滑更费劲,而且对长文案的支持比较弱等等 https://medium.com/@graiz/useless-ui-e6f962e666e4
基于这些问题,activity view再次改版,也就是现在iOS13的样式。
自此,activity view完全脱离了早期action sheet规范的影响,它允许纵向滑动、不再添加底部取消按钮、并且支持用户在本页面进行多层级的相对较为复杂的操作(比如点击airdrop弹出二级弹窗,但不关闭此activity view)。
总而言之,根据现行的苹果规范:
action sheet更加聚焦、迅速,它不支持多层级操作,更多被用于再确认场景。
Activity view暂时被用于分享场景,它更加具有扩展性,且支持多层级操作。