武汉高端网站设计之网站导航设计要符合用户体验

作者:武汉网站建设 来源:武汉建站公司 2019-05-05 20:07

武汉高端网站设计之网站导航设计要符合用户体验,著名的格林童话故事里面汉赛尔和格莱特知道后母想要在深林里面丢掉他们的计划,将面包屑撒在来时的路上,虽然当月亮升起时,面包屑被鸟吃掉了,但是现在的互联网设计师们从这个故事中找到了灵感,设计出不会被鸟吃掉的固

 网站用户体验分析:页面导航原则

武汉高端网站设计之网站导航设计要符合用户体验,著名的格林童话故事里面汉赛尔和格莱特知道后母想要在深林里面丢掉他们的计划,将面包屑撒在来时的路上,虽然当月亮升起时,面包屑被鸟吃掉了,但是现在的互联网设计师们从这个故事中找到了灵感,设计出不会被鸟吃掉的固定“面包屑”。

汉赛尔和格莱特为了在森林中找到回家的路,撒下了面包屑,这是一种导航方式,如果没有被鸟吃掉,无论走到森林的任何地方都可以知道如何从当前的位置走回家去。在互联网信息爆炸的今天,互联网的设计师们在网页上设计出各种各样的固定面包屑(如图1)也是为了不让用户迷失在信息的大海中,给予用户的一个导航的方式。Apple是大家公认的用户体验最好的设计公司,我们来看看apple.com是用什么方式完美地完成用户导航需求的。

页面导航原则

 

图2:apple网站itunes新功能介绍的面包屑

图2是apple.com上面itunes新功能介绍的面包屑。一共有两个元素:节点标签和箭头。

节点标签:有apple的logo、itunes和what’s new。且节点标签有不同的样式,what’new用了Bold的样式。每个节点标签中间都用箭头隔开。箭头:是一个有方向指向的符号。

面包屑这种方式完成导航需求的方式为:

1、通过最后一个节点标签告知用户当前位置;2、面包屑整体从左到右告诉用户来到当前位置的固定路径;3、除了当前页面的节点标签,其它节点标签均可点击,可以让用户回到上一级页面(可以回到最初起点的作用)。通过这三点任何用户都不会在网站中迷失方向。

 

 网站用户体验分析:页面导航原则

图3: apple网站itunes新功能介绍的页面

然后我们再对照这个面包屑所在的页面(图3)从上往下的各种导航方式的元素进行分析,看页面除面包屑之外是如何自我完成导航需求的:

1、首先导航菜单栏上的logo告诉用户在apple的网站上,导航上的菜单分类告诉用户这个网站一共有多少个维度,菜单上被选中的Itunes,告诉用户当前处于itunes的菜单维度下。

2、接着是itunes的页面导航栏,大大的标题itunes告诉用户下面的内容都是讲itunes,右边的itunes的页面菜单导航告诉用户itunes页面的内容分类,其中不一样状态的what’s new告诉用户目前选中的是这个类容,下文内容是在这个分类下的。

3、最后是这个页面的标题What’s new in iTunes,表示当前页面的内容是按照这个标题全面铺开内容。

上述导航元素也清楚地告知了我们1、用户当前位置(当前页面标题);2、来到当前页面的固定路径(从上往下的导航路径布局和元素);3、如何返回上一级页面(每个导航菜单均可点击,除了当前页面标题)。其中涉及到3级导航:apple网站主导航、itunes类别导航和what’s new 内容导航,每一级导航都有导航菜单和被选中的状态。将每一级导航的起始点用箭头链接起来,如图3所示→→,形成了一个和实际存在的面包屑一模一样的页面路径。告知用户是如何来到这个页面的。

从上述页面中的面包屑样式分析和页面自己的内容分析,可以看出整个页面里所有的导航方式所要传达描述的信息是一致的,那么我们可以归纳出页面导航原则:1、告知用户当前位置;2、告知用户来到当前页面的固定路径;3、可以让用户返回上一级页面。

页面导航原则指导设计

1、符合页面导航原则的设计:

 

 网站用户体验分析:页面导航原则

图4:Nestle

 

 网站用户体验分析:页面导航原则

图5:Nestle

我们用导航原则来检验nestle的导航设计,这个页面通过页面标题“baby foods”告诉我们当前位置,通过网站logo,二级导航栏中选中的“Brands”,左侧三级导航栏选中的“Baby foods”,告诉我们这个页面的固定路径是从home,选择brands分类,再选择Babyfoods。且导航栏的每一个分类都可以被点击,可以让用户返回到上一级。这个页面完成了导航所需要的所有信息传达元素。我们也可以明显地找到页面中的:→→的页面路径。图4是根据它的面包屑的节点标签元素,将页面中的相同元素找出来,这些元素都已比较明显的样式表示选中,与相同信息不同状态的内容区分开来,导航布局从上而下形成了包含与被包含的关系,图5是将这些选中的元素用箭头连接起来,这样就找到了页面中的的页面路径。

 

 网站用户体验分析:页面导航原则

图6:amazon

图6是在amazon浏览到web navigation的搜索结果页。图中将隐藏的页面路径和实际存在的面包屑都标示出来了。面包屑的每个节点标签在页面的其它导航方式中都有被选中的状态,且自上而下,从外到内形成包含与被包含的关系,从而形成一个隐藏的页面路径。这里使用的导航方式和前面都不一样,不止用了导航菜单,还使用了树形的级联菜单的方式。当前页面也不是用页面标题,而是直接用的实体面包屑的最后一级节点标签的强化样式。这个页面通过不同的方式完成了用户的导航需求。

