当有人土地你网站的页面上你想要那个人做什么? 你想让他们看在哪里? 什么信息你想让你的访客注意和以什么顺序?

理想情况下,你想要人们先看到你重要的信息和你的下一个重要的信息。 你想让潜在客户看到的副本将说服他们购买之前他们看到“现在购买”按钮。 您希望人们看到正确的信息在正确的时间,和一个办法 控制你的作文 。

成分流决定眼睛的一个设计:看起来第一,看起来下,眼睛停顿的地方,停留多长时间。

请注意 :这是第六个帖子在一系列设计原则。 你可以在这里找到前五个系列的帖子:

• 设计原则:视觉感知和完形的原则
• 设计原则:空间和图形-背景的关系
• 设计原则:通过对比和相似性连接和分离元素
• 设计原则:视觉重量和视觉方向
• 设计原则:优势、重点和层次结构

设计模式:流没有设计

在本系列的文章 我谈论视觉方向 和我提到鲁道夫Arnheim的结构性。 你应该读那篇文章,但总的来说,在一个矩形帆布画布的中心和四个角作为磁铁拉的眼睛。 随着这些自然焦点,它们之间有轴运行,你的眼睛沿着他们从焦点到焦点。

Arnheim的结构性网络不是唯一的模式表明,眼睛自然如何穿过一篇作文。 古腾堡图、f模式布局和Z-pattern布局建议所有观众的眼睛将和他们认为设计的自然流动。

请注意 :这些模式描述语言从左到右阅读。 为其他阅读方向调整。

古腾堡图。 ( 查看大版本 )

• 古腾堡图 :在这种模式的眼睛一般清洁工从左上角到右下角,穿过Arnheim光学中心。 更少的关注被称为休闲领域的其他角落。 因为眼睛movesto右边向下移动,右上角是一个强烈的休闲区域,左下角时主要是忽略了。
• f模式布局 :在这种模式的眼睛从左上角开始,在右边的页面之前一点点,整个页面重复运动。 一般模式遵循F字母的形状。
• Z-pattern布局 :眼睛从左上角开始,行动吧。 在右上角向下移动,左斜之前再次向右移动。 整体此前字母Z的形状和重复模式,直到它到达右下角的页面。

我相信你已经看到了眼动跟踪研究和讨论上面的模式。 很少被提到的是什么 这些模式描述的文字页面 。 他们描述了我们的眼睛穿过列的文本。

“f型”往往是结合搜索结果页面中提到。 那是为什么? 这是因为搜索结果页面的文字页扫描以很小的列表信息。 一个f模式是一个自然的方式来扫描这些页面。

阅读模式的文字和design-light页面通常遵循一个F或Z路径。 ( 查看大版本 )

添加层次结构、方向、运动和节奏,流过你的设计不会遵循上面的模式。 消失的模式设计的存在。

他们仍然有用,因为你可以利用模式和眼睛自然会下降到重要信息的地方增加信息的视觉感受。 你可以利用这些自然模式,但能理解他们描述的文字页面。

观众的眼睛将会以某种方式通过一篇作文无论你是否控制运动。 你不妨控制运动。

的流

你可能已经看到了“讲故事”一词越来越多的出现在讨论优化设计和转换。 成分流可以帮助你告诉你的故事通过提供信息以正确的顺序。

流运动和方向,和领导的眼睛从一个组合的一部分到另一个你想要移动的方向。 您创建流经视觉重量和视觉方向的结合。

元素的视觉重量(焦点)把眼睛和成为休息的地方。 其他元素传递方向和移动你的眼睛从一个点到另一个通过箭头等视觉线索和线条。

流从你开始主导元素,这应该是入口点进你的作文。 从那里你为眼睛提供方向线索跟进您的设计。

明显的方向性提示是一个箭头指向。 看起来在一个方向上的图像是另一个强大而简单的方向提示。 其他人包括。

• 重复的元素
• 节奏
• 隐含的行动
• 斜线
• 手势的行
• 方向线
• 的角度来看
• 主题元素的
• 分级

在上面的列表中你会注意到线条特性。 显示的方向是线的主要特征之一。 线也可以用来切断朝一个方向运动的垂直运动。 当这一切发生的时候,他们充当障碍,阻止或逆转后的眼睛。

通过上述项目创建方向和运动。 添加元素作为屏障改变方向移动。 创建开放的路径空空间,允许之间的简单运动,积极的设计元素。

流和和谐

