UI 常用 字体

UI设计-字体规范和参考

发表于 2019-07-01 | 更新于 2019-07-05 | 分类于 设计 ， UI设计规范和参考

🐰
…

案例参考

后台系统

标准字

1. 后台系统常用的字体：windows系统，中文Microsoft YaHei，英文Arial；Mac字体，中文PingFang SC，英文Helvetica；除此之外可以选择的字体还有segoe UI、思源黑体、Hiragino Sans GB等。
2. 后台系统中常用字体大小为12px、13px、14px、16px、18px、20px、24px、30px。
3. 行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。

参考文章：

https://www.ui.cn/detail/422106.html

------------- 本文到此结束啦 感谢您的阅读 ♪(＾∀＾●)ﾉ -------------

🍓无🍓

UI设计-表单规范和参考

UI设计-按钮规范和参考

方正兰亭系列: 个人最推荐的就是这个系类的字体，整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画清晰简洁，这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合，不仅能保证字体的统一感，还能很好的区分出文本的层次。

3.刚劲有力，运动型：汉仪菱心简/造字工房力黑/造字工房劲黑

在这几个字体中，他们有着共同的特点，字体非常的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式，让文字显得更为活力。在这三种字体中，菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松，更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多，效果比较突出。

字体设计是UI设计中关键的模块之一，字体设计的效果好与否，可能会直接成就或破坏整个UI界面。那么，界面设计的字体设计有哪些规范？如何才能设计出有细节感的字体呢？本篇文章将围绕字体设计规范的易读性、可读性和可用性展开讲解，并介绍UI界面中字体设计技巧。

1. UI中如何设计字体

1.1 使用移动端系统默认字体

现在移动端上使用最广泛的iOS和Android系统，二者针对字体的使用都有各自的规范，设计和开发人员遵循这些设计规范，可以达到最佳的显示效果。

• iOS设备的系统默认中文字体为PingFang，英文和数字字体为San Francisco。

• Android设备系统默认中文字体为思源黑体 ，英文和数字字体为Roboto。

Pixso 内置了多个免费可商用的中文字体，例如思源黑体、站酷快乐体、江西拙楷体等，无需手动安装即可使用，应用到商业设计项目中无侵权风险。如果Pixso的云端字体库不能满足你的需求，还可以安装「字体助手」，从本地导入电脑上安装的字体，给你的字体设计提供更多样化的选择。

1.2 灵活调节行高

虽然在设计字体时，我们通常强调一致性，但并非所有的行高都要完全一致才是正确的。在处理不同字号的文本时，最好根据段落本身的特征来设置行高。对于大段的文本，适当地增加行高，能够让行与行之间的辨识度更高；而当文本段落本身比较紧凑短小时，可以适当缩减行高，这样不会带来易读性的问题。

1.3 选择合适的字号

移动端设备的屏幕较小，为了确保易读性，在字号的选择上要加以注意。虽然字号的大小并没有严格的标准，具体尺寸要根据设计的视觉效果来决定，常用的移动端中文字号有32px、28px和24px，常用的英文字号是16px。可以注意到：字号都是偶数，而且大多是4的倍数。

1.4 选择合适的行宽

行宽是一行文字的长度，如果行宽太宽，用户将容易走神，难以专注于文本信息；如果行宽太窄，用户的眼睛必须快速来回移动，打乱阅读节奏，容易跳行。关于每行长度的最佳字符数在设计界存在争议：根据 Emil Ruder 在“Typographie: A Manual of Design”中的说法，正文的最佳长度是50-60个字符（包括空格）。然而，有许多心理学专家和设计师认为，最佳行宽为 75 个字符。现在设计领域形成的默契是：每行66个字符为佳。

1.5 行距设置要保留呼吸感

行距是行之间的空间，行距过紧或过宽都会给用户造成阅读障碍，标准的行距是1.4EM，在移动端界面设计中，我们通常用X的高度来代表。行距的大小取决于文字的设计和间距，正文应该是文本大小的1.5到2倍，具体取决于内容的宽度和长度。例如，如果你的正文是16像素的，那么可以将行高设置为1.5倍或24像素。

1.6 创建文本样式

文字样式包括：字号、字重、行高和字距等。设计中，经常需要为不同的文本设置不同的属性，使用文本样式将会很大程度提高设计效率。我们可以将文本样式应用于整个文本图层，或仅将其应用于图层中的部分文本。选择一款字体时，需要考虑团队协作中存在不同终端的适配问题，字号通常采用12px-64px，使用常规和粗体两种字重。Pixso的默认字体为思源黑体。

在Pixso创建文本样式只需四步：

• 选择已经设置好样式的文本；

• 在右侧属性面板的文本部分中，单击样式图标；

• 点击文本样式面板中的【+】图标 以创建新样式；

• 为样式命名，然后单击创建样式。

注意∶不能通过文本样式设置文本对齐方式，需要单独设置每个文本块的对齐方式。

2. 字体设计技巧提炼

字体设计技巧一：易读性

易读性是字体选择中最低级别的考虑因素：它是指人们是否能够看到、区分和识别文本中的字符和单词。如Pixso资源社区的协同工作空间登录页所示，图片中加上浅色文字，往往很难看清，这时加上一个带颜色的矩形蒙层，文字的易读性就大大提升了。

字体设计技巧二：可读性

可读性指的是文本的语句是否通畅、表意是否清晰，它关乎于语言本身的难度，例如语句中运用修辞不当便会影响到文本的可读性。如Pixso资源社区的免费视频聊天网站所示，合乎逻辑和语法的断行方式，也会影响文字的可读性。

