loading请求处理中...
手机版 新型设计开发 托付式服务平台 全国站
新人享福利×
当前位置: 首页 > 威客攻略 > 导航条设计

网站导航栏设计与布局技巧

2019-08-08 13:31:20 阅读 27936次 0 标签: 导航条设计 作者: 陈先生12121
在网页中,导航栏的存在是不可或缺的,它起到了引导用户的作用。如何让导航栏能充分引起用户注意但不会给用户造成困扰,是设计师一直以来面对的问题之一。尤其对于多功能或内容量庞大的网站,仅仅一排导航栏很可能无法满足其需求,而过于复杂充实的导航条目也可能为用户造成过大的认知负担而吓跑用户。那么,网站的导航栏应如何设计,又应如何布局呢?
 

一、在讨论导航栏布局之前,我们先要知道用户的浏览习惯

 
知道了用户的浏览习惯,才能清楚地明白导航栏放到哪里可以清楚地引起用户注意力。
 
调查发现:当人们访问某个网站的时候,尤其是初次访问网站的时候,他们通常不会特别仔细的查看所有的内容,而是快速的扫视,找到能够吸引他们注意力的信息,这些内容就是他们继续停留在这个网站上的理由。通过眼动测试和不同实验,调查发现访问者的视觉浏览模式,可以归结为三种典型的模式:古腾堡式,Z图模式和F图模式。
 
对于信息结构层次并不那么分明的网页,用户常常会使用古腾堡式的浏览模式,用户大范围扫视页面内容,整个视线路径是一个大号的Z,其中最开始的两个视觉驻留点就在页头上。
网站导航栏设计与布局技巧
 
Z图模式也不难理解,用户从上到下,视线沿着Z字形来回扫视,用户会左右快速扫视,视线的起点首先是左上角,行跨顶部一栏到右上角,然后向下延伸。
网站导航栏设计与布局技巧
 
F图模式,或者说是F式布局,我们就更加熟悉了:用户先会沿着水平方向浏览,优先浏览内容块的上部,这个时候的眼动构成了字母F 最上面一横。
网站导航栏设计与布局技巧
接下来视线会沿着屏幕左侧向下垂直扫视,寻找段落中能引起兴趣点的内容,当他们发现引起他们兴趣的内容之时,继续横向仔细浏览,而通常这些内容对应的视线范围会比第一次横向浏览的范畴要更小一些,而这个视线轨迹则构成了字母F 中间的一横。
接下来用户会将视线移到屏幕左侧,继续向下浏览。
 
可以看出,上述三种方式,不管哪一种,都是从左上角开始的,这也符合人类一直以来的阅读习惯。
 
因此,导航栏的起点必定是页面左上角,这样才能引起用户的第一注意,让他们清楚的了解网站里有什么,勾起他们继续访问的兴趣。
 

二、导航栏的设计

 
1.横向
 
最通用也是最容易被接受的方式,横向导航栏作为大多数网站都采用的模式,对用户而言不会构成认知障碍。而横向的导航栏的布局,不光可以有一行,根据独到的设计,可以设计成两行的模式,层次感分明的同时,避免了网站可能因条目过多,导航栏放不开或过于紧凑造成的对设计的负面影响。
网站导航栏设计与布局技巧
导航栏可以做成两排
 
2.纵向
 
纵向导航栏使用的站点较少,但是也不乏让人眼前一亮的设计。在应用纵向导航栏布局的时候,需要注意的就是页面的平衡感。左边导航栏占据一部分,那么右边要加一些要素予以平衡,才是美观的。
网站导航栏设计与布局技巧
 
纵向导航栏要注意左右平衡
 
3.折叠式导航栏
 
折叠式导航栏又称汉堡菜单,因图标长的像一个汉堡而得名。
网站导航栏设计与布局技巧
 
上面的这个按钮样式是否感到十分熟悉?
 
汉堡按钮现在已经成为一个经典的交互元素。在广泛的使用后,用户们也已经熟悉了它的存在,无需额外的解释,他们就知道在汉堡菜单中寻找链接和其他选项。汉堡菜单让整个页面更加简约,释放了空间,节省了布局元素,在不同的设备上的显示也更加统一。这种设计在网站条目非常多时,效果拔群。但是要注意的是该图标因为不醒目而饱受争议,如果图标做的过大会十分影响设计上的美观程度,可以搭配横向或纵向导航栏一起使用。
 
汉堡菜单在压缩了导航栏条目占用的空间同时,更重要的是还给了用户一种交互的感觉。尤其是在展现信息简洁明了的扁平式网站设计中,汉堡菜单可以变得更加醒目又不影响整体页面设计需求,非常实用。
网站导航栏设计与布局技巧
 
扁平式网站设计中汉堡菜单的应用
 
三、导航栏的展现形式
 
导航栏设计还有一个要素就是其展现形式,当位于页面首屏时,展现的必然是完整的设计,但是当用户进行页面滑动时,导航栏要怎么应对才比较好呢?
 
1.悬浮固定式
 
不管屏幕滑动到那里,导航栏都会跟随滑动并且在屏幕的固定位置上展现,这对于越来越长的页面设计而言,是个相当合理的补充。
 
2.变换式
 
随着屏幕滑动,导航栏也随着进行变化。比如当页面滑动出首屏时,导航栏的重要部分依旧保留在外进行悬浮固定,而一些无关紧要的条目会压缩,比如压缩成另一个汉堡菜单等等。
 
总结
 
导航栏的设计时网站设计的重要环节,具体采用什么样的设计与布局,要考虑到网站需求与整体设计布局多方面,找到适合自己网站的最佳设计方案。

扫码,回复【创业】领取

免费送您一份创业礼包!

从0到1,解锁创业全套秘籍

帮你避开创业那些坑

设计、开发、营销需求

扫描左边二维码

免费获取咨询和方案报价

公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

相关文章

留言(0 展开评论

您需要注册登录才能发表言论

快速发任务

设计价格是多少?怎样找到合适的设计人才?

官方顾问免费为您解答

 
设计相关任务
DESIGN TASK 更多
电商UI界面设计

¥3700 已有1人投标

乐雅图文快印

¥500 已有6人投标

教育项目VI品牌设计

¥2500 已有1人投标

宣传视频制作

¥20000 已有1人投标

公仔的吉祥物设计

¥600 已有1人投标

地产项目月度提报

¥19999 已有1人投标

服务排行榜
SERVICE LIST 更多
全案VI设计 LOGO 名片 QQ...
价格面议 成交502
新萝卜-最实惠 QQ2108760...
【设计总监】包装设计 3套...
¥6000元 /件 成交484
新萝卜-最实惠 QQ2108760...
企业公司品牌logo设计图文...
¥500元 /起 成交479
初创网络传媒有限公司...
【普通设计师】LOGO设计 2...
¥800元 /件 成交408
新萝卜-最实惠 QQ2108760...
资深设计师操刀
¥1200元 /件 成交388
新萝卜-最实惠 QQ2108760...
牛人设计总监 全网中标最...
¥5000元 /件 成交385
新萝卜-最实惠 QQ2108760...
【资深设计师】包装设计 ...
¥1500元 /件 成交354
新萝卜-最实惠 QQ2108760...
【总监设计师】高端LOGO设...
¥1500元 /件 成交352
新萝卜-最实惠 QQ2108760...
品牌塑造全网整合营销传播...
¥12000元 /起 成交338
利宏营销策划
画册、企业手册、宣传手册...
¥200元 /页 成交302
新萝卜-最实惠 QQ2108760...