你想要从微观层面眼睛遵循一致的路径和任何你希望别人采取行动。 例如,它是有意义的地方按钮搜索表单字段后,由于自然过程填写字段,然后单击按钮。 将按钮首先将你的访问者在一个方向,直到接下来,当他们不得不将所有的方式回到开始。

成分流在搜索表单。 ( 查看大版本 )

更有意义有箭头指向你想找人看看,而不是远离那件事。 你创建流即使箭头点,但不是任何意义的流动实现的目标网站。

箭头应该你想让眼睛看。 ( 查看大版本 )

运动

运动方向密切相关。 运动意味着意味着运动方向和方向。 如果你想让别人看右边,一种方法是在页面上有向右移动。 眼睛会跟着它。

有几种类型的运动。

• 文字(物理)运动 :发生在一些体育活动。
• 静态的运动 :发生在眼睛周围跳跃的点对点的层次结构。
• 的运动 设计元素:发生在引导观众的眼睛从一个点到另一个通过一篇作文。

动画可以用来创建文字页面上的运动。 创建静态运动优势、重点和层次结构。 当元素传递方向和运动焦点之间添加你创建的流。

方向线索我先前提出的同样的列表是用来显示运动通过一篇作文。

节奏

节奏可以帮助控制流的速度组成;它的运动。 有节奏的模式是由元素和它们之间的间隔,就像你的耳朵会跟随歌曲的节奏,你的眼睛会跟着节奏创造了视觉。

模式和节奏就会存在多个元素添加到页面。 什么意味着两个结构。 这将是不管你做什么,所以,再一次,你应该学会控制它。

通过重复的元素重复创建流动和节奏。 当眼睛看到一个红色圆圈通知其他红色圆圈组成和寻求建立一个模式。 除了可以使用重复交替和层次创造节奏。

• 重复 通过可预见性:创建模式。
• 交替 通过对比对:创建模式。
• 分级 通过发展常规步骤:创建模式。

节奏是通过元素创建的眼睛以及它们之间的间隔。 改变或者改变模式。 添加感兴趣的变化模式。 强调事情的模式可以打破节奏和停顿的瞬间。

有三个主要类型的节奏:

• 常规的节奏 :发生在元素之间的间隔是可预测的,或者类似的元素本身的大小和长度。 将定期重复元素将是一个例子。
• 流动的旋律 :发生在有机元素或时间间隔。 这就产生了自然模式,唤起一种有机运动的感觉。 老虎和斑马条纹就是很好的例子。
• 进步的节奏 :发生在形式或形状的顺序显示通过渐进的步骤。 一些元素可能会加强变化的特点,或者间隔可能走的变化。 这个逐步增加或减少序列创建运动。 一个颜色梯度是一个很好的例子。

上面的任何类型的节奏可以用来创建运动和作曲的流。 你会选择哪一个取决于你的设计的细节:如果设计试图沟通一致性,常规的节奏是好的办法,如果设计试图沟通更自然和有机,流动的节奏可能会优先考虑。

流和完形

进一步在本系列中,我们得到了更多的完形原则有助于我们看的设计原则。

优势和重点创建地区设计,拉的眼睛。 相似度和对比度用于创建模式和节奏。

所有连接或显示的格式塔原则之间的共性元素将帮助引导的眼睛从一个组中的元素。

统一的连通性使眼睛通过连接元素的东西。 元素与一个共同的命运似乎在同一方向移动着眼睛。 延续的原则是专门关于继续朝着一个方向。

例子

让我们从一些网站看看截图,想想他们的设计流程和行动,他们可能有什么样的节奏。

正如我前面所提到的,这是我的意见。 你可以看看这些相同的截图和比我看到一个不同的流动和节奏。 这很好。 更重要的是对我们双方都既进行批判性思考的设计我们看到比我们同意我们的想法。

DORIGATI

当我看一看 Dorigati主页 我的眼睛迅速吸引到葡萄酒的英雄形象桶顶部的页面。 这不会花很长时间在这里从焦点像网站的logo和酒瓶的形象。

Dorigati的截图。 它的主页。 ( 查看大版本 )

有一个强烈的暗示斜流之间的标志和瓶子,和你的眼睛可能他们之间来回流动。 认为如何快速连接公司名称和网站提供的产品。

曲线底部的标志似乎点下行导致你的眼睛葡萄酒的名称被提出。 注意左边的标题和葡萄酒的名称是相同的蓝色和类似于蓝色的标志。 颜色创建一个重复的节奏和流经所有三个项目。

