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的设计笔记,作者:Echo)
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题,火星帮你解答《黑神话:悟空》PS5游戏版号已拿到!这几个专业,未来真的赚到了!
一款像《黑神话:悟空》这样的3A制作,其制作团队一般需要游戏策划、原画设计、3D美工、建模师、动画师、UI制作、游戏程序员等必要岗位。
今年回暖的行业不仅仅是动画,像前面提到的所有专业,如剪辑包装、3D模型、角色动画、虚幻视效、AI商业绘画、虚幻开发、室内设计等......
腾讯游戏美术春招已经启动啦!25、26、27、28届均有机会投递,实习岗位有动画、特效、3D场景/角色、2D场景/角色、技术美......
刚入学的同学,在第一次学到新软件的时候,经常会被各种快捷键整懵。但是网上download的快捷键记忆图,不一定就是合适的。这里......
官方宣布3月共134款新游戏版号过审,网传68家游戏公司超1000岗位
提前了解行业趋势,关注热门游戏和新技术如AI、UE5等;或通过了解和参加线上、线下行业游戏大赛或交流峰会,增加行业信息来源,积......
今天要分享的是武汉校区剪包专场招聘会,企业代表是曾就读于武汉校区2210期的剪包学长,这次代表公司返校,招聘视频拍摄剪辑岗位。