UI设计师如何正确给前端标注行高?

elnino
  • 53

clipboard.png
我司UI给的标注都是贴着文字上下的,这就造成了写行高和边距的时候只能计算一下才得到。尤其第二张图这种标注写css的时候真的很烦躁,有什么工具或方法来帮我司UI实现正确的行高标注?

回复
阅读 4.2k
6 个回答
✓ 已被采纳

问题是「各位有什么方法解决或者你们UI有什么工具活方法来实现正确的行高标注?」
答案是 zeplin 这个工具,设计师在 PS 或者 sketch 上安装插件,开发就可以看到几乎所有元素的所有 css 属性:

clipboard.png

如果有帮到你请 upvote 或采纳~

首先,行高不能设为1,因为设为1之后,有可能中文会被截取,显示不完整。
bootstrap为了统一浏览器之间的行高差别,设置的是1.47....,但是,实际中,这个值并不好计算,建议line-height:1.5,这样便与计算,差别也不会很大。
比如,设计稿的上边距是20px,字体大小为12px,那么我们代码的实现就应该是font-size:12px;margin-top:17px;
为什么是17px呢,因为行高为1.5,所以超出了0.5*12为6px,上边超出了6/2=3px,20-3=17px;

熟练之后直接边距 - 字体大小/4就行了

是设计师的问题,zeplin还是Sketch都没关系,只是自动标注工具,如果你的设计师在制作设计稿的时候就没考虑行高概念的话,用什么自动标注工具都是一样的。
主要跟设计师沟通,如果你的设计师只是标注像素到像素的尺寸,那么他只能称为平面设计师,UI设计师绝对要考虑行的问题。

line-height:1;

不用单位就表示 1em

多行的话

line-height:1.5;
margin:-0.25em 0;

用 margin 把上下多的行高去掉

可以量取文字的高度,然后把文字的行高确定。如果是按钮,可以吧12减去按钮的padding和border宽度

我是这样处理的

font-size:14px;
line-height:14px
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