• 400-123-4567

    工作时间

    周一至周五:9:00-21:00

    周末及节日:9:00-18:00

  • 手机版二维码

    随时手机查素材

  • 扫描二维码

    加入官方微信群

朱猪猪ZHU 版主
  • 山东省淄博市
  • UI设计师
  • 推广达人

  • 灌水之王

  • 突出贡献

  • 优秀版主

  • 荣誉管理

  • 论坛元老

  • 17发帖数
  • 17主题数
  • 0关注数
  • 1粉丝

[教程分享] Airbnb前端工程师告诉你,如何在设计中选择正确的字体和版式

[复制链接]
朱猪猪ZHU 发表于 2019-9-12 15:08:13 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
原文作者Jonathan是一位设计师,同时也是一位开发者。曾任职于雅虎,现在在airbnb任前端工程师。大神自述,自己在设计和开发两个领域研究的比较多,这篇文章就分享了他在设计中的一些排版经验,虽然文章中讲到的大部分资源可能是适用于英文排版,但是从排版的层面来说,道理都是想通的。所以,仔细阅读,相信会有所收获!
如何在设计中选择正确的字体和版式
Typography can make or break your design: a process for choosing type


作为一名设计师,你需要学到的最重要的技能之一就是如何选择字体。这是因为文字内容是设计师与用户沟通的主要方式之一,版式可以决定设计的成败。
排版工作兼具美感和复杂性,有些人把自己整个职业生涯都献给了字体设计。幸运的是,他们的工作都以文档的形式,很好的记录了来,让我们在设计时,有大量的资源可以学习。
本文旨在帮助你学习如何选择正确的字体类型。同时,也鼓励大家去探索那些你自己熟悉的字体组合。
一、确定目标
在做任何事情之前,首先都需要确定设计的目标。你想传达的信息是什么?你设计的媒介又是什么?
好的设计,会利用好版式并与目标达成一致。这是因为版式在你的设计中是表达情绪、基调和风格的关键。
例如,如果你设计的贺卡是走很重的插画风,那么选择一款合适的插画风格字体就很关键。合适的字体风格要与整体的设计调性保持一致。
选择合适的插图风格字体
如果你正在设计一个以图片为核心的登陆页面,选择一个不喧宾夺主的简单字体就很关键。使用字体作为一种来强化信息传达的方式。
如果图片是设计的重点,那么选择简单的字体,图片就会更加突出。
二、确定受众
在确定设计目标之后,接着需要确定目标用户。这一步很关键,因为有关用户的信息,如年龄、兴趣和文化素养,会直接影响到字体的选择。
例如,有些字体更适合给儿童设计时使用。在阅读时,孩子们需要字迹清晰,字型大方的字体。Sassoon Primary就是一个不错的例子,Sassoon Primary是由Rosemary Sassoon开发的,正是基于她对儿童容易阅读字体的研究。
Rosemary Sassoon开发了Sassoon Primary字体
有些字体更适合老人,Senior-friendly字体有更加易读的尺寸,对比度也足够高,同时也避免了复杂的装饰性笔迹。
在选择字体时,要考虑到你的读者和他们的需求。简单来说,需要与你的用户共情。
三、寻找灵感
多看看其他设计师的优秀作品,试着去理解他们是如何选择字体的。
字体灵感
对于字体设计的灵感,CreativeBloq的《75种最好的免费字体》(https://www.creativebloq.com/gra ... designers-1233380/8)就是一篇非常棒的文章,可以让你正确地选择字体。在那篇文章中,CreativeBloq解释了每种字体背后的玄机。
另一个有用的资源是Awwwards在2015年发布的《100个最全的免费字体合集》。(https://www.awwwards.com/100-gre ... ction-for-2015.html
Invision 也编制了一个版式字体合集(https://www.invisionapp.com/insi ... na-newsltr_20170322)。你也可以在那里找到很多灵感资源。
Typ.io 收录了大量已上线的字体案例资源(http://typ.io/)
想从实际线上网站获得灵感,type.io这个网站会非常适合。这个网站从网上收集到了大量的字体设计案例,另外,网站中还在每个案例底部提供了css的字体样式。
除了寻找专门的字体网站,也可以去查看你最喜欢的网站,看看他们是如何使用好字体的。”WhatTheFont”是一个很好的工具,它是一个Chrome扩展插件,只需要悬停在网页中你希望了解的字体上,就能准确知道它的字体属性了。(译者注:亲自试验了,能很方便的查字体了,有个地方要注意的是,必须等网站加载完成了,点击那个插件图标才有效果哦。)
搭配灵感
除了单个字体,还要看看字体搭配的灵感。合适的字体组合和字体本身一样重要,良好的字体组合有助于建立视觉层级,提高设计的可读性。
字体组合和字体本身一样重要
要获得灵感,可以从Typewolf(https://www.typewolf.com/)开始。Typewolf收录了大量来自不同网站的字体组合灵感。除此之外,他们还有字体推荐和高级排版指导,简直就是版式创作者们的宝库。
FontPair (http://fontpair.co/)还专门为谷歌字体设计了字体搭配灵感。你可以按字体类型组合进行排序,例如无衬线字体和衬线字体或者衬线字体和衬线字体。
最后,在网上可以找到大量由设计师设计的字体组合。例如:《 Typography: Google Fonts Combinations 》(https://www.behance.net/gallery/ ... -Fonts-Combinations)和《Typography: Google Fonts Combinations – Volume 2》(https://www.behance.net/gallery/ ... mbinations-Volume-2  ),只需要在Dribbble和Behance上搜索“font pairing”即可找到。
四、选择字体
有了前面的研究和灵感,你就可以选择自己喜欢的字体了。在选择字体时,有三个原则需要记住:可读性,易读性和目标。
在选择字体之前,先研究一下产品目标
选择常规且易于阅读的字体,要尽量避免一些装饰性的字体。同时,还要注意到字体的用途。比如,一些字体更适合作为标题而不是正文。
因此,在选择字体之前,先研究一下它的预期使用目标。
搭配对比更大的字体
在字体组合方面,保持简单原则,在一个页面中最多使用三种不同的字体。此外,字体的组合需要有明确的对比,这样会有助于引导读者的眼睛,首先应该是标题然后才是正文。同时,你还可以使用不同的字体大小,颜色和字重来完善视觉对比。
对于web字体来说,你可以去使用谷歌字体、Typekit和Font Squirrel。谷歌字体是免费的,而Typekit和Font Squirrel提供了免费和付费的字体。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

猜你喜欢
全国统一客服电话
400-1234-7788

24x7小时免费咨询

  • 官方在线客服

    QQ客服:小西

    点击交谈

    QQ客服:良子

    点击交谈

    QQ客服:闵月

    点击交谈
  • 上海市虹口区海伦中心B座4F4055-4056室

  • 手机扫码查看手机版

    手机查找资源更方便

  • 扫一扫关注官方微信

    加入官方微信群

Powered by Discuz!X3.5 ©2001-2013 Comsenz Inc.星点互联设计( 鲁ICP(324534562) )营业执照