如何给扁平化风格选择合适的字体

2016-02-17 00:23 14 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的如何给扁平化风格选择合适的字体,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - 平面设计 】

扁平化设计是时下最流行的设计风格,之前我们已经探讨过扁平化设计的原则(原文链接)很多朋友都提出了自己的疑问和观点,今天我们将回答其中一些热门问题。

扁平化设计中使用什么样的字体最合适?

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://www.floatdesign.net/

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

https://coderwall.com/futureal

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://www.fitbit.com/

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

www.who-wanna.com/en/

在《扁平化设计趋势》(原文链接http://designmodo.com/flat-design/)一文中,很大的篇幅都在讨论版面设计。这使得观察、选择、使用何种字体成为融入扁平化设计趋势的重要因素。

优秀的版面设计能同时满足读者的审美需求和阅读需求。版面的视觉效果要与设计和信息传达的整体风格保持一致。

简洁是扁平化设计最大的特点,因此选用简单的字体就更加适合。为了保持简洁的设计宗旨,大部分扁平化设计最多使用两个系列的字体,很多只使用一个系列。

由于扁平化设计常常采用明亮的色彩方案,因此文字的清晰程度和粗细就显得格外重要。我们需要寻找有笔触效果、与配色方案既对比鲜明又和谐统一的字体,这些字体要既要满足一定的审美需求也要便于阅读。

最后,在表现视觉效果的时候,可能需要一些锐利的字体,这些字体似乎更加适合表现扁平化设计的细节。

选择字体

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://simonemarcarino.com/

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://wistia.com/

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://www.tvlcorp.com/

常常看到设计师在进行扁平化设计的时候选用sans serif字体。但那不是唯一的选择,一些新颖的字体同样会有很棒的效果。

Sans serif typefaces 有统一的笔触宽度,是目前扁平化设计中最受欢迎的字体。笔触的宽度不发生变化,因此看上去十分简洁,同时易于阅读。这种字体适用于很多背景,特别是那些扁平化的背景。字体描边加粗以后同样能够在色彩鲜艳的背景中呈现出很好的对比效果。

Serif typefaces 也是一种选择,但是并不是经常被使用,因为这种字体看起来较为正式且包含了更多的装饰性元素。

在扁平化设计中设计师从头到尾只使用一个系列的字体是很普遍的事情。(为了让设计看起来没那么单调,设计师也常常选用2至4种字体作为调节。

选一种样式较多的字体,例如含有bold、 black 和 light等样式。这样即使只是用一种字体也可以呈现出充满层次感的丰富的视觉效果。

novelty typefaces 是扁平化设计中另一种不错的字体选择。可以尝试一些新颖的字体,但是这种字体应该和sans serif具有相同的属性,例如清晰的线条和统一的笔触。避免过多的装饰性细节。

虽然在扁平化设计中经常只使用一种字体,但是如果有一种比较新颖的字体,选择两种字体也是不错的注意。当文本比较简单、字号比较大的时候可以使用较为新颖的字体,在字号较小,文本内容较多的区域使用另外一种字体。

别总想着用那些陈旧的字体。虽然像Arial这些常见的字体在扁平化设计中依然表现出色,但是选择一些特别的字体会给设计增添些许活力。由于很多设计师在进行扁平化设计的时候都会采用相似的颜色搭配和技巧,因此如果希望你的设计能够脱颖而出,选用新颖的字体就显得很重要了。选用独特的、出人意料的字体能够帮助你的设计建立识别性。

专注文本内容

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://neueyorke.com/

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

https://www.standbuy.us/

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

https://flaticons.co/

文本内容本身和字体的选择同样重要。

扁平化设计的重点在于简洁,文本内容应同样保持简洁。

请确定你对文本内容的选择和编辑是恰当的。选用直白的语言,明确地展示给用户你的网站如何工作。在需要用户执行操作的时候请选用简单直白的表述。在该说现在付款的时候别啰嗦地说点击按钮进行付款。

色彩和字体的搭配

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://www.profoundgrid.com/

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://www.geckoboard.com/

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://minimalmonkey.com/

字体的粗细以及颜色的选择在版面设计中很重要。目前在扁平化设计中黑色和白色是最常见的文字颜色。由于这些文字常常摆放在色块的顶端,所以选用黑色和白色看起来效果还不错。

在文字和背景间需要使用对比效果,这样才能让文本内容清晰易读。别使用阴影、渐变等类似于拟物的视觉效果,设计师必须要有通过色彩进行内容区分并使关键内容凸显出来的能力。

空间和大小

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://apps.microsoft.com/windows/en-US/

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://friendsoftheweb.com/

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

http://www.buildwindows.com/

设计师要善于在扁平化设计中利用空间和大小的变化完成设计。

在设计中要有恰当的留白,让版面有呼吸感。扁平化设计要充分体现出设计的可用性。你希望用户完成从点击到敲击的一系列操作,那么给这些操作多留一点空间吧,将重点转移到文本内容上,然后很自然地,用户就知道怎么完成这些操作。

可以考虑把文字调整得大一些。当你选择了较为纤细的sans serif字体或者新颖的字体时请认真考虑这个建议,这样能增强文字的易读性。

上述技巧需要配合使用。给文本预留更多的空间将允许设计师选择更大的字号。并且能够调整不同文字的大小。请将空间和大小视作关键的可用性技巧,按钮是否足够大?每个按钮都有自己的特点吗?样式设计能够清晰地告诉用户网站的功能和接下来需要进行的操作吗?

字体建议

有种类繁多的字体可供选择,希望以下免费的字体能够激发大家的设计灵感。

Lato (Google Fonts)

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

Franchise (Font Squirrel)

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

Junction (League of Moveable Type)

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

Aller (Font Squirrel)

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

Museo Slab (FontSpring)

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

Telegrafico (Ficodfont)

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

Gnuolane (FontSpring)

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

ChunkFive (Font Squirrel)

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

Lovelo (Font Fabric)

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

Mojave (Behance)

如何给扁平化风格选择合适的字体,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160217/1576800.html

延伸阅读
本教程主要使用Illustrator绘制扁平化风格的宝石图标,教程算是一个系列的珠宝、宝石系列的图标设计教程,挺不错的,推荐过来和图老师的朋友们一起分享学习了,下面就一起来学习吧。 我们先来看看最终的效果图吧: 使用线段工具画两根垂直交叉的直线,让它们的交点正好在正方形的中心。然后使用路径查找面板中的分割功能把正方形切成四个...
标签: PS PS基础
今天的教程,不仅有超详细的步骤解说与多个技巧,而且绘制时能帮同学们深入学习Photoshop的基础形状,教程不难,作为扁平化图标入门教程再合适不过。 先看看效果图 绘制火箭图标 这些调色板上的颜色是我们将要用到的颜色,我选择了一些不那么鲜艳的颜色,这能和扁平化的图标很好地结合,你可以将这个色板储存在你的电脑中,这样你就可以...
标签: PS PS基础
长阴影是目前最为流行的一种设计趋势,在Dribbble、Behance等各大设计社区几乎无处不在,它看起来像是对扁平化风格的一种强化,特别是在设计图标或简单的海报的时候会用上。 网络上自然有很多可以自动生成长阴影工具,但是工具只能作为一种媒介,真正学会长阴影,并灵活运用始终要从实践开始入手。此外,我们会在本次教程中会使用AI软件进行绘...
设计是好玩的,特别是把自己的奇思妙想实现出来后,会有很有成就感,今天分享一组来自UI设计师Rob Lafratta的创意设计作品,这组作品主要是把超级玛丽的形象换成其它超级英雄等人物,看上去很有趣。 下面来看看一些截图,当然你也可以点击这里查看该设计师的最近更新。
标签: Illustrator
本教程主要使用Illustrator绘制扁平化风格的宝石图标,教程算是一个系列的珠宝、宝石系列的图标设计教程,挺不错的,推荐过来和图老师的朋友们一起分享学习了,下面就一起来学习吧。 我们先来看看最终的效果图吧: 使用线段工具画两根垂直交叉的直线,让(图老师整理)它们的交点正好在正方形的中心。然后使用路径查找面板中的分割功能把正...

经验教程

607

收藏

15
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部