玉溪网站总体设计的原则是什么意思,设计原则

当有人登录你网站的页面时,你希望那个人做什么? 你想给他们看哪里? 你希望访问者注意什么信息和什么顺序? 理想情况下,我希望你先看你最重要的信息,然后看你次要的重要信息。 潜在客户在看到“立即购买”按钮之前,希望看到可以说服他们购买的复印件。 我想让人们在正确的时间看到正确的信息,一个方法是控制作品的走向。组合流决定了如何引导眼睛通过设计:首先看哪里,然后看哪里,眼睛停在哪里,要待多久?

当有人登录你网站的页面时,你希望那个人做什么? 你想给他们看哪里? 你希望访问者注意什么信息和什么顺序?

理想情况下,我希望你先看你最重要的信息,然后看你次要的重要信息。 潜在客户在看到“立即购买”按钮之前,希望看到可以说服他们购买的复印件。 我想让人们在正确的时间看到正确的信息,一个方法是控制作品的走向。

构图的流程决定了眼睛如何通过设计。 首先看哪里,然后看哪里,眼睛停在哪里,停留多长时间。

注意:这是一系列关于设计原则的文章中的第六篇。 这个系列的前五篇文章在这里。

设计原则:视觉感知与格式塔原则设计原则:空间与地图的关系设计原则:连接与分离要素设计原则:视觉权重与视觉方向设计原则:支配地位、焦点与层次结构

设计模式:在没有设计的情况下流动 #

本系列的几篇文章,我论述了视觉方向,以及Rudolph Arnheim的结构网络虽然需要阅读这篇文章了解详细情况,但整体的想法是,在长方形画布中,画布的中心和四个角落起到引人注目的磁铁的作用。 除了这些自然焦点之外,它们之间还有轴,你的眼睛会沿着它们从一个焦点移动到另一个焦点。

阿海姆的结构网络并不是唯一暗示眼睛在构图中自然工作的位置和方式的模式。 古腾堡图、f模式布局和z模式布局显示了观看者的眼睛是如何工作的,并假设设计是自然流动的。

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

设计原则:构图流畅与节奏

古腾堡图。 (看大照片)

古腾堡图:在这种模式下,眼睛通常从左上角扫到右下角,通过阿恩海姆的光学中心。 很少注意被称为休耕区的其他角落。 因为眼睛向下移动会向右移动,所以右上有很强的休息区域,左下经常被忽视。F 模式布局:在此模式下,眼睛从左上角向右移动,然后向下移动一点,在页面上重复移动。 一般模式遵循字母f的形式。Z 图案布局:眼睛从左上向右下运动。 在右上角,沿着对角线向下和向左移动,然后再次向右移动。 一般来说,根据字符z的形状,沿着页面重复模式,直到到达右下角。 我想你以前看过眼动跟踪研究和关于上述模型的讨论。 这些模式如何表现文本较多的页面,却很少被提及。 他们正在解释我们的眼睛是如何移动文本列的。

f模式经常与搜索结果页面结合使用。 这是为什么? 这是因为搜索结果页面是文本较多的页面,显示为要扫描的大小信息的列表。 f模式是扫描这些页面的自然方法。

设计原则:构图流畅与节奏

文本多的页面和设计少的页面上的阅读模式通常遵循f或z路径。 (看大照片)

添加层次、方向、运动和节奏后,设计过程将遵循上述模式。 设计存在的情况下,图案会消失。

利用这些模型,将重要的信息放在眼睛自然掉落的地方,可以提高信息的视觉强调度,因此仍然很方便。 虽然可以利用这些自然的模式,但是需要理解只记载了大量文本的页面。

无论是否控制了运动,观看者的眼睛都会以某种方式在构图中移动。 你还是少运动比较好。

组合流 #

你可能见过“讲故事”这个词频繁出现在关于优化设计和变换的讨论中。 组合流通过以正确的顺序呈现信息,有助于讲故事。

关于运动和方向,流向是将眼睛从构图的一部分引导到另一部分,然后向想要移动的方向移动。 你通过视觉重量和视觉方向的组合来创造潮流。

具有更大视觉重量(焦点)的元素会吸引眼球,成为休息场所。 其他元素通过视觉提示(如箭头或直线)指示方向,从而将眼睛从一个点移动到另一个点。

Flow从你的主导因素开始,它应该是你作品的切入点。 然后给眼睛提供方向提示,可以跟着你的设计走。

最明显的方向提示是指向某事物的箭头。 朝向某个方向的脸部图像是另一个强大而简单的方向提示。 除此之外,

的重复韵律表明,行为对角线手势线方向线的看法要素的主题层次关注的是上面列表中的线的功能。 显示方向是线的主要特征之一。 由于线与该运动垂直,因此也可以用于遮挡单向运动。 如果发生这种情况,它们可能会成为障碍,阻止或逆转眼睛遵循的路径。

根据上述项目创建方向和运动。 添加阻碍改变眼睛移动方向的因素。 在空白空间中创建开放路径,以便可以轻松地在活动设计元素之间移动。

