本文作者:changrun90

5个常见界面模式,提升『导航菜单』的用户体验

6年前 ( 2017-08-15 ) 953
摘要:  品牌推广就用这几招,七月活动立减500-1000元   可访问的导航会引导用户通过界面中的信息流,帮...

 品牌推广就用这几招,七月活动立减500-1000元

  可访问的导航会引导用户通过界面中的信息流,帮助他们完成任务,提升你的用户体验和推动你的网页和移动端的转换。同样,如果用户无法找到所在页面或应用程序,该页面或应用程序就是无用的,糟糕的导航设计使用户体验变得糟糕,导致用户退出转换渠道。

  对界面友好的导航秘诀是从导航菜单开始。为了让用户在你的网站或应用上从A点到B点,他们需要一张地图来指引他们。设计导航菜单应优先于设计过程。在开发之前对导航菜单进行原型化,将为你提供从开始实时可视化和交互设计所需的资源。

  我们来看看5个常见的界面模式。

  一、下拉菜单,用于平滑的网站导航设计

150268094748816268

  下拉菜单具有用户可以选择的几个值,并从那里被带到网站的另一个区域,是一个可扩展的界面导航。下拉菜单是一种网站导航设计,可将用户传输到网站中一个新的位置,并根据所选的最后一个选项执行操作命令菜单。

  什么时候设计下拉菜单?

  当你有很多显示选项并希望节省空间时,下拉菜单是浏览网站的一个不错的方法。

  熟悉易于扫描,一个好的下拉菜单可以提高点击率。但它需要一个时间和地点,所以想想你的用户体验模式。菜单需要包含足够的导航值,以便用户知道怎样与它进行交互(例如,单击所选值而不是使用单选按钮进行双击),而不是让用户难以扫描菜单列表。明智地使用它,将会为你的用户体验和界面设计做出好的改变。

  二、滑动汉堡包移动端菜单

150268098935842999

  滑动汉堡包菜单或滑动菜单是用于显示多个链接,常见的Android和iOS移动菜单。在“休息”位置,滑动菜单在屏幕中隐藏。通过触发汉堡包图标,用户可以访问未覆盖的导航链接。

  什么时候使用?

  滑动汉堡包菜单适用于响应式网页设计。例如,Anroid的Gmail收件箱的导航抽屉,YouTube和Facebook的界面。

  滑动菜单是隐藏导航的理想选择,例如,清除杂乱的具有大量导航链接的移动屏幕。在这里阅读更多关于滑动菜单的最佳做法。

  三、网页界面模式的定位菜单

150268104729672875

  定位菜单也可叫作粘性菜单是一种网页界面模式,其中标题区域(菜单,网站标题和标识)在向下滚动时保持可见,页面内容在其下方流动。粘性标题已经成为一种网页界面模式的标准—— Google +和Dropbox都有粘性菜单。

  什么时候使用?

  定位菜单应用于要采取行动的网页页面,如零售,电子商务网站。用户可以在几秒钟内到达导航选项——使定位菜单非常强大。速度是用户在浏览网站时最重要的。事实上,根据Akamai and Gomez.com study,79%的网络购物者如果遇到问题是不会再返回网站。

  四、自定义多栏下拉菜单菜单(用于网页导航)

150268108125883357

  多栏下拉菜单是用于网站导航的可扩展的多级菜单。它具有二维面板,分为导航选项(选项卡)组,每个选项卡中的所有链接都可以一次使用,因此无需滚动。用户单击或悬停在选项卡上就可以查看其包含的链接。

  像下拉菜单一样,多栏下拉菜单会使用图标来提供结构和子菜单的可见性。它们还可以包括导航链接旁边的图像或彩色字体,以将用户的注意力引导到值得注意的内容上。

  什么时候使用?

  多栏下拉菜单是伟大的储存空间,它隐藏内容,直到用户将鼠标悬停在菜单栏上,才能显示所有的导航链接。Nielsen Norman Group 研究表明在网页上显示的链接数量越多,更受欢迎的多栏下拉菜单就越多。

  此菜单最适合可访问的网页设计,视觉障碍用户或高级网络用户。它们也受到包含大量不同主题的杂志风格博客的欢迎。

  五、用于响应导航的网格

150268111034183648

  网格是在网页和移动端导航中使用的一个导航模式。网格包含一组分割成可扩展和可折叠的块的图像。它是另一种高度可视化的结构,允许你将可视化主题和用户体验流相关元素组合在一起。

  什么时候使用?

  网格内的图像提供了大量的点击/点击目标,使网格成为移动界面导航的理想选择。它们也用于许多的网页设计和用于浏览视觉内容的网站,如图像共享网站Pinterest和音乐流媒体服务Spotify。

  由于它们的逻辑和适应性布局,网格是一个完美的响应式导航!

  原文地址:https://uxplanet.org/5-ui-patterns-navigation-that-makes-good-ux-sense-92a65df7485d

  原文作者:Justinmind

  翻译:SKYUI

    文章版权及转载声明:

    作者:changrun90本文地址:http://changrun.org/svip/1104.html发布于 6年前 ( 2017-08-15 )
    文章转载或复制请以超链接形式并注明出处凡客笔记

    文章作品版权归原创作者所有,如不慎侵犯了你的权益,请联系我们告知,我们将做删除处理!
    本站程序只供源码爱好者学习研究使用。借鉴职业开发人员的代码写法,不得用于非法用途,不得违反国家法律,否则后果自负.
    切记:本站提供的模板来源于网络,收集供学习交流之用。请勿改成非法网站,否则后果自负,与本站无关。

    分享到:

    发表评论

    快捷回复:

    评论列表 (暂无评论,953人围观)参与讨论

    还没有评论,来说两句吧...