字体的研究•iOS单行篇

原创文章 分类: 规范/资料 版权:
9559 38 280 5
2018-02-12
52.7
首页推荐

文字的研究•iOS单行篇终于来啦,此外你还可以获得一款Win和Mac通用的官方版苹果字体。

Image title


内容简介


之前发布了Android版的字体实验工具,来辅助UI设计师精确地进行设计稿标注。现在,来讲讲如何精确标注iOS设计稿中的单行文字。此外,还提供了OTF版本的苹方字体,由苹果官方版提取,字重和字形与原版完全一致,在Windows和旧版本MacOS系统中均可以正常使用。

ps:目前从网络上下载的TTF版苹方字体,字形和字重均与官方原版不同,甚至还会

引起其他问题,建议彻底删除后安装本文中的苹方字体库。


Image title



方法的研究


下面是一个字体测试Demo的iPhone 6s屏幕截图,Demo生成了字号从10pt~25pt的Label控件,布局采用了autolayout。


Image title



对列表中的文字进行字号、字高和间距的测量。在这里我列举了15pt和24pt文字的标注信息来帮助大家更好地理解结论。


Image title


最终归纳出几个规律:

1.中英混排和纯英文表现一致;
2.字高(行高)与字号的比例为1.2倍,小数会进位取整,比如13.2会变为14;
3.H字符在行中上下居中;
4.左右间距留2px~4px即可,误差不会很大。


在PS中应用


在PS中应用以上结论进行文字标注,以18pt字号为例,英文采用SF UI Text常规,中文采用苹方常规,在UI设计科学派公众号中回复“苹果字体”即可获得两个字体的下载链接。


Image title



第一步,计算出行高,以2x设备为例,18pt文字的行高为:18×2×1.2=43.2,进位取整为44px,所以要绘制一个44px高的布局盒子。


Image title



第二步,输入一个H定位字符,字体使用SF UI Text常规,以H字符为基准,垂直对齐布局盒子。


Image title



第三步,删除H定位字符,左右间距各留3px,完成!


Image title


在Sketch中应用


在sketch中,只需要输入计算出的行高,用Measure等插件导出标注文件就可以了。

Ps:Sketch3.x中,SF和苹方混排时,文字在文本框中无法垂直对齐,在4.x后进行了优化,目前最高的4.8.2已经正常。


Image title


字体下载与相关阅读


在UI设计科学派公众号中回复“苹果字体”即可获得两个字体的下载链接。最后,如果这篇文章让你有所收获,别忘了转发给他人。


相关阅读

字体的研究•上篇:两篇文章解开你对字体开发实现的全部疑问。
字体的研究•下篇:两篇文章解开你对字体开发实现的全部疑问。


bingxueling

Hope,Power.

1109粉丝/24关注

面向价值设计•导论sogou手机输入法项目总结四-皮肤架构

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN