2016-11-12 蓝蓝设计的小编
当有人登录到你的网站，你想让浏览者做什么？看哪里？注意到什么信息？而这些信息的顺序又是什么？
理想情况下，你想让人们先注意到最重要的信息，然后是次重要信息。你甚至想让你潜在客户确信他们看到的信息，并且想要通过点击“购买”按钮来购买内容。你也希望人们出现在正确的时间，看到合适的信息，那么你要做的就是控制好你设计中的视觉流
通过设计，视觉流决定和引导了视觉的方向：起先应该看哪儿，接下来应该注意什么，眼睛应该在哪停留，并且要停留多久。
设计模式：缺乏视觉流引导的设计
在之前的帖子中我讲过视觉重量并且我提到过Rudolph Arnheim的结构网。你应该细读一下，大概意思是说在矩形画布的中心和画布的四个角就像磁铁一样吸引着你的眼球。随着这些视觉焦点便会产生轴线，你的眼睛也会跟着它从一个焦点到另一个焦点。
Arnheim的结构网不是唯一的一种模式，视线会随着这个结构自然的移动。古腾堡的古腾堡图表（大家可以自行学习一下，小编不在这里做过多解释，平面设计里的逻辑，了解后对各位在做设计可能会有帮助）， F形布局模式和Z字形布局模式都会引导观者的视线随着设计模式自然移动。
注意：这些模式是根据我们通常阅读顺序从左到右总结出来的，同时也会为其它阅读方式做指导。
古腾堡图表：在这个模式中眼睛通常会从左上角到右下角浏览，经过 Arnheim结构的视觉中心。而缺少注意力的区域是一个被叫做缺乏活跃度的区域（视觉盲点）。所谓的阅读重力是由于视线趋向于从上到下，从左到右的眼动规律，左上角是第一视觉落脚点，右下角是最终视觉落脚点，所以右上角和左下角都是一个强烈的视觉盲点区域，大多数是容易被忽略的。
F形的布局模式：在这个模式中，眼睛从左上角开始，向画布的右边移去，然后在向下移动一点，重复之前的移动模式。而一般这个模式就像字母F的形状。
Z字形布局模式：眼睛从左上角向右移动。在视线移到右上角后沿着斜对角向下方走，然后视觉再次像右移动，直到页面的右下方。视觉移动的轨迹就像字母z。
我想你已经看到了眼球追踪研究和上面说的模式。这些模式很少有来描述文本为主的页面。它们只是说我们的眼睛通过文本的行列来移动。
文中提到的F模式通常是用在搜索结果的页面。为什么呢？因为在搜索结果页是以文字为主的页面，而且是很小的列表信息显示。 F模式是一种自然的方式来浏览这些页面。
以文字为主的页面和轻设计页面常常遵循F或者是Z字路径
添加层次结构，方向，运动与节奏，和视觉流贯穿在你的设计里，而不是照着上面的模式。这些模式是最终要隐藏在你存在的设计中。
尽管如此，它们依然是有用的。因为你可以利用这些模式和放置重要的信息在这些地方，使得眼睛自然的看到突出的视觉信息。你可以利用这些通常的模式，但是需要明白它们仅是描述以文字为主的页面。
无论你是否能控制你的视觉运动，观众的眼睛都将会以某种方式来浏览你的作品。当然你也可以可以控制你的浏览顺序。
创作流
你可能会在一些有关设计和优化组合的讨论中见到“讲故事”这个词，这个词越来越多出现在这写论谈中。创作流通过提供正确的信息顺序可以帮助你来讲你的故事。
创作流是讲运动和方向的，并且引导眼睛从作品的一个部分到你想看的另一部分移动。你可以通过视觉重量和视觉方向的组合来创建视觉流。
较大的视觉重量元素（焦点）吸引着眼球，并且变成了休息的地方。其他元素通过这些（如箭头和线）视觉提示传递着方向，让你的眼球从一个点到另一个点。
显眼的元素是创作流的开始，它应该是你作品的入口点。通过设计那是给眼睛浏览作品提供方向线索的地方。
最显眼的方向线索是一个箭头指向某个地方。看起来在一个方向上的图像是另一个强大和简单的方向线索。其它的包括：
重复的元素，
节奏韵律，
隐藏的动作，
对角线，
手势交互线，
方向线，
透视角度，
主题元素，
等级渐变。
你会注意到上面列出的有关线的特征。指示方向是线的主要特征之一。当然，线也可以通过垂直于另一个方向的动作来切断朝一个方向运动的动作。而这时它们充当阻碍，阻止了眼睛的浏览视线，甚至会扭转眼睛的浏览路径。
通过上述的方式来创建方向和运动方式。可以添加元素作为障碍物来改变眼睛的移动方向。在空旷的空间里创建开放的路径让你设计的元素轻松浏览。
和谐的设计流
即使在很小的细节上，你都想要路径和动作很好的匹配。例如，放置搜索按钮在线框之后似乎是有意义的，因为我们使用的自然过程是先填写字段，然后单机按钮。如果首先将按钮放置在你浏览方向上的第一个位置上，到最后你依然要返回到开始操作。
箭头指向的东西是你想让观者看的更有意义的事情而不是远离它。即使箭头指向相反，也可以创作视觉流，但不是说这种视觉流对获得最终的目标有意义。
箭头应该指向你想让眼睛看的地方。
运动
运动和方向密切相关。运动意味着必有方向，方向意味着运动。如果你想让别人看右边，一种方式就是让页面上的东西看起来像右移动，那么眼睛就会跟随它。
这里有一些运动的类型
字面意义上（物理）的运动：指发生在身体的活动
静态运动：眼睛在一定的结构内从一点到另一点跳跃移动
组合运动：发生在作品中的设计元素引导观者的眼睛从一点到另一点的视觉浏览。
动画可以用来创作页面上的物理运动。主导元素，焦点和层级来创建静态运动。你创作的作品视觉流中在焦点与焦点之间添加元素，这些元素来引导方向和运动规律。这些能表达运动规律的方向线索和我之前提到的列表是一样的。（见上面的列表）
节奏韵律
在作品中，节奏韵律可以控制浏览的步伐；还可以有规律的运动。节奏韵律模式是由元素本身和元素与元素之间的间隔组成的，就像你的耳朵会跟随歌曲的韵律移动，所以你的眼睛也会跟随被创作的视觉韵律节奏来移动。
在页面上添加多个元素，那么模式和节奏就会存在。任意两个元素都意味着一个结构。无论你做什么这个结构都会存在，然后你只需要学会控制它。
通过重复的元素重复创建视觉流和节奏韵律。在作品中，当眼睛看到一个红色的圆圈，那么它也会注意到其它的圆圈，并且会寻求建立一个模式。除了重复之外你可以使用交替重复和渐变等级来创建节奏与韵律。
重复：通过可预测性创建模式
交替模式：通过两个两个的交替重复创建模式
等级渐变：通过一序列的有规律的步骤来创建模式
节奏韵律是通过眼睛跟随的元素和元素之间的间隔创建出来的。改变任意一个都可以改变这个模式。变化的模式来增加兴趣。模式中强调的一些元素能够随时打破节奏和阻止视觉流。
三个基本的节奏韵律的类型：
基本的节奏韵律：发生在元素之间的间隔是可被预测的时候，或者是这类元素在大小和长度上是类似的时候。每隔一定的距离放置重复的元素就是一个例子。
流动的节奏：发生在元素之间有机的间隔。这就产生了自然的模式唤起了一种有机运动的感觉。斑马或者老虎身上的条纹就是很好的例子。
渐进的节奏：发生在表格或图形的顺序通过渐进的步骤展示。一些有特点的元素可能阶梯式的变化，或者是元素的间隔阶梯式的变化。通过渐增或者减少的顺序来创作运动。颜色的阶梯式渐变就是一个很好的例子。
田野里绽放的花朵中间就存在着一种视觉节奏韵律
上面任何一种节奏的类型都可以用来设计动感和组合流。而你选择哪一种类型的节奏韵律模式取决于你设计的细节。如果你的设计是想传达一致性，基本的节奏韵律可能是最好的选择；如果设计是想传达有关自然和有机运动的，那么选择第二个流动节奏模式可能会更好。
设计流和格式塔
下文中我们会看到格式塔原则有助于设计原则。
在设计中，主导和焦点区域会吸引着眼球。相似性和对比原则则是用来创建节奏韵律模式。所有
格式塔原则表明元素间的连接和共性都有助于引导眼球从一组中的一个元素看向另一个元素。统一的连通性会引导眼球关注有关连接测元素。朝着相同方向同命运的运动元素会让眼球跟着它们一起运动。延续原则是关于元素朝一个方向持续运动的特殊原则。
案例
让我们一起看一下一些网站的截屏，并且思考一下他们是怎么做设计流和动态，它们有什么样的节奏韵律。
还是我之前说的，这仅仅是我个人的观念。你可能看到过相同的屏幕截图，与我意见一样，又或者和我相比你看到的是不同的设计流和节奏韵律。没有问题。重要的是我们都在批判性的思考设计。
DORIGATI（意大利葡萄酒网站设计）
当我在浏览DORIGATI网站的首页时，我的眼球会迅速被页面上顶端的图片吸引。从顶端的图片到网站的焦点元素如logo和葡萄酒瓶的图片不会花费很长的时间。
在logo和瓶子之间存在着一个强烈的隐藏式的对角线视觉流，并且你的眼球可以来回在它们之间流动。这个网站可以做到迅速的将公司的名字和产品的连接。
logo下面的曲线似乎是要指出下面的信息，并引导眼球看到目前提供的葡萄酒名字。注意左边的标题和葡萄酒的名字都是相同的蓝色，并且和logo的蓝色相类似。重复的颜色形成了节奏韵律，并且链接了三个元素形成了视觉流。
页面上金色的标题下带有节奏的颜色（蓝色）再次被使用，相对左边来说更具装饰性。日期也使用相似的黄色。
虽然间隔是根据每个条目的文本长度来变化，但间隔依然是可预见的，并且形成节奏规律。葡萄酒瓶也是用于连接标题和主要内容，通过主要图片形成了一个垂直流，并且作为桥梁贯穿于中。如果没有葡萄酒瓶的图片，那么眼球想要穿过水平线制造的障碍物会更加困难。
DRESS RESPONSIVELY(服装网站）
在 Dress Responsively这个服装网站的首页有着强烈的水平视觉流。导航栏和文本内容都引导你的视觉水平移动，使得页面顶端从左像右浏览轻松容易。
我的视线首先会被“you decide”这个文本吸引，但后轻松地看向左右方。它可能是logo，导航栏和标题中剩下的文本内容。
注意在“you decide”文本的结尾，你的视线也可能转移到下方。重复地矩形形状和橘色的图形，以至于形成了一个垂直的节奏。标有“wth？”的按钮与“548 votes”和“see sedtails”按钮是相互呼应的。这个强烈的垂直视觉流是由于这些按钮和它们之间的文字内容都以左对齐的方式排列形成的。
橘色重复使用在标题和下面页面中的文字上（图中未显示）。在页面顶端上有重复的颜色，那么你的眼球就会跟随它想页面下方浏览，这就增强了垂直视觉流。
INCREDIBLE TYPES
NCREDIBLE TYPES网站首页的标头设计的是一个水平的视觉流，而这个视觉流取决于线条和文本块。在页面上，轻量的网格线创建了一个下拉式的视觉流，并且在水平方向上也形成了一个节奏规律。
标题下是一组网格图片。注意图片间水平和垂直方向上的空隙，而这个空隙为你浏览图片提供了通道。它们有助于你的眼睛从一个图片浏览到另一个图片上（水平和垂直两个方向上的图片）。同时在两个方向上形成了节奏规律。
在页脚处文本被分成两行四列，再次形成了两个方向上的视觉流和节奏规律。我认为水平方向的视觉流比垂直方向上的视觉流更强烈，导致我的视觉从左向右看多于从上往下看，但是两个方向的视觉流都是存在的。
在LOVE & LUXE网站的活动赛事中，它有垂直和水平两个方向的视觉流。
左侧的粉色列表吸引了我的眼睛，通过它的形状形成了垂直的视觉流。注意这个网站的名字是旋转排列的，以致于它也形成了一个垂直的视觉流。菜单的两种颜色形成了对比，一个点选中的标签与未点中的标签形成了强烈的垂直视线。
在本专栏的底部重复的文，当你一节一节读完后形成了一个垂直的规律。然而，眼睛在水平阅读浏览的时候自然又形成了水平的视觉流。
当下选中的菜单是用黑色的背景显示的，由于你的眼球被这种对比吸引所以形成了一个更为强烈的水平视觉流。因为在它右上角的那个小三角指向右边。
再右边，主要内容区域，颜色和日期的大小通过重复形成了一个有规律的垂直视觉流。截屏中只显示了两个，但是它们对下页来说仍然有可预示性。通过蓝色的日期创建显示，粉色的标题也加强了对规律作用。
在每两个项目中间的分割水平线让视觉随时停留一小会。在日期和标题上重复的颜色 形成的节奏规律会带你进入下一页，一旦你准备好通过这个水平线，那么你就会看到另外一个项目。
图片会随着每个条目的不同而改变，但是截屏这张图片会让你的视线看向左下方。
总结
经你设计后，你能让观者在浏览网页时什么时间看在哪。在以文字为主和轻图表的页面上，观者的眼球可能会遵循一些向Z字模式或者是F模式来浏览页面。
然而，你一旦设计页面上的元素并添加图表，那么那些模式不再适用。访问者的视觉会跟随你创建的视觉流和运动规律来浏览网页。
思考一下你要交流的信息优先级。想一下在特定顺序下看到这个信息是否更有用。考虑一下在这个页面上你想让用户首先注意什么地方，然后呢，最后呢？
接着创建视觉线索提示引导人们按照你认为最好的浏览页面顺序来浏览网站。你可以通过添加线或者让多个元素通过对齐的方式来引导人们浏览顺序。重复的颜色或者是文字的大小形成节奏规律来引导视觉流。目前运动的图片来指引眼球的方向。
不要让一个默有的模式来引导访问者的眼球。而是创建一个组合的视觉流引导他们自己浏览整个网页。
在本系列设计原则中还有最后一个问题我想与你们分享，那就是平衡。有关通常的组合平衡和带你了解四种不同类型的平衡（对称与非对称，径向和马赛克）。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
