UI设计中字体设计有啥技巧？

Posted 2023-02-14

1、可读性
可读性是UI中字体所需考虑的首要因素。字母字形必须清晰可辨，作为UI元素，其中不同的字母必须可以被用户轻松辨别出差异。许多经典的字体，甚至包括 Helvetica ，都没办法清晰分辨，字母i的大写形态I，和大写字母 L的小写形态 l，这在界面设计中无疑是有影响的。
2、适度
一款理想的UI界面所用的字体，不应当过于“显眼”，而该是悄无声息，“隐型”的。当用户在试图完成某项任务的时候，字体不应当给用户以“出戏”或者“显眼”的感觉，也就是说，字体不应当超出用户的认知负荷，而内容和信息才应该成为真正的关注点。
更多平面设计知识，请咨询华南电脑学校。
3、灵活
给UI界面使用的字体应当具有灵活性。我们曾经为 Medium 做过用户体验设计，作为一个网页博客平台，我们很难去控制用户的能力、内容、浏览器、屏幕尺寸、网络带宽和连接速度，包括输入法。
4、x高度的上限
x高度的参考标准是小写字母x的高度，同等尺寸下，x高度更大的字体更易于识别。不过x高度也不是越大越好，当x高度超过一定限度的时候，小写字母n和小写字母h就很难分辨了，这一点应当注意。
5、更大宽高比
字母的宽度和高度的比例也是相当重要的一个属性。宽度和高度比例越高，字母在小屏幕上的识别度就越高。
6、宽松的字间距
字母之间的间距和字母内部的空间同样是影响字母可读的因素。字母间距太小同样会影响整体的可读性，而好的显示字体会更好的控制字母间距，确保单词在视觉上的“透气性”，甚至可以营造出一种韵律感。
7、低笔触对比度
许多字体不同的笔画粗细不同，而对于UI界面而言，笔触间的对比度越小识别度越好。较大的笔触对比度下，字体在小尺寸屏幕上，较细的笔画会难于分辨。
8、OpenType 功能
OpenType 功能对于字体而言是相当重要的。支持OpenType的字体拥有更大的灵活性，对于不同的语言和特殊的字符有着更为优良的兼容性。
9、备用字体
接下来要说的情况可能大家多少都碰到过。网页在完全加载出来之前，部分内容因为字体没有加载而无法显示。
10、Hinting
Hinting 指的是为了字体为了保证最大的可读性而针对显示器状况进行调整的过程。Hinting 可以通过匹配显示器的像素栅格让字体显示更加清晰，降低误读的可能性。 参考技术A 对于一名UI设计师来说，字体是一门基本语言，更是设计师需要掌握的基本技能之一。目前常用的字体有很多种，比如黑体、宋体、楷体等。在平时的项目设计中，为了让页面中的字体更加贴合业务场景，设计师需要对字体的字距字高进行调整。接下来就给大家讲解一下字体的相关属性。

1、字体基础结构详解
一般来说，为了保持字体的完整展示，字体设计师都会给字体预留一定的安全距离，设定合适的升部线及降部线距离，让字体展示的更为平衡。

在设计输出的时候，如果没有调整line值，是可以直接借助sketch的标注插件sketch measure，来实时导出相应的参数，这样的参数最接近开发效果。如果没有Mac的同学，可以利用PS选中文字，那么选中的深色底就是字体本身的间距。

2、字体的行高行距参数详解
在一些文字较多的页面，为了让阅读更为顺畅，我们需要对文字的字高字距进行调整。通过sketch及动效编程软件Origami中的可配置参数时只需要配置好Charater（字间距）、line（行高）、paragraph（行距）三个值即可。
3、字号大小如何设定
我们在做设计时，字号的单位需遵循原子理论，也就是使用一个基数作为倍增，如2、4、6、8、10 或者3、6、9、12。但其实我们在做移动端设计时，单位需要遵循偶数原则，因为开发中的单位是以一倍图的基数来进行计算。那么其实在制定字体规范中，使用2为单位会导致字号过多，不易管理，且2号字体的差异化不大。

所以在字号方面我们使用4作为单位是比较合适的：一是适配后在@2x跟@3x不会出现半像素，二是使用4为单位，能满足字体大小的均衡。

