字体实验工具•安装使用

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-相同方式共享
8123 17 63 2017-06-19

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

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.


全部评论:17条

  • 迷茫的大鲨鱼

    2017-06-23 09:54

    @bingxueling: 好的~

  • 骑驴钓鱼

    2017-06-22 17:48

    @bingxueling: 谢谢大大。

  • bingxueling

    2017-06-22 17:17

    @骑驴钓鱼: 理论上来说是完全正确的。不过同样都是xxhpi的手机(2倍),也有可能dpi会有一点点不同,比如三星s3的dpi为306,而小米2则为342。但他们都是按照标准2倍来计算的,手机系统内会预置这个倍数值。密度高的手机,屏幕肯定稍小,那么结果就是小米的手机看相同的字号其实会稍微小一点点,因此我也在字体实用工具中推荐大家使用大一点的字号,这是其中一个原因。

  • 骑驴钓鱼

    2017-06-22 16:20

    请教,如何换算成PX单位的话,是不是 px = dp * (dpi / 160) ? 根据每个安卓手机的dpi去换算。

  • 去年我才150

    2017-06-21 17:08

    边教授给力啊 向你学习

  • bingxueling

    2017-06-21 11:36

    @迷茫的大鲨鱼: 有问题记得反馈给我哦,在UI中国留言或者UI设计科学派留言都ok

  • 迷茫的大鲨鱼

    2017-06-21 09:45

    @bingxueling: 已经下载了,谢谢

  • 黑白天堂

    2017-06-20 17:44

    感谢边教授,坐等ios版

  • bingxueling

    2017-06-20 14:44

    @迷茫的大鲨鱼: 因为这个工具还比较简单,经常会更新bug和升级下UI之类的,所以放在一个能方便更新的地方,给大家带了些许不便,很抱歉。

  • bingxueling

    2017-06-20 14:43

    @vimenlam: 哈哈谢谢支持

  • 迷茫的大鲨鱼

    2017-06-20 11:11

    @迷茫的大鲨鱼: 原来在 公众号里

  • 迷茫的大鲨鱼

    2017-06-20 10:57

    ……我没找到下载链接

  • vimenlam

    2017-06-20 10:38

    受教了边教授!!!

  • bingxueling

    2017-06-20 09:59

    @宋二狗: 我去,二狗好,谢谢~

  • 宋二狗

    2017-06-20 09:23

    边教授好

  • bingxueling

    2017-06-20 01:55

    @gsmike: 走起~

  • gsmike

    2017-06-20 01:19

    边教授这篇很实用啊!下回有空我讲讲iOS的字体更换方法,哈哈哈

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票