流动与和谐 #

微观层面,眼睛应该遵循的路径与希望别人做的行动一致。 例如,将搜索按钮放在表单域后面是有意义的。 这是因为在字段中输入并单击按钮是一个自然的过程。 如果首先按下按钮,访问者会单向移动到最后,如果需要返回到最初,则会移动。

设计原则:构图流畅与节奏

在窗体中查找绑定流。 (看大照片)

不是远离那个东西,而是让箭头指向别人希望看到的东西更有意义。 即使箭头指向远方,也正在创建流程,但对于实现站点目标来说,这不是有意义的流程。

设计原则:构图流畅与节奏

箭头应该指向想用眼睛看的位置。 (看大照片)

运动 #

运动与方向密切相关。 运动意味着方向,方向意味着运动。 如果希望有人向右看,一个方法是将页面上的一些内容向右移动。 我会跟着那个。

有几种类型的运动。

字面(物理)运动:有某种身体活动时发生。静态运动:眼睛从层次中的一点跳到另一点时发生。构图运动:设计要素通过构图将看到的人的眼睛从一个点导向另一个点时发生。 可以使用动画在页面上创建文本移动。 支配地位、焦点和等级制度产生了静态的运动。 如果添加在焦点之间传递方向和运动的元素,则会创建组合流。

我以前提供的相同方向提示列表用于显示构图的运动。

节奏 #

节奏有助于控制作品中的流动节奏; 这是有规律的运动。 节奏模式由要素和它们的间隔构成,就像耳朵跟着歌曲的节奏一样,眼睛也跟着视觉上创造的节奏。

向页面添加多个元素时,会存在模式和节奏。 什么东西中的两个都意味着一个结构。 不管你做什么,它都在那里。 同样,你应该学会控制它。

用重复的要素创造流程和节奏。 如果眼睛看到红色的圆,就会注意到构图中的其他红色的圆,并尝试进行图案化。 除了重复之外,还可以使用交替和渐变来创造节奏。

重复:根据可预测性建立模式。交替:使用比较对象创建模式。渐变:按照规定的步骤创建模式。 节奏是由眼睛所看到的要素及其间隔组成的。 更改模式。 模式的变化增加了兴趣。 强调模式中的某种东西可以打破节奏,暂时停止进程。

有三种主要类型的节奏:

规则节奏:在元素之间的间隔是可预测的,或者元素本身的大小和长度相似时发生。 以一定的间隔配置重复要素就是一个例子。流动的节奏:元素或间隔为有机时发生。 这创造了能唤起有机运动感的自然图案。 老虎和斑马的条纹就是很好的例子。渐进节奏:表单或形状的顺序以渐进的步骤显示时发生。 的特性中,有阶梯状变化的,也有每个区间有阶梯状变化的。 这种逐渐增加或减少的顺序会产生运动。 颜色渐变就是一个很好的例子。 设计原则:构图流畅与节奏

一片花圃展现出流水的节奏。 (看大照片)

上述类型的节奏可以用来创造运动和组合的流程。 选择哪一个取决于设计的细节。 如果设计想要传达一致性的话,规律的节奏也许是最好的。如果设计想要传达更自然有机的东西,那么流动的节奏可能是优先的。

流动和格式塔 #

我们在这个系列中深入挖掘,格式塔的原则对我们所研究的设计原则贡献越大。

优势和焦点创造出吸引设计的领域。 相似性和对比被用来制造模式和节奏。

连接或显示元素之间共性的所有格式塔原则有助于将视线从组中的一个元素引导到另一个元素。

统一的连接性通过连接要素来引导眼睛。 拥有共同命运的要素似乎带着眼睛一起向同一方向移动。 持久性原则特别是关于继续朝着一个方向发展。

例子 #

让我们看看几个网站的截图。 让我们来想想他们的设计是如何流动和移动的,他们可能有怎样的节奏。

正如前面系列所说,这是我的想法。 看着这些相同的截图,可能会看到与我不同的过程和节奏。 没关系。 对我们双方来说,批判地思考我们所看到的设计比就我们的想法达成一致更重要。

当我看到

多里加蒂 #

dorigati的主页时,我的眼睛立刻被页面上部的木桶英雄形象所吸引。 马上从这里开始焦点。 例如,网站标志或右侧瓶子的图片。

设计原则:构图流畅与节奏

Dorigati.it主页的屏幕快照。 (看大照片)

标志和瓶子之间有强烈的隐含对角线流动,你的眼睛可能会在它们之间来回移动。 想想将公司名称与网站提供的产品联系起来的速度。

标志下面的曲线似乎指向下面,以展示的葡萄酒的名称为眼睛指引。 请注意左边的标题和酒的名字是一样的蓝色,和标志的蓝色很像。 颜色的重复创造了节奏,通晓所有三个项目。

再次运用颜色的节奏,页面下的金色标题和左侧装饰华丽。 日期使用相似的颜色。 虽然间隔会随每个条目中文本的长度而变化,但它是相当可预测和有规律的节奏。

