当前位置: 首页 >文章 > 一篇文章搞定UI文字设计规范
收藏
分享

一篇文章搞定UI文字设计规范

举报Echo的设计笔记Echo的设计笔记发布于 2021-01-281124阅读2点赞
文字设计规范的那些事...

UI设计中,文字设置是必不可少的一环。


文字设置过程中涉及到字体类型、字号、字重、行高、行宽以及颜色等。


本文讲述的文字设计规范,包含以下部分:


1、类型
2、字号
3、字重
4、行高
5、行宽
6、颜色



1、类型 


iOS设备的系统默认字体,中文为苹方,英文&数字为SF UI Text。




Android设备系统默认字体,中文为思源黑体,英文&数字为Roboto。





2、字号 


不同的使用场景,文字的字号也不相同。文字的主使用场景分为:一级标题、二级标题、三级标题、正文和提示文字 。


文字最小字号一般为11。也有特殊情况,例如标签里面的文字,字号为10甚至可能更小。





3、字重 


字重就是指字体笔画的粗细。字重的等级是用来标明同一字体家族中不同粗细笔画的字型。


UI设计中,常用的字重有两个,一个是常规(Regular),另一个是中黑体( Medium)。


正常文字使用常规体(Regular)。当需要突出层级展示,增加对比时使用中黑体( Medium),中黑体( Medium)常用于标题。





4、行高 


字号大小等于文字高度,如下图所示,字号为16时,行高设置为16,那么其行高也是字体本身的高度(16pt)。




行高= 字号 + 行间距。


如下图所示:行间距距离文字上方为3pt,行间距距离文字下方也为3pt。字体高度为16pt。




行高(22)= 字号(16) + 行间距(3+3)。


在界面过程中,需要规范字号大小和对应的行高。不然的话会存在设计布局问题。


举个例子,设计一个标签时,当字号为14时,行高为20,那么为了保持视觉上字体到四周距离相同,那么上下间距为4,左右间距为8。


因为行间距的存在,不能将上下间距和左右间距设置相同。




如果行高设置为14(文字本身大小),那么上下间距应该也为8pt,而非4pt。


如下表格为iOS设计指南建议字号和对应的行高对照表。




下图是Sketch默认字号和行高对照表:




可以看出iOS建议字号行高的对照表和Sketch默认的不一样。


Sketch视觉稿到了开发实现,字号和对应行间距会出现不一致的情况,这样会导致还原度出现问题。


解决行高无法完美开发还原的办法有两个:


1、将行高设置为字号大小,这样的话,就不存在行间距的问题,可以保证完美还原。但是由于一倍行高会导致有些机型的字被切掉。


2、使用字体插件,这样它可以自动修复Sketch文档中的字体行高,做到Sketch中字体行高与开发中字体行高100%还原。





5、行宽 


行宽=字体宽度+两侧距离字体的宽度


行宽作用于文本范围,如下图所示:




将行宽拉长,代表着设置了文本内容范围,文本距离右侧语音图标为12pt,表示当文字内容距离语音图标12pt时,文字打点或截断展示。



6、颜色 


字体颜色有两种规则定义做法,一种是直接使用色值,如图所示:




另一种做法是通过不透明度实现,通常以#000000为基准,设置不同的不透明度,如下图所示:




综合而言,使用不透明度的方法,使用场景更加广泛一些。




本文原创,未经作者允许不可转载!

更多内容,欢迎关注作者微信公众号:Echo的设计笔记!



0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天63人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证