酷狗音乐歌词怎么变回多行,酷狗怎么把歌词变成两行

首页 > 经验 > 作者:YD1662022-11-04 19:43:24

后来,设计师逐渐使用了sketch文字默认的行高导出标注文件,但在验收开发版本还原度的时候,还是发现与设计稿标注的间距不一样。

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

比如,iOS的Xcode以及Android文字编辑器对应下的行高效果。

酷狗音乐歌词怎么变回多行,酷狗怎么把歌词变成两行(21)

由上图可以发现:开发人员在写字体的时候会使用一个类似textview的,我们可以理解成一个文本框,字其实不是顶满这个框的,是有一定留白的。

所以,我们可以把行高可以理解为一个包裹在字体外面的无形的盒子,在标注文字的行高时,要把留白算进去,以文本框(即默认行高)的形式去标注。

酷狗音乐歌词怎么变回多行,酷狗怎么把歌词变成两行(22)

具体的配合开发人员还原文字间距的标注方法,大致可以分为3种:

1. 安装插件;

2. 手动修改文字行高;

3. 文字组件化;

1.安装插件

比较偷懒的方式:在sketch装个“antofixiostextlinehinugin.sketch”插件。

这个插件适用于苹方和SF字体,点击fix即可一键修复成xcode原生行高。虽然这类插件看着能一劳永逸,但目前市面上应用较少,bug也比较多,单行文本基本可以还原,多行文本则基本不适用。(插件可在附件下载)

2.手动修改文字行高

最准确的方式:根据前端编辑器默认行高自行完美还原。

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

酷狗音乐歌词怎么变回多行,酷狗怎么把歌词变成两行(23)

3.文字样式

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

这时眼尖的朋友可能会发现,Android和iOS开发的文字编辑器默认的行高也不一样啊,难道我们要出2套设计标注文件吗?

虽然不可否认的是,最理想状态当然是设计师出2套设计稿,但在职场打滚过的设计师都会知道,多数产品都是处于快速迭代的过程,出2套设计稿花费的时间成本过高,并不符合实际情况。

对于这点,比较建议大家可以尝试把ios和安卓都设置成一样的行高,针对特殊页面再单独做标注调整。总而言之,具体使用哪种方法去做文字的标注,要根据自己的项目具体情况具体分析。

二、文字弹性适配

文字弹性适配一般涉及的是宽度适配。

宽度适配普遍使用的是间距适配,即定好左右页边距,中间弹性拉伸。这种方式可以做到较好的适配,也是做快速常用的适配方法。

酷狗音乐歌词怎么变回多行,酷狗怎么把歌词变成两行(24)

上一页23456下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.