企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

网站设计之字体设计的细节和形式感

发布时间:2017-07-28 10:09:29

TAGS:网站设计

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

效果却不尽人意.jpgYyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

明明想法思路都对了,为什么后呈现出的效果却略显遗憾呢?所以有了本期要和大家聊的主题:字体设计的细节和形式感。本篇将会通过一些实例带大家认识字体细节和形式感。
Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一. 字体设计的细节Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

结构细节Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

笔画细节Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

二. 字体设计的形式感Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

变形
Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

图形化Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

组合多样化Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

首先我们百科一下细节是什么:「细节是一种能影响全局的细微的易被忽略的物件或行为」。看到没,一句话就解释了为什么做字的时候想法很炫酷,现实很残酷!很多时候细节处理决定了一个字的性格和质感,而这些却被你无情略过了…所以莫再粗暴对待你的字体了,用心呵护很有必要!Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

下面我把细节具体到结构细节和笔画细节两个部分,分别说一下那些容易被你忽视的细节。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

知道了细节的重要性很多同学迫不及待的在抠细节了,这又是一个极端。先明白整体和细节间的关系很有必要,只注重局部细节忽略整体协调性,这样肯定也不好!Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

上图的一句话可以让你理清整体和细节之间的关系。我会被经常问到字体的笔画粗细多少才合适?或是转角曲度设置大写好还是要小一点?等等类似的问题,其实造字本没有固定的数值,而需要协调各种关系,懂得取舍,或许字体设计奇妙的地方就在于此。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

字体就是特殊的图形,只不过是有的图形线条比较多有的则很少,如何规划这些线条让其出现在合适的位置上,这是我们要做的工作。有的同学刻意去制造一些夸张的变化,忽略基本的结构美感,就以为是NB的字体设计,我觉得是一个很大的认识误区。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

就好像我们写钢笔字,同样是洋洋洒洒,有人写的像是一堆杂草野蛮生长,有人写的是行云流水看着就美。同样都是手写差距在哪?答案是:结构。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

话是很好理解,可就有很多同学反复犯同样的错误。疏密指的是笔画分布的位置造成结构空间的多少,过疏易造成结构零散不紧实,过密就会让字体看起来水泄不通不透气,所以要控制笔画间的位置,做好字体的空间分配。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

要注意的是均匀≠平均。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

不难看出部分笔画就快要重叠了,中间一线之隔,并不是说这组字笔画过多不得已而为之。比如「果」字中间部分笔画间距过小,空间被压缩成了一条线,下面很显然还有充裕的空间可以支配;中间笔画过长,造成了外部空间的扩大。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

针对这一问题调整部分笔画位置,使得结构空间区域均匀合理;另外把转角由之前的直角变为圆角,亲和力更足,「语」字后做了一个负空间的小图形整体看起来会多一些趣味。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一组字当中一定要保持笔画的粗细一致吗?上图左边中间的笔画适当调细,目的是让内部封闭的负空间不至于太紧张;而右边三个竖笔粗细保持一致,放大看差距貌似不明显,看下面缩小后的效果是不是就一目了然了!所以在空间局促的情况下,可以适当的改变笔画的粗细,从而得到一个相对舒适的字形结构。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

前面我们反复提到了,结构不是你想改任性就能改。特别是一些刚刚接触字体设计的同学,不要一开始就大刀阔斧的对结构任性变化,只有做得多了,对结构的认知和把控力足够,再去尝试特殊的变化也不迟。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

每当看到这种字我就不太淡定了,实在找不出一个理由解释为毛要这样做!勉强找到一个鼓励的理由就是:你胆够大!Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

千万要注意,造字如盖楼,总归是有稳固的地基和结实的承重墙作为支撑。结构不是说不可以变化,总有一个度,就像房子装修可以打洞拆墙,但也得在安全的前提之下吧。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一个小方法。如果对于字体结构实在没有办法,可以直接“套用”字库字体的结构特征。图中是你电脑中也有的微软雅黑字体,以此为基础(可适当调整高矮胖瘦)可以直接依照微软雅黑的字形搭建基本结构框架,这样可以保证大的结构问题不会出现。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在大框架基础上做一些笔画外扩,增加字体张力;部分笔画做一些调整几个字简简单单就完成了。所以说不要总想着结构中做什么复杂的、轰轰烈烈的改变才算的上是设计过了,细微的变化也可以带来突出的效果。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如果你做一组字盯着看时间长了极易忽略这个问题。几个字摆在那里就是一个整体,如果其中有的字比较大比较重,那这个字就会跳脱出来,破坏整体性。当然除非刻意为之,比如一些不重要的字,比如一组标题中带「的」字,不想突出就可以缩小加以弱化。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

什么左右结构、左中右、上中下…等等这些结构差异造成了字体有各种造型。所以很多情况下我们不能仅仅靠理论上的数值设定一组字的高矮胖瘦,而是要根据实际字体的结构特征,适当做大小上的变化。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在这组字中,“兰”字横笔居多视觉观感上是比较显宽,所以上组字适当减小“兰”字宽度,使其能够和其他字在一起愉快玩耍,不然看下面的字保持宽度理论一致,结构就是“兰”字偏宽,破坏了整体性。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

去掉参考线再看,“兰”字是不是更显得霸道不合群。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这是结构中几个细节要和大家分享的,还有一些待日后再补充,下面我们进入第二个小部分笔画细节。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

