提高作品层次感的12个字体运用技巧

所属分类: 平面设计 / 平面其它 阅读数: 1161
收藏 0 赞 0 分享

  字体视觉上的层次感(英: Visual Hierarchy),究竟意味着什么呢?

  因为对设计项目有着致命的影响,所以我们需要好好的研究讨论。当你这样做了,我们可以让用户很方便的了解到你所想要引起注意的要点,让说明变得通俗易懂。

  在没有利用阶层的情况下,文字、单词或文章看上去都差不多,用户想要获取对他有用的信息是非常困难的。

  那么接下来,我将会为大家介绍,如何使用文字的阶层效果,来让用户方便的获取到他所需要的信息,制作出充满魅力的网站。

  详细从以下开始。

  文字是设计素材的一部分,有意识的思考特定的构造组合是有必要的。首先,文字有着什么样的意思,我们需要仔细思考运用是否得当。

  大小

  这是最能将设计要素强调的技术。人的视线自然会被那些大的东西所吸引,文字如果使用大尺寸的字体,用户自然就会去阅读那些内容了。

  缩小字体,让他与其他字体不同,仔细调整是很有必要的。在你使字体变大或者变小的时候,他并不会完全按照我们的预期变化,你需要时刻保持着细心。(例如你在使用装饰性的字体的时候)

  字体大小没有统一感,会有种非常业余的感觉,也会让文字变得难以阅读,尺寸的调整也会变得不可能。下面这个样本使用了Open Sans这个字体,这样优雅的字体用在标题这里是再合适不过的了。【Open Sans是一个由Google委托Steve Matteson设计的无衬线字体。根据Google的说法,它是以“诚实的重要性、开放的表现形式、及一个中立但具亲和力的外观”的理念设计的,并且“针对打印、互联网、行动设备的可读性所最优化。” 】

  在调整字体大小的时候,你需要验证这个大小是否合适。首先从正文而不是标题开始,先确定他们的主字体。将字体的特点引发出来,让用户看到有魅力的效果。

  调整字体大小需要注意的几点

  正文用的字体大小,最好在14pt以上。(19px)

  标题大小,最好控制在35pt以下。(约为正文的250%)

  小标题的大小,最好控制在25pt以下。(约为正文的175%)

  导航菜单的大小,最好控制在23pt以下(约为正文的165%)

  导航菜单上的字符大小,最好控制在20pt以下(约为正文的140%)

  重量

  文字的重量,就是指文字的厚度,以及该留出多少空白空间的意思。明显和尺寸的重要性不同,特别是采用了独特的字体时,可以更加突出一些重要内容。

  一旦你决定了文字的尺寸和重量,接下来就让我们想想该使用什么字体吧。粗体和细体一起使用,可以很好的表现出层次感。为了传达出文字的重要性,有一个非常著名的设计方法,就算是小屏幕画面状态下也能将文字表现出来的技术。

  斜体

  斜体也是非常有效的强调手段,有时也比粗体更容易引人注意。因为视觉差异比较小,对特别的字体是十分有效的。

  小写还是大写?

  所有的文字都使用大写,有人会这样主张这样可以起到令人震惊的效果,对于网页设计来说也是同样的。在项目中使用大写,就可以增强层次感,可以防止字号小的文字与背景互相混合在一起。

  配色

  文字的重量也依赖颜色,让我们来制作一个易于使用的配色方案吧。因此我们需要学习一些美术的基本原理,例如冷色与暖色的不同,流行色与自然色等,学习一些配色的基本原则是非常重要的。

  将配色应用到文字上时,也需要注意他的层次感。使用明亮鲜艳的颜色,则表明他比其他的元素都重要,你需要知道一些颜色和对比相关的一些知识。

  对比

  如同字面意思一样,对比能在配色、重量、尺寸等各种各样的地方使用。正文与标题的对比,可以说是最常见的技术了。

  留白

  在文章的段落和文字之间留下空白的空间,可以很好的提高阅读效果。但因为有需要调整字符宽度,所以使用时需要小心。

  首先第一个需要考虑的便是行距,不同的尺寸与颜色,我们需要选择合适的风格。

  使用了留白之后,因为也会影响到阶层的顺序,如果是使用了风格相似的字体,留白能稍稍降低他们之间的关联性,创造出让人耳目一新的效果。但是,如果有想让人注意的部分与别的文字做比较,你需要仔细的调整他们之间的平衡性。

  方向

  方向(英: Orientation),就是指在布局中文字的表现形式。虽然看起来是显而易见的事,但在层次表现上却是一个重要的过程。在大多数情况下字母与数字,在屏幕上以水平直线放置,这样会整洁易读。

  如果文字垂直放置,不仅会成为重要的设计要素,所有的视线也都会被集中在上面。尽管这种技术能扭转你的设计,但作为设计师,你还是需要充分理解自己的设计意图后再去使用。

  质感、纹理

