恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
还在为导航设计而犯愁么?教你五招轻松应对
0.0°
2016-12-28 自译外文 规范/资料 原作者: Zoltan Kollin 举报 7568 184 154 8

窗外飘雪的圣诞,泡杯热可可,来看看各类导航是如何各展神通的吧!

如果你致力于数码产品的开发,你应该早就阅读过一大堆吐槽汉堡状导航是如何因其低发现性和低效率而影响用户体验范式的文章。


幸运的是,越来越多的网站和APP正在进行各种实验,并且已经许多行之有效的解决方案了。下面列举的方案没有谁比谁更好,它们的具体可用性都是依照内容和情景来确定的。


1.Tabs

如果你网站或APP的分区有限,用户就应该能在这些分区之间快速切换,这时候Tab栏就阔以了。

Image title

Tab栏看起来像是最简单的导航,然而当你在设计它们的时候需要考虑到一些事情:

·最多只能展示五个分区

·Tab的顺序应该根据它们的优先级和逻辑顺序进行排列。

·根据具体情境,Tab既可以在屏幕上方展示也可以在屏幕下面展示。

·不加文字标注的ICON只能用于为大众所熟知并且经常使用的ICON。

举例:领英和谷歌照片

Image title


2.有“更多”这项选择的Tab栏

当分区超过五个的时候,一个比较有效的解决方案就是先展示四个最具优先等级的分区然后将第五个分区写上“更多”

Image title

这个解决方案的设计原则基本上和上面的单行Tab是一样的。“更多”这一项既可以链接到一个导航页也可以是一个下拉的菜单项。

Image title

你可能会说“更多”这个选项不如汉堡菜单(因为“更多”也是一种隐藏式菜单并且它的标注一点儿都没展示出它的内容),然而,如果你能正确的进行优先级划分,大多数的用户可以快速找到那四个重要的分区,所以这种丢车保帅式的导航依旧会提升用户体验。


举例:Facebook

Image title

新资讯,朋友请求,通知和搜索依旧位于标头,剩下的所有功能都可以在“更多”上找到。


3.逐渐缩减的菜单:

“Tab+更多”式的导航还有一个更智慧的版本根据屏幕的宽度来设计菜单,尽可能多的展示导航,并将其他东西都放在“更多”栏底下。

Image title

这意味着在比较低的分辨率底下“更多”菜单将包含更多的内容——当没有足够的空间去展示它们时,项目就会跳进“更多”之中。这个解决方案提供了比“tab+更多”更好的体验。

Image title


4.可滑动的导航:

如果你有一堆并不具备明显等级区分度的导航项目,并且“更多”式导航并不是一个好的选择时,另一个策略就是以可以左右滑动的方式展示出导航的所有项目。

Image title

这项解决方案的缺点在于如果不滑动,顶部就只有几个项目是可视的,所有剩下的项目都被藏了起来。然而,当开发者希望让用户去对内容进行探索时,这是个可行的方案。例:在网络商店上或者在新闻分类时。


从视觉设计的角度来说,你需要确保能提供充足的视觉线索来暗示横向滑动将会有更多可选择的元素。(例如通过将最后一个可视元素进行半隐藏)。

举例:Medium和Google

Image title

Image title


5.下拉式菜单:

一个并不普遍但却有趣的形式是:当其他分区的可见性和易用性并不重要时,运用下拉式菜单。

Image title

下拉式菜单实际上在这里扮演了两个角色:首先,它充当了一个页面的标题,下拉按钮暗示着这里可以对同级的分区进行快速的转换。即便在这种情况下选项是被隐藏的,下拉式设计也会暗示这个列表会包含目前页面的同级或者子集选项。

例子:Barnes&Noble and Duolingo

Image title

Image title


有时候,汉堡菜单可能是一个令人惊喜的好选择

由于汉堡菜单的主要缺点是不易发现性,当它设计用来作为主要导航菜单式,还是推荐选择考虑其他方式。但是,当设计第二等级的导航选项时,这个形式可能是一个合适的解决方案。


如果首选项要在屏幕要和屏幕上的行动召唤按钮一样明显,那么对于二级导航来说汉堡菜单是一个合适的地方。

Image title

当主要导航是围绕着用户流来设计的并且相关选项在屏幕上清晰可见的时候,就可以使用这个类型。Uber就是个很好的例子。

Image title

由于这个界面的所有内容都为叫车服务,类似于历史和设置之类的二类选项不需要过于明显,放在汉堡菜单里就是比较合适的。


谷歌翻译和这个很像:

Image title

由于它的主要功能(语言切换和输入文本进行翻译)是屏幕上最重要显眼的部分,隐藏类菜单就是最适合放置类似帮助和社区之类的辅助功能的地方。



总结:

没有一种能适用于所有场景的解决办法,它通常取决于你的产品,你的用户和具体的情境。在其他软件上工作良好的导航菜单不一定适用你的软件。然而,每个好的导航设计的基础是信息架构——清楚的结构,优先级,以及根据用户需求所做的标记。所以从现在开始来寻找最适合你的产品的移动导航吧!















更新:2016-12-28

收藏

184人已收藏

Iris_Uu

腿长一米八

  • 8

    作品

  • 148

    粉丝

  • 0

    关注

  • 一波全新的Google设计作品
  • 减少认知过载——为了更好的用户体验
  • 创建完美用户体验设计不可缺少的七个原则
  • 【第一周】Dribbble作品合集
相关标签
设计iOSAndroid

    猜你喜欢

      2016-12-28 自译外文 规范/资料 原作者: Zoltan Kollin 举报 7568 184 154 8

      还在为导航设计而犯愁么?教你五招轻松应对

      0.0°

      你确定要举报还在为导航设计而犯愁么?教你五招轻松应对

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年12月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      154
      184
      8

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录