色彩的节奏与黄金再次使用标题页,左边的装饰性的繁荣。 类似的颜色是用于日期。 虽然间隔可以取决于每个条目文本的长度,这是相当可预见的和常规的节奏。

酒瓶也连接头与主要内容,创建一个垂直流过英雄形象,作为它的一座桥。 没有酒瓶的形象需要更多的努力为你的眼睛的水平线,创建运动障碍。

衣服感动地

有一个强烈的横向流的顶部 衣服感动地主页 。 导航和文本两个铅水平你的眼睛,让它很容易扫描头左和右。

从衣服感动地网站的主页截图。 ( 查看大版本 )

我的眼睛往往先从“你决定”文本和轻易地左右移动,可以标志,导航和剩下的文本标题。

注意“你决定结束时你的眼睛也推倒。 有重复的矩形和橙色的形状,创建了一个垂直的节奏。 的形状”搭配的? ”按钮回荡在矩形”548票”形状和“见下面的详细信息”按钮的文本。 这个垂直流是由强大的垂直线,加强了与这些形状的左边缘对齐它们之间的文本。

橙色颜色重复作为文本的标题,也进一步的页面截图(图中未显示)。 有遇到颜色重复在页面的顶部,你的眼睛之前下来页面增加垂直流动。

令人难以置信的类型

的头 令人难以置信的类型的主页 也有一个横向流由于形状的线条和块文本。 光网格线还创建一个微妙的拉下来并创建一个常规的节奏水平整个页面。

从不可思议的类型网站的主页截图。 ( 查看大版本 )

下面的头是一个网格的图像。 注意图像之间的排水沟(横向和纵向)为你的眼睛通过提供一个通道。 他们帮助你的眼睛流从图像到图像的方向。 他们还创建一个常规的节奏在两个方向上。

截图的页脚令人难以置信的类型网站的主页。 ( 查看大版本 )

在页脚文本分成两排,四列再次创建两个水平和垂直流动和节奏。 我认为水平流比垂直,所以我的眼睛往往左右超过上下移动,但存在于两个方向流动。

爱情和奢华

的 爱奢侈网站活动页面 是另一个设计,显示了水平和垂直流动。

从内部页截图的爱&华美的网站。 ( 查看大版本 )

左列的粉红色吸引了我的眼睛和创建垂直流过它的形状。 注意网站的名字是旋转,也创建了一个垂直流动。 菜单下的对比的颜色,它创建了一个强大的垂直线两见面。

本专栏的底部的文字重复,创建一个垂直的节奏在你读一个街区然后它下面的一个。 然而,水平线条的性质变化流水平和你的眼睛向右移动。

背后的黑暗背景当前菜单项创建一个更强的横向流动,因为你的眼睛是吸引到的对比。 三角它显示在右上角点向右。

在右边,在主要内容,颜色和大小的日期创建一个常规的垂直通过重复的节奏。 截屏只显示两个,但是他们继续进一步的页面。 粉红色的头条新闻工作要加强节奏重复创建的蓝色的日期。

每个条目停止之间的水平线垂直流瞬间,让你在每个条目一会儿。 重复的节奏颜色的日期和标题在页面一旦你把你准备穿过水平线,搬到另一个条目。

图像自然变化与每个条目,但在这个截图指导你的眼睛向左斜。

总结

你看起来有很多的控制,人们当他们浏览网页设计。 页面上的文字,graphic-light,游客的眼睛可能是类似Z-pattern或f模式在整个页面。

然而,一旦你设计页面元素并添加图形,这些模式不再适用。 访问者的眼睛会流,您创建运动和节奏。

思考你沟通信息的优先级。 想如果它会更有用,当看到在一个特定的顺序。 页面上的思考,你想找人看第一,第二,第三。

然后创建视觉提示来引导他们通过页面的顺序你认为好的办法的。 添加一行人,或创建一个通过调整各种元素。 重复的颜色或文本大小创建一个节奏的眼睛。 目前移动物体的图像直接。

不要让它默认的模式来引导访问者的眼睛。 创建的流过,引导他们自己的页面。

有接下来一个话题我想与你分享在本系列设计原则,这就是平衡。 我将讨论一般成分的平衡,然后带您经历四个不同类型的平衡(对称、不对称径向和马赛克)您可以创建。

本文翻译来自网络，翻译水平有限，请理解！转载请标明大连网站建设公司 www.xtwseo.cn