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

相关推荐

  • 淘宝2017设计升级

    这是手淘首次以设计为主导的版本升级,我们一步步地将公司的设计战略分解成产品体验方向,从设计概念落地到界面设计语言,在执行过程中又不断地平衡各种设计细节,才有最终的设计产出。所有的改变都是为了给用户营造更加良好体验的购物体验。

    UI设计 2017-03-14
  • [译]使用Sketch的10个小技巧

    随着Sketch越来越受到广大设计师们的欢迎,在这分享10个Sketch使用小技巧,希望能够帮助到正在学习Sketch的同学提升相关技能。 1、学会“Insert”的快捷键 什么是你在设计中最常用的?创建一个新的Artboard A,插入文…

    2016-07-20
  • Sketch从入门到精通 熟悉一下钢笔及各种基本图形的练习 免费版

    上一章节因为涉及到了画圆及各种图形,怕有的小伙伴还是不知道,就在这一章节里仔细的讲一遍,大家也可以更熟悉一下Insert有哪些更多工具有助于设计稿。 第一个是钢笔工具,快捷键是V,可以画出你想要的任意形状。…

    2015-07-03
  • 『UI设计尺寸标准汇总』iPhone界面尺寸标准|Android界面尺寸标准|网页界面尺寸标准

    iPhone界面尺寸 设备 分辨率 PPI 状态栏高度 导航栏高度 标签栏高度 iPhone6 plus设计版 1242×2208 px 401PPI 60px 132px 147px iPhone6 plus放大版 1125×2001 px 401PPI 54px 132px 147px iPhone6 plus物理版 1080…

    2015-06-16
  • Material Design 官方演示视频

    [button type="primary" text="Material DesignPDF 中文手册下载地址" url="https://www.iamue.com/7512" open_new_tab="true"]  

    Material Design 2015-08-07
  • 设计规范如何写,这20个精选案例让你大开眼界

    一篇干货贴,开篇必须来点镇楼的。 如下为规范汇总页,里面囊括了许多大家熟知品牌的规范。 1. Brand Style Guide Examples http://saijogeorge.com/brand-style-guide-examples/ 从中大致可以总结出规范的分类: …

    2015-11-09
  • 为网页设计师 Web 设计编写的简要历史

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

    2014-12-30
  • 字体设计之字体性取向

    小编话:无论你是UI设计师还是平面设计师或是其他,在做设计时对字体的运用一定是多之又多的。有时候也会因为把握不好字体而使整个画面达不到自己预期的效果。今天给大家带来由alipayifed分享的字体设计之字的性取…

    2015-01-22
  • 正确使用标签选项卡的12个姿势

    这里是关于标签选项卡的12个设计准则: 1、使用标签选项卡在相同容器不同内容下的视图间切换,而不是作为导航将用户带到不同的区域。这是最重要的一点,因为在不同的标签视图下切换时保持内容容器的一致是我们在开…

    2016-07-19
  • Sketch从入门到精通-Sketch3四种模糊方式

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

    2015-08-03