创建不平衡的平衡:在网页设计中使用不对称设计

  不对称设计技术可以非常直观有趣和创建不同的焦点。下面是一些鼓舞人心的例子和关于如何使用不对称设计的技巧。


  不对称仅仅是缺乏对称性,但不对称并没有缺乏平衡与和谐。

  不对称和对称的设计都可以创造一种活力和紧张的感觉,但也某种意义上的和谐取决于使用的比例。虽然大多数人往往首先能想到的是对称性,因为这是一种 很常见的自然现象——想想达芬奇的维特鲁威人或动物的脸的样子;但不对称也是一种自然现象,只是不同的方式出现,例如人类往往会出现左或者右撇子居多。

  不对称设计的用途非常广泛。通常被用于创造出一种混乱或混淆但充满美感和艺术的技巧。不对称可以强调运动或行动,它是拥有最常用于创造出一种活力或屏幕上的焦点的巨大优势。一些网站如果没有正确或错误的使用不对称或对称设计,会导致网站的元素错乱杂混。

  不对称的设计使用


  什么样的项目适合于使用不对称设计?简单地说,几乎所有的都可以使用。

  在执行好的一个项目,添加了一些很大的对比和维度元素的时候,往往关键是结构,以便创建一个很好的平衡。如果你不想让你的页面有一个不平衡的感觉,那么你要特别注意安排元素、项目的匹配色调等等,这些平衡与否。在网页设计中, 大部分所说的对称术语,是指网站上的水平对称或者网站上出现滚动的不对称部分。但不对称的设计可以有平衡感或运动感。最常用的非对称设计技术中组合使用的 元素,也是具有对称性的。想想一个网站,例如一个350像素的侧边栏,你很快就能立即完成创建一个非对称的轮廓,因为网站的主体部分和侧边栏是不同的宽 度;还有照片经常发生偏离中心位置,创建一个元素的不对称。

  图像和文本


  创造出一种平衡的方法之一是使用不同的元素搭配,如图像和文字。这是众多设计师常用的一种技术。关键技巧就在于你如何把二者结合起来。往往只是需要一张图片和几句话,抒发情感的图片和文字(字体)必须是互补的,互相呼应的。

  这种技巧的关键要素是文本和图片之间的无缝合作,如何让文字和图片都是在表达同一个主题,说的是同样的一件事?如何将文字和图片紧紧的联系在一起?如何衡量文字和图片之间的着重点和平衡点?

  图像和空间


  空间是搭配了重要元素(图片或文字)来创建的重量感或运动感。在空荡荡的空间与丰满的页面的留白部分,看看物品在图像中指出方向,是否有一张脸向左 看?这创造了一个运动的感觉;用户在页面上由左到右,是否有一个山峰吗?那定向点将访问者的眼睛从下到上。另一种方法来创建不对称是隐藏部分的可视区域, 侧边栏和简单的色块就能做到这一点。 (通常在使用这个概念时,总体看是不对称的,但这样的设计使网站的每个部分都具有鲜明的对称感)

  颜色


  不对称也可以用颜色(色块)来表现。鲜明的对比色调——例如白色和黑色,坐落在色轮上对立的位置,可以感觉到失去平衡,甚至是混乱的。非对称的彩色 图案也是自然界中的一种,他们也有一种奇怪的平衡感。在许多物种中,雄性动物颜色图案将几乎完美对称的而雌性却很少。(人们认为这种是自然界发生的自然现 象,这是帮助“更有吸引力”的男性引走掠夺者,让掠夺者远离女性和后代)平衡的配色方案是基于色轮的原则,结合并充分对颜色的选择,在经典颜色组合之外, 创建少对称与和谐的颜色组合:背景色与在背景色上面的图片或文本组合对比;米色的背景和霓虹灯的紫色组合。这些都是比较少使用的组合配对。另一个常见的技 巧是创建一个产品(有很多种的颜色)和另一个(含有很少或没有颜色)的产品进行组合对比,形成不对称设计。

  结论

  不对称的设计可能会非常复杂繁琐但它也是非常的美丽。我喜欢不对称设计创造了几乎无法预料的平衡感和充满惊喜的感觉,不对称设计的美观已经完全的达到了平衡设计。最好的设计是保持了强大图片和文字之间的平衡性,在屏幕上创造一个独特的眼睛去追踪美。

  译文:codrops

  转载保留版权:觉唯前端 ,本文地址:http://www.jiawin.com/asymmetry-web-design/,转载请注明版权以及本文地址,谢谢。

时间: 2024-12-21 20:21:07

创建不平衡的平衡:在网页设计中使用不对称设计的相关文章

网页设计中尽量避免的设计元素有哪些

随着网页设计技术的不断更新与升级,一个又一个的创新技术接踵而至.尽管在网页设计中,跟风会让自己的设计显得毫无主见,但是有很多设计潮流确实值得追随,就如当下的响应式设计.扁平化设计.滚动视差等.但是部分设计师却顺从了一些极为"糟粕"的设计趋势,下面就列举了在网页设计中即将被淘汰的趋势. 1. 页面跳转 目前部分网站页面会有页面跳转的标识 - "下一张",甚至一页就能全部展现的内容,却要让用户跳转多次才能看完.类似这种跳转过于频繁的页面不仅操作繁琐.效率低下,也会浪费用

