今天不整那些虚头巴脑的大道理。我就想聊聊一个很多老板和刚入行的设计师都会犯的错误：非要用Photoshop去做网站的导航栏。
我干建站这行十五年了，见过太多客户拿着精美的PSD稿子过来，拍着桌子说：“你看这导航多大气，多炫酷，为什么前端做出来就变形了？” 每次听到这话，我心里都咯噔一下。因为我知道，这背后往往藏着巨大的沟通成本和后期维护的噩梦。
记得去年有个做建材的老哥找我。他之前找了一家小工作室，花了五千块做了个全站PSD设计。那个导航栏，用了大量的渐变、阴影、还有那种很复杂的鼠标悬停特效。看着是挺唬人，但在手机上根本没法看。
我就问他：“你希望用户打开你的网站，第一眼看到的是产品，还是那个花里胡哨的菜单？” 他愣了一下，说当然是产品。那你还搞那么复杂的导航干嘛？
这就是用PS做导航最大的弊端：它是静态的，是死的。
在PS里，你可以随便拖拽一个图层，加个滤镜，觉得好看就行。但到了代码里，世界完全不同。HTML和CSS不是画画，它们是逻辑。你要考虑不同分辨率下的适配，要考虑浏览器兼容性，还要考虑加载速度。
我有个朋友，之前也是死磕PS做导航。他为了做一个“下拉菜单展开”的效果，在PS里画了十几张背景图，然后让前端工程师把每一张图都切片，写一堆JS代码去控制显示隐藏。结果呢？网站打开速度慢得像蜗牛，而且一旦要修改菜单文字，前端还得重新切图、重新上传、重新测试。
这种活儿，干一次累得半死，还容易出错。
后来我劝他，别这么折腾了。现在的导航栏设计，趋势是简洁、清晰、响应式。你不需要在PS里把每个像素都抠得那么细，你需要的是结构。
你可以用PS做视觉稿，这点没错。视觉稿是为了统一审美，为了让设计师和前端有共同的参照物。但是，千万别把PS当成开发的工具。
真正的“ps做网站导航”高手，都知道怎么把设计稿拆解成前端能看懂的结构。比如，导航栏的高度是多少？字体用的是什么？间距是多少？这些在PS里标注清楚，比画一堆特效管用得多。
而且，现在前端技术更新太快了。Flexbox、Grid布局早就普及了。你再用PS里那种绝对定位的思维去做导航，肯定会被时代淘汰。
我最近帮一个客户改版，直接放弃了那种复杂的PSD导航设计。我们只用简单的HTML+CSS，配合少量的JS。导航栏在手机端自动变成汉堡菜单，在电脑端横向排列。修改文字？直接在后台改，或者改个CSS文件，几秒钟搞定。
客户一开始还担心：“这样会不会太简单了？显得不够高级？”
我给他看了几个行业大站的导航栏，比如苹果、耐克。他们的导航栏看起来都很简单，但用户体验极佳。用户不需要思考，就能找到他们想要的东西。这才是导航栏存在的意义。
所以，如果你还在纠结怎么用PS做出更炫酷的导航效果，我建议你停下来想一想：你的用户真的需要那些特效吗？还是说，他们更需要一个快速、稳定、容易维护的导航系统？
别为了炫技而炫技。建站的核心是转化，是服务，不是展示你的PS技术有多牛。
当然，我也不是全盘否定PS。在设计初期，用PS做一些视觉探索，找找感觉，是完全没问题的。但一旦进入开发阶段，请尊重代码的逻辑。
别再用PS做导航栏了，这坑我踩了十年，真心劝你换思路。把精力花在提升内容质量和用户体验上，那才是正道。
本文关键词：ps做网站导航