uisdc-3-2016090413

  文字的纹理质感,是需要花费大量时间来掌握的一种技术。这种难,并不是指字体自身的质感,而是指在页面上所有文字的样式。使用合适的纹理,变化设计的元素,打破原有的设计规律吧。明确意图或概念,让你的设计不会矫枉过正。

  层级

  不管是怎样复杂的项目,都可以利用文字来分成三层,将网站上重要的部分完整的区分出来。这里的利用的阶层分为:主层(英: Primary)、副层(英: Secondary)、三层(英: Tertiary)。

  主层(英: Primary)上的文字,是页面上最突出的元素。一般会使用大尺寸和鲜艳的颜色来使用,表现出与其他文字不同的魅力。但是,因为文字对层级的影响过多,使用会有限制,例如只在标题中使用。

  副层(英: Secondary)上的文字,并没有主层那样的影响力,却能很好的让用户的注意力转向正文的内容。利用配色、尺寸、留白等这些不同的要点,区分主次,可以用在小标题,导语和摘录上。

  三层(英: Tertiary)上的文字,是利用在主要内容上的,没有什么特点的要素。在这里使用的字体并不需要多么的引人注意,可以选择一些简单的,没有什么浮夸的效果的字体。不要干扰到主要内容,从而让用户的视线转移到别的地方。

  最后

  在网页设计中,尤其是需要展现很多内容的时候,所有的要素对于用户的视觉体验是非常重要的。这次介绍的利用字体使你的网页变得更加有层次感的技术就到这里了,希望大家好好使用它们,做出更棒的作品吧。谢谢大家~一起感受设计的乐趣吧。

更多精彩内容其他人还在看

UI设计师必看:详解最全面的组件化开发与设计指南

作为一个UI设计师,设计最重要的一点就是要符合产品功能逻辑,绝不是所谓的“好看”。而组件化的设计理念恰恰是最能帮助设计符合产品功能逻辑的,下面为大家带来详解最全面的组件化开发与设计指南,来看看吧
收藏 0 赞 0 分享

平面设计中相近性的应用技巧

相近性原则也取决于元素在背景上不同位置的放置,从而使人们获得各种不同的信息组合,而最清晰的效果就是利用白色背景来区分这些组合,今天为大家分享平面设计中相近性的应用技巧,来看看吧
收藏 0 赞 0 分享

相似的形状、颜色等其他特性在平面设计中的应用

在设计中相似的特性可以成为我们有力的工具,利用相似性,我们可以使两个相隔较远的元素在信息上联系起来,下面为大家详细介绍相似的形状、颜色等其他特性在平面设计中的应用,来看看吧
收藏 0 赞 0 分享

看看近30年奥斯卡最佳影片海报都长什么样子

今天为大家带来近30年奥斯卡最佳影片海报,看看都长什么样子,统计是从第59届奥斯卡开始的,因为之前的海报都太具有年代感了,对于设计朋友真的很值得过来学习,一起来学习吧
收藏 0 赞 0 分享

SVG格式的图片编辑修改方法

做分析的时候,经常会遇到一些SVG格式的图片,但SVG格式的图片并不能插入到Word文档中,并且需要按照期刊要求修改,怎么办
收藏 0 赞 0 分享

如何创造出好设计?教你利用坏图创造出好设计

虽然说一图胜千言,一张好图会说话。但在设计师的实际工作中,甲方不少,好图难得,碰到客户给的是烂图怎么办?还想不想要高端大气了?如果你的回答是肯定的,那就来看一下今天分享的这篇好文,实例分析,不纸上谈兵,文中涉及很多实用技巧,非常值得新手设计师阅读呢。
收藏 0 赞 0 分享

设计师必须知道的17个行业规则

设计这行摸爬滚打十几年,林林总总各行各业的客户接触不少,由于中国应试教育的不足,导致不少人对这一行业工作流程缺乏了解。本文就为设计师总结了17个行业规则,希望作为设计朋友认真阅读,这样在以后的工作中可以少走点弯路
收藏 0 赞 0 分享

如何才能做出有创意的作品 什么是好的创意

作为一名设计师,常常面对各种创意需求,但创意这种东西,在有限的时间之内,常常是没有创意的、没有灵感的,这让许多设计师苦恼抓狂。本文就向设计师朋友介绍如何快速打造有创意的作品的一些方法和发散思维的办法,希望能帮助到大家
收藏 0 赞 0 分享

图文搭配技巧:给照片配上文字的十个方法

图文搭配是是平面设计的基本功。给照片配上文字,与平面排版有相通之处,但因为偏重不一样,所以处理方式截然不同。本教程就为大家介绍十个图文搭配的技巧,教程比较实用,推荐过来与大家一起分享学习,希望大家喜欢
收藏 0 赞 0 分享

UI界面中首字母大写和小写有哪些优缺点呢?

UI界面中首字母大写和小写有哪些优缺点呢?对于很多朋友并不是很清楚,所以下面小编就为大家详细介绍一下,不会的朋友可以参考本文,一起来看看吧
收藏 0 赞 0 分享
查看更多