UI设计稿标注的这个细节，实现100%还原度！

Sponsor

有次帮朋友弄一个项目，不料遇到一个奇葩前端。时间比较赶所以没有标注尺寸，让他自己看着源文件做。结果做出来乱七八糟的，完全不一样，去找他问吧，他斩钉截铁地说：我明明是按照方案上的尺寸做的！

如果是这种一些层次不齐的小差别，那也就算了，以后慢慢抠细节就 OK：

但真的是相差很远诶！

我再仔细问了一下，终于知道原因了……

他确实是按照方案做的，但是所采用的，都是宽度和高度，而不是间距。

我说：

界面布局的关键不是宽高，而是间距

看他相当地不以为然，于是我只好这样从头开始解释：

前端原理

对于前端来说，界面是一个盒子一个盒子套起来的，而不是像画图工具那样一个图层一个图层叠加起来的。

如果把界面看作一个大盒子，那么里面的模块就是小盒子。小盒子里面会装有文字、图片或者更小的盒子

由于现在很多网站都是响应式的，所以这些盒子一般没有固定的宽度，而是根据固定的边距，来自由伸缩。

Sketch 和 Figma 等绘图工具，都提供了固定边距的自动布局功能，用的就是这个原理。

但这些绘图工具的画板里用的是图层结构，所以只能固定元素相对于画板的边距，而不能固定元素相对于模块的边距，除非使用组件。

尺寸是变化的

前面提到了一个很关键的点，那就是「盒子」，或者说框架宽度不固定（响应式页面）。

既然宽度，那么框架的高度也同样是不固定的。

因为页面包含大量固定字数的文字或者固定比例的图片，在宽度不固定的情况下，高度自然也没法固定了。

那么既然页面内的元素无法固定高宽，那么什么才是固定的呢？

答案是：

间距是固定的

你可以想象一下栅格伸缩的情景，原理一样，只是真实页面上栅格替换成各不相同的边距。

也就是说，设计师最好是一开始和前端交付时，就明确设计稿上各元素之间的边距，而不是高宽：

这一点，不但一些设计师不清楚，很多前端也不清楚。只是设计师不清楚是因为不知道前端原理；而前端不清楚，是因为他们不在意相应布局的视觉效果。

不过，虽然框架不固定高宽，但是按钮、图标、LOGO 等小元素，通常还是固定高宽的。

文字对尺寸的影响

一些设计师向前端提供文字参数时，只提供字体和字号，结果出来的效果还是相差很远。

通常来说，最容易产生问题的参数就是「行高」了，因为浏览器的默认行高是 100%，而很多系统平台都有自己的默认行高。

所以说，行高一定要明确才能确保效果，而且最好是提供百分比而不是数字，这样就能够跟随字体尺寸按比例变化了。

除此之外，还有「段落间距」和「字间距」可以注意一下，不过使用率较低就不多说了。

尺寸标注

我知道现在有很多工具可以查看设计稿的尺寸，但是如果前端是新手，也会 get 不到你的设计规范。

标注的时候，就可以只挑关键参数，即：字体、字号、行高、边距、色彩。

其实，如果你知道哪些是关键的，需要标注的东西也没有特别多，比以后东拉西扯地沟通细节高效多了。

很多设计师看了上图的标注，也许会惊呼“没必要”吧！

这说明你的前端同事很优秀，不需要解释太多。

可即便前端同事再优秀，按钮是否要自动灵活伸缩？按照文字内容还是按照界面宽度伸缩？这些东西，也还是要他们自己来“猜”。

像我这样对自适应方案想得比较多的，就更加倾向于标注清楚些。

总结

如果你有一名优秀而细心的前端同事，那么以上都不是问题，可能你根本不需要知道也能好好合作。

但是设计师的工作生涯中难免遇上几个难对付的前端，多点沟通技巧，也可以让自己心情愉快些。

慢慢来比较快，如觉得有帮助，

请分享一下本文，谢谢！

作者 | 设计师ZoeYZ
来源 | 体验进阶（ID：Advanced_UX ）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。