FB LIKE JACKER

Bottom Navigation —— 如果要用, 请认真用

2016 年Jun月 3 日由 发布 | 类别: Material Design 研究会 | Tags:
在 π 日, Google 对 Material Design 进行了大家期盼已久 (说句实话, 这里的 「期盼已久」 换作 「又惧又期待」 会比较合适吧) 的更新, 加入了对 bottom navigation 的明确规范.

 

如果你的应用:

  • 有 3-5 个顶级导航;
  • 需要频繁在顶级导航项之间切换;
  • 希望顶级导航项能够吸引用户的注意力;
  • 只针对手机;

那么, 便可以考虑使用 bottom navigation.

Material Design 的 bottom navigation 与 iOS HIG 规范的 tab bar 理所当然地有共同之处:

  • 就算进入子级界面, bottom navigation 依然显现;
  • 在顶级界面中, 点击 bottom navigation 当前激活的项目会回到当前列表的顶端.

但是在使用时, 不要直接照搬 iOS tab bar, 毕竟两者还有很多区别:

  • 往上卷动时隐藏, 往下卷动时显现;
  • 当前激活的项目文字会变大 (未激活 12sp, 激活 14sp);
  • 触摸会产生 ripple 反馈;
  • Bottom navigation 可以有不同的颜色;
  • 可以选用只有激活项带有文字标签, 未激活项仅显示图标的样式;
  • 避免在平板以及大屏设备上使用, 建议转换为 drawer;
  • 切换不同顶级导航项时, 内容区采用淡入淡出的动画;
  • 切换顶级导航项的时候, 重置当前导航项的状态 (不保留状态 / 历史);
  • 避免与顶部 tabs (对应 iOS 上的 segmented control) 同时出现.

不管你是不是打算在应用里采用 bottom navigation, 都应该看一看这些规范. 同时, 强烈建议在考虑采用 bottom navigation 之前, 先想想你的应用到底适不适合 bottom navigation.

最后是个人感想: 虽然 Google 不断强调 Material Design 是 「一套活的规范, 不是板上钉钉」, 但是就这样推翻坚持多年的传统多少令人无法接受 — 当然, 实际上令人无法接受的是 Google 先违反, 然后再修改规范的这种行为.

有句话我想大家都很熟悉: 「存在即合理.」 这里姑且不讨论这句话的对错, 在 UI/UX 的讨论上, 某种范式的出现必然是为了解决某种具体的问题.

故, 放下心中的成见, 有的时候, 做有些事情, bottom navigation 是更为合适的解决方案. 当然, 如果它对你而言并不是更为合适的解决方案, 那就更无需为此操心了.

同样的, bottom navigation 也不是万灵药, 它有很多不擅长或者不如 tabs/drawer 的地方, 具体可以参看: 如何看待新版 Google Photos 的 bottom tab bar? – NovaDNG 的回答.

« So… Happy Birthday, Material!
Material Design 更新: 动效, 增长与用户教育 »

About NovaDNG

Nexus 4 (Android 5.1), Xperia Z3 (Android 5.0), Xperia Z2 Tablet (Android 5.0), veer 4G (webOS 2.1.2), Chromebook Pixel LS (2015). Guest Member of HiHex. Product Design @ Zhihu.com

» has written 188 posts

锋客的朋友们

  • 少数派
  • 煮机网

签订契约成为机油吧!

Buy me a coffee~ ;-)

Buy me a coffee~ ;-)
閃開│讓專業的來 沒辦法│我這個人就是太正直了