UI设计中,文字设置是必不可少的一环。今天就来为大家分享UI设计设置文字的规范。

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



使用场景不同,文字字号也要不一样。我们一般使用文字在:一级标题、二级标题、三级标题、正文和提示文字 。文字最小字号一般为11。但有时候标签里面的文字,字号可能更小。


字重是字体笔画的粗细。UI设计中有两个常用字重:常规(Regular)与中黑体( Medium)。
正常文字可以使用常规体(Regular)。但如果需要突出层级,或者增加对比时就可以使用中黑体( Medium)了,比如标题。


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

再举个例子:行间距距离文字上方与下方都为3pt,字体高度为16pt。则行高为22pt(16+3+3)。

在界面过程中,需要规范字号大小和对应的行高。不然会存在设计布局问题。
比如设计一个标签时,当字号为14时,行高为20,为了保持视觉上字体到四周距离相同,所以上下间距要为4,左右间距为8。只要有行间距,就不能将上下和左右间距设置相同。

下面是iOS设计指南建议字号和对应的行高对照表。



行宽=字体宽度+两侧距离字体的宽度。
行宽作用于文本范围,将行宽拉长,代表设置了文本内容范围。如下图,文本距离右侧语音图标为12pt,表示当文字内容距离语音图标12pt时,文字打点或截断展示。


字体颜色可以直接使用色值。