2、其它符合页面导航原则的新型样式:

 

 网站用户体验分析:页面导航原则

图7:Booreiland

 

 网站用户体验分析:页面导航原则

图8:John Lewis购物网站

3、不符合页面导航原则的设计:

 

 网站用户体验分析:页面导航原则

图10:meilishuo

Meilishuo的一个杂志内容页面,没有实际存在的面包屑,那么我们寻找其它导航方式,如上图网站logo、导航栏、页面标题等,如箭头所指,我们会发现页面路径少了了一段。我们不知道从首页去了什么分类,然后来到“所在杂志”。这样用户想找杂志所在的上一分类就找不到了,回不到上一级。这个页面的导航原则就没有满足,用户在此处就会迷失。它主要少了主导航条没有选中当前所在内容分类,从而让路径断了一节。

小结

设计师的创意是无限的,但是用户的导航需求是固定的,任何样式,只要能够符合导航原则的几点要求,就可以完成用户的导航任务。更加简便的方法就是只要能在页面元素中找到这个页面的页面路径,就相当于满足了导航原则。这样的原则和方法既可以用来检验我们的设计是否达标,也可以用来指导我们对导航方式的设计。

本文地址:网站建设教程频道 http://jianzhan.hkm168.com/jiaocheng/2130.html,武汉建站公司提供一站式网站制作开发服务:武汉网站建设、网站制作、网站开发、高端网站设计制作、移动网站开发,小程序开发等建站服务,制作周期短,价格实惠,效果满意;以及全网营销、武汉SEO服务、网站建设、百科词条创建修改、新媒体引流、公司负面公关处理等;另外本站原创文章,转载本文请保留本站地址,谢谢!

上一篇:现在是体验为王的时代,如何做好用户体验?

下一篇:网站运营的推广计划方案

相关文章相关文章
  • 将企业网站建设完成后,做什么推广可以增加自己客户?

    将企业网站建设完成后,做什么推广可以增加自己客户?

    网络市场特别大,很多公司就靠一个网站可以接很多业务,甚至都不用做线下推广,把所有的精力全部放到网站,这是为什么?想做网络推广,百度、360、搜狗、UC等平台不知道怎么投,投什么平台好?...

    2019-06-26 14:11
  • 使用sitemap网站地图的好处?什么情况下需要sitemap网站地图?

    使用sitemap网站地图的好处?什么情况下需要sitemap网

    使用sitemap网站地图的好处?很多刚入门的小白对sitemap网站地图并不清楚,认为网站地图对网站来说并不是必须的,但是对于蜘蛛抓取来说,却是相当重要的。网站管理员也可以很容易地将网站上可用于爬行的网页告知Google /baidu等搜索引擎。...

    2019-06-25 15:17
  • 网站建设教程:HTTPS和SSL网站安全解读

    网站建设教程:HTTPS和SSL网站安全解读

    对于网站来说什么最重要?当然是网站安全最重要,不然你网站一上线就被别人挂马、被黑了,那你做的一切努力都白费了。而且企业站或门户站的安全不仅涉及到自己企业还会威胁到用户。对于SEO来说,网站安全这个排名因素也越来越重要。...

    2019-06-22 13:31
  • 网站建设教程:网页静态化和伪静态化的知识点

    网站建设教程:网页静态化和伪静态化的知识点

    网站建设教程:网页静态化和伪静态化的知识点相信小伙伴们在访问一些企业、门户、响应式等网站时有没有注意到他们的网址链接,企业首页、详情页以及新闻内容页面是否是静态页面?什么是静态页面和伪静态化?那今天,笔者就和大家聊一下静态化是怎么做的。...

    2019-06-22 11:32
  • 为什么要注重网站用户体验度?如何对网站进行用户体验分析

    为什么要注重网站用户体验度?如何对网站进行用户体验

    为什么要注重网站用户体验度?如何对网站进行用户体验分析。最近由于一个“bug”引发的用户体验的问题跟客户起了争执,这个客户是做系统这方面(CS架构),跟我通常做(BS架构)感觉对于各种要求不是在一个平级上,令我深思,往往人只有面对事儿了,才会想到...

    2019-06-19 14:41
  • 企业网站做不做策划?小企业如何做好网站策划?

    企业网站做不做策划?小企业如何做好网站策划?

    企业网站做不做策划?小企业有必要做网站策划吗?如何做好网站策划?答案肯定是要做的,不管是中小企业还是大企业都要做网站策划。但是网站策划不是那么好做的,不同的企业,有着不同的做法。比如小企业来讲更倾向于价格及企业信息、产品信息即可,而大企业更...

    2019-06-13 15:24
  • 网站建设过程中关键词布局时需要注意哪些细节?

    网站建设过程中关键词布局时需要注意哪些细节?

    前期网站建设的好不好直接影响到后期网站优化的效果,比如关键词布局就是我们后期网站优化过程中任重道远的工作。网站建设期间在进行关键词布局前,首先确定企业网站产品或服务卖点的核心关键词,如果你是卖苹果的,而做出来的网站是卖猪肉的,做出来的网站与...

    2019-06-12 16:13
  • 网站建设教程:如何选择香港服务器,BlueHost香港服务器好吗?

    网站建设教程:如何选择香港服务器,BlueHost香港服务

    网站建设教程:如何选择香港服务器,BlueHost香港服务器好吗?bh香港服务器以稳定性强和速度快被广大站长喜爱,但同时价格相对较昂贵,若是对服务器要求较高的企业推荐使用bluehost香港服务器,比如游戏行业、金融行业及电子商务行业等这些对服务器要求高的行业。...

    2019-06-11 13:35

24小时热门标签

产品图片2
服务器图片