400-609-4309

ui视觉设计对字体的选择  

  做设计的都知道,文字内容总是能占到整个版面将近80%的区域。因此理解字体与排版对UI设计师来说非常关键。不管你是从事网站设计、移动应用程序设计、还是可穿戴ui设计,你的设计必须能够清楚地传递出设计的意图和目的。由于文本是基于沟通的目的,所以需要对字体设计有着深刻的理解。当然,用户界面的设计是不同于电子书或博客的主题设计的。但以字体为中心的设计原则仍然适用。毕竟,屏幕上的信息是通过文字进行传递,而UI得语言就是字体。那么下面分享一个详尽的UI设计字体与排版的指南。希望对你有所帮助。
字体设计示范

  字体的基础术语

  了解字体设计的基础术语非常重要,这些术语在介绍字体设计的相关文章中经常出现。比如 x-height(X字高)指的是从字母的基准线开始往上到矮字母的顶端的距离,当X字高的比例相对大一些的话就能增加易读性。

  衬线字与非衬线字

  在西方国家的字母体系,分成两大字族:serif(衬线字体)及sans serif(无衬线字体)。衬线字(下图中的宋体、Times New Roman)是指在字的笔画开始及结束的地方有额外的装饰,而且笔画的粗细会因直横的不同而有所不同。 相反的,无衬线字(下图中的思源黑体、Helvetica)就没有这些额外装饰,而且笔画粗细大致上是差不多。

  衬线字的字体较易辨识,也因此具有较高的易读性。 反之无衬线字则较醒目。通常来说,需要强调、突出的小篇幅文字一般使用无衬线字,而在长篇正文中,为了阅读的便利,一般使用衬线字。在实际应用中,因为中文的宋体和西文的衬线体,中文的黑体和西文的无衬线体,在风格和应用场景上相似,所以通常搭配使用。

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

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

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

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

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

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

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

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

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

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

  在做设计时候,如果是没有经验的新手可能会纠结字体的选择,不知道选哪一种才算合适的。有人就会经常问别人这个地方该用什么字体会比较适合?或者通过模仿在搭配。

  熟悉使用字体建议:

  1.了解字体的性格

  每个字体都有性格,人们比较喜欢一些有特色的东西。那么这些被喜欢的存在什么规则呢,了解你的目标人群,知道你文档的用途,选择一类字体,是你的目标人群所期望的字体,是你的文档的用途所需要的字体。

  2.避免使用默认字体

  如果你在语句或是设计中使用默认字体,你是在告诉全世界你不知道还有其他的字体。
  Times New Roman 和Calibri不是不好的字体,它们只是被过度使用,回到第一条规则,想想字体的性格,有比默认字体更好的字体吗?在大多数情况下,答案是以有的。

  3.避免使用被过度使用和丑陋的字体

  一些字体受到过多的欢迎,因此我们可以认为他们是过度的使用,有点讨厌。这是由大多数的电脑拥有很多一样的字体造成的。

  4.避免使用被过度使用和丑陋的字体

  大多数文档如果使用超过一种字体看起来比较好,但是少部分使用超过三种看起来比较好。那么你需要记住什么t呢?无论这个文档是什么,尝试使用两种字体,一种标题使用,一种文本内容使用。

  二.界面中文字使用的规则

  在不同平台的界面设计中规范的字体会有不同,像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体,在这我和大家分别介绍一下。

  以下是在 72像素/英寸 下的规范

  移动端常规字体

  1、IOS:常选择华文黑体或者冬青黑体,尤其是冬青黑体效果比较好。

  2、Android

  英文字体:Roboto

  中文字体:Noto

  移动端常用的的字号有哪些呢?

  1、导航主标题字号:40-42px

2、在内文展示中字号大小又是多大呢?大的正文字号32px,

  3、副文是26px,小字20px

  4、在内文的使用中,根据不同类型的App会有所区别。

  像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性,正文字号36px,会选择性的加粗。
12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章