做网页设计这几年，最烦客户问“这图导出来怎么糊了？”或者“为什么在手机上看着变形？”其实90%的问题都出在分辨率和尺寸没搞对。这篇东西不整虚的，直接告诉你现在做网页到底该用多少像素，怎么设置才不踩坑，照着做就能避开那些低级错误。
很多人脑子里还停留在十年前的观念，觉得网页就是72dpi。这说法太老了，现在的高清屏、Retina屏幕满大街都是，你要是还按老黄历办事，做出来的东西在iPhone或者MacBook上看着就像马赛克。咱们得搞清楚，网页设计看的是像素（px），不是打印用的dpi。dpi是打印领域的概念，网页是发光的屏幕，逻辑完全不一样。
先说个真实案例。去年有个做本地生活服务的朋友，找外包做了个活动页。设计师为了省事，直接按1920宽度的标准屏去画，分辨率设成72。结果上线后，用户反馈在现在的全面屏手机上，图片边缘全是锯齿，字也糊成一团。客户气得要把尾款扣了。后来我帮他重新调整了切图规范，用了@2x和@3x的标注方式，问题立马解决。所以，别纠结dpi这个参数了，把它忘掉，专注在像素上。
那具体该怎么操作呢？我给你整理了一套现在最稳妥的流程，新手也能直接上手。
第一步，确定主视觉宽度。现在主流的设计稿宽度，我建议设成1440px或者1920px。1440px是目前比较均衡的选择，既照顾了笔记本屏幕，也能在宽屏上留出舒适的留白。如果你做的是那种视觉冲击力极强的首页，可以用1920px，但要注意两边留白，别把内容顶到屏幕边缘。
第二步，高度不用死磕。网页是长页面，高度是无限的。一般第一屏（Above the Fold）的高度控制在900px到1200px之间比较合适。太高了用户得狂滚鼠标，太低了显得小气。记住，内容要紧凑，别为了填满屏幕而堆砌无效信息。
第三步，图片处理是关键。这是大家最容易翻车的地方。你在PS或者Figma里画图时，图片分辨率一定要设成72吗？错！虽然网页显示只看像素，但为了保证在高清屏上的清晰度，你导出的图片最好保留原始像素尺寸。比如一个图标是20x20px，在@2x屏上就需要40x40px的素材。现在的设计工具像Figma，自带智能标注，能自动生成不同倍率的代码，省去了手动切图的麻烦。
第四步，字体和线条的抗锯齿。在屏幕上，细线条和极小的字体容易发虚。建议正文最小字号别小于14px，行高设为字号的1.5倍左右，看着最舒服。线条如果小于1px，在部分浏览器上可能显示不出来，或者变得很粗犷，这时候可以用0.5px或者用渐变模拟细线。
很多新人设计师喜欢问“网页界面设计常用分辨率是多少dpi”，其实这是个伪命题。你应该问的是“我的设计稿像素是多少”。现在的趋势是响应式设计，一套设计稿要适配手机、平板、电脑。所以，不要只盯着一个分辨率死磕。
再补充个细节。颜色模式一定要用RGB，别用CMYK。CMYK是给打印机看的，RGB是给屏幕看的。要是你用了CMYK，导出来的网页颜色会发灰、发暗，客户一看就知道你不专业。这点虽然基础，但每年都有人犯这个错，真的挺冤的。
最后，测试环节不能省。设计完别急着交差，拿真机去测。用Chrome浏览器的开发者工具模拟不同屏幕尺寸，看看在375px的手机上，按钮好不好点，文字会不会换行乱掉。有时候在电脑上看着完美的布局，到了手机上可能按钮挤在一起，根本没法点。
做设计就是做体验，不是做艺术展。把基础打牢，像素对齐，颜色准确，素材清晰，比追求什么花哨的技巧都重要。希望这些经验能帮你少加几天班，多拿几个好评。记住，细节决定成败，尤其是那些看不见的像素间隙。
