相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

UI设计中文字的排版和设置

若诗发布于:2019-10-11 17:32 |原作者: 酸梅干超人|
若诗
北京市 延庆县 平面设计师
发私信 + 关注
简介: UI 是一门偏向排版的设计类型,而对于排版来讲,最重要的东西既不是软件操作深度,也不是视觉设计创意性,而是对于文字的排列与设置。 对于新手来说,注意力往往被案例中精致的配图,花哨的配色,酷炫的动画吸引,而忽略文字的重要性。实际上,文字才是界面的骨骼和灵魂,掌握 ...

版权申明:本文出自“酸梅干超人”原创,感谢“酸梅干超人”的原创文章分享!

UI 是一门偏向排版的设计类型,而对于排版来讲,最重要的东西既不是软件操作深度,也不是视觉设计创意性,而是对于文字的排列与设置。

对于新手来说,注意力往往被案例中精致的配图,花哨的配色,酷炫的动画吸引,而忽略文字的重要性。实际上,文字才是界面的骨骼和灵魂,掌握好文字的使用,才能真正驾驭所有界面的视觉表现。

并且,除了设计效果以外,实际开发过程中实现设计效果时,在字体上遇到的问题是最多,也是最难以解决的。所以,这篇文章会围绕在 UI 中文字的使用展开,如何正确的设置文字做出正确的设计,且符合项目开发的实际需要。




FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/



在常规设计软件中,主要将文字元素的设置划分为两个部分,分别是 “文字属性” 和 "排版属性"。在开始具体讲解如何应用文字前,需要先详细了解它们的知识点以及设置规则。

在这里,我们主要使用 Sketch 的文字设置面板做介绍,如下图所示,XD、Figma 等其它 UI 设计软件界面与内容基本相同,看懂以下内容即可。


1.1 文字属性


1.1.1 字体 FontFamily


首先,我们要讨论的是文字的字体,字体即文字设计的不同风格,相信大家都已经只知道。那么值得注意的是,字体是如何显示到我们的电子设备中的呢?

字体设计公司或者设计师完成一套字体的设计时,会将这些字体图形合并成一个标准的字体格式文件,常见的如 OTF、TTC、TTF 等等。

这些字体文件,本质上也是矢量文件,因为界面中任何一个可见的文字都是已经已经设计好的矢量图形轮廓,设计师将这些图形置入并分配对应的编码,于是系统就会通这些编码来调用文字图形。


任何设计软件的字体都是从系统中调用的,如果缺乏对应字体文件,那么设计师在设计软件的字体列表中就找不到。如果设计师应用了某字体,而用户的客户端系统里没有,那么他们的字体显示也会出错或者用其它字体替代,与设计稿样式有出入。

所以,商业系统为了显示的统一性,都有规范各自平台默认的字体,以防设计师过度发挥,导致字体在客户端无法正常显示,会再后面的部分详细讲解。


1.1.2 字号 FontSize


文字的字号,即文字的大小数值,通常使用 pt 作为字号的单位 (安卓是 sp  但是只是称呼的不同)。相信大家还记得小时候学写字时写的田字格,在界面的文字显示中,每个独立的文字实际上都由一个 “田字格” 正方形包裹,字号即这个正方形的边长。


因为文字的一些特性,这个矩形通常会比实际的文字图形更高更宽,比如中文 “一” 它的字形高度肯定不会和字号等同,而英文字母不是等宽的比如 “i” 和 “m”,字号就是——比文字更大的矩形容器的高度值

字号的设置需要根据实际场景决定,但首先要了解它在界面中的限制。在中文中,字号如果小于10pt,那么就会因为太小无法被正常识别,而英文和数字的最小字号约为 9pt。最大的字号通常为iOS 的大标题 34pt,如果是类似闹钟、计数等大号文字,则根据设计风格制定。


1.1.3 字重 FontWeight


字重是文字笔画粗细的设定,因为在排版中,不同的字段类型对字重的要求不同,比如标题往往需要比较粗的笔画,注释文字需要比较细的笔画等等,所以我们要通过更改字体字重的方式来实现。


绝大多数人对字重更改的理解都来自学习 Office Word 的 “B” 加粗按钮。但在 UI 设计软件中,这个加粗按钮并不存在,且加粗也不是真正的字重调节。加粗按钮 “B“ 只是对当前字体进行类似描边的轮廓放大渲染,效果非常粗糙。

软件都有为字体提供字重调节的菜单,只要点击就可以查看和选择对应的字重。如果选项中只有一个,那么证明该字体并没有包含其它字重,无法进行更改。当然,主流的 UI 设计字体都会包含丰富的字重,不用担心想要的效果找不到。


常见的字重通常分为三个等级,粗 (Blod)、常规 (Regular)、细 (Light),如果字重较为丰富的字体则会在每个等级中包含更丰富的字重。例如,苹方字体中,从细到粗包含了极细、纤细、细体、常规体、中黑体、中粗体等七种。


1.1.4 字色 FontColor


字色即文字对应的颜色,这个就没有必要多做解释了。只是大家需要注意的是,通常 UI 的字色只能使用纯色,而不能使用渐变色。


并且,字体的颜色显示和透明度有一定的关联,在比较规范的设计过程中,切记不要使用透明度调节的方式来淡化字体的颜色。


1.1.5 字符样式


除了以上4个最基本的文字样式属性以外,还有几个使用频率比较低,但也比较常见的设置。例如,为文本添加下划线、删除线。


还有就是文本的大小写切换,即所有文本采用大写字符和小写字符,这个设置只对外文字符起作用,对中文没有影响。如果是英文字体本身就全大写的显示的话,那么该设置也会失效。


19

好评
17

差评

刚表态过的朋友 (36 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

若诗
北京市 延庆县 平面设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计