详细解析平面版面设计构图的原则

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:站酷   作者:海空设计

关键词

你有没有打开网站,或拿起小册子或传单寻找一些信息,却感觉不可能找到你要找的东西?

你可能会看到一个混乱无序的信息混乱,你甚至不知道从哪里开始 ,因为你的眼睛没有看到设计的路径。

作为设计的消费者,我们都可能在某个时候体验过这种情况。但作为设计师,确保我们的设计布局不能出现这种情况,否则读者急于在浏览器中点击后退按钮,或者沮丧地丢弃传单。

那么好的设计的关键是什么?好的版面设计要从强大的构图和良好的流程开始。

构图:设计师的定义

详细解析平面版面设计构图的原则

构图指的是:你设计的所有元素被安排创建一个有凝聚力的整体。您可能添加到设计中的实际元素,如排版、照片或图形, 但是也会考虑“布局的整体视觉效果”(如白色或空白空间,对齐和边距)的“不可见”元素,或者您可能用来安排设计的任何框架(如网格,黄金比例或三分法则)。良好的构图应该以一种有意义的方式,在视觉上引导观者的思考。

作为流程的一个简单的例子,这张名片有一个明显的向下移动(箭头形状的帮助,从字面上指出),其信息从上到下按重要性排列。

详细解析平面版面设计构图的原则

这种构思,关于如何将布局拼凑在一起的思考和有意识的行为,是一种适用于许多不同类型的视觉艺术的技巧,像绘画、摄影。

现在让我们看看传统上用来创建有效的,视觉上吸引人的作品的一些工具和技术。

可视重量和平衡:创建一个清晰的层次结构

一个好的作品,不仅仅是一个整齐排列的形状、颜色和文本的结合体。每一个设计都有其目的,并向读者传递信息,而且一个精心策划的组合可以考虑设计中最重要的信息,并以一种合理的方式强化信息。通过其重要性来安排信息的过程通常被称为建立层次结构。没有层次结构(或不适当的层次)导致了一个混乱的设计,没有视觉流动,,我们不想看到这样的作品。我们来看看两个关键要素:明确的层级,焦点和平衡的组织:

01.选择一个焦点

一个联络点将人们吸引到您的设计中,并让他们有机会开始审视您的作品。如果观众只有几秒钟的时间浏览一下你的设计,你留下一个印象或者记住一些信息,那会是什么?这个重要元素应该是你的主要焦点,为了确保它是人们首先看到的东西,你需要找到一种方法来强调这件作品,并使其成为布局中最明显的部分。

详细解析平面版面设计构图的原则

该怎么做呢?通过视觉上的焦点来增加重量感。当设计元素具有视觉上的重量时,乍一看是最突出的。它在视觉上是“沉重的”,使得它在整个布局中体现出来了——你可以立刻知道它是重要的,它通过与外观相关的东西吸引你的注意力,通常与其余的设计形成对比。有哪些技术手段使设计版面上能体现视觉焦点重量感?有很多可供选择,包括但不限于:

• 尺寸

• 形状

• 颜色

• 质地

• 位置

我们来看一些例子:

把图片文字放大尺寸。版面设计上中最大的图片或者文字,可能是人们看到的第一件事。但是,有时仅靠大小还不足以使您的焦点可见; 确保你知道它是如何与设计的其余部分相互作用的。与下面的海报一样,在你的焦点周围作留白处理,这样常常有助于引导读者的眼睛。

详细解析平面版面设计构图的原则

吸引注意与不寻常的形状。以下广告在多个层面上是一个有趣的作品。它首先用一种不寻常的形状捕捉到你的眼睛,这就是吉他的轮廓。这种形状引导你的眼睛到吉他的“颈部”,“颈部”是由广告的正文形成的。所有这些设计选择 ——吉他的形状,士兵的照片,文本所讲述的故事 ——以一种视觉引人入胜的方式支撑整个版面设计的构成。

详细解析平面版面设计构图的原则

选择突出明亮的颜色。下面的网站设计将鲜明的霓虹绿色应用于号召性用语(“下载应用程序”按钮)。即使按钮不是页面上最大的对象,但是由于使用这种明亮颜色的缘故,它首先吸引了你的注意力。

详细解析平面版面设计构图的原则

 收藏