当我们在网站上放一些东西时，我们希望用户能做什么？哪些是希望用户看到的，我们自己又需要什么信息？访问者要注意到什么以及访问的顺序如何的？
在理想状态下，我们是希望用户可以第一时间看到最重要的信息，其次是第二重要的信息，我们还希望潜在的客户在看到说服他们购买的信息之后才能看到“立即购买”按钮，我们也希望用户可以在正确的时间点上看到正确的信息，要做到这一点的方法就是——控制组合元素的流动性。
如何通过设计来使得组合元素有流动性？其中首先就是在看过来时可以停留以及停留的时间。
设计模式：缺乏流动性的设计
上面有一篇文章我都在谈论视觉导向和Arnheim的结构层次，提到在一个矩形的画布的中心和一个正方形像磁铁一样吸引眼球。而随着视线的移动，这些焦点会随着一定的轴来帮助视线从一个焦点到下一个焦点的移动。
Arnheim的结构性网络表明如何自然地在哪里可以使眼睛自然通过一系列的组合移动读取一篇文章？当然这并不是唯一的模式。古腾堡图、F－模式布局和Z-布局都可以使观众的眼球如何按照设计的假设的方向自然移动。
注意：这些模式描述方向是从左到右，为了调整其他的读取方向。
（1）古腾堡图：在这种模式下眼睛通常是从左上角到右下角的流向，并且经过图片的中心部位，而较少被注意到的区域被称为休耕区域，由于眼睛的流动方向是从左上角到右下角，所以被称为强耕区域，对于左下角的部分通常会被忽视。
（2）F－模式布局：这种模式中眼睛从左上角开始，然后向右行信息移动一点点，跨行时重复这种移动模式，最后的大致会遵循一个字母F的形状。
（3）Z－模式布局：眼睛开始左上角，并向右移动，然后从右上角到左下角的向右移动，整体遵循一个字母Z的形状，直到右下角。
我敢肯定，你根据上面的模式讨论，应该已经感觉到眼球的运动轨迹了。对于页面中的文本部分的其他模式就很少被提及到了，这些模式都描述了我们眼球在文本上是如何移动的。
在搜索页面中就经常提及到F－模式的布局，这是为何？是因为搜索页面显示的信息是文字为主的信息列表的网页，在F-模式下来扫描这些页面是一种很自然的方式。
另外也可以通过来添加层次结构、方向、运动和节奏来影响模式结构，尽管并不遵循上面的模式，但是这种模式的设计依然不会消失。因为可以使用这种模式的优势将重要的信息，按照眼睛很自然的阅读方式向下，增加视觉突出的效果，所以它们仍然是有用的，但是也只适合以文本为主的页面。用户的会通过视线的移动形成某种方式，无论是否能控制，有时候还不如不控制。
流量组合
你可能已经看到了“讲故事”一词越来越多出现在讨论优化设计和转换中。流动组合可以帮助我们对故事提供正确的顺序。
流量的移动和方向会从跟随眼球移动方向从一个组合的一部分到另一个自己想要的方向移动。也可以通过视觉权重与视觉导向相结合。
较大的视觉权重元素周围应该有足够多可以使眼睛放松的空间，并通过添加箭头和线条对其他的元素给予一些引导，从一个地方到另一个点。流动组合中在文本的入口处就应该使用主要元素。从入口处我们的设计就应该为眼球的移动方向提供跟进的线索。
最明显的方向性提示是使用一个箭头指向的元素，或是一张脸看向一个方向的图像，它们都是易于为方向提供线索的，也还有其他的。
（1）元素重复
（2）韵律
（3）隐含的动作
（4）对角线
（5）手势
（6）方向线
（7）透视
（8）元素的客体
（9）层次
我们会发现上面列表线的功能，显示方向是线的主要特征之一，线也可以使用由垂直于该运动切断运动的一个方向。当发生这种情况，可以作为眼睛下的路径被屏蔽或停止或可能逆转。
通过上述提到的方向和运动，添加充当屏障改变视线移动方向的元素。例如下面的搜索框，比较自然的过程应该是先输入要搜索的字段，然后点击搜索按钮。如果将按钮放在访问者最先在一个方向上看到，那么直到输入文字最后，用户不得不将回到开始处。
对于箭头的意义是让用户看到而不是远离它，我们要使用箭头创建流向，但对于实现的目标网站的流动没有任何意义。
运动
方向对运动有密切的关系，运动意味着方向，而方向也意味着运动。如果希望有人向右边看，那么有一种方法就是有东西在页面上向右移动，此时眼睛会跟着它移动。
这里有几种类型的运动
（1）物理运动：指发生在物体身体上正在进行的运动。
（2）静态运动：指发生在从层次结构中指向四周指引元素。
（3）组成运动：当设计元素，引导观众的视线从一个点到另一个点时，通过组成发生。
动画可用于在页面上创建字面运动，以及通过重点元素和层次结构创建静态运动，并对联络节点之间进行填充，会给予方向和运动的元素创建并组成流。
韵律
节奏可以帮助控制流量的组成步伐，是一种图形化的运动。节奏的模式是从要素和它们之间的间隔时间所组成，就像耳朵听一首有节奏感的歌一样，我们的视线也会创建这种节奏感。
要想产生这种模式和节奏感就需要足够多的元素存在页面上，两个元素之间暗含着结构，无论怎样调试，它们都会在那里，因此我们还需要控制好元素的位置。
也可以通过创建重复的元素来形成这种流动性，当眼睛看到一个红色的圆圈时，就会注意到其他的类似红圈的成分，并试图建立一种模式。当然，除了重复，还可以使用交替和层次控制节奏。
（1）重复：创建一种可预测性的模式；
（2）交替：通过对比颜色的图案；
（3）渐变：通过常规步骤中的进程模式。
节奏是通过更改模式，使得视线中的元素与元素之间的间隔关系来产生联系，这样会图案变化增加趣味性，其中可以通过打破节奏或瞬间的停顿来起到强调作用的格局。
通常有三种主要类型的节奏：
（1）定期节奏：发生在元件之间的间隔是可预测的，或者元件本身在尺寸和长度相似，放置定期重复的元素将是一个例子。
（2）流畅的节奏：元素或元素之间是有机的，这将创建一个唤起自然形态有机运动的感觉。在老虎或斑马的条纹就是很好的例子。
（3）渐进式的节奏：发生的形式或形状的顺序是通过渐进的步骤所展示。元素的一些特性可能会踩到的变化，或者间隔可能会踩到变化，这种序列逐渐增加或减少产生运动。其中渐变色是一个很好的例子。
花圃中的花就呈现一种流畅的节奏
格式塔原则：流量
进一步沿着我们在这个系列就可以得到：格式塔原则有助于我们在寻找的设计原则。主导元素和焦点元素可以在设计中吸引我们的眼球，而相似性和对比度可以创建视觉模式和节奏。所有连接在显示格式塔原则相关共性的元素将会帮助引导我们的视线从一个到另一个组的转移。
连贯统一的元素会引导视线，具有共性的元素会出现在一个方向上，并视线会随之一起移动。延续就是一个非常实用的作为移动到下一个元素的方法。
案例
让我们从几个网站的截图来看看，想想他们的设计是如何流动和转移，而且他们可能有什么样的节奏。
正如我在本系列前面提到的，这只是我的看法。你可以看看这些相同的屏幕截图，看到一个不同的流量和节奏。这些都没有问题，更重要的是我们的批评性地思考，在设计中什么是值得肯定。
Dorigati
当我看Dorigati主页时，在页面的顶部葡萄酒桶的英雄形象很快吸引了我的眼球，从左到右，从网站的logo和酒瓶的形象，一扫而过不会花太长的时间。
还有就是，logo和瓶子之间有很强斜流的暗示，使得我们的眼睛可能在两者之间来回流动。另外想想如何迅速与该网站提供的产品连公司名称联系起来。
在logo下方的曲线是向下指向，引导我们的视线看向酒的名字。还有要注意在标题的左侧和酒的名字都使用相同的蓝色和类似于在logo上的蓝色。创建通过创建重复的颜色产生三处节奏感和流量。
色彩的节奏与黄金的标题下的页面和左侧装饰纹理重复使用，以及类似的颜色被用于日期。而间隔可以根据在每个条目的文本的长度而变化，这是完全可以预测的和有规律的节奏。
酒瓶还用于与主内容连接，形成通过主人公的图像的垂直流和作为穿过它的桥梁。如果没有酒瓶的图片，就需要用户的眼睛来跨越障碍，水平线条运动显得吃力。
Dress Responsively
在Dress Responsively的顶部有一处强烈的横向流动。导航和文本水平都导致你的眼睛很容易进行扫描左右横跨头。
我的视线倾向于开始与“你决定”的文字和logo从左向右的移动，并在导航栏容易查找其他的信息。
在“你决定”的最后提示用户，使得视线被拉低。有长方形橙色的形状重复着，并创建一个垂直的节奏。对于“WTH？”按钮的形状相呼应的为类似长方形“548votes”文字和下方的“查看详情”按钮。该垂直流由于受到形状的左边缘与它们之间的文本创建了强烈的垂直线。
重复的橙色作为在两个标题文本并且还进一步滚向下页（在截图未示出）。和在页面的顶部颜色是重复的，我们的视线会跟随它向下，而增大垂直流动的效果。
Incredible Types
Incredible Types由线的形状和文本的块组成，也是水平流动的，而且网格线创建一个微妙的拉下来的效果，还会在翻页中产生一定的节律。
下面是图像的网格，请注意图像之间的间隙（横向和纵向），为让视线足够的空间移动，通过一个通道（间隙），帮助用户从图像中选择任何一个方向，还在两个方向上建立有规律的节奏。
在页脚处，文本被分成两行和四列，再次创建水平和垂直的流动和节奏。我觉得水平流比垂直更强，所以我的视线往往会左右移动比向上和向下要多，但流动也仅仅存在于两个方向。
Love & Luxe
对于Love & Luxe这个网站，很显然是横向和纵向流动。
在左栏中的粉红色很吸引我的眼球，其形状创建的是垂直流动。另外请注意网站名称字母旋转效果，它也创建了一个垂直流。在色条与菜单旁边建立一个强大的垂直线，字母两两对齐。
在左栏中的粉红色底部重复此列，创造了垂直的节奏，然后下面的也是这样。但是，线条的横向性质改变流动到水平和移动你的眼睛到右侧。
还有导航栏选中后的黑色背景创建一个很强的横向流动效果，因为眼球会被强烈的对比度所吸引。其右上角的三角形是指向右边的显示内容。
在右侧的主要内容，日期的颜色和大小重复创建一个普通的垂直节奏。截屏只显示其中两个，当继续滚动到下一页，头条新闻是粉红色的，加强了重复蓝色日期的对比度和节奏感。
每个条目之间的水平线条会停止垂直流，让用户在每个条目停留时间久一些。在日期和标题重复颜色的节奏中提醒用户可以进一步向下滚动页面，当用户准备越过水平线时，就移动到了另一个入口。
总结
当用户正在访问我们设计的一个网页时，我们其实有很多控制权。在文本视觉效果很重时和页面中图片很轻时，访问者的眼睛可能遵循类似横跨上下翻页Z形图案或F-模式。
但是只要我们设计了页面元素，并添加图形，这些模式就已不再适用。访问者的视线会跟着这些元素有节奏的移动和运动。
想想我们传达信息的优先级，想想如果在一个特定的顺序看到它会更加有用，想想在那些页面中，我们最希望希望用户看的第一处、第二处、第三处。
然后通过我们认为最好的页面秩序来创建视觉线索引导用户，例如添加一行示意有人跟随或通过调整各种元素，通过控制重复颜色饿使用或文本大小来创建视线移动的节奏感。
不要把页面做成默认效果，而是通过创建一些元素组成流动的效果来引导用户，并吸引用户的眼球。
还有我想在本系列的设计原理与你们分享的最后一个话题，那就是平衡。我将会谈论一般的组成平衡，然后通过了四种不同类型的均衡来说明（对称，非对称，径向和马赛克）。
作者：Steven Bradley
https://www.smashingmagazine.com/2015/04/design-principles-compositional-flow-and-rhythm/
网友评论