非对称的设计是我们在工作中经常遇到的重要概念之一,这种方法有趣而又耐人寻味,十分的吸引人。
这种方法使用起来可能是非常的棘手,这也是为什么有些设计师不选择非对称设计的原因,不过我们其实大可不必规避,因为非对称的设计,每个设计师都是可以做到的,只是需要多花些时间认真规划。
在开始之初,最先需要考虑的是结构和设计项目中对于对称和非对称的匹配关系的概念意识,如果打破常规的设计模式,并且分解成更小的设计组成部分,那么这里面就会包含各种不同类型的平衡关系。(想想有视差滚动的网站或在设计面板中的画布区域的图像)
想想为什么我们正在使用的这种非对称比较好?如果明确知道自己想要的视觉效果,将有助于确定如何通过技术手段来实现这种效果。另外非对称性设计是非常吸引用户注意力的,尽管有些不平衡,但是我们可以通过一些简单的手段使得更加自然。不过要说明的是,在画布上的东西应该相信自己直觉的,但是要确定是:看起来真的好,还只是一种自己的感觉。
在两者之间神奇的实现一种平衡,良好的非对称设计中是包括平衡的,使用这种设计方式会导致整体感有失平衡,这个时候就需要通过在一定的空间里面使用补偿元素,创造和运动的中心点,了解元素之间的视觉重量,加入焦点颜色和视觉引导线以及通过一些网格来创建这种平衡。
使用空间
非对称的设计是极简主义设计未来的一个趋势。使用这么大的空间设计,很容易平衡简单的对象元素或图像,特别是对于一个较大的白色或黑色背景。在设计中的留白和使用负空间,来保持元素之间的平衡事,应该使用足够的对比度。这将直接穿过用户的视线而达到设计的目的。
例如上面的网站“Ike Kligerman Barkley”,就采用对角线的平衡关系使得用户在图像和左上角的导航栏之间形成平衡关系,这种方式比较大胆,但是正是这种极简风格,导致用户很希望点击左上角的菜单栏以及相关链接。
强调运动
想象一下一个轮胎滚向山脚下,我们的脑海中立马就很形象的浮现这样的场景。因此,当我们在设计一种非对称设计时,也要考虑到其一定的运动规律。
1、视线会习惯性的对屏幕的左上角开始,并且横向移动的区域较大。
2、视线会遵循一定的方向提示,例如我们使用箭头来指向特定的方向,就会明显感觉到。
3、视线会随着屏幕中图片的内容指向,而保持一致性及指向同一个方向。
4、由于视线是从左到右的顺序,所以要想改变这种浏览模式就必须要有一个更加强有力的方向指向来指向另一个方向。
例如“Leen Heyne Fine Jewelry”就是使用运动来吸引眼球到特定的产品上。而几何的形状是将视线指向正确的方向,同时创造一种感觉:手环和戒指在屏幕上有很自然的滚动趋势,而这种方向行的指示又会影响到其他的元素以及指向下一步,例如导航栏和移动到下一页的箭头。
添加焦点颜色
对于非对称的彩色图案,通常是对比度和色彩上都有较高的饱和度和明度。想象一下黑色的背景上或是顶部有大量的白色,然后涂抹上一个色调鲜明的颜色。高对比度的色彩将会用来作为聚焦和视觉重量平衡的一个重要组成部分。
非对称的色彩组合,可以使用色轮来创建。选择的色彩一定要落在传统的非对称的彩色模式之上,想想看,有颜色就会产生影响,此时使用颜色来强调和突出非对称的轮廓以及其他元素,所以颜色也可以是非常好的设计元素,例如几何形状、排版以及作为下一步的联络节点,从而使得整体达到平衡背景的作用。
例如“HLK Agency”利用白色的文字并采取几乎对称的排版,让我们再看看下面蓝色的下划线和按钮,此时就产生了一个简单的焦点以及变成非对称,并于顶部的汉堡式菜单和logo相对应。
网格的使用
尽管有时候我们不会使用网格,但是这仍然是设计中很重要的一部分。使用网格来创建非对称性的设计,将会帮助我们实现元素组织之间的平衡关系。
当我们考虑到在网格上的每个元素时,就会一同考虑相关元素与之形成的关系。设计时就会明白他们以一定的水平或垂直的方向上存在着,就可能会感知到在画布中两者之间的视觉重量是否有相互抵消:从左到右,从上到下。
想一想当我们在网格的一端添加元素的时候就会在与之相对应的地方添加一个元素,与之相互抵消。而要建立很明显的非对称设计,那就考虑使用奇数列的网格,或者是在网格中一侧是另一侧视觉重量的一倍。
例如“BrightByte Studio”就是采用这种垂直的模式来保持一致,并且使对称元素和非对称元素之间相互混合。(我们看到网站上第一眼是左边两行左对齐的文字,这种对齐是创建元素之间平衡关系的基础,另外我们还会注意到顶部的logo和底部的导航栏也是与之左对齐的,整体上符合视线运动规律。)
创建重量
非对称设计的存在根本在于“重量”,因为我们首先会被“较重”的元素吸引。我们可以确定的是图片本身就带有一定的视觉重量。它可以是真实的图片,也可能是空白等。
通过一个焦点元素来平衡并突出较重的元素,而实现这种效果可以是多种多样的方式。当使用上面提到的方法之后,可以采用加权的方式判断哪种情况下效果最好,并进一步加强这种效果。
例如“Cranes of Cambridge”就使用了一个引人入胜的照片作为设计“权重”,另外是两个我们第一眼不会注意的两种元素:较轻的文字和图案相比于照片显然轻很多。另外我们可以从照片中人物的视线中看向右边文字(眼睛也是一种指示方向的隐含运动),而且导航栏也使用垂直的方式布局,帮助我们更快速回到屏幕内容区域。
结论
非对称可以是一种完美又和谐的设计科学,虽然近几年的发展趋势主要集中在大量的对称设计上,但是在不久之后相信还是会有很多的非对称中平衡设计的出现,因为它们在视觉上更加引人入胜的,并通过一些精妙的设计结构与用户直接进行沟通。
作者:Carrie Cousins
http://designshack.net/articles/layouts/asymmetrical-design-creating-beautiful-balanced-layouts/
网友评论