欢迎访问江门电脑培训-短期零基础速成学电脑!
语言选择: 繁體中文

平面设计教程

首页>专业知识>平面设计教程>平面设计的排版太生硬,没有层次感,学平面设计排版?

平面设计的排版太生硬,没有层次感,学平面设计排版?

当用户在看你设计的东西的时候,最重要的元素之一是类型。它需要清晰易读,并且应该引导用户完成目标,从最重要的元素到最不重要的元素。

简而言之,这里说的就是排版的层次结构,但要真正掌握字体艺术,你需要了解如何在整个设计中将字体分层体现,以实现最大的影响。江门平面设计培训讲的就是如何掌握排版层次结构并在每个项目中创建有效的字体。

什么是排版层次结构?

image.png

排版层次结构是视觉层次结构的另一种形式,它本身是整个设计项目中的子层次结构。排版层次结构呈现字母,以便最重要的词以最具影响力的方式显示,以便用户可以扫描文本以获取关键信息。

image.png


如果没有排版层次结构,设计中的每个字母、每个单词和每个句子看起来都一样。你能想象阅读所有东西都相同字体、大小和颜色的东西吗?你从哪里开始?你怎么知道什么最重要?

image.png

排版层次结构在元素之间形成对比。设计师通过使用字体、大小、粗细、大小写字母、粗体或斜体、方向和颜色来实现这一点。这些设计工具的组合用于创建属于不同层的类型。

排版的主要级别都是大字体。是标题和套牌——也称为“家具”——将读者吸引到设计中。这是设计中最大的类型(除非您使用排版艺术)。

排版的二级是可扫描信息的金块,可帮助读者与设计保持一致。这包括诸如副标题、标题、引述、信息图表和其他向主要文本级别添加信息的小文本块等元素。这些文本块的设计较大,但通常比初级排版中的字体小得多。

排版的第三级是您设计的主要文本。它通常是设计中最小的一些类型,但它需要足够大以供所有潜在用户完全阅读。字体在设计、间距和整体使用上应该简单一致。



其他级别的排版包括应用于第三级别的小影响区域的类型的效果。加粗、斜体、下划线和颜色等效果可以引起对主要文本特定区域的注意。这些效果在应用于与第三级使用的相同大小和字体的文本时效果最佳。效果被谨慎使用,并且仅按顺序使用几个单词。其他级别的示例包括带下划线的链接、用于影响的粗体字或用于强调的

斜体或颜色。

印刷项目中的层次结构

印刷项目中的视觉层次是严格的视觉层次。使用大小、颜色和其他效果使某些类型的部分显得更大和更重要,并相应地缩放是你真正需要做的才能获得良好的开端。

查看上面的分步示例,你可以清楚地看到不同级别的排版层次结构以及它如何使设计更易于阅读和在视觉上更具吸引力。通过在关键领域增加重点,你可以将相同的技术应用于任何设计项目。

创造它

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

字体选择:更有趣的字体可以显得更大,并且比视觉吸引力较小的字体更快吸引眼球。在使用新颖、脚本或精心设计的字体时,请注意可读性问题,并确保字体足够大。

尺寸:几乎不言而喻,但类型越大,眼睛就越快被它吸引。字体大小应与阅读文本的重要性顺序相关。

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

大写和小写字母:你听说过用所有大写字母发送电子邮件就像对某人大喊大叫。设计中的所有大写字母也是如此。小心使用。大写字母会显得更大并出现在最前面,而小写字母会显得更小并经常落入背景中。

粗体:粗体字是强调单个单词或短语的好点。它在第三级类型中特别有效。

斜体:与粗体相比,斜体字可以以不那么戏剧化和更微妙的方式突出显示单个单词或短语。它在第三级类型中特别有效。

方向:将字母侧放、倒置或任何其他水平方向都可以立即吸引眼球,因为它们的放置方式与预期不同。这对于初级文本中的短词或短语很有效。

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

放置:文本在画布上的位置也可以建立层次结构。通常,你是从上到下阅读的(自然层次结构),但可以通过使用上述某些技术来改变这种情况。

数字项目中的层次结构

你在印刷项目中使用的所有工具也适用于数字项目,但有一些附加功能。数字排版层次结构还必须在创建网页类型时考虑 HTML。这种额外的思维层次可确保您的视觉层次将转化为屏幕上的其他用户。

创造它

在处理将在线发布的项目时,请确保使用通用约定,包括标题、正文和粗体样式。这些常用的样式定义中的每一个都属于 HTML 中的标签。

Title(标题):定义网络爬虫和用户的文档标题。

正文(body):定义文档中的正文。

标题(h1 到 h6):定义不同层的标题样式。H1 通常是最大和最重要的,通过 H6 向下移动。您只需要使用任意数量的即可。

粗体(强):定义更重、更重要的文本。

斜体 (em):定义带有倾斜的文本以强调。

层次结构和可用性

当涉及到移动应用程序时,您需要考虑视觉排版层次结构、HTML 排版层次结构和排版层次结构中的可用性。文本不仅必须看起来不错并且可以正常工作,而且还必须以这样一种方式设计,即用户知道如何处理它并按预期进行交互。

这种基于动作的排版包括设计师的一些关键内容。类型必须足够大才能点击,间隔以便清楚地定义每个可点击的项目,并且可用元素具有某种视觉定义(例如按钮)。

创造它

在创建可用的排版层次结构时要记住的事情是将用户将与之交互的类型元素与他们不会交互的元素以及彼此分开。重要的考虑因素包括:

空间:为每个应该被触摸或点击的元素提供足够的空间。考虑空间的大小以及手指触摸它所需的空间大小。如果类型太接近以至于点击了错误的元素,用户很快就会感到沮丧。

颜色:为可用性创建调色板。考虑使每个用于触摸的单词的颜色与正文不同。

阴影:阴影是可以以某种方式按下的按钮的常见指示器。

边框:考虑为您希望用户与之交互的独立元素添加边框。确保它们与背景分开。(时尚的“幽灵按钮”就是一个很好的例子,如上面的航天器网站示例。)

动画:移动文本虽然难以使用,但可以快速帮助将注意力吸引到某些单词上。

方向:记住告诉用户在屏幕上做什么,从点击到滚动到号召性用语。


在线留言


用手机扫描二维码关闭
二维码