昨晚加班到两点，眼睛酸得不行。刚给客户发过去一版首页设计稿，结果客户回了一句：“这图看着挺大，手机上是不是就糊成一团了？”
我差点把咖啡喷屏幕上。
其实很多刚入行的设计师，或者不懂行的老板，都会纠结这个问题：响应式网站效果图做多大的？是不是得做个1920的宽屏，再做个375的手机屏，最后再搞个平板的？
说实话，这种想法太累人了。
我前年接了个单，是个做建材的老板。他非要让我出三套图，一套电脑端，一套iPad端，一套iPhone端。我做了整整三天，累得半死。结果上线后发现，他根本不在乎那些细枝末节，只要电脑端看着大气就行。手机端的适配，其实靠的是代码逻辑，不是靠画图。
所以，咱们今天不整那些虚头巴脑的理论，直接说点能落地的。
第一步，定基准。
别一上来就想着全屏。现在主流的做法是，以1440px或者1920px作为桌面端的设计基准宽度。为什么？因为大多数人的笔记本屏幕也就这个分辨率。你按这个宽度画，保证在大屏上不会留太多空白，也不会出现横向滚动条。
第二步，断点思维。
响应式的核心不是“画”出来的，是“断”出来的。你要知道在哪些宽度下，布局会发生突变。比如，从1200px降到992px的时候，侧边栏要不要隐藏？从768px降到480px的时候，导航栏要不要变成汉堡菜单？
这时候，你不需要画每一个像素。你只需要画出几个关键状态的截图。比如：桌面完整版、平板横屏、手机竖屏。这就够了。
第三步，给开发的交代。
很多设计师有个毛病，喜欢把每个细节都画得死死的。但做响应式，你得给开发留余地。比如一个按钮，你画了100px宽，但开发可能会说：“老板，这个按钮在手机上得自适应宽度，不然字都挤在一起。”
这时候，你就得明白，响应式网站效果图做多大的，其实没有标准答案，只有“够用”的答案。
我有个朋友，做电商网站的。他以前也是强迫症，每个尺寸都出图。后来他学聪明了，只出桌面端的高保真图，然后标注清楚哪些元素是弹性盒布局，哪些是固定定位。结果效率提高了一倍，客户还觉得专业。
这里有个小细节，很多人容易忽略。
就是图片的处理。你在效果图里放的图，一定要用矢量图或者高分辨率的PNG。别为了省流量，放个压缩过度的JPG。不然客户一看：“哎，这Logo怎么毛边了？” 虽然这是前端要处理的事，但作为设计师，你得在效果图里体现出来，这叫专业素养。
还有啊，别太纠结像素对齐。
人在屏幕上看东西，跟你在PS里量像素是两码事。有时候差个2px，肉眼根本看不出来。但如果你为了对齐这2px，折腾半天，那才是真的浪费时间。
最后想说，响应式网站效果图做多大的，真的不重要。重要的是你的设计逻辑是否通顺，是否考虑了不同设备的使用场景。
比如，手机用户是在走路时看的，字体不能太小，按钮不能太密。电脑用户是在坐着看的，信息可以密集一些。
你得站在用户的角度去想，而不是站在设计师的角度去炫技。
上次有个客户问我：“你这图在手机上看是不是太小了？”
我说：“你试试把浏览器窗口缩小，看看布局变没变。”
他试了一下，说：“嘿，还真挺顺的。”
你看，这就是响应式的魅力。它不是把一张图切成几块，而是让内容像水一样，随着容器的形状自由流动。
所以，别再纠结尺寸了。把精力花在交互逻辑上，花在内容排版上。这才是正经事。
如果你还在为尺寸发愁，不妨试试只画桌面端，然后给开发几个关键断点的标注。你会发现，世界清净了很多。
当然，如果客户非要你出全套图，那也没办法。毕竟，谁让咱们是乙方呢。但心里得明白，那只是走个过场，真正的响应式，是在代码里诞生的。
希望这点经验，能帮到正在纠结的你。别太累，早点下班。
