不对称的设计:创造完美的平衡格局

非对称的设计是我们在工作中经常遇到的重要概念之一,这种方法有趣而又耐人寻味,十分的吸引人。



这种方法使用起来可能是非常的棘手,这也是为什么有些设计师不选择非对称设计的原因,不过我们其实大可不必规避,因为非对称的设计,每个设计师都是可以做到的,只是需要多花些时间认真规划。

在开始之初,最先需要考虑的是结构和设计项目中对于对称和非对称的匹配关系的概念意识,如果打破常规的设计模式,并且分解成更小的设计组成部分,那么这里面就会包含各种不同类型的平衡关系。(想想有视差滚动的网站或在设计面板中的画布区域的图像)




想想为什么我们正在使用的这种非对称比较好?如果明确知道自己想要的视觉效果,将有助于确定如何通过技术手段来实现这种效果。另外非对称性设计是非常吸引用户注意力的,尽管有些不平衡,但是我们可以通过一些简单的手段使得更加自然。不过要说明的是,在画布上的东西应该相信自己直觉的,但是要确定是:看起来真的好,还只是一种自己的感觉。

在两者之间神奇的实现一种平衡,良好的非对称设计中是包括平衡的,使用这种设计方式会导致整体感有失平衡,这个时候就需要通过在一定的空间里面使用补偿元素,创造和运动的中心点,了解元素之间的视觉重量,加入焦点颜色和视觉引导线以及通过一些网格来创建这种平衡。

使用空间

非对称的设计是极简主义设计未来的一个趋势。使用这么大的空间设计,很容易平衡简单的对象元素或图像,特别是对于一个较大的白色或黑色背景。在设计中的留白和使用负空间,来保持元素之间的平衡事,应该使用足够的对比度。这将直接穿过用户的视线而达到设计的目的。



例如上面的网站“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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,776评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,527评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,361评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,430评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,511评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,544评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,561评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,315评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,763评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,070评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,235评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,911评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,554评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,173评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,424评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,106评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,103评论 2 352

推荐阅读更多精彩内容