别被前端ui设计图忽悠了，这行水比你想象的深多了

做这行五年了，见过太多甲方拿着几张PS截图就敢说要“高端大气上档次”，结果落地的时候连个按钮间距都调不对。真的，累觉不爱。今天不聊那些虚头巴脑的设计理念，就聊聊咱们搞开发的和做设计的，到底怎么在“前端ui设计图”这个坑里少摔点跟头。

很多新人设计师或者刚入行的产品经理，总觉得把图做得漂亮就行。大错特错。你给开发看的如果只是一张静态的JPG，那开发只能靠猜。猜对了是运气，猜错了就是返工。我上次接个私活，客户发过来一堆切好的PNG，说是“标准前端ui设计图”。我打开一看，好家伙，连个标注都没有，字体大小全靠肉眼看，颜色取色器还得自己一个个点。最后做出来的页面，虽然功能没问题，但那个视觉还原度，简直像是两个世界的人做的。客户还不满意，说没达到预期。我说大哥，你给的是“效果图”，不是“施工图”，我哪知道你这阴影是5px还是10px？

再说说价格。现在市面上做一套完整的前端ui设计图，报价水分太大了。有些工作室报价几千块，看似便宜，其实里面全是坑。比如他们只给PSD源文件，不给切图，也不给标注。你拿到手还得自己找开发去量尺寸、去切图、去写CSS。这时间成本谁承担？真正靠谱的服务，应该是提供带标注的Sketch或Figma文件，甚至直接给出HTML/CSS代码片段。这种服务，市场价起码得翻倍。别贪小便宜，最后累死的是你自己。

还有个常见的坑，就是响应式设计的缺失。很多设计师只画了PC端的图，觉得移动端随便缩放一下就行。这是外行话。手机屏幕那么小，布局逻辑完全不一样。如果你只给前端ui设计图里包含PC端，那开发做移动端的时候，只能凭经验瞎搞。最后出来的效果，要么字太小看不清，要么按钮太小点不到。这种项目，上线后投诉率极高。所以，一定要在需求阶段就明确，是要做响应式，还是分开做PC和H5。如果是分开做，那前端ui设计图就得准备两套，或者至少要有明确的适配规则。

另外，交互状态经常被忽视。设计师往往只画了“默认状态”，忽略了“悬停”、“点击”、“禁用”、“加载”这些状态。开发做的时候，得一个个去问，问多了大家都烦。最好的做法是，在设计稿里把这些状态都列出来。比如一个按钮，正常是什么颜色，鼠标放上去变什么颜色，点击下去变什么颜色，禁用时又是什么颜色。把这些细节都写在前端ui设计图里，开发照着做，效率能高一倍，出错率也能降低不少。

还有字体和图标的问题。很多设计师喜欢用一些冷门的字体，或者自己画的图标。这没问题，但得把字体文件打包好，或者提供SVG格式的图标。不然开发那边，字体加载不出来，图标显示成方块，那画面太美不敢看。特别是SVG图标，体积小，清晰度高，还方便改颜色，强烈推荐用这个。

最后，沟通很重要。别指望设计图和代码能完全无缝对接。中间肯定有偏差，这时候别互相甩锅。开发觉得设计不合理，设计师觉得开发技术不行。大家坐下来，对着屏幕，一个个像素去对。能妥协的妥协，不能妥协的，找产品经理裁决。别在微信上吵，见面聊，或者视频聊，效率更高。

总之，做前端ui设计图，不是画张漂亮的画就完事了。它是一份技术文档，是开发和设计之间的桥梁。桥梁搭得稳，楼才能盖得高。别为了省事，跳过那些繁琐的标注和细节。你省下的那点时间，最后都会变成加班改Bug的泪水。

如果你正在为前端ui设计图头疼，或者不知道该怎么跟开发沟通细节，欢迎来聊聊。我不卖课，不推销，就是分享点实战经验，帮你避避坑。毕竟，这行不容易，大家都不容易。