网页设计-我是设计师

忘记密码

电梯直达式-导航的交互设计

2011-11-12 10:51 作者: 来源: 网页设计 浏览: 82 我要评论 字号:

摘要: 巨型新网信息类网站的导航条就像中药铺成的抽屉,一字排开气势磅礴,一一拉开,别有洞天啊。 中国人的喜好:多!大!全!哈哈,全部铺开才有气势。 今天小编只说说导航,只对比了新闻类站点: (新网类,设计类,个人站点导航形式多样,逻辑复杂,暂来不及铺开)  腾讯新闻 ...

巨型新网信息类网站的导航条就像中药铺成的抽屉,一字排开气势磅礴,一一拉开,别有洞天啊。

中国人的喜好:多!大!全!哈哈,全部铺开才有气势。

今天小编只说说导航,只对比了新闻类站点:

(新网类,设计类,个人站点导航形式多样,逻辑复杂,暂来不及铺开)

 腾讯新闻 / 新浪/ Yahoo News / BBC News / CNN  The Japan Times / The Korea Times //abc News / China Daily / CCTV News /

首先关注首页横向主导航:

(常规纵向导航通常配合横向主导航试用,且在商务型,大型信息类站点主页中单独使用频率不高,通常在次级页面出现,且一定是信息内容量大,分类繁琐的站点。)

可见基本导航条模式如下:

1. 对于信息统一,归纳性强的站点,通常会使用简单模式:

2.  对于有丰富次级信息的,通常会使用以下两种模式:

a. 鼠标hover下拉

b. tab展开

a 型导航方便快捷预览, b 型导航直接展开次级信息,也有站点把a/b模式合并。

3. 特别案例,盖浇饭类型的,把所有信息都铺出来,比如s浪:

(与其说导航,不如说是归纳过的标签)

导航操作性:

一个完美的导航,最基本最重要的是随时随地,快速引导用户去相关页面,而且能及时返回,方便跳转到其他页面。

有意思的是,去容易,反而找到来时路就千差万别了。

比如:用户很可能是从首页任何一个兴趣点,误入了详情页面,去的容易,1步到~!但从详情页面返回到其他模块或想去其他分支类别页面,就要仰赖导航了。

为了提供必要引导,当用户进入到足够深的详细页面,各种索引,面包屑都配合导航条应运而生。

做一个反向测试,看哪种导航配套设置更便捷。

测试内容:从A类详情页【1】去B类详情页【2】:

测试站点:

BBC News

http://www.bbc.co.uk/news/uk-england-leeds-15438299

Yahoo News

http://news.yahoo.com

 

主导航 + 面包屑 + 左侧纵向索引导航

BBC News

主导航 (展开tab)

Yahoo News 和 China Daily

主导航 (展开tab + 鼠标悬停下拉列表)

 

最后话又要说回来了,站点导航到底用那种方式?还是弄个变形金刚什么都包括了,要看站点的信息分类,同时也要从分类开始就要考虑到整个站点铺开有多少点?导航才能牵得了线,小头套不了大帽子,反之亦然





发表评论

*

* (保密)

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif

Ctrl+Enter 快捷回复

会员登录关闭

记住我 忘记密码

注册会员关闭

小提示: 您的密码会通过填写的"电子邮箱"发送给您.



无觅相关文章插件,快速提升流量