4、合理配置字体拉开层级关系
在移动端的界面设计中，除了使用间距网格来拉开不同内容的层级外，对字体样式进行适当的调整也是个很不错的选择。通过调整字重、字色，能让页面的视觉逻辑变为更加的清晰明了、主次分明，降低因视觉给用户带来的干扰，提升页面的可操作性。如何来设定这两块呢？1）尽量减少页面中的不同色相的颜色数量；2）使用不同的字重来区分内容。

当然，随着用户体验度的变化以及技术的革新，字体运用也会出现新的趋势，比如更大更粗的标题、更明显的字重层级、用字体明度做内容上的信息区分等。

综上所述，想要成为一个合格的UI设计师绝不是只会使用PS、AI软件就可以，你还要注意各种细节。 参考技术B 首先，技法一：粗细对比，我们常说，没有对比就没有伤害，显而易见，对比可以产生冲突，引起他人的关注，这在字体设计中也是一样的，常规写字时，每个笔画基本都是粗细相当，每当将某一笔画进行夸大、粗化，就能够让字体的整体风格出人意料，引人注目，从而起到很好的视觉传达效果！
第二，符号衬托也是字体设计中常用的设计手法，这种设计技法可以大大增强字体的美观性以及趣味性，例如“日”这个字，在字体设计中，如果“日”字作为偏旁部首，则可以用B代替，两者造型极为相似，“口”字作为偏旁部首时，则可以用字母C代替。
第三，在一些设计展上，我们经常发现，设计师常常使用空间构成的设计技法，将字体设计出立体的感觉，这样既能增加字体本身的分量，又可以烘托整体设计效果，这一设计技法，则需要设计师熟练掌握素描中的光影透视关系，不然就不能很好的进行设计处理！ 参考技术C

　　数字接口对我们的生活产生了巨大影响。我们经常使用网站或数字应用程序来实现某些目标。确实，当与软件界面进行交互时，我们被软件的样式和排版所包围，我们的经验是由我们阅读和理解的文字和消息所驱动的。AAA教育小编姐姐整理一下相关的信息整理成这篇文章，接下来我们详细的介绍了出色的UI设计字体排版技巧有哪些，确认了排版在所有网站中的重要性：

　　网页设计是95%的版式。

　　UI设计

　　排版的工作原理，因为它是设计师最重要的资产之一，可以传达清晰，有效的信息，使人们情感投入并在我们设计的界面中传达适当的品牌特征。不幸的是，由于许多设计师和开发人员忽略了版式的重要性，我注意到几个网站显示出脱节的外观和情感。

　　因此，这些网站的沟通效率低下，并影响用户体验和品牌认知度。

　　出色的UI设计字体排版技巧有哪些的目的是帮助设计人员和开发人员了解如何使用字体，以创建出色的界面。

　　一、版式，品牌和用户

　　当用户与界面进行交互时，他还与品牌进行交互和联系。为了优化用户体验，字体必须与网站品牌的语气和声音保持一致。我认为，MailChimp是说明此概念的最佳示例之一。他们在网站上通过选择标题为“ Cooper light”的字体来做到这一点。这种字体具有一定的个性，并传达出该品牌声称的友好而平易近人的风格。

　　由于人们不是来网站欣赏设计而是在阅读内容，因此选择字体以了解我们希望他们在阅读时的感受非常重要。例如，我们是否希望他们感到放松，快乐或烦躁?这应该与网站的品牌属性和艺术方向保持一致。

　　这里的要点是，无论何时选择字体，都要先列出单词列表，以提醒您品牌的语调和声音。这将帮助您用整个设计中文本的字体描述您想提炼的感觉和心情。

　　通过了解字体，用户和品牌之间的关系，您将能够自信地选择最佳字体，这将帮助您的设计实现其目标。

　　二、选择正确的字体

　　要选择正确的字体，最基本的是要考虑使用的上下文和界面中字体的用途。您应该经常问自己：我选择的字体是否将应用于标题，正文，链接，号召性用语或导航?这些问题将帮助您在设计中正确应用字体。

　　选择正确的字体还意味着要考虑针对扩展文本优化的一组字体，因为对于在屏幕上阅读的用户而言，在某些时候可能会很累，尤其是在网站内容繁多的情况下。

