zoukankan      html  css  js  c++  java
  • UI设计教程分享:让你彻底读懂字体

    4eea255676524cb08981149baac1285b.png

    一份普普通通、规规矩矩的设计

    966b0ee63fbb41d49a313d693714a176.png

    一份让人印象深刻、新颖有趣的设计

    30115ad159dc46189d5b5f09f864dc2c.png

    差在哪?其实就差在三个字上!

    “优秀的设计不是每一个细节都有亮点,而是弱化其他元素,让某一个亮点最大化。”

    今天“骉叔的设计心得”就来总结一下关于“字”的心得。

    在设计和选择字体前,我们要先想明白文字的功能是什么?

    eea53887ee97453d917b36e0f6b69e21.png

    从原始时期的人类在墙壁上画下的那几个抽象的符号,到殷墟发现的甲骨文,再到现在发展到上万个现代文字。有各种各样的文字形式,但其实它们的核心功能都是一致的:

    “作为信息的载体,记录和传播信息。”

    这是文字最为基础,也是最为重要的功能,脱离了这一点,再花哨的设计也都是徒劳无功。

    文字除了传播信息之外,本身的形态也能够表现出强烈的情感与力量。就算你不了解语言的具体意义,也能通过字体图形化的设计,了解到一部分特定的信息。

    05c2674c7a884349ba9816c8f2efa3c0.png

    所以完全相同的文字信息,使用不同的字体,会传递出完全不同的感觉。

    骉叔啰嗦这么多,其实就是要你明白字体设计的目的,如果出发点错了,步步皆错。

    “做一件事,先搞清楚目的,你才能搞清楚重点;搞清楚重点,你才能学会做事的时候从最重要的地方着手,次要的相对的忽略,从而达到最高的工作效率。”

    搞清楚为什么设计字体后,再看东西方文字的构造:

    西方文字的结构:基线

    e892df92b8234cf69473294443a74c05.png

    西方文字是以水平线为标准进行构造的。从下往上,第二条线是标准的“基线”,几乎所有的西方语系文字都是写在这条“基线”上。

    “X”高:

    99f38052392c4c34b52fb5a5d900a462.png

    x高就是以x字母为准的高度。不同字体的的x高是不同的,所以基线也就会有变化。通常来说,x高比较大时,基线位置会靠上,小写字母较大,会感觉行间距比较狭窄。x高比较小时,大写与小写字母的差距较大,视觉上行间距也会比较宽松。

    字腔

    9dd84e331f7242d5bd5c0b9ea0be6dc1.png

    像是C或O这种字母,中间的空白称为“字腔”。字腔较宽的字体给人开放、轻松的感觉。字腔较窄的字体给人密集、力量感。

    衬线体

    c552e235acc24a28aae656faf6e3c541.png

    衬线体大家肯定都不陌生,特点是字体两端有衬线来装饰。最早的衬线体是古罗马时期石碑上刻画出来的,别名为“罗马体”的字体。这种字体兼具传统感与易读性,经常用作标题、正文。

    衬线体又分为类似手写的旧体(old style)传统而有底蕴,和比例工整的现代体(modern style)现代和时尚感强一些。

    根据衬线的不同(两端的装饰)可分为支架衬线体(弧形的衬线,温柔亲切传统)、发丝衬线体(直线构成,平整清晰)、板状衬线体(粗厚的四角状衬线)。

    无衬线体

    a4cdfa079e8d424fb636f3c90cbc49a4.png

    没有衬线的字体,也就是末端没有装饰的字体,称为“无衬线体”。和中文的“黑体”比较类似。

    无衬线体的出现,是为了更加吸引注意,在板状衬线体的基础上,演变过来,随后又发展出纤细的无衬线体。无衬线体的“x高”普遍比衬线体更大一些,字腔也比衬线体大。视觉上能够给人力量感、现代感。

    其他字体

    adf59a7f1cd94f85b65e2cf8bea5e1c9.png

    哥特体“black letter”,是用笔尖扁平的笔书写的。传达出庄严感、高贵感、敬畏感、紧张感。

    手写体“s cript”,优雅、温暖、亲切感。

    装饰体“display”,用作广告、海报的标题,有强烈的个性。

    汉字的结构:字面

    f7ec4e815edf4f8d9678ab71b2f53c62.png

    汉字是在正方形的格子里设计的,文字所占尺寸称为“字面尺寸”。字号大小相同的字体,会因为字面尺寸的差异而大小不同。所以有时候两种字体搭配在一起,虽然字号设置的一模一样,但观感差别明显是不同的,原因就是这两种字体的“字面尺寸”不同。

    文字的骨架:

    3943fdd03c14429ca1e65f4375677ae5.png

    骨架也就是文字的基本结构和重心分布。文字的骨架如果出问题,比如重心不稳,结构比例上不协调等,字体设计完之后将会变得很奇怪,而且很难修改回来。

    胸线(也称作字怀):

    88cb52d70558430d9a2d57f8de11a010.png

    胸线指的是字体内部空白处的宽度,胸线小的字体给人更加传统的感觉。但是在较小字号时,会增加阅读难度,给人感觉窄小萎缩,视觉上会感觉糊在一起一样。胸线大的文字现代感更强,而且较小字号也可以轻松辨识。

    宋体

    b10689467b50427d8e061df05f62fdc6.png

    横线细,竖线粗,笔画尾部加上衬线的称为宋体。宋体字是最早的印刷字体,悠久的历史和使用范围给人传统、底蕴、易于阅读的印象。

    宋体的衬线带有锐角的(现代型宋体)给人感觉干脆利落而强硬,衬线柔和的(传统型宋体)给人感觉古典亲和。要根据你想要表现的感觉来选择字体,即使同为宋体,其性格也是有些许差异的。

    黑体

    d1e36701f3c3488a90c8aee1188e8a7f.png

    横线与竖线宽度一致的称为黑体。黑体的出现是当时为了强化标题而发展出的字体,所以黑体的基因中就保留着“强而有力、强调、正式感”的基因。

    传统的黑体字,胸线比较小,更加凝聚、内敛,笔画粗细也并非完全一致。现代黑体胸线较大,给人开放感、机械感、冰冷感。

    其他字体

    a5490776a62e4180af5077c6ef57427b.png

    隶书起源于战国,给人历史久远、神秘的感觉。

    楷书也叫正楷、真书、正书。由隶书逐渐演变而来,更趋简化,横平竖直给人古典的感觉。

    行书是在楷书的基础上演变而来,给人更加流畅随意的感觉。

    而草书则是在行书上进一步简化,给人洒脱、不拘一格、有气度的感觉。但因其可读性较低,所以不适合做正文。

    圆体给人温柔可爱、天真的感觉。

    此外还有综艺体、卡通体、雪山体,这些字体都有强烈的个性,适合表现鲜明的意向,但不适合做正文使用。

    字族 

    f273b994b36c47fab027f6525067bc57.png

    “腰线”指的是文字的粗细,只改变腰线粗细、字体宽度的系列字体称为字族。标准的粗细为regular,再粗的称为medium,更粗的称为bold。按照宽度可以分为宽型的文字、窄型的文字。窄型的文字也叫窄体字或压缩字,宽型的文字也叫扩张字或宽体字。宽体字更有力量感,压迫感;窄体字更加挺拔、年轻。多用于标题。

    同一家族的字体搭配,表现主次的基础上,更能让你的设计效果和谐一致。

    不同字体的性格

    文字是为了传递信息而创造的,因为有信息需要表达,所以我们才会写下文章和文字。

    而字体设计就是在保持传递具体信息的基础上,利用图形和颜色等信息来传达文字所不具备的朦胧的性格。

    文字受制于文化、语言的不同,会有各种隔阂。而图形则不需要理解,没有国界、语言、文化这些限制,用更低成本、更加直接的传递情感与信息,成为更加有利的技巧。

    格调感

    c5bd856f212a4356bc0c472ac75e848b.png

    一般来说有装饰的衬线体,比无衬线体更加有格调、更显精致高雅。造成这种认知的原因则是宋体字的历史更加悠久,长时间被人使用。所以本身就具有传统、正统、高格调、底蕴的感觉。

    除此之外,有衬线的字体大部分都有一个共同点,就是字体中有曲线,而曲线则能营造优美而华丽的感觉。想呈现出“高级感”,搭配合理的留白,以及文字的明度差别较弱的颜色,则更能强调出高级感与信赖感。

    亲和力

    b6f58ce4913848acbd7655a7a2673e79.png

    尖锐细长的东西会让人感到紧张,例如日常物品刀子、针、尖锐的石头等。圆润的物体则让人安心、感到亲近。

    文字也有同样的心理作用,纤细、尖锐的文字,给人危险、难以靠近的印象;圆润柔美的文字给人亲近、柔和、可爱的印象。但过于浑圆的文字会给人孩子气、不稳重的印象。另外,想呈现亲近的印象时,尽量采用色彩亮度差异较小的颜色。

    未来感

    202e235ad12c4b82999fa34912df6052.png

    规则且如图形般的文字,会让人感受到新颖和科技感。文字的构成要素越简单,抽象感越强,就更能呈现出一种未来感。所以,将文字改造的更加简单,呈现“图形化”就能呈现出科技感,或者用直线和圆相互连接来构造文字,搭配无彩色更能体现未来感。

    复古感

    a64dc7e7cf5147a8b098367a07003c92.png

    想要表现出复古的感觉,就要先了解过去时代的风貌,复古就是还原出当时那个时代的风貌。比如要表现出上世纪的感觉,就要先了解当时流行什么样的字体、什么样的展示风格。

    华丽感

    b6911c42e21244699764e22af76ec34d.png

    18世纪后半叶人们开始在海报上,不断增强文字的装饰性,目的是为了吸引目光、拉开与其他商家的差别,并且这种重度装饰的风格沿用到今天还会看到。文字的装饰性越高,华丽感也就越强,但可读性会变弱。所以要用在少数文字上,或者不需要被看懂的文字上。

    文化底蕴

    ba356afe38f746de8cc1b4f51d32eb27.png

    要体现传统的文化底蕴,书法字体是最合适的选择,书法分为篆书、隶书、楷书、行书、草书,合成书法五体。

    需要注意的是,书法字体的运笔走势和排列方式要一致,一般采用竖排的方式,横排会显得运笔不协调。

    权威性

    44742c12417d476780c4a3c63d1ce99d.png

    权威性来自于严谨、传统、朴实。所以文字如果要营造出让人信赖的氛围,不适合过分装饰,常规的字体更为适合,比如宋体、黑体这些常见的字体。排版上要宽松、易读、有秩序感,不能杂乱无章,否则传递不出正式、值得信赖的感觉。

    自然感

    c6c2af2929fe4d738d6b07099e268061.png

    手写的文字,会让人感觉到温度、自然、有生命力。但一般计算机里的手写字体会过于规整,所以要对每个字的大小和角度进行微调,赋予变化,更能凸显自然的感觉,但不能调整不能过大,要控制在肉眼看不出太大变化的程度。

    精致感

    126a75718d044487a5ef316cf271b3e2.png

    单纯的文字本身无法带来“精致”的感受。要体现精致感必须有充足的留白,缩小字号、减少颜色的数量。此外,无衬线体比衬线体看起来干净利落,细体比粗体看起来干净利落。适当的添加大小强弱的对比,对于提升画面精致感有不小的帮助,具体方法参考骉叔之前的文章《如何让你的设计脱颖而出》

    力量感

    3bf9eef3a6d5448bb5aec609ac4a42e9.png

    直线、粗线条、有棱有角的文字,放大处理,能呈现出强硬、力量感。文字线条越粗,给人越强劲的感觉,粗细一致的无衬线体和黑体更具稳定感。搭配强烈的明暗对比和较小的间距,更能凸显力量感。

    女性化

    a308edf6d9bc4222ab063bc82829bc2b.png

    细腻而有生命力的曲线,呈现出纤细和柔韧的美感,而且曲线比直线更柔和、有亲和力。所以,柔和衬线的宋体字比黑体字更适合表现女性化、柔韧感。

    说了这么多,字体设计本质是在设计什么?

    60f90342e99b4138acbf2cc515e6ecdc.png

    你心里应该已经有一个大致的方向,简单的总结一下其实就是一句话:

    字体设计的本质,是把文字当做图形和图像来设计,更加直观形象的传达具象与抽象的信息。

    比如圆润的图形给人亲和力、尖角的图形给人凌厉感;直线给人干净利落的感觉、曲线给人柔美华丽的感觉……

    60a4eaaccfaf49ed9bc7f03d7aff1d75.png

    关于图形(点线面这些平面设计中的精髓)以及平面构成的形式,骉叔之后会为你单独总结一份设计心得。

    编辑:千锋UI设计

  • 相关阅读:
    数据库分页
    SpringBoot 集成 MQTT
    mybatis的级联查询-懒加载遇到的序列化问题
    springboot学习:第二天
    SpringSecurity学习
    大日志文件查看方式
    logger(七)、springBoot的日志源码查看(LogBack + slf4j)——配置的实际工作类Action
    logger(六)、springBoot的日志源码查看(LogBack + slf4j)—— ContextInitializer
    logger(五)、springBoot的日志源码查看(LogBack + slf4j)——Appender
    logger(四)、springBoot的日志源码查看(LogBack + slf4j)——记录日志
  • 原文地址:https://www.cnblogs.com/leolei/p/9809968.html
Copyright © 2011-2022 走看看