提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
文字的研究•iOS单行篇终于来啦,此外你还可以获得一款Win和Mac通用的官方版苹果字体。
内容简介
之前发布了Android版的字体实验工具,来辅助UI设计师精确地进行设计稿标注。现在,来讲讲如何精确标注iOS设计稿中的单行文字。此外,还提供了OTF版本的苹方字体,由苹果官方版提取,字重和字形与原版完全一致,在Windows和旧版本MacOS系统中均可以正常使用。
ps:目前从网络上下载的TTF版苹方字体,字形和字重均与官方原版不同,甚至还会
引起其他问题,建议彻底删除后安装本文中的苹方字体库。
方法的研究
下面是一个字体测试Demo的iPhone 6s屏幕截图,Demo生成了字号从10pt~25pt的Label控件,布局采用了autolayout。
对列表中的文字进行字号、字高和间距的测量。在这里我列举了15pt和24pt文字的标注信息来帮助大家更好地理解结论。
最终归纳出几个规律:
1.中英混排和纯英文表现一致;
2.字高(行高)与字号的比例为1.2倍,小数会进位取整,比如13.2会变为14;
3.H字符在行中上下居中;
4.左右间距留2px~4px即可,误差不会很大。
在PS中应用
在PS中应用以上结论进行文字标注,以18pt字号为例,英文采用SF UI Text常规,中文采用苹方常规,在UI设计科学派公众号中回复“苹果字体”即可获得两个字体的下载链接。
第一步,计算出行高,以2x设备为例,18pt文字的行高为:18×2×1.2=43.2,进位取整为44px,所以要绘制一个44px高的布局盒子。
第二步,输入一个H定位字符,字体使用SF UI Text常规,以H字符为基准,垂直对齐布局盒子。
第三步,删除H定位字符,左右间距各留3px,完成!
在Sketch中应用
在sketch中,只需要输入计算出的行高,用Measure等插件导出标注文件就可以了。
Ps:Sketch3.x中,SF和苹方混排时,文字在文本框中无法垂直对齐,在4.x后进行了优化,目前最高的4.8.2已经正常。
字体下载与相关阅读
在UI设计科学派公众号中回复“苹果字体”即可获得两个字体的下载链接。最后,如果这篇文章让你有所收获,别忘了转发给他人。
相关阅读
字体的研究•上篇:两篇文章解开你对字体开发实现的全部疑问。
字体的研究•下篇:两篇文章解开你对字体开发实现的全部疑问。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册