酒瓶还被用作联系标题和主要内容,在英雄的形象中建立垂直流动,跨越它的桥梁。 如果没有瓶子的图像,眼睛需要更多的努力才能穿过阻碍移动的水平线。

穿着得体 #

在Dress Responsively主页的上部有很强的横向流动。 导航和文本都可以水平引导眼睛,轻松左右扫描标题。

设计原则:构图流畅与节奏

Dress Responsively网站主页的屏幕快照。 (看大照片)

我的眼睛从“你决定的”文本开始,容易移动到可以看到标志、导航、标题剩下的文本的左右。

请注意,在“你决定”的最后,你的眼睛也变低了。 矩形和橙色形状的重复创造了垂直的节奏。 “WTH? ”形状的按钮与矩形的“548票”形状和文本下的“查看详细信息”按钮呼应。 通过对齐这些形状的左端和左端之间的文本而创建的强垂直线会加强这种垂直方向的流动。

橙色在标题和页面下(未显示在屏幕快照中)作为文本重复。 当页面顶部的颜色重复时,眼睛会沿着页面向下移动,从而增加垂直方向的流量。

令人难以置信的类型 #

中记载的标题的不可思议类型的主页中,由于线的形状和文本的块,也有水平方向的流动。 轻微的网格线制作了微妙的下拉列表,在整个页面上制作了规则的节奏。

设计原则:构图流畅与节奏

Incredible Types网站主页的屏幕快照。 (看大照片)

标题下有图像网格。 注意图像之间的排水沟(水平和垂直)如何为眼睛的移动提供通道。 这些都有助于从一个形象着眼于另一个形象。 他们还在两个方向上创造了规律的节奏。

设计原则:构图流畅与节奏

Incredible Types网站主页脚注的屏幕快照。 (看大照片)

福斯特在里面, textisgroupedintotworowsandfourcolumnsonceagaincreatingbothhorizontalandverticalflowandrhythm.ithinkthehorizontalflowstrongeege Etendstomoveleftandrightmorethanupanddown,buttheflowexistsinbothdirections。

LOVE LUXE #

theeventspageontheloveluxesiteisanotherdesignthatshowsbothhorizontalandverticalflow

设计原则:构图流畅与节奏

screenshotfromaninteriorpageoftheloveluxewebsite.(viewlargeversion )

thepinkintheleftcolumndrawsmyeyeandcreatesverticalflowthroughitsshape.notehowthesitenameisrotatedsoittoocreatesaverticalfl ow menunexttoitcreatesastrongverticallinewherethetwomeet。

此栏底部的文字会重复,然后在读取区块之后再读取下方的区块时,会建立垂直节奏。 但是,线条的水平属性会将流向改为水平,使眼睛向右移动。

当前菜单项背后的暗背景,由于对比度引人注目,因此水平方向的流动变强。 右上角显示的三角形指向右侧。

在右侧,主要内容通过重复日期的颜色和大小创建了规则的垂直节奏。 屏幕快照只显示其中两个,但会继续显示在页面的下方。 粉红色的标题加强了通过重复蓝色日期而创造的节奏。

由于各条目之间的水平线会暂时阻止垂直流动,因此可以长时间停留在各条目上。 如果准备越过水平线移动到另一个条目,则日期和标题的重复颜色节奏会将该条目拖动到页面下方。

虽然图像会随着条目而变化,但此屏幕快照中的图像会将视线向下和向左倾斜。

浏览

总结 #

设计的网页时,你在很大程度上控制着他们的视线。 在文字多、图形轻的页面上,访问者的眼睛可能会沿着页面上下移动,如z或f模式。

但是,在设计页面元素并添加图形后,这些模式将不再适用。 你访问者的眼睛跟随你创造的潮流、运动和节奏。

考虑想传达的信息的优先顺序。 想想按照特定的顺序看那个是否更有用。 请想想希望别人首先看到页面上的哪个位置、第二个、第三个位置。

然后,创建视觉提示,并按照您认为最好的顺序浏览页面。 添加行以便有人跟随,或者通过对齐各种元素来创建行。 通过重复颜色或字符的大小,创建眼睛跟随的节奏。 呈现移动物体以引导眼睛的图像。

不要处于默认模式以吸引访问者的目光。 从页面创建绑定流,然后自己引导。

我想分享一下这个设计原则的系列中最后的主题。 那是平衡。 说明一般构图的平衡。 接下来,我们将讨论可以创建的四种不同类型的平衡:对称、不对称、放射状和马赛克。

Focus on the strength of the pithy专注极简的力量

PITHY CONTACT

一家没有销售的玉溪网站建设公司
我们特立独行

img/mail.png联系我们

PITHY CALL

如果您对我们的服务有什么疑问
欢迎来电咨询

电话
18868949445
img/top.svg
网站声明 | 隐私政策 | 网站地图 © 2018 MFweb. All rights reserved. Designed by玉溪网站制作玉溪网站设计公司玉溪网站建设公司