把笔画细节比喻成一个人的穿着妆容再合适不过,关乎一个人的品质品味。笔画的变化可以直接影响一个字性格,下图一个小例子。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

左边是普通的字库字体,右边是字库字体基础上变形所得。大的变化就在于细化的细节处理,原字库字笔画细节偏润滑,整体是比较偏传统;调整变化后,润滑的细节变得更简练直白,整个字也多了一分清新洒脱,这就是笔画的影响力。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

想搞懂笔画和字体性格的微妙关系可以翻看我之前的文章《字体性格知多少》,下面咱还是只讲那些容易被你忽视的问题。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

虽说现在设计界崇尚什么极简,娱乐圈宣扬什么素颜美女…那也不代表越少越好,素颜朝天那也得有资本不是,所以适当修饰很有必要。更重要的是笔画细节处理得当会让整个字个性突出,就像白水中加入甜的酸的、果味咖啡之类,不至于寡淡无味。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这组字只说笔画,等线的笔画从一而终,给人我的感觉不禁让我我怀疑学生在做这组字的时候中途离开,根本没做完!笔画完全没有细节修饰,让观着只是一扫而过,相互间完全没有一丝丝的情感流露。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

同样的结构布局,只做笔画收笔的处理,你会发现大有不同。当然,这里选取部分笔画做调整,竖笔和部分横笔是没有做变化的,要掌握好度。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

后呈现的效果是多了一些“内容”,和字体本身的字义更加符合,有一些传统韵味,总之这样起码能够吸引你多瞅两眼。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

字体就是很难伺候,没细节说少细节,有细节说不统一,感觉心好累…就是这样,不然识字的都会做字体设计了。你肯定听过类似这样的前辈训导:「一个页面当中不要出现三种以上的字体」,不无道理但这个也不是绝对,只能说越少越好控制。而字体设计中细节的处理要注意保持统一性,如果过多变化可能会显得热闹,更有可能是杂乱。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

左边这组字横笔笔画起笔收笔都是直角,竖笔就换成了圆角,一方一圆差异可不小;转角同样直角和圆角并存,所以整个字看起来是不够明确,对于字义的表达还不够彻底。既然是喜剧那就要欢快一些亲和力更足一点,所以右边调整的笔画全部是以圆为基础进行变化。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

大的变化当然是整体性得到加强,之前是先看到细节在看到整体,现在调整后是先整体再细节。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

就像匠人一样,每个细节都要耐心打磨,字体设计中每个单个笔画的造型都要认真调节,特别是一些曲线笔画以及一些复杂的笔画。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

本组字一些笔画的位置和变化是正确的,欠缺的就是笔画细节处理不够讲究,像是“柔”字那长长的一笔,怎么看都略显突然,本身字义和笔画都是比较偏女性化,应该是更轻柔的。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

调整的部分主要是笔画的一些曲线更加柔和,过度更加自然;之前“柔”字长长的一笔断为两笔,并代替部分笔画形成一个心形,这样字体不仅柔和飘逸也更具识别性。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

形式感这个词看起来是比较高级,吓得我赶紧百度了一些官方说法,免得说跑偏。且看下面图片文字。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

转换成更简单的话就是:「好的字体设计走心」。字体设计不仅仅是表达字义这么简单,还肩负着情感的传递和表达,那么处理好基本的结构字形只是解决了基本的认知问题,情感的传递是需要形式感的帮助。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

那么怎么才能让字体更具形式感呢?我简单总结了三个小方向,看看你的字体中是否具备这些特征呢?Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这是直截了当的方式。就像汽车很常见,不觉得新鲜,但如果是会变形的汽车你就会觉得很酷,为什么?因为他与众不同,它不仅仅是个汽车。所以设计字体可以适当做变形,让他变得不一样,变得不仅仅是一行文字。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

通常可以先从笔画变形入手。比如上图夏至两个字,如果是横平竖直的笔画那就会变得很普通,但把它换成英文中的哥特笔画特征就显得特别一些。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

笔画的变形是一方面,在一个就是结构变形。前面讲结构细节也提到了其实不好掌控,所以前期的话可以简单做小范围局部的变化,不管如何要记住不能硬来,像是一些笔画变形后识别性都存在问题了,那这样的变形也就毫无意义。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

可以把字体当做图形来处理,可以直接把笔画处理成图形,可以字体中图形替代笔画等等,但有几个注意点要和大家特别交代,下面通过我课堂中学生的三个作业分别说一下。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

A.图形的概括性Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

选用图形不管是直接当做笔画还是配合在字体周围,要做到图形的概括性,避免过于繁杂写实。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

B.图形的融合性Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如果是字体和图形结合,要注意图形和笔画之间的风格要相匹配,除了风格匹配图形也要具有关联性,要和字体本意有直接或间接的关联。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

C.图形的代表性Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

图形的选用并不是随随便便的,要具有一定的代表性,就好似说起大海就会想到游鱼,看到天空就会想到飞鸟。只有这样才不至于给观者出谜题,增加认知成本。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

有时我们也可以通过改变组合方式添加辅助标题的形式,让作品看起来更有层次。特别是对于一些字体本身特点不够鲜明,个性不够突出时,尤为适用。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联


Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

下面列举几个案例,横排、竖排、混排就不一一具体介绍了,直接看图。Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Yyv北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7246,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号