开发文字错位,UI需要知道的解决办法

@胡桃子:在实际开发过程中,字体上遇到的问题是最多,也是最难以解决的。不知道小伙伴在验收的时候会不会遇到这样的情况,开发明明是按照设计图上的字体和间距来的,可跟设计稿的间距还是有差异,这是为什么呢?今天和大家分享一下,文字怎么搭建和使用,如何正确的设置文字做出正确的设计,且符合项目开发的实际需要。

一、排版属性

1.行高

行高是一行文本垂直方向的高度,这个高度和字高无关,文字内容默认处于这个高度的水平居中位置,如下图所示。

ea2c1avwsnn.jpg插图

在一般的UI软件中,我们可以发现通常默认行高一定比字号本身更大,例如字号为 12dp的文字行高为17dp,导致文本区域高度大于实际的字高。这是一个正常现象,因为如果行高和文字同高或更小,那么在多行文本状态下就无法正常显示。

2.行间距

在 Sketch、XD 等软件中没有包含的属性需要引起我们重视,那就是“行间距”。

行间距是一个独立于行高之外的属性,在一些复杂的设计、排版软件中会出现,以及iOS、Android 等前端语言中也有提供这个属性,它是造成我们标注与实际开发过程出错的罪魁祸首。

1wxgxa5od3h.jpg插图(1)

无论是设计过程中,或者设计标注文件中,都要抛弃掉任何有关行间距的概念,虽然 iOS 使用行间距可以实现,但是实现的效果和设计稿是有出入的。因为设计稿中我们只能使用行高,所以在一个文本区域中,它的上下两侧都有行高增加的空白区域,但是实现过程里面没有这一截间距,导致实际文本区域和上方元素的距离效果有偏差。

3.其他

除了行高、行间距,还有段间距、对齐方式、字间距等排版样式,但对开发的影响不大,设计的小伙伴应该都懂,所以这里不过多讲解。

二、文字行高适配

目前文字行高间距的标注方法有3种。

1.自己手动标注行高

有部分设计设计师用原始方法来标注文字,即用文字最低点和最高点作为行高就行标注,如下图,标注从下面文字“丽丽”的开始测量到下面灰色文字的最高点“阿卓”结束。在这种情况下,开发人员还原出来的效果和设计稿有一定的差距,需要调试很多遍才能达到想要的效果。

5hbbcka4f4k.png插图(2)(错误的方式)

2.使用sketch默认的行高

使用sketch默认的行高进行标注,这是UI设计师常见的操作习惯,但在验收开发版本还原度的时候,还是发现与设计稿标注的间距不一样。

2rpwb44w3x5.png插图(3)(错误的方式)

这是为什么呢?因为不同的字形在高度上都会产生微小的差异,无论是使用原始方法或是使用sketch默认行高去标注文字,它都与前端在编辑文字的软件里的字体默认行高不一致。

3.手动修改sketch行高为开发环境下的默认行高

手动修改文字行高,把sketch文字行高与前端默认行高修改成一致,从而给出准确的文字间距。这种方式虽会花费不少时间,但也最精确,你可以据此设置出最美观合理的间距,而不用担心上线稿的还原度问题。

下图是iOS的Xcode以及Android文字编辑器对应下默认的行高。

fss3ldoftuv.jpg插图(4)

最便捷的方法:手动调整sketch里的字体的默认行高并形成样式。这样规范好设计能更好的让开发人员还原设计稿,也便于我们后期的页面校对和调整。

这时眼尖的朋友可能会发现,Android和iOS开发的文字编辑器默认的行高也不一样啊,难道我们要出2套设计标注文件吗?虽然不可否认的是,最理想状态当然是设计师出2套设计稿,但在职场打滚过的设计师都会知道,多数产品都是处于快速迭代的过程,出2套设计稿花费的时间成本过高,并不符合实际情况。

对于这点,比较建议大家可以尝试把ios和安卓都设置成一样的行高,针对特殊页面再单独做标注调整。

总而言之,具体使用哪种方法去做文字的标注,要根据自己的项目具体情况具体分析。

总结

由于开发环境下文字上下是有padding高度的,设计师需要手动修改sketch行高为开发环境下的默认行高

以上就是个人的小小的经验,希望可以给大家一些启发和借鉴~~

原文地址:胡诌青年(公众号)作者:胡桃子nicoxscu3dt.jpg插图(5)

人已赞赏
UI设计

原创 | 一文彻底看懂UI设计适配与落地(上)

2020-10-11 2:06:37

UI设计

UI界面设计基础知识

2020-10-11 2:06:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索