返回  

如何在设计项目中创建模式

2017/4/5 15:47:28 来源:深圳网站建设Clh

想想你的日常生活需要遵循多少种模式。从每天晚上醒来准备工作到每晚准备入睡。每天,我们的生活都充满了这些微小却又重复的元素用以帮助我们创造秩序和平静。在网页设计中,模式可以做同样的事情:这些重复的元素可以为你的设计项目带来秩序,并创造一种平静的感觉(或混乱),以此作为你网站设计的主题。

这才是模式本身缩具有的真正吸引力。通过遵循模式或一系列对象来帮助用户浏览以及了解网页设计的内容,并告诉用户如何与某些元素进行交互。设计人员可以通过多种方式创建模式,包括背景,对象,颜色,单词,面板或使用这些元素的组合。


1.什么是模式?

模式可以包括重复对象、单词、颜色或形状的任何形式。出于设计的目的,模式可以涉及任何元素,你可以在整体美学中看到一些关联或重复的元素。虽然许多人认为模式等同于顺序和对称,但并不总是如此。 模式可以应用于任何的组合,有时混乱是模式本身(是不是很难懂,没事,其实我也看不懂)。

模式应该是可以通过任何的感官来识别的。视觉模式通常比你所创建的模式更复杂和混乱。自然形态包括螺旋,波浪,裂缝和旋转。几乎任何纺织品或完美的图案都是为了使视觉和谐而创建的,即使基本形状来源于自然界。


2.使用背景

谈论模式时要注意的第一件事就是背景。网站设计背景的使用因壁纸(家庭和桌面用品)的流行而发展和兴起,小巧或微妙的重复模式是增加设计项目基础空间深度的流行方式。一些设计师也选择更大或更大胆的背景图案,尽管这并不常见。

那么创建一个有吸引力的背景图案的常见技术是什么?

· 简单:简单的背景图案往往是最有效的,通过添加深度,可以使用户实际上不去关注设计的这一方面以增强主要视觉和内容的关注度。最好的背景本身就是风景,只突出设计的主要部分。

· 标志:对于许多品牌,重复标志元素是常见的背景风格。同时,重复的商标元素可以帮助建立品牌关联。

· 中性调色板:颜色是背景设计中最常见的因素之一。而中性调色板绝对占主导地位。通过使用背景模糊(现在非常受欢迎),使颜色和形状模糊到中立点,使得对象和颜色紧密地融合在一起。

· 对称性:背景图案通常可以分为不同的形状。随着重复的元素,模式通常可以以任何不同的方式移动,标题,颠倒或改变,并且仍然具有相同的整体外观和感觉。

· 重复:重复对象在背景图案中也很受欢迎。这种简单的技术可以增加其他平面模式的深度。


3.通过分组对象

类似的形状和物体在近距离使用时看起来彼此几乎是相同的。虽然将对象分组的模式比较经常用于明显对具有相同形状和大小的对象进行分组,但这并不总是必需的。

在上图中,乔纳森·帕特森(Jonathan Patterson)的作品创建了一个明显的图案,其中包含9个相同形状的框,框中也包含相同大小的形状。这种模式是明显并且吸引人的。Dots Printhaus图像中的图案看起来好像使用得不太“完美”,但是同样明显的是,它也具有不同大小的一组相似的形状。

以上的案例都表明,对象可以以不同的方式进行分组,但仍然会产生模式感:

· 类似的形状;

· 类似尺寸的不同形状;

· 形状排列组合以创建对象;

· 通过线或其他元素连接的形状;

· 形状组成的节点或收尾相似。


4.通过重复颜色

通过使用颜色主题同样可以建立模式。这包括相同颜色的对象或元素,甚至使用具有类似颜色“感觉”的元素,例如饱和度,亮度或色相。颜色模式通常用于告诉用户应该如何处理设计。例如,在网站设计中,所有可点击的按钮都是单一的颜色。这样可以在美观和用户行为(即你点击红色的一切)中创造出一种模式。

在上述Brand Aid Design网页设计的事例中,颜色以明显不同的方式被使用。Brand Aid Design使用颜色来区分元素,并创建具有不同形状和大小的图标的图案。Ro and Co的网站设计在整个网站上为较小的图像使用背景颜色和相同的色调。这种颜色连接将每个较小的图像与整体设计相结合,其形状没有对称性,而且几乎没有明显的区别。

使用颜色创建模式,你可以参考以下几点:

· 建立对象之间的关联;

· 创建一个能够轻松了解如何使用设计的感觉;

· 设置视觉主调

· 添加一个不存在的模式;

· 将用户从一个对象吸引到下一个对象。


5.重复词

重复单词可以创建视觉或听觉模式。通过一遍一遍地看到相同的单词,你会开始将其关联到设计或主要的内容。例如,Casper Sleep的网站设计中几乎每隔20个词就出现两次“Sleep”一词,并使用品牌加以点缀。

Bay Street Biergarten的网站设计同样也使用了类似上面的模式,他做到了几乎让你想大声读出口号的网页设计。通过重复熊的形象以及与啤酒杯上单词眼镜形象的连接,以及“工艺比尔”的字都在重复同一个视觉主体,设计中的每一个元素都在说啤酒。

当然,你还可以用其他方式使用单词创建模式:

· 重复单词或短语;

· 使用有相似外观的词(大量相同的字母);

· 单词缩表达的和图像所表达的意思需要尽可能一致;

· 多个词具有相同的含义;

· 长度相近的词。


6.相似尺寸的面板

诸如像卡片式设计项目或视差滚动的网站设计已经让“块”在设计项目中创造了自己的模式。从一组卡到Pinterest启发的瓦片滚动“屏幕”,面板组为用户创建了明显的图案。这些面板可以建立对象之间的差异和关联,并让用户了解他们所看到的信息的变化。

这些面板可以是以任何的形状和尺寸实现的,垂直或水平?是否需要具有不同颜色?这些没有局限。 10 Past Ten 的网站设计在色差和产品定位的视差框架中建立了不同的面板,因此用户可以将每个不同的想法明确的区分开来。Craftsman Ave的网页设计则采用稍微有些不同的方法,其设计具通过使用大面板,然后在其中分割出具有相同属性的小面板,以图案交替地模式一一呈现内容。

通过使用面板,你可以在你的网页设计中实现以下功能:

· 像元素一样作为链接入口;

· 设置场景;

· 创建一个信息流;

· 使用多个图像以建立优势;

· 通过视觉创建一个故事。


总结

模式可以通过多种方式设计,以应用于不同的场景和产生不同的影响。你应该在你的网页设计项目中创建符合你所需的模式。比如,对称组合可以创建设计整体平静的感觉,而相反,随机配对的元素可以让用户感受到破坏性和兴奋性。

网站设计的过程中,不要以为你必须只坚持一种模式。混合和匹配不同类型的模式在不同的位置其影响也是不同的。同一项目的不同部分可能包括不同类型的模式(这是完全可以接受的)。



----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务