G's Vision

Less But Better.

拇指那些事儿:为何在 iOS 设计中触及导航应该代替导航栏?

导航栏难于点击

导航栏自初代 iPhone 起就已存在。在历史上,导航栏一直方便、清晰、易于理解且易于构建。

后来,手机的尺寸激增,iPhone 7+ 的大小足以取代 iPad mini 的尺寸。现在,假如你拥有一部新款 iPhone,导航栏几乎无法触及。

不断扩大的屏幕意味着导航栏距离我们的拇指越来越远。iPhone 7+ 的屏幕如此之高,结果导致我们的拇指不得不多用 150% 的距离来击那些烦人的按钮。这不过一两个关节的长度而已。没啥好奇怪的。Huff 的触摸区显示了右手拇指的可达性

我们的视觉语言随着设备的变化而改变。是时候从导航栏转移到拇指触及范围内的导航了。本文中,我们暂且称其为触及导航(Reach Navigation)。


为何导航栏触及不到

导航栏是系统标准应用的重要控件,用于电话、消息、邮件、日历和其他无数的应用中。它深受青睐有众多原因:

  • iOS 的标准  苹果公司将导航栏打造为可定制、可扩展、可访问并且易于实现的控件。因为是 iOS 的标准控件,所以在众多应用中都可以看到它的身影。

  • 导航  导航栏的左右侧都为按钮留有足够的空间。左侧区域通常引导用户至不同的层级结构,右侧区域则可以根据情况进行定制。返回按钮告知用户他们当前不在根视图中。

  • 标题  标题为定义功能视图的文本提供了一个固定位置。由于导航栏一直显示,因此它有助于进一步建立信息层级结构。

  • 伴随标签栏  如果在屏幕底部有一排可点击的图标(也就是标签栏),把其他图标放在屏幕顶部有助于区分父/子关系。

  • Logo   你的客户可以把 logo 放在这!我真是个天才,哈哈哈,开玩笑,这有点俗气,我跑题了。

几个导航栏示例供你享用

我的天呐,竟然有这么多在你的项目中使用导航栏的好理由。除了,该死!你现在用拇指点击那里实在是太困难了。

情况既然这样,就让我们谈下导航栏的一些缺点:

  • 难于返回。只要你所在视图没有水平滚动的元素,你就可以从边缘滑动返回,但如果有的话,那你则进入拉伸区域了。

  • 命名所有的视图很痛苦。并非所有的屏幕都需要一个固定标题,如果标签太长则需要适应,如果留有一个空白的导航区则看起来很单调。

  • 导航需要两只手。如果你可以用一只手握住设备,那你应该可以单手操作。这样感觉更好,并且在需要推购物车和抱宝宝时会更加方便。

  • 简单的应用会变得更复杂。导航栏往往会导致信息架构层级更深。而水平渐进展示信息则易于开发,这就意味着在扩展内联层级和使用平级结构之间会有一场斗争。

好了,我们现在知道了导航栏的种种不足,那我们该做些什么呢?


触及导航与苹果公司

作为一名 iOS 设计师,我会在这部分通过指出苹果公司是如何融入触及导航的来支持我的论点。准备好了吗?我们将从苹果公司为适应更大尺寸的屏幕所采取的两种明显的做法入手。

用左滑边缘返回来代替返回按钮

首先,你不再需要点击返回按钮了,你可以左滑边缘返回。你还可以在滑动返回的时候控制屏幕的移动,让你在提交之前瞥见上一屏。这并不适用于每个应用,但当它支持的时候,你会看到返回标签过渡为标题的漂亮动效。

轻轻双击 home 键内容下移

其次,iOS 提供了一个名为「可达性」的特性,当你轻轻双击 home 键时,屏幕上的内容会向下移动来帮助你点击顶部附近的按钮。当前虽然可行,但这感觉就像是个绑着绷带的解决方案。

如今转向触及导航的趋势越来越明显。苹果公司已经开始去掉自身应用中的导航栏。在 iOS 10 中,地图和音乐都进行了结构性的重新设计,减少了对于导航栏的需求。

Apple Music 从 iOS 9(左)向 iOS 10(右)的转变。去除导航栏使得增加主视图的标签大小成为可能。漂亮。

现在这两个应用都使用了一种你可以下滑消除的卡片。

Apple Maps 从 iOS 9(左)向 iOS 10(右)的转变。UI 几乎完全颠倒。地图设置和锁定当前位置更难触及,但是搜索和结果被优先展示。

只有几个 Apple Music 的返回按钮在 iOS 10 中保留,但是在未来的操作系统中它们似乎被标记为删除。为只占 20% 面积的按钮投入这么多横向空间是愚蠢的。Apple Music 也恢复成一个仅有的返回标签而不是对返回目的地的描述,这种做法从 iOS 7 发布时就一直是返回按钮的基础。

iOS 10 的返回按钮占用了大量的面积。似乎是暂时的,不是吗?是的。

这似乎是苹果的行动倾向,相应地也给了你改变设计的机会。


融入触及导航

下面是如何在你的应用中融入触及导航的一些细节。如果你正致力于:

一个使用标签栏的新应用:

  • 使用从底部弹出并且可以滑动消除的卡片。

  • 不要把像过滤或者改变视图这样的重要按钮高高地放在上面,而是看看能否将它们浮动在标签栏之上。

  • 在你为最宝贵的空间选择标签之前,问问哪些特性是关键任务。

  • 不要在导航栏中放置像搜索、购物车、新消息这样的目标按钮。将它们作为一个便签或者嵌入内容区域中。

一个没有标签栏的新应用:

  • 尝试外露抽屉导航,或者支持下滑的卡片。

  • 我还需要说吗?优先将按钮放在屏幕底部。

一次对遗留设计的改进:

  • 将最常用的项目移到底部。

  • 确保在所有视图中都可以滑动屏幕边缘返回。

  • 看看在最有用的屏幕区域能收起什么来释放空间。

  • 将重要的操作从导航栏到右上角移除,并将它们放在其他地方。

一次 Safari 浏览器如何将地址栏移到底部,去除工具栏并依然保持功能性的快速展示。

最后,也有一些将关键任务按钮放在易触范围内的例外。如果一个动作会造成严重的后果,那么将按钮移到触及范围之外是帮助用户避免错误的方法。假如胖拇指误触到这些按钮可能会花掉某人数千美元或者删除一份重要文件,那么就把这些选项移动一下。


触及导航的一些案例

新的苹果应用并非唯一的开始使用触及导航的产品。Lyft 和 Pokémon Go 将所有常用的操作放在单手触及的范围之内。

Pokémon Go 和 Lyft 使用触及导航。

其他一些应用,例如Overcast,已经开始使用让你下滑的卡片。

Overcast 使用让用户下滑的卡片。

预计会有越来越多的应用把功能操作移到屏幕底部最易触及的区域。虽然功能过多的应用麻烦最多,但适应起来却很容易。


保持触及

从苹果公司首次发布开发工具包起,导航栏就一直是 iOS 重要的组成部分,而且也很好用。但是时候放弃了。

让我们就不再把重要的按钮放到屏幕顶部达成一致吧。更好的导航应该触手可及。


原文作者:Brad Ellis

原文地址:https://medium.com/tall-west/lets-ditch-the-nav-bar-3692cb17cc67


评论

热度(2)

  1. AmberG's Vision 转载了此文字