字体设计技巧三：可用性

可用性是指设计字体在任意尺寸的屏幕设备上、在任意明暗度上甚至是在不同语言之间的转换上都能够正常显示，不会影响用户与产品正常地进行交互。

此处有必要小结一下：这三者之间的关系是良好的【易用性】和【可读性】，对于用户体验的【可用性】非常重要。

正确使用设计字体，就是要提高字体的易读性和可读性，进而提高用户浏览体验。除了组件文本样式，Pixso的团队字体库也可以助力设计团队积淀设计资产：点击「团队」面板的「导入文件」，打开「团队字体库」面板，点击中间的窗口，从本地上传字体，将字体添加到团队字体库中，之后团队即可共享字体，设计协作的效率又进一步的提高了！

对于设计师来说，设计字体的重要性毋庸置疑，字体设计是界面设计中最细节的部分，也是最不可忽视的基础部分。如果你想了解更多关于UI字体规范的信息或参考更多优秀的UI字体使用范例，可以关注Pixso关于产品、UI设计、UX设计技巧和发展分析，Pixso资源社区还有大量TDesign、Arco Design、Ant Design、Material design、阿里、京东、华为等优秀设计供你参考，相信一定会对你设计能力的提高有所帮助！

今天主要跟大家讲一下中英文字体的浅析，中英文字体，今天我们讲一个中英文字体的了解，还有一些 常用的一些字体，就是我个人常用的不是说每一个设计师都都会常用，大家都知道每个行业每个领域所用 到的这些字体都不一样，有一些电商的是吧，有一些是网页的，有些是ui的，有一些是其他的，各种各样 的行业，用的字体都不一样，这个常用字体是我常用啊就是我常用的一些字体，推荐一下给大家！

跟大家说一下，在我们的电脑或者网页上，我们都可以看到特别多的一些汉字文字，你所使用的电脑也少 不了，可能也也有一两百个字体是吧？非常多，但是你不可能每一个字体都能用得到，就像这张图片看到 有非常多的一个字体，有一些特别奇葩的也有，如白棋啊！什么剪一剪哈哈？首先呢我们先对我们的中文 ，中文字体大概有个了解，因为我们讲的是中文字体，所以的汉字的一些衍进我们也要清楚。

可能大家以前有上历史课或者其他其他课文都会有看过，一开始是我们的图形象形文字，甲骨文，钟鼎文 是什么文，钟鼎文其实就是经文刻在鼎上所以叫它钟鼎。石鼓文呢？这些有一些专业的名词，我们也不需 要记，就是一些古文，石头上文字，还有秦系列的是什么字体，我想大家可能有些不太清楚，“秦”大篆 小篆，就是秦朝的时候用是篆书。隶书，再到我们楷书，碑文，还有草书行书宋体，仿宋黑体之类，这些 都是现代的一些字体，不需要我们就一一写出来了吧？大家每天都在用的。这就是我们中国汉字的一些衍 进，如果不懂衍进是什么，那就看看这张图吧！

就目前不管是杂志，打印、课文等都是在宋体跟黑体之间切换应用，轮换的用哪个场合是用黑体，哪个场 合使用宋体，就是拿现代的一些字体来用，前面说到比较古老这些都是成为一个艺术品，象形文字那些都 已经成为我们一些考古学家去考古的研究的东西，我们了解一下就好。

下面我们来认识下常用都有那些字体，这个就是小篆，大篆小篆呢其实也有点区别，这个非常工整，而且 非常有力的，一般人都会知道楷体是吧？楷体是非常有力，而且一点一撇一捺都是非常清楚，都非常清楚 ，这种呢就是楷体，这个几乎与楷书和草书之间的是什么书，这个有点楷书，有点草书的感觉，又有点看 不懂，但是它又没有那么那么模糊，这种呢就是行书，行如流水，介乎于草书跟楷书之间的一种字体叫行 书，最后两种就不用我说了吧，一种是宋体，一种是黑体，这个呢就是我们中国历代一些字体的演变，也 不算演变衍进吧！就是每个朝代都会有他的不同的一个字体，大家这里可以了解一下就行了，不需要深入 的去研究考古啊！

好接下来就是咱们分享干货了，一些常用字体的推荐，就是我经常会用到，比如说之前我做一个平面设计 师，我就会经常用到一些电商之类的字体，就是我们的造字工房啊或者方正粗谭黑之类的，还有一个方正 粗黑那些字体，经常会用到，因为他很容易出效果。

第一个讲一下造字工坊版黑，其实他有很多个字体，这些呢就是一部分，我没有一一的列举，应该有挺多 的，十几二十个吧，最少都是十几个，这个是我们常用的一些造字工坊的一些字体，版黑和力黑这这几款 比较适合男生，比较硬朗一点，力黑版黑，还有朗宋俊雅。悦黑，还有雅园，看在哪个场合，我们运用哪 个种字体，如果你说是一些非常优雅的地方，我们可以用一些俊雅，还有朗宋之类的，这些版黑就比较力 量型的，力量型的，我们一般用在咆哮体。什么叫咆哮体？应该大家都知道，做电商应该会知道，减价什 么降价百分之多少这种咆哮体，这些可能会用的比较多，朗宋跟俊雅看他两个字体啊都非常优雅，适合用 于一些比较中国风的。比如说中国风的一些古典，卖古典衣服，旗袍之类的，可能会用到，这个悦黑一般都是比较时尚类，还有 雅圆也是比较高雅一点的。我们看情况啊，这里我不能说不能用那个适合用那个，根据个人的情况设计而 定，看它整体的一个气氛，来用我们的一个字体，没有一定的标准。