小编:Sketch视觉稿到了开发实现,字号和对应行间距会出现不一致的情况,这样会导致还原度出现问题。今天我们来讲讲如何避免这种问题以及有什么解决方法,文末有福利大赠送哦,千万不要错过哈~一起来看看一篇文章搞定UI文字设计规范吧!
前言
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。
举个例子,设计一个标签时,当字号为14时,行高为20,那么为了保持视觉上字体到四周距离相同,那么上下间距为4,左右间距为8。
因为行间距的存在,不能将上下间距和左右间距设置相同。
如果行高设置为14(文字本身大小),那么上下间距应该也为8pt,而非4pt。
5、行宽
行宽=字体宽度+两侧距离字体的宽度
6、颜色
字体颜色有两种规则定义做法,一种是直接使用色值,如图所示:
综合而言,使用不透明度的方法,使用场景更加广泛一些。
作者:Echo
转载请注明:学UI网》一篇文章搞定UI文字设计规范
文章来源:站酷 作者:陈皮Celia
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务