前端保证一比一按源文件做,结果又是惨不忍睹

2021-9-17    seo达人 设计思维


图片

但真的是相差很远诶!

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

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

我说:

『 界面布局的关键不是宽高,而是间距 』

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

 

前端原理

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

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

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

图片

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

图片

上图截自:Sketch

 

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

 

尺寸是变化的

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

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

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

图片

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

答案是:

 

间距是固定的

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

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

图片

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

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

图片

 

文字对尺寸的影响

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

图片

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

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

图片

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

图片图片

 

尺寸标注

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

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

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

图片

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

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

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

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

 

总结

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

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

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》前端保证一比一按源文件做,结果又是惨不忍睹

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档