谷歌 Web 开发最佳实践手册(1.3.3):Navigation Drawer

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】:当网站具有太多板块和子板块时,采用Navigation Bar是更好的做法。它即可以作为一个处于画布外的可滑动元素,也可以用来显示网站全局状态。

Navigation Drawer是一个滑动面板,通常用来显示网站的导航菜单,同时也用来反映网站的全局状态,例如用户登录。

用户可以通过放置在屏幕上方App Bar上的菜单按钮来滑出菜单。

简而言之,

  • Navigation Drawer必须让用户可以很方便地打开。
  • 如果网站的板块太多,可以考虑将一些内容分组,通过展开/收缩组来控制菜单项。避免向用户强加过多的东西。
  • 不要将非常重要的操作藏在滑动面板内。例如搜索,就应该显眼的放置在主页上,而不是藏在隐藏的面板里。

这种做法的主要优势是,在可上下滚动的面板元素内,内容允许增加,这适用于大型网站结构,同时又只占据屏幕很小的空间。

对于用户来说,要让他们花最少的学习成本在网站上找到Navigation Drawer,一个显眼的菜单按钮是非常重要的。

Tabs VS Navigation Drawer

一些开发者发现,当他们使用Tab而非Naviagtion Drawer时,会获得更高的交互赞誉。然而,选择何种方式是在Navigation Drawer的灵活性和Tab Bar的直观性中进行平衡,你需要考虑哪种方式最适合你的网站。

收藏 评论

关于作者:胡蓉

胡蓉:某互联网公司交互设计师。在这么一个梦想者云集的互联网乐土中,用心培育着属于自己的那一片天地。做自己热爱的,然后一直坚持下去~(新浪微博:@蓉Flora) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部