理想状况下,你想要大家先看到你非常重要的信息和你的下一个非常重要的信息。 你想让潜在顾客看到的副本将说服他们购买之前他们看到“目前购买”按钮。 你期望大家看到正确的信息在正确的时间,和一个方法控制你的作文。
成分流决定双眼的一个设计:看着第一,看着下,双眼停顿的地方,停留多久。
请注意:这是第六个帖子在一系列设计原则。 你可以在这里找到前五个系列的帖子
设计原则:视觉感知和完形的原则
设计原则:空间和图形-背景的关系
设计原则:通过对比和相似性连接和离别元素
设计原则:视觉重量和视觉方向
设计原则:优势、重点和层次结构
在本系列的文章我谈论视觉方向和我提到鲁道夫Arnheim的结构性。 你应该读那篇文章,但总的来讲,在一个矩形帆布画布的中心和四个角作为磁铁拉的双眼。 伴随这类自然焦点,它们之间有轴运行,你的双眼沿着他们从焦点到焦点。
Arnheim的结构性互联网不是唯一的模式表明,双眼自然怎么样穿过一篇作文。 古腾堡图、f模式布局和Z-pattern布局建议所有观众的双眼将和他们觉得设计的自然流动。
请注意:这类模式描述语言从左到右阅读。 为其他阅读方向调整。
古腾堡图。 (查询大版本)
古腾堡图:在这种模式的双眼一般清洗工从左上角到右下角,穿过Arnheim光学中心。 更少的关注被叫做休闲范围的其他角落。 由于双眼movesto右侧向下移动,右上角是一个强烈的休闲地区,左下角时主如果忽视了。
f模式布局:在这种模式的双眼从左上角开始,在右侧的页面之前一点点,整个页面重复运动。 一般模式遵循F字母的形状。
Z-pattern布局:双眼从左上角开始,行动吧。 在右上角向下移动,左斜之前第三向右移动。 整体此前字母Z的形状和重复模式,直到它到达右下角的页面。
我相信你已经看到了眼动跟踪研究和讨论上面的模式。 极少被提到的是什么这类模式描述的文字页面。 他们描述了大家的双眼穿过列的文本。
“f型”总是是结合搜索结果页面中提到。 那是为何? 这是由于搜索结果页面的文字页扫描以非常小的列表信息。 一个f模式是一个自然的方法来扫描这类页面。
阅读模式的文字和design-light页面一般遵循一个F或Z路径。 (查询大版本)
添加层次结构、方向、运动和步伐,流过你的设计不会遵循上面的模式。 消失的模式设计的存在。
他们仍然有用,由于你可以借助模式和双眼自然会降低到要紧信息的地方增加信息的视觉感受。 你可以借助这类自然模式,但能理解他们描述的文字页面。
观众的双眼将会以某种方法通过一篇作文无论你是不是控制运动。 你可以控制运动。
你可能已经看到了“讲故事”一词愈加多的出目前讨论优化设计和转换。 成分流可以帮你对你说的故事通过提供信息以正确的顺序。
流运动和方向,和领导的双眼从一个组合的一部分到另一个你想要移动的方向。 你创建流经视觉重量和视觉方向的结合。
元素的视觉重量(焦点)把双眼和成为休息的地方。 其他元素传递方向和移动你的双眼从一个点到另一个通过箭头等视觉线索和线条。
流从你开始主导元素,这应该是入口点进你的作文。 从那里你为双眼提供方向线索跟进你的设计。
最明显的方向性提示是一个箭头指向。 看着在一个方向上的图像是另一个强大而简单的方向提示。 别的人包含。
重复的元素
步伐
隐含的行动
斜线
手势的行
方向线
的角度来看
主题元素的
分级
在上面的列表中你会注意到线条特质。 显示的方向是线的主要特点之一。 线也可以用来切断朝一个方向运动的垂直运动。 当这所有发生的时候,他们充当障碍,阻止或逆转后的双眼。
通过上述项目创建方向和运动。 添加元素作为屏障改变方向移动。 创建开放的路径空空间,允许之间的简单运动,积极的设计元素。
你想要从微观层面双眼遵循一致的路径和任何你期望其他人采取行动。 比如,它是有意义的地方按钮搜索表单字段后,因为自然过程填写字段,然后单击按钮。 将按钮第一将你的访问者在一个方向,直到最后,当他们不能不将所有些方法回到开始。
成分流在搜索表单。 (查询大版本)
更有意义有箭头指向你想找人看看,而不是离得远远的那件事。 你创建流即便箭头点,但不是任何意义的流动达成的目的网站。
箭头应该你想让双眼看。 (查询大版本)
运动方向密切有关。 运动意味着意味着运动方向和方向。 假如你想让其他人看右侧,一种办法是在页面上有向右移动。 双眼会跟着它。
有几个种类的运动。
文字(物理)运动:发生在一些体育活动。
静态的运动:发生在双眼周围跳跃的P2P的层次结构。
的运动设计元素:发生在引导观众的双眼从一个点到另一个通过一篇作文。
动画可以用来创建文字页面上的运动。 创建静态运动优势、重点和层次结构。 当元素传递方向和运动焦点之间添加你创建的流。
方向线索我先首要条件出的同样的列表是用来显示运动通过一篇作文。
步伐可以帮助控制流的速度组成;它的运动。 有步伐的模式是由元素和它们之间的间隔,就像你的耳朵会跟随歌曲的步伐,你的双眼会跟着步伐创造了视觉。
模式和步伐就会存在多个元素添加到页面。 什么意味着两个结构。 这将是不管你干什么,所以,再一次,你应该掌握控制它。
通过重复的元素重复创建流动和步伐。 当双眼看到一个红色圆圈公告其他红色圆圈组成和寻求打造一个模式。 除去可以用重复交替和层次创造步伐。
重复通过可预见性:创建模式。
交替通过对比对:创建模式。
分级通过进步常规步骤:创建模式。
步伐是通过元素创建的双眼与它们之间的间隔。 改变或者改变模式。 添加有兴趣的变化模式。 强调事情的模式可以打破步伐和停顿的瞬间。
有三个主要种类的步伐:
常规的步伐:发生在元素之间的间隔是可预测的,或者类似的元素本身的大小和长度。 将按期重复元素将是一个例子。
流动的旋律:发生在有机元素或时间间隔。 这就产生了自然模式,唤起一种有机运动的感觉。 老虎和斑马条纹就是非常不错的例子。
进步的步伐:发生在形式或形状的顺序显示通过渐进的步骤。 一些元素或许会加大变化的特征,或者间隔可能走的变化。 这个逐步增加或降低序列创建运动。 一个颜色梯度是一个非常不错的例子。
一片花展品流动的步伐。 (查询大版本)
上面的任何种类的步伐可以用来创建运动和作曲的流。 你会选择哪一个取决于你的设计的细节:假如设计试图交流一致性,常规的步伐是最好,假如设计试图交流更自然和有机,流动的步伐或许会优先考虑。
进一步在本系列中,大家得到了更多的完形原则能够帮助大家看的设计原则。
优势和重点创建区域设计,拉的双眼。 相似度和对比度用于创建模式和步伐。
所有连接或显示的格式塔原则之间的共性元素将帮助引导的双眼从一个组中的元素。
统一的连通性使双眼通过连接元素的东西。 元素与一个一同的命好像在同一方向移动着双眼。 延续的原则是专门关于继续朝着一个方向。
让大家从一些网站看看截图,想想他们的设计步骤和行动,他们可能有哪些样的步伐。
正如我前面所提到的,这是我的建议。 你可以看看这类相同的截图和比我看到一个不一样的流动和步伐。 这非常不错。 更要紧的是对大家双方都既进行批判性考虑的设计大家看到比大家赞同大家的想法。
当我看一看Dorigati主页我的双眼飞速吸引到葡萄酒的英雄形象桶顶部的页面。 这不会花很久在这里从焦点像网站的logo和酒瓶的形象。
Dorigati的截图。 它的主页。 (查询大版本)
有一个强烈的暗示斜流之间的标志和瓶子,和你的双眼可能他们之间来回流动。 觉得怎么样迅速连接公司名字和网站提供的商品。
曲线底部的标志好像点下行致使你的双眼葡萄酒的名字被提出。 注意左侧的标题和葡萄酒的名字是相同的蓝色和像蓝色的标志。 颜色创建一个重复的步伐和流经所有三个项目。
色彩的步伐与黄金第三用标题页,左侧的装饰性的兴盛。 类似的颜色是用于日期。 虽然间隔可以取决于每一个条目文本的长度,这是相当可预见的和常规的步伐。
酒瓶也连接头与主要内容,创建一个垂直流过英雄形象,作为它的一座桥。 没酒瓶的形象需要更多的努力为你的双眼的水平线,创建运动障碍。
有一个强烈的横向流的顶部衣服感动地主页。 导航和文本两个铅水平你的双眼,让它比较容易扫描头左和右。
从衣服感动地网站的主页截图。 (查询大版本)
我的双眼总是先从“你决定”文本和随便地左右移动,可以标志,导航和剩下的文本标题。
注意“你决定结束时你的双眼也推倒。 有重复的矩形和橙色的形状,创建了一个垂直的步伐。 的形状”搭配的? ”按钮回荡在矩形”548票”形状和“见下面的详细情况”按钮的文本。 这个垂直流是由强大的垂直线,加大了与这类形状的左侧缘对齐它们之间的文本。
橙色颜色重复作为文本的标题,也进一步的页面截图(图中未显示)。 有遇见颜色重复在页面的顶部,你的双眼之前下来页面增加垂直流动。
的头让人很难置信的种类的主页也有一个横向流因为形状的线条和块文本。 光网格线还创建一个微妙的拉下来并创建一个常规的步伐水平整个页面。
从不可思议的种类网站的主页截图。 (查询大版本)
下面的头是一个网格的图像。 注意图像之间的排水沟(横向和纵向)为你的双眼通过提供一个通道。 他们帮你的双眼流从图像到图像的方向。 他们还创建一个常规的步伐在两个方向上。
截图的页脚让人很难置信的种类网站的主页。 (查询大版本)
在页脚文本分成两排,四列第三创建两个水平和垂直流动和步伐。 我觉得水平流比垂直,所以我的双眼总是左右超越上下移动,但存在于两个方向流动。
的爱奢侈网站活动页面是另一个设计,显示了水平和垂直流动。
从内部页截图的爱&华美的网站。 (查询大版本)
左列的粉红色吸引了我的双眼和创建垂直流过它的形状。 注意网站的名字是旋转,也创建了一个垂直流动。 菜单下的对比的颜色,它创建了一个强大的垂直线两见面。
本专栏的底部的文字重复,创建一个垂直的步伐在你读一个街区然后它下面的一个。 然而,水平线条的性质变化流水平和你的双眼向右移动。
背后的黑暗背景目前菜单项创建一个更强的横向流动,由于你的双眼是吸引到的对比。 三角它显示在右上角点向右。
在右侧,在主要内容,颜色和大小的日期创建一个常规的垂直通过重复的步伐。 截屏只显示两个,但他们继续进一步的页面。 粉红色的头条新闻工作要加大步伐重复创建的蓝色的日期。
每一个条目停止之间的水平线垂直流瞬间,叫你在每一个条目一会儿。 重复的步伐颜色的日期和标题在页面一旦你把你筹备穿过水平线,搬到另一个条目。
图像自然变化与每一个条目,但在这个截图指导你的双眼向左斜。
你看着有不少的控制,大家当他们浏览网站制作。 页面上的文字,graphic-light,游客的双眼可能是类似Z-pattern或f模式在整个页面。
然而,一旦你设计页面元素并添加图形,这类模式不再适用。 访问者的双眼会流,你创建运动和步伐。
考虑你交流信息的优先级。 想假如它会更有用,当看到在一个特定的顺序。 页面上的考虑,你想找人看第一,第二,第三。
然后创建视觉提示来引导他们通过页面的顺序你觉得最好的。 添加一行人,或创建一个通过调整各种元素。 重复的颜色或文本大小创建一个步伐的双眼。 现在移动物体的图像直接。
不要让它默认的模式来引导访问者的双眼。 创建的流过,引导他们我们的页面。
有最后一个话题我想与你推荐在本系列设计原则,这就是平衡。 我将讨论一般成分的平衡,然后带你历程四个不相同种类型的平衡(对称、不对称径向和马赛克)你可以创建。
网站题目网站建设原则：步伐和分流。步伐和分流。目前网址：
