当前位置:首页 >  站长 >  网站运营 >  正文

创意导航菜单最新趋势分析 告诉你为啥别人的菜单才好看(含6个实用例子)

 2017-09-21 15:38  来源: A5企业专栏   我来投稿 撤稿纠错

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

个性化元素确实可以让网站更加有创意,但是不管一个网站多么有创意,没有良好的用户体验都是难以稳住顾客群的。而导航菜单是决定网站用户体验和可用性的重要因素之一,有效的导航菜单能够让用户以最简单、最方便的方式达到网站的不同页面,快速获取自己想要的信息,优化用户的体验。从搜索引擎的角度来看,导航菜单栏也是它们比较看重的元素之一,因为它上面布局了产品页面或其他网站页面的导向链接,是整个网站回流的核心位置。一个糟糕的导航菜单会让用户体验不舒服,用户流失,更谈不上转化率、销量了。

所以,怎样做出一个吸人眼球且有效的导航菜单尤为重要。今天小飞主要介绍一下导航菜单设计应该遵循的基本原则,网站常见的几种导航菜单样式,以及相应的栗子,希望大家可以通过这些栗子更好理解不同导航菜单的样式,做出更优秀的导航菜单。

导航菜单设计的基本原则:

1. 位置恰当

导航菜单在网站上的位置十分重要。根据美国一项眼球追踪设备研究得出,用户对网页的浏览视线是呈"F"型(即网页浏览注意力"F"现象),这是说用户在浏览网站时更容易注意到网站的上方和左侧,这也是为什么用户体验优化要求网站设计时将最重要的信息放在网页的左上方。因此为了更能吸引用户的注意力,我们应该将导航菜单放在网站的上方或左侧,占据有利的位置。

2. 简洁明了

一个有效网站导航的关键就在于简单明了。就算网站的内容分类五花八门,涉及多个链接,也不要让用户觉得复杂。做到这点我们需要先建立好网站的信息框架,将网站内容有逻辑的串联起来,再决定导航菜单的样式。如果你不太确定目标用户的喜好或逻辑思考方式,可以借助一些测试技巧比如焦点团体法和卡片分类法。在这小飞简单的介绍一下这两种用户测试方法,焦点团体法是指组织特定的用户针对特定的话题进行非正式的讨论,以获得用户对某项话题的认知和理解,卡片分类法是指将一副卡片(每张卡片上有词汇或图片),让特定用户根据自己的喜好进行排序,获取用户的真实想法。总而言之,这两种方法都是为了获取用户对于网站的看法,更好的服务于用户,终极目标都是给用户提供良好的体验。

网站的信息框架已经构建好,所有内容都已按逻辑顺序进行分类,就大功告成了?No,导航菜单的文本措辞也要简洁明了,这样才能发挥导航菜单的效用。在选择菜单文本时,我们应该使用清晰、简单易懂的文本,尽量用最简单的方式表达传递信息。尽量使用用户熟悉的词语,千万不要自己发明创造一个词来显示我们的创造力,让用户觉得困惑不解绝对不是一个好主意。

3. 合理配色

导航菜单的配色也很重要,颜色的运用可以让它更有效,更方便用户操作,比如,当前页面所对应的按钮可以相应地变成灰色。我们还可以使用不同颜色突出网站内容的不同分类,不过要注意菜单项和文本的颜色是否相近,避免因为颜色相近造成的文本显示不清,信息的传递在网站中始终是很重要的。另外,导航上配色的应用从某种程度上来说也代表着网站的个性化品质,决定着网站的风格和格调。

创意十足的导航菜单设计

一提到网站导航菜单设计样式,小飞相信大家脑海中第一个浮现就是水平导航菜单。水平导航菜单是最经典、最简单的设计样式,它也是"资历"最久的,经过时间的检验历久弥新,很多大型公司网站仍在使用这一样式,比如谷歌、百度等搜索引擎的网站。但是要是比较导航设计的创意性的话,水平导航菜单可能要显得平淡许多了。所以今天小飞带大家看看其他一些有效、别出心裁的导航菜单设计。

垂直导航菜单

垂直导航菜单也算是比较经典的导航菜单设计样式,它是相对于水平菜单而言的,主要将菜单项放在网页的左侧或右侧。小飞在前面也聊过垂直导航菜单在网站设计中的优缺点,大家如果感兴趣的话可以看一下《在网站中应该使用垂直导航菜单吗? 》。下面是垂直导航菜单的一个栗子(将菜单放在网站的右侧):

下拉菜单

就网站设计而言,下拉菜单比较好的一个选择,因为它可以帮助保持网站布局的简单、干净。不过,小飞建议不要使用多于两级的下拉菜单,因为多于两级的下拉菜单常常会让用户觉得内容很多,会让网站看上去很混乱。还有,下拉菜单中的菜单项也不要超过10-12个,这也是为了遵循导航菜单应简洁明了的准则。下面是一个比较糟糕的栗子:二级菜单下面还有三级菜单,严重的影响了网站设计的美感。

超大导航下拉菜单

