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

相关推荐

  • 【信息图设计】常用的5种数据可视化方法

    小编最近在研究后台的设计,涉及到数据统计分析模块的数据的呈现方面,搜集学习材料的时候发现这篇文章,推荐给有需求的童靴们共同学习。在文章中,原作者跟大家分享数据可视化常用的五种方式,希望能给大家带来思…

    2016-03-17
  • Material Design UI质感设计动画交互设计欣赏

    质感设计(Material Design),是谷歌推出的设计语言,可以在用户界面产生动画,并且动画都是仿照真实的物理世界所产生,而且这套设计语言是跨平台和设备的。简而言之,质感设计是一种简单的方法创建很快的应用程序…

    IxD案例 2015-11-16
  • 【设计欣赏】这样的loading动画,我愿意等!

    毫无疑问,没有人愿意等待。尤其是在等待自己十分期待的内容时,对着千篇一律、毫无新意的加载页面,简直烦躁极了!在这些时间内,以下这些小小的加载进度条能很好的留住用户哦~

    2016-05-30
  • ios8设计规范 中文版 完整版

    文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 以内容为核心(Defer to Content) 1.1.2 保证清晰度(Provide Clarity) 1.1.3 用深度来体现层次(Use Depth to Communicate) 1.2 iOS应用解析(iOS App An…

    2016-05-12
  • 产品细节中的情感化

    今天分享一篇 视觉设计的文章{产品细节中的情感化设计}说的情感,我们每个人都有,什么爱情、亲情、友情…..等等!但是什么是情感化设计呢?一句话:就是你的设计是否能给用户带来惊喜,温暖…等等!下面让我们一起…

    2015-01-25
  • 【技巧分享2期】好的用户界面设计

    21 让界面平滑显示而不要死板地呈现 用户进行操作过程中,界面上的元素会经常出现,隐藏,打开,关闭,放大缩小移位等。给这些元素增加些自然的动画,淡入淡出效果不但美观,也更符合实际,本来元素尺寸位置的变化…

    2015-10-12
  • 2016年最值得关注的16个网页设计趋势

    设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流。作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都…

    2015-12-23
  • 清晰、高效、一致、美观 – 关于设计原则的优先级排序

    我们在Salesforce的产品设计团队当中有个不成文的规矩: 无论谁拿出一份什么清单 – 功能列表、研究报告,或者哪怕只是体恤衫名录 – 无论什么,只要是清单的形式,肯定会有人出来问一句:“按优先级排过序吗?” 有时…

    UI设计 2016-04-26
  • 米尔顿格拉泽谈动态设计

    上周我参加了谷歌的I/O大会,加入了一个关于跨平台设计的小组座谈,这一次会议有非常多有趣的新事物,让人有种第一次走在拉斯维加斯大道上一样的惊奇。

    2014-12-30
  • 你热衷艺术,可你知道 2017 年设计的风向标吗?

    设计在生活中无处不在,而设计的趋势也随着时间的推移不断受到来自媒体、技术、时尚等方面的影响。 一个好的设计被认可的周期也许很长,但一个设计趋势流行的生命周期大多不会超过 1-2 年。下面这篇文章整理自著名…

    2017-03-06