浅谈网站前端导航功能的设计要点

所属分类: 网站运营 / 建站经验 阅读数: 107
收藏 0 赞 0 分享

用户对导航的三种行为
1.适应
人们对导航会逐渐适应
2.预测
导航提供的信息气味的线索,使人们可以预测下一步是什么
3.重定向
到达一个新网页,人们会让自己重新熟悉它

网站的导航设计大致类型
超大信息类站点的导航条就像中药铺的抽屉,一字排开气势恢宏,分别拉开,别有洞天。
国人喜好:多!大!全!最好全部铺开才有气势。从不争气的‘S浪’网多年没怎么变的首页导航模式可见一般。至此,对比浏览了同类大型新闻信息类站点,发现中/洋;东/西,界面感受果然不同。
今天只说导航,只对比了新闻类站点:
(娱乐类,设计类,个人站点导航形式多样,逻辑复杂,暂来不及铺开)
Yahoo News / BBC News / CNN / abc News / China Daily / CCTV News / The Japan Times / The Korea Times / 腾讯新闻 / 新浪
首先关注首页横向主导航:
(常规纵向导航通常配合横向主导航试用,且在商务型,大型信息类站点主页中单独使用频率不高,通常在次级页面出现,且一定是信息内容量大,分类繁琐的站点。)
可见基本导航条模式如下:
1.  对于信息统一,归纳性强的站点,通常会使用简单模式:
201677111415621.png (653×108)

2.  对于有丰富次级信息的,通常会使用以下两种模式:
a. 鼠标hover下拉
201677111447916.png (655×278)

b. tab展开
201677111503021.png (653×134)

a 型导航方便快捷预览, b 型导航直接展开次级信息,也有站点把a/b模式合并。
3. 特别案例,盖浇饭类型的,把所有信息都铺出来,比如s浪:
201677111519635.png (653×114)

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

导航设计的一些注意点
导航上的迷失有多方面的原因:
1.当人们不理解资料的时候可能会感到迷惑
2.人们在查寻过程中迷失,不知道下一步做什么
3.人们可能会在网站中偏离方向感,无法回到以前的页面,甚至是首页
4.人们在信息系统中偏离方向、分散了注意力。


导航操作性:
一个完美的导航,最基本最重要的是随时随地,快速引导用户去相关页面,而且能及时返回,方便跳转到其他页面。
有意思的是,去容易,反而找到来时路就千差万别了。
比如:用户很可能是从首页任何一个兴趣点,误入了详情页面,去的容易,1步到~!但从详情页面返回到其他模块或想去其他分支类别页面,就要仰赖导航了。
为了提供必要引导,当用户进入到足够深的详细页面,各种索引,面包屑都配合导航条应运而生。
做一个反向测试,看哪种导航配套设置更便捷。

导航路径的确定:
1.以最终目标为起点
2.确定导航的需求
3.选择适当的机制

更多精彩内容其他人还在看

网站设计之第一印象 注意用户体验

遨游互联网的人们浏览一个个网站,是决定暂时驻留还是转身离开,往往凭借的是第一印象,这和男女相亲极为相似。如果男女双方的第一印象就不好,那么搭档去喝咖啡的可能性就很小了
收藏 0 赞 0 分享

网站建设细节标示引导用户浏览

在网站建设中,有些细节值得去研究和探讨,比如如何合理的运用标示去引导用户浏览
收藏 0 赞 0 分享

网站建设的设计与网站SEO之皮毛相附

现在网站优化SEO被太多的人所重视和讨论,但是很多SEOER往往过度的注重对搜索引擎的迎合,而忽略了网站建设的用户体验和内容设计
收藏 0 赞 0 分享

百度搜索结果后面的有多少人喜欢是什么原因

这是百度正在测试的一个新功能。1月11日消息,百度分享今日开始测试将分享数据展示在百度搜索结果页。只要是嵌入了百度分享功能的网站信息出现在搜索结果中就会显示出其被分享的次数
收藏 0 赞 0 分享

依据百度近期的几次算法,站长不要再走伪原创之路

今日在SEO论坛,有人说伪原创行将毁灭,高质量网站的春天行将到来。然而这里的伪原创后面要加两个字,那就是工具,伪原创工具行将被淘汰
收藏 0 赞 0 分享

新站如何快速提升权重的六点秘诀分享

经常有朋友问起我网站权重为什么一直很低,到底有没有好的办法快速提升呢?那好现在一起荣森网安棋子儿小编给大家分享在网站维护中快速提升网站权重
收藏 0 赞 0 分享

十大网站被降权现象汇总及原因分析

网站被降权也是网络推广过程中较为常见的现象,降权的形式也各不相同,当然原因也是多种多样
收藏 0 赞 0 分享

Google AdSense 广告已停止在您的网站上投放

早上登陆网站,发现google广告竟然无法显示了,查看邮箱发现google邮箱中在最近一次对您的帐户进行的审核中,我们发现您目前展示 Google 广告的方式不符合我们的合作规范
收藏 0 赞 0 分享

优化DNS解析和拆分域名 让网站打开速度更快技巧

如何让网站打开速度更快:DNS与拆分域名(一).
收藏 0 赞 0 分享

让网站打开更快第三弹--开启压缩篇

对于网站,也有这样的压缩技术,可以让你的网页中的文本类文件瘦身,在用户完全不知情的情况下,通过gzip和deflate压缩程序有效减少了网页,让用户更快的打开网站。
收藏 0 赞 0 分享
查看更多