UI设计之4个字体设计小技巧

内容在设计中起着至关重要的作用。不管你是从事网站设计、移动应用程序设计、还是可穿戴ui设计,你的设计必须能够清楚地传递出设计的意图和目的。由于文本是基于沟通的目的,所以需要对字体设计有着深刻的理解。当然,用户界面的设计是不同于电子书或博客的主题设计的。但以字体为中心的设计原则仍然适用。毕竟,屏幕上的信息是通过文字进行传递,而UI得语言就是字体。

用户界面中4个字体设计技巧

每一个界面基本都包括一系列的用户选项。字体应该能够支持决策流程,应以不增加用户的认知负担的方式传递内容。好的的字体能够吸引读者阅读内容,而不是关注字体本身。

1.选择一种不同大小均适用的字体

大多数用户界面需要不同尺寸的文本元素(按钮复制、字段标签、节标题等等)。选择一种能够以不同尺寸展示也能很好保持内容的可读性与可用性的字体。

比如:Avenir, Univers, Lato

UIdesign tips001

2.选择容易区分字体格式的字体

很多字体太容易混淆相似的字形。比如大写和小写字母L很相似;小写字母R和N写在一起可以很容易地成为一个小写字母m 。所以需要通过字体的选择让用户不易混淆这些。

比如: Clear Sans vs. Lato (观察下面的大些I和小写的L)

UIdesign tips002

3.将文本视为用户界面设计

卡梅伦.摩尔近十年一直传递这个观点,他认为好的设计师会把文本视为内容,而伟大的设计师会将其视为UI。

尽管人们对此观点不一,但在界面设计中这种看法是正确的。因为当文本元素代表一个功能,那么它就是UI。所有UI设计在实践中应与字体相匹配。如果你不相信,想想你在进入一个标有“推”的拉手的门时所遇到的困惑。

4.思考要做的工作

有人可能不熟悉JTBD,这是一个关注用户需求的设计框架。 询问下自己能够帮助用户解决什么问题。这个问题的答案应该决定UI的设计,包括字体。

在Instapaper的设计者们对于工作的内容与字体相匹配方面做的非常出色。Instapaper的web和移动应用程序具有两个功能:

1)让人们将web内容保存供以后使用

2)为用户提供一个阅读的地方

因为UI中大部分都是基于文本的,并且专注于阅读,所以Instapaper的设计者选择两种截然不同的方式: 文本内容采用serifed Lyon,并且在内容上有着一定的分量,而在UI中采用JAF Bernino Sans。 这将在阅读内容与已经完成的内容上创建一个明确区分。

这些字体选择在用户的期望中可以产品难以置信的效果。从成千上万的书籍、杂志和报纸,我们逐渐习惯和消费衬线字体形式的内容。随着网络的出现,最近的无衬线字体风格真正走进人们视线中,使其自然的成为UI元素。

UIdesign tips003

值得庆幸的是,在设计一个优美及可用性强的UI时并不缺少类似的灵感与指导。

以下是我最喜欢的3种设计:

Medium

Medium出色地说明了“文本UI的概念。“作为阅读和写作的平台(文本的长度), Medium视字体为最高优先级。 其他写作平台和CMSes会效仿它。

UIdesign tips004

网站发布的内容(设置为Freight Text Pro 与 JAF Bernino Sans字体)平华且容易阅读,让人充满了思考与联想。另外,写作过程应与最终出版的格式一致,所以没有必要去切换。

在功能的部分设置为Bernino字体,内容与标题一致,但在UI应用程序中尺寸的不同可以很容易区分。

Slack

在这个例子中,文本仍然是内容的主要形式。作为一个团队的沟通平台, Slack对于界面和内容在很大程度上依赖文本。就像缓冲区,较大部分内容保持一种字体(Lato)。

UIdesign tips005

在Slack,通过考虑情景、不同份量、颜色及空白区域,设计师在Slack创造了一个易于浏览和充满阅读乐趣的平台。

Rdio

