不懂UI文字设计规范?这篇文章帮你搞定

kranky

30天以前 20浏览
不懂UI文字设计规范?这篇文章帮你搞定

UI设计中,文字设置是必不可少的一环。
文字设置过程中涉及到字体类型、字号、字重、行高、行宽以及颜色等。
本文讲述的文字设计规范,包含以下部分1、类型2、字号3、字重4、行高5、行宽6、颜色1、类型iOS设备的系统默认字体,中文为苹方,英文&数字为。
设备系统默认字体,中文为思源黑体,英文&数字为。
2、字号不同的使用场景,文字的字号也不相同。
文字的主使用场景分为一级标题、二级标题、三级标题、正文和提示文字。
文字最小字号一般为11。
也有特殊情况,例如标签里面的文字,字号为10甚至可能更小。
3、字重字重就是指字体笔画的粗细。
字重的等级是用来标明同一字体家族中不同粗细笔画的字型。
UI设计中,常用的字重有两个,一个是常规,另一个是中黑体。
正常文字使用常规体。
当需要突出层级展示,增加对比时使用中黑体,中黑体常用于标题。
4、行高字号大小等于文字高度,如下图所示,字号为16时,行高设置为16,那么其行高也是字体本身的高度(16pt)。
行高字号+行间距。
如下图所示行间距距离文字上方为3pt,行间距距离文字下方也为3pt。
字体高度为16pt。
行高(22)字号(16)+行间距(3+3)。
在界面过程中,需要规范字号大小和对应的行高。
不然的话会存在设计布局问题。
举个例子,设计一个标签时,当字号为14时,行高为20,那么为了保持视觉上字体到四周距离相同,那么上下间距为4,左右间距为8。
因为行间距的存在,不能将上下间距和左右间距设置相同。
如果行高设置为14(文字本身大小),那么上下间距应该也为8pt,而非4pt。
如下表格为iOS设计指南建议字号和对应的行高对照表。
下图是默认字号和行高对照表可以看出iOS建议字号行高的对照表和默认的不一样。
视觉稿到了开发实现,字号和对应行间距会出现不一致的情况,这样会导致还原度出现问题。
解决行高无法完美开发还原的办法有两个1、将行高设置为字号大小,这样的话,就不存在行间距的问题,可以保证完美还原。
但是由于一倍行高会导致有些机型的字被切掉。
2、使用字体插件,这样它可以自动修复文档中的字体行高,做到中字体行高与开发中字体行高100%还原。
5、行宽行宽字体宽度+两侧距离字体的宽度行宽作用于文本范围,如下图所示将行宽拉长,代表着设置了文本内容范围,文本距离右侧语音图标为12pt,表示当文字内容距离语音图标12pt时,文字打点或截断展示。
6、颜色字体颜色有两种规则定义做法,一种是直接使用色值,如图所示另一种做法是通过不透明度实现,通常以#000000为基准,设置不同的不透明度,如下图所示综合而言,使用不透明度的方法,使用场景更加广泛一些。
文章来源Echo的设计笔记

本文仅代表作者观点,版权归属原创作者,如需转载请在文中标注来源及作则名字。

免责声明:本文系转载编辑文章,仅做分享只用,如有疑问请联系邮箱:110@zbj.com

平面广告
大家都在看
产品设计都有哪些构成要素?你确定都知道?—开课吧

产品设计都有哪些构成要素?你确定都知道?—开课吧

平面广告
42浏览
猪八戒网坦白贴:猪八戒网能提供哪些服务?

猪八戒网到底能为客户做什么?

平面广告网站/软件工商财税知识产权营销传播影视动漫
209浏览
安踏标志含义及品牌LOGO设计理念分析说明

安踏标志含义及品牌LOGO设计理念分析说明

平面广告
146浏览
特步的logo设计理念

特步的logo设计理念

平面广告
917浏览
从设计师转型做餐饮他如何打造深圳第一徽菜品牌?

从设计师转型做餐饮他如何打造深圳第一徽菜品牌?

平面广告
12浏览
什么是UI设计?

什么是UI设计?

平面广告
14浏览
设计总监带您深入了解设计思维:3个关键词解锁5大能力

设计思维的奥秘:五大核心能力引领创新之旅,如同航行在创意海洋。透视多元,实践激情,冒险预测,全球视野,人性共情,构筑设计之基。透视、框架、模型,为思维导航。

平面广告网站/软件
32浏览
产品设计的五个要素是什么?

产品设计的五个要素是什么?

平面广告
68浏览
超详细!从2年间,看手机外壳材质及设计变迁!

超详细!从2年间,看手机外壳材质及设计变迁!

平面广告
135浏览
简析现代包装设计中民国风的运用原则与方式

简析现代包装设计中民国风的运用原则与方式

平面广告
9浏览
包装设计的意义

包装设计的意义

平面广告
9浏览
“儿童之家”LOGO入选之6设计说明

“儿童之家”LOGO入选之6设计说明

平面广告
12浏览
设计师|青山周平:做让城市生活更美好的产品设计

设计师|青山周平:做让城市生活更美好的产品设计

平面广告
18浏览
设计商标时,字体应该怎么选?

关注企业服务官,每日推送企业生意经!

平面广告
92浏览
走入UI/UX设计:探索用户界面与用户体验

UI/UX设计:美感与用户满意的奇妙交汇。UI侧重产品外观,UX注重用户全程体验。设计师需深入了解用户,绘制旅程地图,打造原型,密切协作。职业多样,挑战在于不断学习与创新。

网站/软件平面广告UI交互
82浏览
餐厅想盈利,就要把logo设计好!妙鼠设计有办法

餐厅想盈利,就要把logo设计好!妙鼠设计有办法

平面广告
19浏览
logo设计知识普及标准制图和尺规作图

logo设计知识普及标准制图和尺规作图

平面广告
27浏览
封面设计画,色彩搭配黑、白、灰应注意几点,否则不伦不类

封面设计画,色彩搭配黑、白、灰应注意几点,否则不伦不类

平面广告
167浏览
如果PPT文字比较少什么样的设计排版才更美观呢

如果PPT文字比较少什么样的设计排版才更美观呢

平面广告
73浏览
餐饮饭店的股权设计和股权激励

餐饮饭店的股权设计和股权激励

平面广告
10浏览
点赞
收藏
分享