当前位置:首页 > 经验学习 > 交互设计

页面导航原则

所属栏目:交互设计 时间:2013-12-26 来源: 作者:不详 点击:

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

图1:互联网上各种各样的面包屑
汉赛尔和格莱特为了在森林中找到回家的路,撒下了Mian(面)包屑,这是一种导航方式,如果没有被鸟吃掉,wu(无)论走到森林的任何地方都可以知道如何从当前的位置走回家去。在互联网信息爆炸的今天,互联网的设计师们在网页上设计出各种各样的固定面包屑(如图1)也是为了不让用户迷失在信息的大海中,给予用户的一ge(个)导航的方式。Apple是大家公认的用户体验最好的设计公司,我们来看看apple.com是用什么方式完美地完成用户导航需求的。
页面导航原则
图2:apple网站itunes新功能介绍的面包屑
图2是apple.com上面itunes新功能介绍的面包屑。一共有两个元素:节点标签和箭头。
节点标签:有apple的logo、itunes和what’s new。且节点标签有不同的样式,what’new用了Bold的样式。每个节点标签中间都用箭头隔开。箭头:是一个有方向指向的符号。
面包屑这种方式完成导航xu(需)求的方式为:
1、通过最后一个节点标签告知用户当前位置;2、面包屑整体从左到右告诉用户来到当前位置的固定路径;3、除了当前页面的节点标签,其它节点标签均可点击,可以让用户回到上一级页面(可以回到最初起点的作用)。通过这三点任何用户都不会zai(在)网站中迷失方向。

图3: apple网站itunes新功neng(能)介绍的页面
然后我们再对照这个面bao(包)屑所在的页Mian(面)(图3)从上往下的各种导航fang(fang(方))式的元素进行分析,看页面除面包屑之wai(外)是如何自我完成导hang(航)需求的:
1、首先导hang(航)菜单栏上的logo 告诉用户在apple的网站上,导航上的菜单分类告诉用户这个网站一共有多少个维度,菜单上被选中的Itunes ,告诉用户当前处于itunes的菜单维度下。
2、接着是itunes的页面导航栏,大大的标题itunes 告诉用户下面的内容都shi(是)讲itunes,右边的itunes的页面菜单导航告诉用户itunes页面的内容分类,其中不一样状态的what’s new 告诉用户目前选中的是这个类容,下文内容是在这个分lei(类)下的。
3、最后是这个页面De(的)标题What’s new in iTunes ,表示当前页面的内容是按照这个标题全面铺开内容。
上述导航元素也清楚地告知了我们1、用户当前位置(当前页面标题);2、来到当前页面的固定路径(从shang(上)往xia(下)的导航路径布局和元素);3、如何返回上一级页面(每个导航菜单均可点击,除了当前页面标题)。其中涉及到3级导航:apple网站主导航、itunes类别导航和what’s new 内容导航,每一级导航都有导航菜单和被选中的状态。将每一级导航的起始点用箭头链接起来,如图3所示→,形成了一个和实际存在的面包屑一模一样的页面路径。告知用户是如何来Dao(到)这个页面De(的)。
从上述页面zhong(中)的面包屑样式分析和页面自己的内容分析,可以看出整个页面里所有的导航方式所要传达描述的信息是一致的,那么我们可以归纳出页面导航原则:1、告知用户当前位置;2、告知用户来到当前页面的固定路径;3、可以让用户返回上一级页面。
页面导航原则指导设ji(计)
1、符合页面导航原则的设计:
图4:Nestle.com

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: