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

反诈示警:如遇到文章内跳转至别的网站或产生需要交钱,交易等行为,均为诈骗行为,请谨慎对待。对于网上兼职、刷单、刷信誉的就是诈骗,请勿相信!需要提供身份证明、短信验证和短信链接点击都是诈骗, 请不要提供!同时请下载“国家反诈中心”App能自查自检,规避诈骗电话,免遭损失。

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

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

如何给扁平化风格选择合适的字体,插图,来源:资源仓库www.zycang.com

http://www.floatdesign.net/

如何给扁平化风格选择合适的字体,插图1,来源:资源仓库www.zycang.com

https://coderwall.com/futureal

如何给扁平化风格选择合适的字体,插图2,来源:资源仓库www.zycang.com

http://www.fitbit.com/

如何给扁平化风格选择合适的字体,插图3,来源:资源仓库www.zycang.com

www.who-wanna.com/en/

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

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

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

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

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

选择字体

如何给扁平化风格选择合适的字体,插图4,来源:资源仓库www.zycang.com

http://simonemarcarino.com/

如何给扁平化风格选择合适的字体,插图5,来源:资源仓库www.zycang.com

http://wistia.com/

如何给扁平化风格选择合适的字体,插图6,来源:资源仓库www.zycang.com

http://www.tvlcorp.com/

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

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

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

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

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

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

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

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

专注文本内容

如何给扁平化风格选择合适的字体,插图7,来源:资源仓库www.zycang.com

http://neueyorke.com/

如何给扁平化风格选择合适的字体,插图8,来源:资源仓库www.zycang.com

https://www.standbuy.us/

如何给扁平化风格选择合适的字体,插图9,来源:资源仓库www.zycang.com

https://flaticons.co/

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

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

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

色彩和字体的搭配

如何给扁平化风格选择合适的字体,插图10,来源:资源仓库www.zycang.com

http://www.profoundgrid.com/

如何给扁平化风格选择合适的字体,插图11,来源:资源仓库www.zycang.com

http://www.geckoboard.com/

如何给扁平化风格选择合适的字体,插图12,来源:资源仓库www.zycang.com

http://minimalmonkey.com/

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

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

空间和大小

如何给扁平化风格选择合适的字体,插图13,来源:资源仓库www.zycang.com

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

如何给扁平化风格选择合适的字体,插图14,来源:资源仓库www.zycang.com

http://friendsoftheweb.com/

如何给扁平化风格选择合适的字体,插图15,来源:资源仓库www.zycang.com

http://www.buildwindows.com/

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

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

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

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

字体建议

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

Lato (Google Fonts)

如何给扁平化风格选择合适的字体,插图16,来源:资源仓库www.zycang.com

Franchise (Font Squirrel)

如何给扁平化风格选择合适的字体,插图17,来源:资源仓库www.zycang.com

Junction (League of Moveable Type)

如何给扁平化风格选择合适的字体,插图18,来源:资源仓库www.zycang.com

Aller (Font Squirrel)

如何给扁平化风格选择合适的字体,插图19,来源:资源仓库www.zycang.com

Museo Slab (FontSpring)

如何给扁平化风格选择合适的字体,插图20,来源:资源仓库www.zycang.com

Telegrafico (Ficodfont)

如何给扁平化风格选择合适的字体,插图21,来源:资源仓库www.zycang.com

Gnuolane (FontSpring)

如何给扁平化风格选择合适的字体,插图22,来源:资源仓库www.zycang.com

ChunkFive (Font Squirrel)

如何给扁平化风格选择合适的字体,插图23,来源:资源仓库www.zycang.com

Lovelo (Font Fabric)

如何给扁平化风格选择合适的字体,插图24,来源:资源仓库www.zycang.com

Mojave (Behance)

如何给扁平化风格选择合适的字体,插图25,来源:资源仓库www.zycang.com

如需 WordPress 优化加速、二次开发、网站维护、企业网站建设托管等服务,点此联系我 | 近期站内热门福利推荐:
文章版权及转载声明

本文地址:https://www.zycang.com/3999.html
文章转载或复制请以超链接形式并注明来源出处。 本文最后更新于:2022-07-19 23:18:21
声明:某些文章或资源具有时效性,若有 错误 或 所需下载资源 已失效,请联系客服QQ:11210980

喜欢就支持一下吧
点赞174赞赏 分享
评论 抢沙发

请登录后发表评论