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

相关推荐

  • 交互密度与最小交互区域

    体验优秀的App之所以优秀,往往是因为他们能让用户快速访问到各项功能。这里就涉及到多点触摸的交互密度,一个较大的触摸区域,在常规操作下十分好用。 或许对于一些用户来说,触控区域的大区块,视觉上可能有点难…

    2016-06-08
  • 是否后悔买了iPhone 6/plus?来看iPhone7的设计创意

             最近,有一些争论关于苹果2015年iPhone阵容。 虽然很多表明苹果将遵循传统,同样期待iPhone发布与更新内部今年晚些时候,其他人认为苹果制造商将打破其模式和直接跳转到iPhone的7系列。 无论原来是如此,下一…

    2015-05-11
  • 2017年的Logo,这样设计才会火!

    设计是变换无穷的,而且不断地演变,与新的潮流和品味融合。此种特性不论是在时尚界、平面设计或是其他业界中都相当普遍可见。 Logaster特地做了2016年Logo总评比,预测有哪些热门趋势将主导2017年的Logo设计风格。…

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

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

    2015-07-16
  • sketch 插件 sketch-measure 更新,又大大的提高了工作效率 ~

    今天更新了一下sketch measure的插件,下面说一下都更新了哪些地方 1.新的UI界面 友好的ui界面使你标记起来更加便捷,新界面是不是看起来更加专业了许多,视觉上更加直观 2.输出出口 自动生成HTML的样式,而不仅仅…

    Sketch 2016-07-25
  • Firefox浏览器表单的butterfly加载阻塞

    背景 一个礼拜前,在退款维权的业务中,发现这样一个问题: 在某些Firefox浏览器中,表单的butterfly加载阻塞导致功能异常了。 一开始,我们以为是即将发布的修改点导致的问题。 但再三确认本次的修改点后,确定只…

    2014-12-28
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

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

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

    2015-06-25
  • 有哪些非常有设计感的APP?—国内篇

    小编前语:继上次整理的富有设计感的应用之国外篇后,很多童鞋想了解目前国内比较有设计感的APP有哪些,总有些喜爱玩APP的达人给我们推荐一些应用,小编在这汇总下,供大家欣赏~~ 1.小记 日记软件有很多,这一款很…

    2015-05-22
  • 无限滚动翻页的优点和缺点

    一张图告诉你无限滚动翻页的优点和缺点 什么是无限滚动翻页?你一定不会陌生。实在不清楚,刷一下微博就知道了。想不想知道你的网站适不适合使用无限滚动翻页,看看这篇文章应该会很有帮助! 无限滚动翻页是现在讨…

    2015-01-21