网页设计中尽量避免的设计元素都有哪些?

随着网页设计技术的不断更新与升级,一个又一个的创新技术接踵而至.尽管在网页设计中,跟风会让自己的设计显得毫无主见,但是有很多设计潮流确实值得追随,就如当下的响应式设计.扁平化设计.滚动视差等.但是部分设计师却顺从了一些极为"糟粕"的设计趋势,下面就列举了在网页设计中即将被淘汰的趋势. 1. 页面跳转 目前部分网站页面会有页面跳转的标识 - "下一张",甚至一页就能全部展现的内容,却要让用户跳转多次才能看完.类似这种跳转过于频繁的页面不仅操作繁琐.效率低下,也会浪费用

交互设计中响应式Web设计的优势和设计流程

在设计中经常遇到这几个问题: 1.想要网站兼容手机.平板电脑.pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好? 有没有办法能有效解决这些问题呢? 响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸.屏幕定向.系统平台等)以及用户行为(改变窗口大小等)进行相应的响应

浅议网页制作中的表单设计

设计|网页 "输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系."– <HTML权威指南> Web 应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致.输入区域的对齐方式,各自的标签(label),操作方式,以及周围的视觉元素都会或多或少影响用户的行为. 表单布局 考虑到用户完成表单填写的时间应当尽可能的短,并且收集的数据都是用户所熟悉的(比如姓名.地址.付费信息等),垂直对齐的标签和输入框可以说是最佳的.每对标

巧用不对称设计打造有趣的网站页面

  对称与不对称似乎是网页设计过程中,一直要做的取舍.对称的和谐,和不对称的差异,都是创造好设计的必须的手段.但是对称通常都用的不错,但是不对称并非人人都运用娴熟.今天的文章,我们简单聊聊网页设计中的不对称设计~ 在绝大多数情形下,不对称的设计元素能从其他的元素中脱颖而出.这些不对称的设计看起来更富有活力,如果其中包含有按钮.控件或者链接的话,它们通常能获得比其他部位更多的关注. 今天我们就一起来仔细看看网页设计师们是如何通过对比.留白和布局来打造令人难忘的不对称设计.不对称的设计并不全是外部轮

在网页设计中对称手法使用技巧

文章描述:在网页设计中,对称/不对称的有效运用可以达到非常与众不同的效果. 在设计中,对称创造了平衡,平衡了创造和谐.秩序和审美.自然界中对称无处不在,也许正是这种无处不在的状态让我们发现对称的美.形态学的基本原则之一就是对称,它是一套人类形为理论,形态学认为人类对看到和遇到的事物本能的产生出秩序和完整性. However, symmetry can get boring. Asymmetry is a break in symmetry, which when used effectively

网页设计中的对称与不对称

  小时候,很喜欢蝴蝶,感觉这是大自然最神奇的赋予,当它们双翼张开,总是禁不住欣赏它们那种美丽的优雅以及多姿的色彩. 更重要的是,这种天生的对称感,美得令人窒息. 对称风格 完形主义--一种人类行为理论,描述了人类排列视觉数据的思维结构--认为人类会很自然的把看到的东西按顺序排列. 换句话说,我们的眼睛倾向于捕捉那些组织有序.风格圆满的视觉元素.这也就是我们所谓的对称感.对称风格的物体有一种天生的平衡感.优雅感,对称在设计中能体现出一致.有序.稳定的特质.很多知名品牌都采用了对称式设计,虽然不是

网页设计译文:网页设计中数学的运用

"数学是美妙的."对于在数字和公式面前畏缩的人来说,这听起来也许是荒谬的.但是,从最小的贝壳到最大的漩涡星系,自然界和我们这个宇宙中大部分美丽的东西都呈现出数学特性. 其实,古代最伟大的哲学家之一亚里斯多德曾说过:"数学格外地展现了秩序.对称和极限,而这些是美的极致形式". 由于其美丽的天性, 数学一直以来都是艺术和建筑设计的一部分.但它至今还没有在网站设计中发挥作用.其原因可能是因为我们大多认为数学是创造性的对立面.相反,其实数学可以成为创作创意设计的工具.也就是

网页设计中的小技巧

工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩.又是要大气要有气氛.风格不明确很难把握.栏目这么多页面又这么长--突然觉得束手无策,脑袋里一片空白,没想法了,怎么办?下面简浅的归纳了几个快速让页面出彩的小技巧: 1.旋转法 – 将页面的主体或局部进行旋转 我们一般的页面版式都是方方正正,四平八稳,有点呆板.如果将局部或整体适当的旋转,打破稳定的构图,画面就会动感有趣一些. 对于上图,这种基调轻松活泼又恰好内容比较少的页面来说,主体整个旋转后,画面马上轻松活泼起来,看过现在这个画面,真是