恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
字体的研究•下篇
0.0°
2017-06-01 原创文章 规范/资料 举报 17053 161 84 33

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

Image title



探索永无止境-接上篇


字体的研究提出了7个问题和1个建议,此为下篇,会继续研究问题4、5、6和7。上篇已经研究了前3个,收到了一些同学的反馈,期待大家提出更多建议。上篇可以在本文结尾的相关推荐或者UI设计科学派的订阅号(微信搜索“UIDesignScience”)中查看,强烈建议大家先阅读上篇再阅读下篇。


Image title



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


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


Image title


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


Image title


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



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


字体的研究•上篇发布了一款实验工具,通过此工具可以轻松地获得字体实际的小大,再次建议大家先阅读上篇再阅读下篇。在UI设计科学派的微信订阅号中提供了字体实验工具的下载,文字回复“字体的研究”即可获得最新下载链接(因字体实验工具会不定期更新,请在订阅号中获取最新下载链接)。

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


Image title


获得字体高度和宽度之后,重新输出一下设计标注图(此标注图采用了UI骨骼,关于UI骨骼的介绍大家可以在UI设计科学派的订阅号中找到),如此标注,开发效果将会非常接近设计效果。


Image title


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



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


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


Image title


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

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


Image title


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


Image title


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

大家在使用实验工具的过程中可以多尝试,有问题在可以在UI中国UI设计科学派订阅号中回复给我。字体大小和行间距高度的显示原理,会专门写文章进行讲解。



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


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


Image title


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

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


Image title


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



1个建议 我常用的字号


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

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



求关注以及相关资料


关注UI设计科学派微信订阅号(微信搜索“UIDesignScience”),提前了解下期内容。希望有越来越多的UI设计师跟我一起研究“UI设计中的科学性问题”,发现UI设计的科学之美与逻辑之美。

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



更新:2017-06-01

收藏

161人已收藏

bingxueling

Hope,Power.

  • 21

    作品

  • 1375

    粉丝

  • 10

    关注

  • 全世界最优秀的免费设计资源都在这!
  • 色彩系统重构-来自著名博客WordPress的设计团队
  • 设计就是[数据]-来自Google设计团队的项目分享
  • 15分钟搭建设计师自己的作品网站

    猜你喜欢

      2017-06-01 原创文章 规范/资料 举报 17053 161 84 33

      字体的研究•下篇

      0.0°

      你确定要举报字体的研究•下篇

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年06月01日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      84
      161
      33

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录