返回  

每个设计都需要三个等级的排版

2017/11/16 10:08:18 来源:深圳网站建设公司Clh

对于网站设计或平面设计来说,最重要的元素之一就是排版。它需要清晰易读,它应该通过一个精妙的设计来引导用户从最重要的元素到最不重要的元素之间的过渡。


简单地说,这解释了排版层次结构的重要性。但是要真正掌握排版的艺术,你需要了解如何在整个设计中分等级的进行排版设计以达到最大的影响。请继续阅读,了解如何掌握排版的层次结构,并在每个项目中创建有效的排版。


1.排版的层次结构是什么?

What is Typographic Hierarchy?

What is Typographic Hierarchy?

排版的层次结构实际上是视觉层次结构的另一种形式,它是一个整体设计项目中的层次结构。排版的层次结构呈现的形式主要是通过字母,因此最重要的单词或语句显示在最重要的位置,这样用户就可以通过浏览文本内容以获取关键信息。

如果缺少排版的层次的话,那么每一个字母,每一个字和每一个句子在设计上看起来都是一样的。你能想象在一个网站设计中什么东西看起来都是一样的吗?那么,你需要从哪里开始呢?你怎么知道什么才是最重要的?

排版层次结构创建了元素之间的对比。设计师通过使用字体、大小、粗细、大写字母和小写字母或斜体、方向和颜色来达到这个目的。这些设计工具的组合用于创建属于不同层级的排版内容。

· 第一级

在这一级别中,排版都是偏向于大排版。这样做的原因是,大的元素总是能够吸引读者进入内容。这可能是运用大型排版的最典型和常见的例子了(除非你使用的是印刷艺术)。

· 第二级

排版的次要级别指的是字体以最常规的,可以最大限度帮助读者在文字内容中寻找对于他们来说重要的信息的形式展现。这包括小标题、引文、图表和其他文本块。这些文本块的在网页设计和平面设计或其他设计领域中是最常见的也是使用最多的元素。

· 第三级

第三层次是你设计的主要内容。它通常是设计中最小的类型,但它需要足够大,以便所有潜在用户都可以轻松的阅读和捕捉到这些信息。字体在设计、间距和整体使用方面应该是简单而一致的。

· 其他

其他层次适用于在第三级中需要强调影响的文字,效果如粗体,斜体,下划线,颜色等这些可以使人们注意到正文中具体某一区域的信息。这些效果在应用于第三级相同大小和字体的文本时效果最好。但是需要注意的是,这些效果最好能够少使用,如果使用的话也建议是在端文本或短句中使用。


2.印刷项目中的层次结构

Hierarchy in Print Projects

Hierarchy in Print Projects

Hierarchy in Print Projects

Hierarchy in Print Projects

打印项目中的可视化层次结构是很严格的。使用的大小、颜色和其他效果使某些类型的排版显得更大更重要,如何正确处理各个层级间的比例是你真正需要做的事情。

通过上面的几个例子,你可以清楚地看到不同层次的印刷层次以及如何让设计更容易阅读,更吸引人的视觉。你可以在关键区域添加重点,将相同的技术应用到任何设计项目中。


创造它

有很多种方法可以建立一种层次感。下面是一些最常见的技术:

· 字体选择:更有趣的字体会显得比视觉上不太吸引人的字体更大,这个也是吸引用户眼球最快的方式。当使用新颖、独特或精心制作的字体时,要注意可读性问题,并确保字体足够大。

· 大小尺寸:总所周知,字体越大,就越容易吸引注意力,但是要注意,字体大小应该与阅读文本的重要性顺序相关。

· 字重:字母的粗细可以使文字看起来更大(粗体,粗笔画)或更小(薄或压缩字体)。

· 大写字母和小写字母:你是否会觉得使用大写字母发电子邮件就像对着某人大喊大叫一样吗?设计中的所有大写字母也是如此,所以谨防使用。大写字母会显得更大,更重要,相反,小写字母显得更小,而且往往会被背景中的元素所抵消。

· 粗体字:粗体字是强调单个单词或短语的重点。它特别适合于第三级的排版。

· 斜体:没有什么能够比一个斜体字更戏剧性和微妙的突出一个词或短语。它特别适合于第三级的排版。

· 方向:把字母翻过来,倒置或在水平方向上翻转的任何其他方向都能立即吸引眼球,因为它们的位置与预期的不一样。这可以很好地用于第一级文本中的短词或短语。

· 颜色:给通常没有颜色的字母加上颜色,会产生特定的直接兴趣。这种效果可以在任何级别的文本中发挥作用,但应慎重考虑,以免造成可读性问题或混淆。

· 位置:如果将文本独立一个层放置于画布上,也可以建立层次结构。通常你会从上到下阅读(自然的层次结构),但是可以通过上面的一些技巧来改变。


3.数字项目中的层次结构

你在打印项目中所使用的所有技巧同样也适用于数字项目,除此以外,这里还有一些专属的技巧可供使用。数字化的排版层次需要包括在网站设计时创建HTML格式的考虑。


创造它

使用在线的数字形式发布项目时,请务必使用通用的规范,包括头部、正文和粗体样式。这些常用的样式定义中的每一个都属于HTML中的规范。

· 标题(title):定义了SEO抓取和用户将会关注的标题。

· 正文(body):定义文本中的正文文本。

· 标题(H1到H6):定义标题样式不同的层。H1通常是最大的和最重要的,向下一直到H6逐级递减。

 · 粗体(strong):定义强调更重要的文本。

· 斜体(em):用倾斜来定义和强调文本。


4.层次性和可用性

Hierarchy and Usability

Hierarchy and Usability

当涉及到移动应用程序时,你需要重新考虑视觉的层次,这个不同于印刷排版的层次结构和可用性层次的HTML。文本不仅要看起来好而且需要工作正常,它必须以这样一种方式来设计:用户知道如何处理它,并且它像预期的那样交互。

这种基于动作的排版包括一些关键的东西。文本的排版必须足够大,可以进行缩进、间隔,以便每个TAP项目都可以清楚地定义,并且可用元素具有某种可视定义(如按钮)。


创造他

要记住创建可用的字体层次时最关键的是分离式的元素,以便用户将能够单独提取这些信息而不会与页面的其他信息混淆。重要考虑因素包括:

· 空间:给每一个应该被触发或点击的元素充足的空间。考虑空间的大小和手指触摸所需的空间。如果排版国语接近,错误的元素被单击,用户可能会很受挫。

· 颜色:为可用性创建调色板。考虑使每一个词的意思是与主文本不同的颜色。

· 阴影:阴影是一个可以以某种方式按下的按钮的常用指示标志。

· 边界:考虑将边界添加到你希望用户与之交互的独立元素中。一定要把它们与背景分开。

· 动画:移动文本,虽然很难使用,但可以是一种快速的方法来帮助某些文本分吸引注意力。

· 方向:记得告诉用户在屏幕上需要完成哪些内容,从轻敲到滚动到调用到动作。


总结

变通和不同于其他设计的机会往往是在你的设计中,一些字体细节的层次关系甚至是你从来没有考虑它的东西。但是,考虑到排版如何以大的方式排列,可以改进总体设计。

使用排版层次强调影响和创建行动,用户可以看到并作出迅速的反应。记得在浏览和全面的理解作出决定以前,要充分的考虑到可读问题。




----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务