　　要搜索字体，我通常喜欢探索Google字体或Adobe Fonts(Typekit)中的字体。它们都提供了针对网络优化的高质量字体选择。我避免使用任何来自免费网站或未知资源的字体，因为它们通常不会提供经过良好测试的出色字体。另外，根据经验，建议最大选择两个字体，以保持界面设计的一致性。

　　使用Web排版时，作为设计师，您必须知道两个主要原则，以使内容可访问和易读：可读性和易读性。

　　三、易读性

　　易读性是读者在阅读时区分字母形式的能力。以下是造成字体易读性的因素：

　　四、显示字体

　　我们称“显示字体”为大尺寸使用而设计的字体。这些标题清晰，引人注目并且脱颖而出，非常适合标题。但是，这些字体在较小的尺寸下可读性较差，因此不应用于正文复制。我最喜欢的标题字体之一是“ BEBAS NEUE”。

　　五、衬线和无衬线字体

　　在网络上，我们主要使用两组字体：Serif和Sans Serif。传统上，衬线字体一直更加清晰易读，并且经常用于印刷文本中较长的文字。随着Web和设计趋势的发展，我们可以找到更多使用Serif字体进行正文复制的网站。如果选择适当，则效果很好。

　　但是，Sans-serif字体因其简单的字母形式而更常用于正文。选择带有轻微“个性感”但不带有装饰性的字体非常好，因为它会增加用户的认知负担并影响他们的阅读体验。

　　根据我对字体的经验，如有必要，我更倾向于使用Sans-serif字体作为正文文本，使用Serif字体作为标题。最后，尝试一些组合，并判断哪种方法最适合您的设计。

　　六、X高度

　　X高度是评估字体时要考虑的重要特征。最适合正文复制的字体是x高度较大的字体。x高度越高，字体往往越清晰。为正文选择字体时要记住的重要规则。

　　七、可读性

　　仅仅因为字体清晰易读，并不意味着它是可读的。实际上，可读性是某人阅读文本时的理解和视觉舒适度。如果发现自己停止欣赏字体而不是阅读文本，则可能是字体不可读。这是两个示例，可以直观地查看上面的说明：

　　八、线高

　　行高也称为前导，它定义了文本块中基线之间的间隔。真正的理想行高并不存在，因为每种字体都不同。但是，线高的理想起点是1.2到1.8。行高过小会使文本难以阅读，因为行彼此靠近。一般而言，如果用户在阅读应用于网站文本的字体时遇到麻烦，他们会认为该内容难以阅读和理解。

　　九、行间距

　　行距是段落之间的间隔。始终将段落间距保持在字体大小的.75倍至1.25倍之间。

　　十、尺寸

　　使用字体时，大小很重要。我们需要考虑所有年龄段的人都可以阅读我们的内容。对于字体大小，最好保持最小为16px或1em。字体应足够大以方便阅读。浏览网站时，人们很忙碌，这就是为什么使内容清晰且易于阅读很重要的原因。

　　十一、线长

　　另一个提高可读性的常规做法是防止段落的水平线过宽。实际上，如果一条线太长，会拉长用户的眼睛并引起疲劳。经验法则是将行长度设置为最大40到70个字符。

　　十二、层次结构和对比

　　良好的字体对比度对于可读性至关重要。这是在网站内容上创建良好且一致的层次结构时要理解的重要原则。出色的UI设计字体排版技巧有哪些成功的层次结构将内容组织为易于消化的部分，易于扫描，并且用户可以访问。

　　十三、结论

　　以我的经验，我注意到，一旦您理解了这些原理并掌握了Web的排版，由于排版是内容，内容是UX，您的设计将变得更加强大和有吸引力。

　　必须记住，您并不是将网站设计得漂亮，而是要帮助用户实现特定目标。您可以浏览和探索以下资源，这些资源每天都可以帮助我提高印刷术的技能：

　　Websites:

　　Typewolf

　　Typographica

　　Font In Use

　　Fontpair

　　Fontstand

　　Myfonts

相关推荐：

《出色的UI设计字体排版技巧有哪些》、《ui设计培训四个月骗局大爆料》、《ui设计培训课程大纲》、《自学UI设计规划方案》、《零基础学ui设计真他妈惨》、《ui设计培训课程内容》