做网站最烦啥？不是代码写不出来，是设计稿看着挺美，切图一嵌进去，全乱套。特别是那个导航条，看着宽宽大大挺大气，结果放到手机上一看，挤得慌；放到电脑上一看，又显得头重脚轻。很多新手站长，甚至有些半吊子美工，在这上面栽跟头。
我干建站这行五年了，见过太多因为导航条高度没定好，导致整个页面布局崩塌的案例。今天不跟你扯什么设计美学大道理，咱们就聊聊实操，聊聊怎么用最笨的办法，搞定那个让人头大的“ps做网站导航条高度”问题。
先说个真事儿。上个月有个客户找我修网站，说页面加载慢，而且导航栏在移动端总是错位。我打开后台一看，好家伙，导航条高度设了120像素。在电脑端看还行，但在手机端，屏幕宽度才375像素左右，120像素的高度直接占了屏幕的三分之一！用户连主要内容都看不着，全在点导航。这哪是导航，这是拦路虎。
所以，ps做网站导航条高度，第一原则就是：别贪大。
很多人觉得，导航条高一点，显得高级，显得有空间感。错！大错特错。导航条的核心功能是“指引”，不是“展示”。它需要的是清晰、易点击，而不是占据大量视觉重心。
那到底多少合适？
在电脑端，也就是PC端，我建议的高度范围是60px到80px。为什么？因为PC屏幕大，用户视线集中在中间，两侧留白多。60px的高度，刚好能容纳下一行清晰的文字菜单，加上适当的内边距，看起来清爽利落。如果你非要搞个80px甚至100px，除非你里面放了巨大的Logo或者复杂的下拉菜单动画，否则就是纯浪费空间。
而在移动端，也就是手机端，ps做网站导航条高度必须压缩。一般控制在44px到50px之间。这个高度符合手指点击的热区标准，既不会太小导致误触，也不会太大遮挡内容。我见过很多H5页面，导航条做成56px，虽然也不离谱，但在小屏手机上，每一像素都是黄金，能省则省。
这里有个坑，大家一定要注意。你在PS里画稿子的时候，千万别只看像素数值。你要看实际效果。
我有个习惯，画完导航条，立马截图，放到手机屏幕上比对。有时候PS里看着50px挺合适，放手机上一看，字体显得特别小，或者图标挤在一起。这时候，别改PS的高度，改字体大小和行高。比如，把字体从16px调到14px，行高调到20px，视觉上更紧凑，高度还能保持50px不变。这样切图出来的代码，兼容性更好，也不会因为高度不一致导致布局抖动。
再说说那个“ps做网站导航条高度”跟背景色的关系。很多小白喜欢用深色背景，配白色文字。这时候，如果高度设得太低，比如40px，文字会显得特别局促，像贴在背景上一样。这时候，适当增加高度到60px，或者增加上下内边距，能让呼吸感更强。
还有，别忘了考虑交互状态。鼠标悬停、点击选中，这些状态都需要额外的视觉反馈空间。如果你只设计了默认状态，高度设得刚刚好，一旦用户悬停，背景色变化或者下划线出现，可能会溢出或者被遮挡。所以，预留2px到4px的余量，是专业选手的基本素养。
最后，给大家一个避坑指南。别信那些“标准模板”。每个网站的Logo大小不一样，菜单项数量不一样，导航条的高度绝对不可能统一。有的网站Logo是横版的，有的Logo是竖版的，有的甚至没有Logo，只有文字。这时候，ps做网站导航条高度就要根据Logo的实际尺寸来定。通常，Logo高度加上上下各10px到15px的padding，就是比较舒适的高度。
记住，设计是为了解决问题，不是为了炫技。导航条高度设对了，用户找信息快了，跳出率低了，你的网站价值自然就高了。别为了所谓的“大气”，牺牲了用户体验。
下次再打开PS，别急着拉框。先想想，你的用户是在电脑前坐着看，还是在地铁里站着刷？想清楚了，那个数字自然就出来了。
