中国传媒大学-用户体验与UI交互设计-课件-知识点5.4界面中的文字使用技巧

1、交互式界面设计西安邮电大学数字艺术学院知识点5.4：界面中的文字使用技巧PART 01引言目录CONTENTSPART 02如何选择字体PART 03合理设置文字字号PART 04文字的字距和行距设置技巧0102030405PART 05字体颜色的使用技巧 引言01在界面中，能够让用户完成交互的是各种形式的按钮，这些按钮有些是图标，有些是文字，有些是图标与文字的组合。 引言文字边缘区域重要桥梁文字其实也是一种视觉符号，与图标一样具有审美性，但是界面中的说明文字要尽量简练。 引言一个词表达不要用一句话一句话表达不用一段话一种字体不用多种字体一种颜色的文字不用多种颜色如何选择字体02此部分内容作为

2、文字排版占位显示 （建议使用主题字体）有衬线字体（serif）此部分内容作为文字排版占位显示 （建议使用主题字体）无衬线字体（sans serif） 字体的两大类 现代主义的影响 20世纪上半叶，当时整个德国，乃至欧洲都被“包豪斯主义”洗脑，也就是“现代主义”。建筑绘画工业设计字体设计无衬线体为主流 字体的选择技巧01菜单文字图标文字按钮上的文字使用同一种字体 字体的选择技巧02一个项目设计中最好只使用一种字体样式，最多不超过两种字体。03正文或大段文字适合选择通用字体，如 微软雅黑。处理标题或短小文本，适合选用新颖字体打造差异化。例如轻芒杂志App就在标题使用了方正新报宋来打造产品的差异化。

3、04标题合理设置文字字号03底部标签栏辅助性文字使用20px；段落辅助性文字次要信息用24px；模块描述、内容说明等用26px；多段文字标题如商品标题等用28px；模块标题、列表名称等用32px；页面标题、导航标题、分类标题等用36px。 文字字号的设置文字的字距与行距设置技巧04阅读舒适字距行高提高可读性快速获取信息 要想文本阅读的舒适离不开使用合适的字距和行高，以便于提高文字的可读性，有利于用户在使用的时候快速获取信息。 设置字距和行距的重要性中文方块字0.5字号小字号大0.5-0.5 设置字距的技巧 通常情况下，字距以0.5依次增加和缩减。 比如说字号比较小的时候可以把字距设置为 0.5

4、 让字距变开一些，而在字号较大的标题文字可以使用字距为 -0.5 的设置使文字更紧凑方便一眼就看完。在这个基础上可以视字号设置字距为 -2、-1.5、-1、-0.5、0.5、1、1.5、2在这个基础上灵活变化。但值得注意的是，除非你的版面有特殊要求，否则不要轻易改变字体默认的字间距，字体设计师已经充分考虑了这款字体所适合的字间距，如果不满意可以更换字体。 设置字间距注意的问题 设置行距的技巧行距是行之间的空间，行距太紧凑，会让视线难以从行尾扫视到下一行首。行距太宽松，字间距会开始形成队列，产生了我们通常意义上的河流，阻断了行的视觉流。通常情况下，界面中的多行文字一般设置 为1.5 倍的行高比较

5、常见。1.5倍行距字体颜色的使用技巧05 常用的字体颜色我们一般是依据文字信息的重要程度来设置文字颜色的，并将文字分为不同的等级，层级越低的文字颜色越浅，随着层级的增高，文字颜色越深。#333333#666666#999999常见字体配色深黑色深灰色灰色第二步：画一个矩形块，填充吸取的颜色，并将矩形块复制四个；#22282a#22282a#22282a#22282a第一步：选取一个和界面主色调相关的暗颜色，然后用吸管将这个颜色吸取下来； 设置字体颜色的小技巧第三步：按照 100% 、75%、55%、5%的不透明度，对色块进行不透明度的调整。第四步：通过吸管工具吸取得到每一个色块的颜色色值。100% 75%55%5%#22282a#595e5f#86898a#f4f4f4 设置字体颜色的小技巧 文字排版三原则为了追求移动