当前位置:首页 >  站长 >  建站经验 >  正文

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

 2018-01-23 16:22  来源: A5企业专栏   我来投稿 撤稿纠错

  【推荐】海外独服/站群服务器/高防

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

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

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

 

undefined

 

汉堡图标的替代方案:

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

1. 标签式导航

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

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

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

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

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

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

 

undefined

 

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

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

 

undefined

 

3. 渐进收缩式导航

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

 

undefined

 

4. 滚动式导航菜单

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

 

undefined

 

5. 全屏导航

前面的4种设计方案的基本思路,都是尽可能的少占据屏幕空间,而全屏式导航则采用了完全相反的策略。这种设计方法,直接将主页做成导航,用户打开首页之后,可以上下滚动浏览导航类目,根据需求来点击不同的导航,寻找自己想要的内容。

这种设计模式通常适用于目标任务比较明确的网站,尤其适合于那种用户任务会固定在特定的类别当中的应用和网站。这种结构明确的网站,对于他们的固定用户而言,是非常的清晰、明确的,一方面可以让网站的设计和优化更加便捷,另一方面对用户而言更加好用,更容易集中注意力。Yelp网站就使用全屏导航让设计以更加一致的方式来组织导航内容,更有针对性的展示信息。

 

undefined

 

最后,小飞还是要说,在移动端的导航设计中,想要找到一个万能的解决方案是不现实的,网站应该采用什么样的导航始终取决于你的产品、用户喜好以及所处情境。所以,设计导航菜单时一定要基于网站和网站本身的信息架构,并且参考用户需求,来定制合理的结构、优先级和标签内容,帮助用户更好的浏览信息。只要做到这点,小飞相信你的网站导航就是清晰易懂的,网站用户体验就是极佳的。

快来起飞页自助建站平台(http://www.qifeiye.com/?t_wd=a5)做一个响应式网站吧!

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关文章

  • 神马搜索移动网站优化指南

    神马搜索是真正的移动搜索,在发布至今短短几月内在国内移动搜索引擎市场渗透率已超过20%,位居市场第二位。本文提供神马搜索在网站收录、优化上的官方说法,帮助站长合理、持续的优化网站,共同促进移动搜索的发展。

  • 移动商城网站在建设时必须要了解的一些事项

    随着移动互联网的不断发展,越来越多的人可以使用手机达到绝大多数的上网的需求,网购自然也包含在内。在都市白领快节奏的生活催动下,越来越多的移动商城上线,使这些用户可以轻松的使用手机在互联网进行购物,于是建设移动商城的企业和个人也越来越多。那么,在进行移动商城系统的建设时,有哪些必须要了解的问题呢?

  • APP设计:游戏APP的运营浅析

    iOS成为大家争先恐后争夺的一块大蛋糕。比如刷榜,冲榜,ASO,热搜等等。苹果对待所有设计者一视同仁,Appstore把棋牌手游定位在casino,默认守则就是不推广棋牌手游。对于系统榜单排行不做干预,(国内国外都存在刷榜行为),对于侵权和违规手游有下架处理。

  • 移动网页速度慢怎么解决?

    如果您的分数很低,您可以做一些事情,而无需重新设计您的网站。您一直在做正确的事:保持您的内容新鲜,并增加您的反向链接。然而,你仍然看到自然流量的稳步下降。如果这听起来很熟悉,那么就该检查你的移动页面速度了。

    标签:
    移动网站优化
  • app设计之教育类app该如何推广?

    将APP市场推广渠道分为付费渠道,赞助渠道,自媒体渠道,口碑渠道,赞助渠道。针对教育类APP运营推广,选择适当的APP推广渠道,这个时候就需要APP运营人员对于APP如何推广有深入的了解,真正做到随手拿来就可以做推广,所以教育类APP的推广,需要踏实,还要善于发现,在很多时候认识一个APP产品,比做

    标签:
    app推广
    app设计

热门排行

信息推荐