欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站建设News

如果你不喜欢折叠手机菜单,我们帮您找了5种其它解决方案

发布时间:2018:01:23 18:05:19 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1565个文字,预计阅读时间4分钟
导语
网站上的空间十分宝贵,特别是对移动端设备而言。如何充分利用网站上的空间,提高网站内容的可读性,正确引导用户进行浏览,是站长们面对的共同难题。一些设计师认为通过使用

  网站上的空间十分宝贵,特别是对移动端设备而言。如何充分利用网站上的空间,提高网站内容的可读性,正确引导用户进行浏览,是站长们面对的共同难题。一些设计师认为通过使用隐藏式菜单(最典型的要数汉堡图标)可以有效解决这个问题。不过,研究表明汉堡图标这样的隐藏式导航菜单虽然在节省网站空间上是一把好手,但在某种程度上却会影响用户体验。如果汉堡图标不是"良药",又有哪些"妙方"呢?在今天这篇文章中,小飞就带大家看一下为什么汉堡图标会妨碍用户体验,以及可替代汉堡图标的几种导航菜单样式。

  为什么汉堡图标会妨碍用户体验?

  首先小飞要澄清一个事实:在移动设备上,可见式导航其实比汉堡图标等隐藏式菜单使用得更为广泛,前者大概是后者的2.5倍。很多人可能对这一数据感到吃惊,但这是真实的数据调查结果。如果你有仔细研究过汉堡图标和用户体验设计相关的文章,你应该更能理解隐藏式菜单和用户体验的冲突所在。汉堡图标等隐藏式菜单最大的问题就在于可见性很低,与可见式或部分可见式导航相比,在网站中它更难被用户发现,更谈不上使用了。换句话说,在网站中使用汉堡图标等隐藏式菜单,对用户来说是一个挑战,是一种有障碍的用户互动形式,用户很可能会在浏览过程中感到困惑和迷茫,这样的用户体验还会好吗?

  

推荐阅读:一款APP设计的从0到1之:iOS篇(精华版)

如果你不喜欢折叠手机菜单,我们帮您找了5种其它解决方案

 

  汉堡图标的替代方案:

  虽然说在移动网站中使用哪种形式的导航菜单没有强制性的要求,但最好还是采取显性的导航菜单设计,保证主要的导航菜单项都是可见的,避免用户迷失的状况,确保良好顺畅的浏览体验。下面是几种可见性较强的导航菜单样式:

  1. 标签式导航

  如果你网站的导航菜单项数量相对不多,且比较常用,这时你可以选择标签式导航。不管你准备将这个标签式导航放在页面上方还是下方,一定要确保用户能一眼就看见它,确保菜单内容是一目了然的。虽然标签式菜单算是导航菜单设计中最简单的一种样式了,但在网页中使用这种形式的菜单时还是要注意以下几点:

  使用标签式导航时,菜单项最好不超过5个;

  标签式导航在使用时,至少应有一个标签始终处于活动状态,且通过色彩对比,将活动状态的标签突出显示出来;

  通常第一个标签应设置为主页,标签栏顺序按照用户使用的优先级来排列;

  在导航标签当中,最好使用"图标+文本"的方式来呈现,而诸如搜索应用中的搜索按钮这样常用且用户熟知的操作,则只需要通过图标来展示;

  为了节省空间,导航栏可以在滚动翻页过程中隐藏,而当页面静止的时候显现;

  

如果你不喜欢折叠手机菜单,我们帮您找了5种其它解决方案

 

  2. 标签栏+"更多"选项

  如果你的导航菜单项数量比较多,你可以选择"标签栏+更多"的菜单设计方式:将4个比较主要的菜单项以标签样式展示出来,剩下的菜单项则出现在"更多"选项中。这种设计方式的原理其实和标签式导航没有多大区别,只是多了一个"更多"选项。不过,这种导航菜单样式比隐藏式菜单更加优秀,一方面,虽然它同样隐藏了内容,但是绝大多数的重要选项已经被展示出来了,可见性还是比较强的。另一方面,"更多"选项按钮既可以出现下拉菜单,也可以链接到独立的菜单页面,具体的设计策略能够根据网站实际状况灵活处理。

  

如果你不喜欢折叠手机菜单,我们帮您找了5种其它解决方案

 

  3. 渐进收缩式导航

  渐进收缩式导航菜单,也被称为"优先级+"菜单,是一种符合响应式设计规则的菜单设计,它会根据屏幕宽度和大小,尽可能多的显示优先级菜单项,而那些无法显示出来的菜单项则会被收纳到"更多"按钮中,当然"更多"按钮中能够菜单项的多少也取决于屏幕的宽度。这种设计方案比静态的标签式+更多的按钮更加灵活自然,更能给用户提供较好的体验,,当然在设计方面也要复杂不少。

  

如果你不喜欢折叠手机菜单,我们帮您找了5种其它解决方案

 

  4. 滚动式导航菜单

  和前两种设计方案一样,滚动式菜单也是针对较多菜单项的一种解决方法。如果你的网站有许多菜单项,且菜单项之间没有优先级顺序,你可以将所有的条目列在可滚动查看的范围内,让用户自行查看。不过滚动式菜单的弊端在于当页面没被滚动时,只有主菜单呈现,剩下的菜单项都是难以看见的。

  

如果你不喜欢折叠手机菜单,我们帮您找了5种其它解决方案

 

  5. 全屏导航

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:资深网站设计师总结了在页面中放视频的7个注意点

下一篇:公司做外贸建站的流程是什么样

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信