导航栏是全站被点击次数最多的组件,也是被敷衍得最多的。常见病症:栏目九个起步塞满一整行,命名全是“走进我们”“新闻动态”这类站内视角的词,下拉菜单套三层,访客找不到北。网页设计制作的导航设计,说到底是替访客回答一个问题:我要的东西在哪。
栏目数量与命名
一级栏目建议控制在五个到七个。超过七个,扫视成本陡增,哪个性价比低就合并或者挪进页脚。命名要讲访客的语言:“产品中心”不如“产品”直接了当;“走进我们”这类自我陶醉式命名,换成“关于我们”点击率通常更好。有个实用的自查法:把栏目名给一个没接触过公司的朋友看,让对方猜每栏里有什么,猜不中的名字就该改。导航顺序也有讲究,重要的靠左,联系方式或询盘入口放到最右侧做视觉强调,中间放常规栏目。栏目定了别轻易加,每加一个都要问它在访客路径里排第几。
下拉菜单的层级纪律
下拉菜单能扩展导航容量,但纪律要严:层级最多两级,一级是栏目,二级是具体页面,再深的内容靠栏目页里的列表承接。悬停展开要有一百多毫秒的延迟缓冲,鼠标斜着划过不至于闪断。二级条目多的,可以按分组排版,加上小标题,比一长列密密麻麻的链接友好得多。手机端的导航另当别论,折叠进汉堡菜单后,展开层最好全屏或半屏铺开,别在小小的抽屉里再套抽屉。
导航的辅助件
网页设计制作的导航除了顶部主导航,三件辅助工具值得配齐:一是当前位置面包屑,首页、产品、详情,访客随时知道自己站在哪、怎么回去;二是页脚导航,放次要页面和法务页面,给主导航减负;三是站内搜索,内容量大的站搜索框就是访客的救命稻草,位置放导航旁边,别藏。
导航的移动端形态
手机端的导航是另一套设计。栏目全塞进汉堡菜单是通用做法,但注意两点:一是汉堡菜单打开后,栏目要一眼扫完,别出现横向滚动;二是核心入口——电话、询盘,别藏进菜单,常驻底栏或顶部更好。电商类的站可以直接用底部标签栏,首页、分类、购物车、我的,四到五个固定入口。移动导航的核心就一条:拇指够得着的地方,放最重要的东西。
两句实在建议:上线后看后台的点击热力图,导航里没人点的栏目考虑合并,被频繁搜索的内容考虑提到一级;栏目规划拿不准时,让比格网络从客户访问路径出发帮你梳理信息架构,导航不是摆栏目,是设计路线。