设计流程 - 传达动感的布局和艺术作品

07年1月

什么是Visual Flow?

视觉流将观看者的视线通过文档以所有重要元素都突出显示的方式进行传送,并且没有任何东西会影响视觉或导致观看者失去对该片的感觉。 使用明显的流程元素(如箭头或数字)是Web设计人员使用流程的最常见方式,但还有其他类型的元素可用于指导读者沿特定路径移动。 本教程中的步骤将向您展示流程的好坏,并帮助您学习设计中的视觉流程词汇。

视觉流程可以通过多种方式实现:

以下图片将向您展示网页流程中的一些常见错误以及如何纠正它们。

07年2月

西文文本从左到右流动

不正确的流量。 图片由M Kyrnin提供

如果你长大了阅读西方语言,你习惯于认为文本应该从左向右移动。 所以,当眼睛在一行文字上移动时,它会从左向右移动。

在上图中,瀑布从右向左流动,文字在瀑布中流淌。 由于我们都知道瀑布掉下来,所以水流与文本流动的方向是断开的。 观看者的眼睛朝错误的方向移动以阅读文本。

03年7月

您的文字应该与图像一起流动

正确的流量。 图片由M Kyrnin提供

在这种情况下,图像已经颠倒过来,文本以与水相同的方向流动。 所有的元素都引导观众的眼睛看到水流和文本流。

04年7月

从左到右等于快

不正确的流量。 图片由M Kyrnin提供

这张照片中的马从右到左跑,但文字是英文,从左到右。 赛马方向的视觉冲击减慢了整个文档的速度,因为它与文字方向不同。

在西方文化中,因为我们的语言从左向右移动,所以我们将从左到右的视觉方向作为前进和快速,而从右到左更加落后和缓慢。 当您创建具有速度内涵的布局时,您应该记住这一点 - 并使图像与文本保持一致。

07年05月

不要强制观察者的眼睛放慢速度

正确的流量。 图片由M Kyrnin提供

当马和文本都走向相同的方向时,暗示的速度会增加。

06年7月

在Web照片中观看眼睛

不正确的流量。 图片由J Kyrnin提供

许多带照片的网站都犯了这个错误 - 他们在网页上放置了一个人的照片,而这个人正在远离内容。 这甚至可以在旧设计的About.com网站设计网站上看到。

正如你所看到的,我的照片放置在一些文字旁边。 但是我正在远离那段文字,我几乎把自己的背影转向了它。 如果你在一个小组中看到两个人之间的肢体语言,那么很容易假设我不喜欢我旁边的人(在这种情况下是文本块)。

许多眼动追踪研究表明,人们在网页上看到人脸。 而相关的研究表明,当观看图片时,人们会不自觉地追随眼睛,看看图片在看什么。 如果您网站上的照片远离浏览器的边缘,那么这就是您的客户的外观,然后点击后退按钮。

07年7月

任何照片中的眼睛都应该面对内容

正确的流量。 图片由J Kyrnin提供

在About.com的新设计中,照片更好一些。 现在我的眼睛看起来更向前,并且有一点我正在向左看 - 文本在哪里。

对于那个位置来说,更好的照片应该是我的肩膀也朝着文本倾斜。 但这是比第一张照片更好的解决方案。 而且,对于图像位于内容右侧和左侧的情况,这可能是一个很好的折衷方案。

请记住,虽然人脸图像引起了最多的关注,但动物照片也是如此。 例如,在此示例布局中,我的狗看起来很左,但图像正好对齐。 所以他们正在关注页面。 如果我改变了狗的方向,这样他们正在看屏幕的中心,这种布局会得到改善。