做了十五年建站,见过太多老板为了所谓的“高大上”,把网站搞得一团糟。今天咱们不聊虚的,就聊聊那个让人又爱又恨的东西——左侧导航。
很多新手设计师,或者刚入行的老板,总觉得左侧导航显得专业,像那种后台管理系统一样,很有科技感。结果呢?做出来的网站,用户进来一看,懵了。
先说个真事。去年有个做工业设备的朋友找我,说他网站流量突然掉了大半。我打开一看,好家伙,左边那个导航栏宽得离谱,占了屏幕快三分之一。右边内容区挤得像沙丁鱼罐头。
这还不算完,最要命的是,他那个左侧导航里的子菜单,居然全是JS动态加载的。百度蜘蛛爬进去,愣是爬不动。因为蜘蛛不执行JS啊,它看到的是空的。
你想想,蜘蛛都进不去,你内容再好,搜索引擎也看不到。这叫什么?这叫自断经脉。
所以啊,做网页制作做网站左侧导航,千万别为了炫技而炫技。
第一点,别太宽。
真的,别超过200像素。现在的显示器虽然大,但用户习惯是F型浏览,眼睛先看上面,再看左边,最后扫右边。你把左边弄太宽,用户得费劲眼球才能看到主要内容。
我有个客户,之前左边导航250px,改到180px之后,跳出率直接降了15%。为啥?因为用户一眼就能看到右边的产品图,不用费力找。
第二点,层级别太深。
很多做网页制作做网站左侧导航的时候,喜欢搞三级、四级菜单。看着挺丰富,其实用户记不住。
人脑的短期记忆也就7个单位左右。你搞个四级菜单,用户点进去,发现还要再点,心态就崩了。
我见过一个案例,一个做建材的网站,左侧导航搞了五级。用户找“瓷砖”,得点“建材”->“地面材料”->“瓷砖”->“釉面砖”->“白色釉面砖”。
这谁受得了?直接关掉页面去百度搜了。
所以,尽量扁平化。最多三级,最好两级。
第三点,移动端适配是个大坑。
这点必须强调。现在手机流量占大头,你左侧导航在电脑上看着挺爽,到了手机上,要么被压缩得看不清,要么就把整个屏幕占了。
我一般建议,PC端保留左侧导航,但手机端直接做成汉堡菜单,或者顶部横向滚动。
别想着用一套代码通吃,那都是扯淡。响应式设计不是万能的,有时候专门针对移动端做简化,效果反而更好。
再说说代码实现。
很多外包公司,为了省事,直接用现成的模板。那些模板里的左侧导航,代码写得那叫一个乱。
什么嵌套div,什么多余的class,看着都头疼。
你想想,代码冗余多了,加载速度慢,SEO排名肯定受影响。
我自己写代码,习惯用ul li列表,语义化标签。这样蜘蛛容易读懂结构。
还有,左侧导航里的文字,别用图片。
千万别用图片代替文字。
虽然图片好看,但蜘蛛不认识图片啊。而且图片加载慢,还占流量。
用文字,加个好看的字体,或者简单的CSS样式,既美观又利于SEO。
最后,说说交互。
左侧导航最好有hover效果,鼠标放上去变色,或者有个小箭头。
这能给用户一个反馈,告诉他“这里可以点击”。
但别搞太花哨的动画,转来转去的,看着晕。
简单、直接、清晰,才是王道。
我见过一个做外贸的网站,左侧导航做得特别简洁,就几个大类,下面带几个小类。
结果转化率比那些花里胡哨的网站高多了。
为啥?因为客户找产品快。
外贸客户没耐心,他只想快速找到他想要的产品。
你给他整一堆动画,他反而觉得你不专业,觉得你公司在搞虚的。
所以,做网页制作做网站左侧导航,核心是用户体验,不是设计师的自我表达。
别总想着怎么让网站看起来“酷”,要想怎么让用户用得“爽”。
这点想通了,你的网站至少能少走一半弯路。
最后提醒一句,上线前,一定要多测测。
用不同的浏览器,不同的分辨率,甚至让不懂电脑的朋友试试。
他们第一次点哪里,能不能找到他们想要的信息?
这才是检验左侧导航成不成功的唯一标准。
别听那些专家说什么“黄金分割比例”,用户觉得好用,才是真的好。
好了,今天就聊这么多。
希望能帮到正在纠结左侧导航的你。
如果有啥问题,欢迎留言,我看到就回。
毕竟,大家都是过来人,踩过的坑,不想让你再踩一遍。
记住,做网站,细节决定成败。
尤其是这种看似不起眼,实则影响巨大的导航栏。
别偷懒,好好琢磨琢磨。
你的用户会感谢你的。