字体实验工具•安装使用

原创文章 分类: 规范/资料 版权:
5221 57 59 17
2017-06-19
41.1
首页推荐

字体实验工具的安装使用说明书一份。

Image title


版本更新


很高兴看到字体实验工具每天都会被下载,最近对它进行了一些更新,包括:
1.解决行间距数值无法输入小数的bug。
2.优化自定义效果界面,将显示效果按钮固定在底部,使用更便捷。
3.优化界面代码结构,提高美观度。
4.更新关于界面的设计效果。
5.Android 5.0+的系统适配material design风格。

另外,因为有同学反馈“安装使用”的问题,所以专门写这篇文章来讲解一下,不管是新人还是老手,都建议快速浏览一下。

还有,提醒大家及时更新字体实验工具的最新版,版本号是v1.2,获取方法:在UI设计科学派订阅号内文字回复“字体的研究”或“字体实验工具”即可获得下载链接。



提醒和准备


1.字体实验工具目前只有Android版本,iOS版本暂未提供。
2.开始之前,请确保你有以下设备和完整资料。

Image title



进行安装


第一步:通过QQ将apk安装包发送到Android手机。

Image title

第二步:下载apk安装包,点击“安装”按钮。

Image title

第三步:若遇到“禁止安装”提醒,请依次点击【设置】-【未知来源】,开启“允许安装未知来源的应用”。

Image title


第四步:回到QQ,重新点击“安装”按钮,将会弹出下面的安装界面,继续点击“安装”按钮来完成安装流程。

Image title

第五步:启动实验工具!在Launcher中找到应用图标,开始探索吧~

Image title



主界面介绍


主界面提供了字号从10dp~22dp区间的字体预览效果,可快速截取所需字号的单行及多行效果图。
注:此界面的字体均采用系统默认字体

Image title

接下来,讲解预览图中内容块的组成部分和每部分的关系,看下图:
1.黑色背景色块所显示的区域为文字实际所占空间。
2.白色前景字为所输入内容,文字边界即可见边界。
3.文字实际所占区域与文字可见边界之间存在较大的纵向间距和较小的横向间距。
4.两行文字间存在可见间距(可暂理解为行间距)。

Image title

进行文字尺寸测量时,建议在设计稿中先使用预览图中的内容进行输入,然后绘制出相同位置和尺寸的黑色背景色块,最后修改内容为所需文字。



自定义效果界面介绍


若预置效果无法满足需要,点击主界面Actionbar上的“自定义效果”按钮,会打开自定义效果界面,此界面支持内容、字号和行间距的定义。

Image title

每个输入框都带有默认值,可以修改一个或多个数值,然后点击最底部的的“显示效果”按钮进行效果预览。

Image title

属性的取值范围:每种属性都有自己的取值范围,是无法输出限制外的数值的。
1.字号为正整数和正小数,单位为sp、dp或px。
2.行间距数值为正负数字,行间距倍数为正整数和正小数。
3.此工具限制数值最多为4位,其中包括符号与小数点。

Image title



相关阅读


欢迎大家在UI中国关注我,有问题可以留言给我,UI设计科学派是从UI中国成长起来的,希望能在这里帮助大家解答UI设计中的技术问题。最后,关注UI设计科学派(微信搜索“UIDesignScience”),希望有越来越多的UI设计师跟我一起研究“UI设计中的科学性问题”,发现UI设计的科学之美与逻辑之美。

相关阅读
字体的研究•上篇:同一字号,PS和开发效果是否一样?
字体的研究•下篇:如何标注设计稿中的行间距?

最后谨以此结束:With great power comes great responsibility.


bingxueling

Hope,Power.

846粉丝/23关注

UI的骨骼 章节一•盒式模型提问 回答•我最喜欢的PNG压缩工具

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