[B·G – 17] 菲兹定律下的 Sheets 组件的奇怪问题

端午节快乐。终于有时间可以抒发一下个人比较奇怪的 Sheets 组件问题了。

在全面屏(手势)的普及下,近几年无论是官方OS还是第三方应用,都逐渐提高 Sheets 组件的使用频率。Material Design 那边,由于全民屏的物理尺寸增大,连 Dropdown Menu 也不怎么用了(老旧的 Google App 里还可以看到,但像是 Google News 和 Google Assistant 这种与以往不同视觉的 App 里很少见)。iOS 这边 Action Sheets 的思路一直比较清晰,虽然有不少与 Alert View 混淆的情况,而且视觉也变化了很多。

先提出问题:目前的 Sheets 组件基本会在底部(从下往上)出现的,iOS 和 Android 都是。即便操作触发这些动作的位置处于屏幕顶部,依然会从底部弹出 Sheets 相关组件,依全面屏的比例下,这是否有违菲兹定律(Fitts’ Law)呢?

一个明显的例子,比如微信的公众号文章界面。点击右上方三个圆点,却在下面弹出了 share action sheets 。

同样 iOS 的一些自带软件(比如相册)以及 Google News(首页右上角)也是如此。

这里主要提及的是菲兹定律中的 D(起始位置到目标中心的距离) 和 W(目标区域在运动维向上的宽度),两者的描述均来自 Wiki。Material Design 使用浮动的 Menu 组件,既有继承也有跨平台的含义(或者说是一种「约束」)在里面。我对于 Android 有比较清晰的使用记忆是从 2.3 开始,直到之后它的下拉菜单一直是在触发动作的元素之下展开的,这也是一直以来桌面端操作系统的传统。

这种交互在小屏幕上非常便捷,且容易学习——任何操作都可以一指完成的小屏幕这个说法有点狡猾。随着发展,小屏幕不能精准点击、信息少、视觉冲击力低等等缺点终会在大部分(为人主观影响的)用途上被淘汰。Android 的浮动 Menu 组件依然遵守着菲兹定律,但在其维度(宽度)低于接近整个屏幕宽度的时候却无法成为最优解。而一旦对它的维度做优化拓展时,结果也大都是取其极限值,即视觉上越来越接近 Sheets 组件。

我们还可以对比一下当前 Material Design 对 MenuSheets: bottom 的描述中,移动端所占比重后者是大于前者的,这也意味着官方的使用倾向,大概。

在iOS上,无论是先改版的 News 还是后来的 Gmail,都使用了 Bottom Sheets 未能脱出本文提出的问题:

这里值得一提的是,Gmail 的 Android 版依然使用的 Menu 组件。我用过的 App 不算多(特别换了iOS主力机后),能依然保留Menu样式的直觉里是占了少数的。事实上像我这样轻易做出一个模糊的结论是很不负责的,知乎和即刻的三圆点(More)图标下也依然使用的是 Menu 组件,而 Dropbox 则是两边都采用了相同的 Sheets 组件。况且这背后的考虑也可能不同,也可能是像 Gmail 一样设计层面有所保留,也有可能是开发层面上的成本。这里不辞辛苦多费口舌的目的要说明的是,本文更偏向于抛砖引玉,其内容严谨质量可能与浴中奇思并无太多差距。

有了以上说明,便终于可以回到问题本身了,iOS上的这种现象比较严重,所以主要以这方面来举例——

上图是 iOS 版的 Dropbox 界面,我觉得既符合问题条件又有一定知名度的设计团队(起码透明化一些),Dropbox 比较符合。如图我在正常界面上蒙上了一层手指滑动区域,群青色圆圈所代表的是大拇指根部关节处,也就是其他四指在左边的握法(如果你经常双手操作,可以退出本网页了)。可以看到,无论是 NATURAL 还是 STRETCH 区域都无法触及顶部右上角的更多图标,我按照我的常用做法,上移整个手掌,然后在用拇指触及图标。

如图二,即为移动后拇指关节和所滑动区域。在不下移回手掌的时候,我们是无法触碰到 Sheets 组件底部的。即使可以上滑仍有底部部分无法触及。所以如果放在上面呢?

可以看到动作选项都在 NATURAL 范围内,但是一看到这样,就会顿生一种陌生感,而这个思路要克服的就是这种陌生感产生的潜在违抗意识——这个下拉区域到底是什么?滑动区域、与顶部标题栏的关系以及与对整个界面意味着什么等等,我觉得这些都是可以再深入挖掘的。

上面说的是触发位置在顶部时的情况,当其放置到底部时,目前的 Sheets 形式仍是较好的选择。比如 Google Tasks 的首页底部:

左边的汉堡菜单也没有使用 Side Sheets。

如果更多(三圆点)的触发位置在页面中的某个位置呢?那么这是首先淘汰的就是上方所提到的顶部向下弹出的 Sheets,然后居中一下这两者,可以看看即刻提供的思路:

最后的总结……大概没有吧,只是把一件小事拿出来说说。

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理

%d 博主赞过:
search previous next tag category expand menu location phone mail time cart zoom edit close