主页 > 新体验 > 设计沙龙 > UI界面设计
  • 超全面!正确使用字体的10个黄金规则

    adinnet/2017-11-28 11:38/UI界面设计

    @喪心病狂十六夜貓  :对于设计师而言,为每个项目选择合适的字体,是已经掌握的特殊技能。今天这篇文章可以让你通过应用一些简单的规则,就能设计出适用于电子、印刷技术或提升项目档次的字体。

    如果你正在为选择字体组合而感到困惑,遵循本文规则,你就可以设计出优秀的字体。

    目录

    1. 定位项目重点

    2. 找到相同属性的字体

    3. 设置同类型字体尺寸

    4. 设置留白空间

    5. 选择左对齐

    6. 选择两种字体

    7. 不要修改默认的字型

    8. 使用大量的对比

    9. 不要忘记移动端的排版

    10. 参考风格指南

    1. 定位项目重点

    项目开始时,我们需要明确设计目的。当你在Google Font或Typekit等网站寻找字体之前,先问问自己以下几个问题:

    • 项目面向的目标人群是什么

    • 用户会怎样对待这个设计

    • 适合怎样的氛围、心情

    • 需要和其他的设计、品牌相匹配吗

    这些答案将帮助你构建出设计的初步框架。

    2. 找到相同属性的字体

    设计许多的字体组合时,字体的形状细节会影响设计的的好坏。那么,你应该如何进行正确的选择?

    首先寻找相似形状的字体。让我们仔细研究每种字体是圆形还是椭圆形、粗或细、高或短、对角的还是倾斜的。

    选择要用于标题和正文的字体后,将同样形状的辅助性字体组合在一起。

    • 确认一下各种字体的小写「o」。内侧是圆形还是椭圆形?将[o]形状相同的字体组合在一起。

    • 选择x字高(英文:x-height)相同的字体。

    • 不用担心混合字体风格。衬线和无衬线字体的组合也可以尝试。如果选择了一格复杂的字体,另一种字体选择简单点的会比较好。此外,使用更频繁的地方,如正文,我们还是选择一个简单的字体方便阅读。

    • 小心字体的倾斜度。使用多个斜体或相反方向倾斜的字体对可能会给用户的阅读带来不适,应该避免。

    3. 设置同类型字体尺寸

    字体的粗细,尺寸是决定项目的好坏的因素之一。文字的尺寸过大会让视线停止,让人无法自然的阅读。另外,文字尺寸过小则会导致视觉疲劳,用户或许会从设计作品上移开视线。

    通过正确的设定字符大小,用户可以在内容上自由的阅读。合适的文字尺寸是:和项目中各种各样的尺寸相对应。

    正文内容、小标题或大标题等有着各种各样的尺寸。这些尺寸和使用方法,必须保证在设计内具有一致性。

    注意以下几点,用户会更容易阅读内容。

    • 文字内容的尺寸,可以根据信息的重要程度来确定优先顺序。字体越大内容越重要,占用用户视觉范围的可能性就更高。

    • 通过缩小文字的尺寸,可以让文本阅读速度更快,能让用户用更短的时间确认内容。

    • 较大的文本元素,可以通过分割长句来更使其容易阅读。

    4. 设置留白空间

    这种方法本身与字体无关,但是在选择字体时,设置留白的方式也很重要。

    字距、行距、跟踪、填衬这些方法,能表现出字体的美感,也有可能将他们弄的乱七八糟。

    适当运用留白,会让你设计稿更精致。但它还取决于在实际项目中使用的字符、字体等的组合和大小。

    5. 选择左对齐

    和其他语言一样,用户在阅读英语、日语、中文的时候,都是从左往右移动视线的,所以理想的突出主体内容可读性的方法是左对齐。

    如导航标题和Hero Header,一些文本本身就很容易阅读,所以不用将它们对齐到左边。而对于长句子来说,应该将它们对齐到左边。

    6. 选择两种字体

    在设计项目中使用了两个字体,这个规则可能很多人知道。

    当你打破这个规则的时候,可以看看是否可以用该字体的另一种样式:如粗体、细体、斜体来解决。

    7. 不要修改默认的字型

    不要去伸展,扭曲,或倾斜你的字体。如果您需要不同的字体,请尝试选择其他方法。

    字体设计师花费了大量的时间来做一款好看的字体。如果更改字型,将会损害字体的可读性。

    8. 使用大量的对比

    设计师很困扰的一个问题是:如何在图片或背景上加文字。

    当给文字添加阴影时,不一定会获得足够高的对比。通过调整亮度,可实现轻松对比,也有助于将普通的风格变得厚重。

    有些情况下,照片中既有亮也有暗的地方的情况下,你就可以利用粗体字或细体字形成对比。

    让我们考虑选择附加文本,选择较厚的字体,并尝试在照片上叠加颜色。所有的技术都是为了突出了对比,使文本更具可读性。

    9. 不要忘记移动端的排版

    关于网站排版的问题,移动终端的可读性是更重要的一个问题。虽然给文字添加图案或纹理在某些桌面屏幕上进行打印或显示时不会出现问题,但对于小型设备来说效果并不理想。

    所以,考虑这个字体适用在什么地方是很重要的。

    对于移动终端来说,字体看起来会略大一些,所以让我们把字体间距做得比桌面宽一点。通过这样做,可以有效减少用户不喜欢的移动操作,例如在阅读短句时多次滚动显示。

    10. 参考风格指南

    当您决定要用某种字体在项目时,你需要一个总结了所有用法和规则的样式指南。

    比如:请你的元素移至在网页上易于访问的位置,并在该位置修改你的设计。

    所以,完美的字体设计的关键因素是:统一性。

    总结

    字体的好坏,应由用户来决定。

    为了设计出完美的排版,利于阅读是更重要的一点。字体容易阅读,便容易理解。所以,为了达到用户可以随时阅读而不用考虑任何事情的目的,字体也应该符合场景想要传达的信息和氛围。


    本文转自:http://www.uisdc.com/select-font-design-rule

上一篇:最常见的Tab该怎么设计?来看这篇超全的总结下一篇:想为设计添加质感?你缺这些纹理网站!
400-021-8655
在线咨询
在线留言