超大导航下拉菜单的设计是高容量链接网站的典型解决方案。这种类型的导航菜单通常分门别类,将网站中的所有栏目都一一呈现出来,可以让用户一目了然。超大导航下拉菜单尤其适合电子商务的网站,因为这种形式的导航常常可以充当一个销售员的角色,用来推销着网站中最畅销的产品,或者最流行的栏目。

隐藏式菜单

隐藏式菜单,顾名思义,隐藏各种导航选项。提到隐藏式菜单,大多数人都会想起汉堡图标(见下图)。隐藏式菜单可以节约网站的空间,保持网站的简约,让用户将更多的注意力几种在网站的重要信息上比如网站内容、图片或者视频。而且,这种隐藏式的菜单在小屏幕的移动设备上受到广泛的欢迎,因为移动用户可以在空间不够用的时候点击图标将导航页面隐藏起来。

全屏导航菜单

这种类型的导航菜单经常需要由一个按钮或链接触发,比如汉堡图标。在未点击按钮或链接之前,网站只显示背景图片或几行文字,用户可以全身心的关注这些内容,而在点击之后,占据整个屏幕的菜单栏就会出现。这在移动设备上看来可能不够惊喜,但是通过电脑屏幕显示时,这种设计方式新颖十足,很能够吸发用户的好奇心。

单一选项菜单

这种类型的导航菜单和长滚动条的网站结合在一起常会产生让人意想不到的结果,它也可以作为进入网站不同页面的的入口。单一选项菜单时指网站的主页面上只有一个菜单项,比如下图中的"EXPLORE YOUR DESERT",它的魅力在于减少给用户提供的选择,可以通过仅有的信息给用户留下强烈而深刻的第一印象,更加直接的引导用户。因为只有一个菜单项,如果用户愿意点击继续,这意味着他们有很大的可能性持续浏览下去。通常,这种菜单形式常用在主页面的元素上,比如标题、标语、图片或行为引导按钮上。不过我们在应用这种设计方式时千万要记住,任何新的设计都需要一定的测试,目标用户能够接受的导航菜单才是适合的。

导航菜单的重要性不言而喻,今天小飞已经介绍了几种很有创意的导航菜单设计,看完你对自己网站的导航有什么新的想法吗?如果觉得有比较适合自己的网站的导航样式可以大胆尝试一下,不过记住:不要为了创新而创新,不要为了创意而牺牲了网站的可读性。快来起飞页自助建站平台()做一个网站吧!

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

相关标签
起飞页建站

相关文章

  • 响应式网站中优化用户体验的7个关键点

    随着移动设备的不断兴起,响应式设计越来越受到大众的喜爱,站长们在搭建网站时也更加倾向于选择响应式网站。不过,大多数站长们都认为既然响应式网站可智能根据设备屏幕大小呈现不同的展示效果,那就不用再对移动端的网站进行手动调整了。其实这种看法是片面的,响应式网站虽然自身具备一定的特质,但有时PC端网站和移动

  • 盘点2017年最受欢迎的10个商城范例:我们从中可以得到哪些启示?

    在电商和线上购物快速发展的今天,拥有一个商城网站很是必要,关于试水独立商城的好处大家可以浏览《有了淘宝京东,为什么还要自建商城网站?》查看。但是,搭建商城网站并不简单,庆幸的是目前市面上涌现了不少建站平台,起飞页自助建站平台就是其中一个,各位商家可以借助起飞页轻松搭建出一个好看、实用的商城网站。不过

    标签:
    起飞页建站
  • 让首页背景动起来是怎样一种感觉?8张图告诉你真相!

    现在越来越多的设计师开始在网页中使用循环视频作为背景,这种现象的出现主要有两个原因。一方面,移动设备性能不断完善,网速越来越快,用户能够且有条件在移动设备上浏览视频背景的网站;另一方面,随着HTML5技术的发展,很多主流浏览器的视频标签都支持循环(Loop)属性,网页上单个或一系列视频短片的循环播放

    标签:
    起飞页建站
  • 缺乏灵感?给你8个值得每天学习的顶尖设计网站

    网站设计是一种艺术,它离不开灵感和创意。但灵感与创意的涌现是需要碰撞、需要时机的,大多数设计师都不可能每时每刻都灵感爆棚。当您缺乏设计灵感时,不妨看一看下面这些网站,它们都收录了丰富的素材,都有许多独立设计师上传的优质作品,没准这些设计就能让你眼前一亮,获得一些想法或启发。赶紧和小飞一起看看这8个值

    标签:
    起飞页建站
  • 目前为止用户体验度最好的表单:浮动标签式的表单

    在当今这个互联网时代,填写表单对用户来说就是家常便饭,在网站进行注册登录时、在网上购物时,都免不了填写表单这一环。表单是网页设计中重要的组成部分之一,在获取用户信息方面发挥着不可或缺的作用,它是用户和网站的一种互动形式,这种形式的互动越顺畅,网站的用户转化率就越高。这也是为什么许多站长们一直在研究如

热门排行

信息推荐