作为一个音乐应用,Rdio在文本上使用的很少。但即使在这里,我们仍可看到它将字体当作UI的一部分,并使用不同尺寸的字体(Whitney字体)。

UIdesign tips006

附: Lato 与Whitney字体在大写小写字母“L”上有着类似的问题。一定要审查的这些字体的字符集并考虑和评估这将对于你的产品能够带来多少问题。

在你的UI设计中设置字体

无论设计出于什么目的,在你的UI设计中,字体将发挥至关重要的作用。字体设置好了,它会促进你的用户阅读,相反用户体验会差。所以通过学习掌握这些小技巧并做大量的练习,在字体设置中你会做出更好的选择。

作者简介:Chris Bowler ,作家/思想家/字体的狂热者,将他人放在第一位。

原文链接:http://blog.invisionapp.com/4-tips-on-typography-in-ui-design/

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/5584/

(0)
TinadminTinadmin
上一篇 2015-05-13
下一篇 2015-05-18

相关推荐

  • 你的产品鸡肋了吗?

    如何保证自己的产品不成为鸡肋,除了成功的商业模式外,只有高频次的使用才能保证用户忠诚度,延长产品生命周期。所以,好的用户体验也就成为了其中非常重要的致胜王牌。

    2016-10-20
  • 为网页设计师 Web 设计编写的简要历史

    编者按:互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计 发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

    2014-12-30
  • APP UI 设计规范详解

    移动端 APP  UI 规范详解, 专注规范解析,提高设计效率!提升用户体验维度!

    2016-07-14
  • 有凭无据——论登陆界面密码可见的重要性

    作者简介:Luke Wroblewski是一个界面设计师、战略家及作家(Site-seeing: A Visual Approach to Web Usability 一书的作者 )。现在他的工作是 Yahoo! 的首席设计师(Principal Designer),以及 LukeW Interface …

    2015-07-16
  • 国家地理:创新设计世界地图APP-炫酷、叼、高度还原设计方案。

    本文首发在iamue.com(我是UE网) 头条号同步发布 来看一看别人家的UEUi 国家地理做了一个世界地图app,动效狂拽酷炫叼炸天。关键是app线上高度还原了设计的动画效果,而且非常流畅。一起来欣赏一下吧 然后默默的收…

    2015-06-25
  • Sketch从入门到精通-Sketch3四种模糊方式

    现在经常能看到界面上各种模糊效果,或者是背景模糊,然后上面排字,放图片;通常是做背景的时候用到的模糊效果。在Sketch里面就有基本的四种模糊方式,分别介绍一下。 首先是最常见的高斯模糊(Gaussian Blur),…

    2015-08-03
  • Sketch从入门到精通-Sketch3节点的模式运用

      在进行对图形的具体编辑的时候,会经常用到节点,或者叫点也可以。当你用钢笔画出一个图形的时候,然后回车一下,你就会发现有好多个节点组成了一条线,这个时候我们要对具体某个图形编辑的时候,就可以调节…

    2015-07-20
  • Sketch 3.6的更新

    Sketch 3.6 带来了许多新的更新,终于盼来了文本渲染和SVG的改进,以及性能增强和bug修复。 固定基准 之前不一致的基线导致在设计的时候出现了很多问题,新的版本中当改变一个文本图层的字体和字体大小时,该图层出…

    2016-03-08
  • UI设计师们,你们真的了解UI么?

    说起产品UI设计通常的认识就是“图形界面的设计”,而产品的交互设计往往被忽略!一个好的交互设计对产品的成功起着很关键的作用。UI所做的就是用户最先 接触到的东西,也是一般性的用户唯一接触到的东西。用户对于界…

    图形用户界面 2015-10-21
  • 人机交互 (HCI) 交互设计 (交互设计) 的区别是什么?

    作为一个PM当然非常需要注重产品在使用过程中的一些交互体验,可是广义的人机交互和交互设计又有什么区别呢?让我们来看看知乎里别人都是怎么回答的吧。

    2014-12-30