字体的研究•下篇

用户头像
北京/UI设计师/9年前/263浏览
字体的研究•下篇

如何标注设计稿中的行间距?设计中常用的字号有哪些?字体的研究•下篇继续来聊聊这些困扰过我们的字体问题。

52bd59434875a8012193a3faa3f6.jpg


探索永无止境-接上篇


字体的研究提出了7个问题和1个建议,此为下篇,会继续研究问题4、5、6和7。上篇已经研究了前3个,收到了一些同学的反馈,特别期待大家提出建议和批评。强烈建议大家先阅读上篇再阅读下篇。

07a1594348f3a8012193a398edbd.jpg



问题4 探索文字的实际大小和视觉大小


回答一个问题:下图中的文字高度是红色块高度、蓝色块高度还是绿色块高度,亦或是蓝色块 + 绿色块的高度?

950a59434941a8012193a3f15552.jpg

眼见未必为真,在视觉设计中经常能体会到这点,当然字体的实际大小也不能用眼睛来看,接下来给大家看一个设计标注图,是否有一种熟悉的感觉?e2b45943495aa8012193a34a98e0.jpg

其实每个人都知道上面的标注图有错误,然而却有非常多的UI设计师输出类似的标注图。到底如何才能找出“文字的实际小大呢”?文字的实际大小和视觉大小到底有何区别和联系?
现在我要大胆地提出一个猜想或者假设:文字的实际大小和视觉大小不一样,但必然存在相关性。



问题5 如何获取文字的真实高度和宽度


随字体的研究 上篇发布了一款实验工具,通过此工具可以轻松地获得字体实际的小大,再次建议大家先阅读上篇再阅读下篇。

字体实验工具v1.2下载链接: https://pan.baidu.com/s/1mhGrMJI


3步获取字体大小:
1. 输入我们需要的文字
2.设置字号和行间距
3.点击“显示效果”按钮
预览框中显示的黑色区域就是文字实际大小占据的区域,截图导入PS就可以量取具体数值。

42a3594349b5a8012193a3387d34.jpg

获得字体高度和宽度之后,重新输出一下设计标注图,如此标注,开发效果将会非常接近设计效果。

9405594349cba8012193a378bcf7.jpg

另外,我要呼吁各位亲爱的UI设计师,不要对这些“错误”视而不见,请尝试用“科学”的方法研究解决问题,并且“开源”我们的成果;UI设计不是美化设计,UI设计是一个真正的技术行业,一个科学科目。



问题6 文字的“行间距”和“字间距”


先讲讲字间距,设计过程中,需要调整字间距的情况不是很多,常接触的就是多行文本的首尾端对齐,看下面的例子。

26415946813ea8012193a3bed6a9.jpg

我手动调整了部分文字间的字间距来获得整齐美观的段落对齐效果。很遗憾的是,Android系统的原生文本控件,并不支持自定义字间距,想要实现文本的首尾对齐效果必须“自定义控件”才行,因为自定义控件的编码工作量较大,加之设计上的需求也比较少,就不多加讨论了,大家只要知道:字间距自定义是可行的,只是编码工作量较大。

Android系统的原生控件对自定义行间距的支持非常好,设计过程中调整行间距的情况也很多,因为行间距会影响到文本的阅读感受和阅读效率,还是先看一个例子。

987e59468171a8012193a30116b1.jpg

不同的设计环境需要不同的行间距,有的需要高效,有的需要美观,在上篇的问题3中提到过,PS的默认行间距和Android开发效果的行间距是不同的,不仅如此,不同的系统和不同的软件对默认行间距的处理也不尽相同。不要担心,通过实验工具可以轻松获得设计效果下的开发数值。实验工具提供了系统的默认行间距效果页面和自定义行间距的功能来解决各式各样的文字排版需求。

bf7e59434a6ba8012193a3addbfa.jpg

行间距数值和行间距倍数的含义:
行间距数值(开发采用android:lineSpacingExtra定义):表示在默认行间距的基础上增加或者减少多少dp/sp/px,通常采用dp做单位,我也推荐采用sp做单位,正数代表增加,负数代表减少。
行间距倍数(开发采用android:lineSpacingMultiplier定义):表示采用默认行间距的多少倍,可以使用小数,大于1代表增加,小于1代表减少。
同时应用“行间距数值”和“行间距倍数”时:总行间距 = 默认行间距 × 行间距倍数 + 行间距数值。

大家在使用实验工具的过程中可以多尝试,有问题可留言给我。字体大小和行间距高度的显示原理,会专门写文章进行讲解。



问题7 0.5px的文字会不会进行四舍五入?


废话不多说,放“实验工具”!

84cf59434ab4a8012193a3b9e9f1.jpg

将截图导入PS,红色文字是按照实验工具中设置的字号写的,而蓝色文字则是按照四舍五入后的字号写的,实验结果显示,开发效果与四舍五入后的文字效果一致。这好像是一个闲的蛋疼的问题啊~不要过早下结论,我们看一个例子来证明这个问题是非常有意义的。

下面的截图来自nexus s(hdpi机型),它的屏幕密度为1.5x,hdpi的机器依然有较大的市场占有率,多为运营商的合约机,使用者也多是上了年纪的用户。当我们使用了11sp、15sp和17sp的文字时,理论上应该显示为16.5px、22.5px和25.5px的文字,因为“四舍五入”原则,实际会显示为17px、23px和26px。不要小看多出来的0.5px,在低分辨率手机上很大程度地提高了可读性。

adbe59434aeaa8012193a30e245e.jpg

接下来,我会给出字号使用的建议,中心思想是希望UI设计师采用更大的字号,照顾更多年龄段的用户以及特殊人群。



1个建议 我常用的字号


我最常用的字号:
一级标题:18sp,比如新闻列表和正文页面的标题,重文字阅读的app应该尽量大一些。
二级标题或正文:16sp
说明性文字:14sp
注释性文字:12sp,只用在时间戳等不太重要的地方。
如果你特别喜欢小字号:
一级标题:17sp,比如新闻列表和正文页面的标题,重文字阅读的app应该尽量大一些。
二级标题或正文:15sp
说明性文字:13sp
注释性文字:11sp,只用在时间戳等不太重要的地方。

希望大家尽量采用较大一些的字号,我们有一天也会眼花的呢。另外我还喜欢用偶数字号,减少系统进行四舍五入的情况。



求关注和相关资料

大家可以添加我为关注,更多文章会陆续发布,希望越来越多的UI设计师跟我一起研究“UI设计中的科学性问题”,发现UI设计的科学之美与逻辑之美。


相关资料
字体的研究 上篇:强烈建议先阅读上篇再阅读下篇
UI的骨骼 概述:文中标注图采用了UI骨骼,顺便了解一下吧



5
举报
|
3
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI 登录界面设计模板包
智能家居中心 简约 UI设计组件库
【新年UI图标】体育icon
3D渐变流体抽象矢量UI背景图
3D卡通UI界面图标可爱插画免扣素
户外旅行飞机情侣假日出行
高级感金属拟物 UI设计组件库
钱包ui模板
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
科技医疗透明柜UI界面设计
新能源APP应用UIKit
UI通用设计素材1
Security Camera UI kit
【新年UI图标】旅行icon
【新年UI图标】30个图标
【新年UI图标】礼物/活动icon
【新年UI图标】汽车icon
UI界面 组件
高级表盘系列UI源文件
我的钱包-UI界面设计-app
拟物风质感写实UI卡片合集源文件
新拟态风格 UI设计组件库
手表表盘UI系列
你可能喜欢
大家都在看
登录注册