本文内容摘自新书《Sketch交互设计之美,从零基础到完整项目实践》一书第二章的内容,并在此基础上进行了内容修改和扩充。文字工具绝对是交互设计中使用最多的工具,没有之一,人类在漫长的历史进化之中都离不开文字,一些出彩的设计,都需要考虑文字的设计。这次,我们来普及一下Sketch中文字工具的基本的知识。
1.文字工具使用
通过工具栏的文字工具“Text”,或者通过工具栏的“Insert”-“Text”(快捷键T)即可插入一个文字图层,该文字图层会默认展示“Type something”字样,直接输入文字进行替换即可。
文字工具会记录上次设置过的字体样式,包括字体类型、字体大小、字体颜色等,也就是说,新插入文本时,会默认带入上次的字体样式。
2.文字工具的基本设置
2.1字体类型和字重
选中文字后,在文本检查器“Typeface”处点击切换选项即可切换字体类型,Sketch默认读取Mac OS系统的字体库,一般可以满足日常所需。Sketch有一点不方便的地方就是字体名称都是英文,所以“微软雅黑”是找不着的,应该找“Microsoft YaHei”。
另外,可以通过“Weight”切换字重,即常规体、粗体、细体等,不同的字重会影响字体在页面中的表现。
2.2字体缺失
如果从网络上下载、或者打开同事发来的Sketch文件时,可能会遇到字体缺失的情况,Sketch会在界面窗口右上角显示“Missing Fonts”的通知。点击该通知,则会弹框展示缺失的字体类型,并支持在后面的下拉选项中选择系统已有的字体进行替换。如果不选择替换,则可以自行下载相应的字体进行安装。
2.3字号和字体颜色
接下来是字号“Size”和字体颜色“Color”的设置,和其他软件没什么区别,非常的简单。Sketch中的字体不支持渐变色,如果要设置渐变色字体,则需要把字体转换为形状。
2.4对齐和间距
Sketch中提供四种常见的文字对齐方式:左对齐、居中对齐、右对齐、两端对齐,通过检查器的“Alignment”选择即可。其中“Auto(自动)”和“Fixed(固定)”选项可以设置文本边框适应文字内容的形式。
如果要设置文字的间距,可以通过“Spacing”进行设置,“Character”、“Line”、“Paragrah”分别对应字间距、行间距以及段落间距。
3.文字工具的其他设置
点击字重“Weight”下方的“Options”按钮,即可看到针对文字的其他设置选项。首先是下划线和删除样式,如下图所示,在“Decoration”中可以设置文字的下划线和删除样式;其次,可以在“List Type”中选择一种段落符号的样式;最后,可以通过“Text Transform”可以把小写英文切换为大写英文字母,虽然不建议这样做,因为全部大写的英文字母会变得让人难以阅读,用户平时接触大写字母作为单词组的较少,会导致阅读的时间大大增加。同样的,也可以通过这个方式把大写字母转换为小写字母,换一个角度来看,Sketch还具备了大小写转换的功能。
本次关于文字工具的基础知识讲解到这里就结束了,文字工具的进阶版使用请看这一篇《Sketch文字工具描边、文本路径、转换为形状等使用介绍》。