分享

纯干货不玩虚:20个设计核心要素和原则(下)

 g_memory 2017-02-24

设计是一个复杂的、十分复杂的、very复杂的,有趣的和令人兴奋的业务。然后呢,就算你在设计这个行业工作再久,你也要把自己当成一个初学者,因为技术是不断发展的,软件也是不断迭代的,设计潮流也是在变的;说实话,要想保住自己的饭碗,总要拿出点压箱底的技术来~~


还记得周三我们分享过的十个原则吗?是否给了你一些新的启发呢?更精彩的还在下面!


十一、对比


对比往往是设计中的关键因素,有了对比才能使你的设计变得洋气(洋气貌似是我想到的最高端的词了~~)。

在一个非常基本的定义中,对比度是你设计的两个元素之间的差异程度。


一些常见的对比形式是黑暗与光明、厚与薄、大与小等等。可读性和易读性的对比影响也很大,比如说很多小说、出版物会在白色封面上放黑色的标题,如果在白色封面上放浅灰色标题,那对比度就会降低,而且不好读,所以,在设计中,请确保你的对比。


例如,看看这张纽约世博会自行车的海报,它的设计就具有强烈的对比度。因为他的整体是一分为二的,一面是绿色的扁平风,一面是灰色的拟物风,以确保两个面都是引人注目的,谁也无法抢了谁的风头。想象一下,如果“NEW YORK”和 “BIKE EXPO”是一种风格,一个色系的话,对比度将大大降低,标题也将不再突出。


所以,设计中想突出两个重点的时候,对比度将是最好的选择。



例如下图的字体设计就是一个非常经典的高对比度的例子,其中黑与白(黑暗和光明)、色块与线(厚与薄)给设计增添了无尽的趣味性和独特性。

对比不仅仅使文字的可读性增强,它也能很快的吸引眼球,达到视觉冲击的效果。这个方法在网站设计中得到广泛应用,让我们看看下图中这个例子。


看看这个暗黑的登录界面是如何设计的?明亮的红色按钮与暗黑的背景形成了鲜明的对比,这种有意的对比也是为了让用户一眼望去就能注意到这个按钮,并且点击进去,到达注册页面。


所以,使用对比,突出某些元素,也是值得我们学习借鉴的~~

 

12、框架 


一张好的照片就如同艺术品一样,如果再来一个好的框架,是不是就堪称完美了。


例如,下图中这个菜单在选择框架的时候要注意两个元素,一个就是设计的整体风格,还有一个就是企业文化,不能只为单纯的好看。



框架也不一定是图形。如果你工作中有些很好的摄影元素,为什么不考虑用它们来为你设计框架?


看看下图中的海报,周围围起来的物品都是随机选择的,构成了一种独特的框架。这样,你的注意力自然而然地被吸引到了框架上,从而更好的注意到中间的文字。

 


13、网格


想想用网格做设计,就像是先打好房子的基础一样,这是非常关键的第一步,也就是先让你建立一个功能,到最终成型一个美丽的成品。设计师或建筑师想好应放置些什么元素,什么与什么相对齐,提供一个雏形的建筑轮廓,也就是我们常说的原型图。


原型图是重要的,通常只能看到个大概,它们是由一定数量的行和列组成,留有设计元素的位置,使你的内容整洁、清晰、有条理。


先让我们看看一些原型图的例子。



这个例子是一本杂志的原型设计,整体排成了五个竖列,注意看!其中元素是如何包含在其中的,有元素占了三个竖列,也有元素才占两个竖列,但作为一个设计排版,整体还是非常整洁、干净的。


为了使设计更加灵活多变,考虑在元素中加入更多的竖列,如下面的例子。



依然是该本杂志的另一页原型设计,该图再次显示了元素的多变性。注意!左边的大元素是如何跨越多个竖列的,而另一边的元素只坐在了两个竖列上。不要以为元素的布局只能规规矩矩的,如果你能掌握这个方法,完全可以尝试出一个惊人的设计。


所以,一定一定要找到最适合布局的方法。


现在呢,我们基本上已经懂得了原型是什么,它是如何工作的,现在,让我们看看一些现实生活中如何摆放元素的例子。



看出图中有多少元素了吗?我才不告诉你们,自己算吧!无论哪种摆放方式,这个例子有一个清晰的可识别的网格系统,每个元素都对齐的摆放着,整洁的布局看起来是不是特别舒服?


所以大家在想下一个设计的时候,是不是可以想到元素也是可以这样摆的?


我已言尽于此,接下来的实践还是要看大家的努力~~


14、随意性

 

到目前为止,我们一直都比较喜欢有秩序的设计。但是,更有趣的,粗糙的,随意的设计呢?


随意性在设计中起着很大的作用,它有着一种特殊的随意性。让我们称之为“设计随意性”。


“设计随意性”和其他形式的随意性之间的区别是目的和执行。与设计中,你的主要目标应该是沟通,这个设计主要对消费者说什么?


例如,让我们看看一个设计,它可以很容易被视为“随机”,但是是有目的的随意性。

这张电影海报为了表现出一个杀手的内心独白,使用的字体是如此的不规则和诡异,字与字之间的间隔也是十分不规则的。



这不规则的设计方式,有些人会觉得阻碍了文字的易读性。但是,这是有目的性的,意图是代表一个混乱和扭曲的灵魂。


也有的设计像下图一样,使用拼贴的效果进行设计。虽然乍一看页面觉得有种时髦的粗糙和散乱,但是仔细一看,需要突出的信息并不多。



下图的设计是一个比较经典的随机性案例,图中奇怪的形状、纹理、插图与不规则的剪裁相互搭配,形成了非常有趣的设计方式。

 

这个设计虽然看起来是随机的,但如果你仔细分析它的各个元素,你会注意到设计的某些部分并不是无规律可循的(如左下角的蓝色形状和旁边的绿色尖角形状是不是相类似)。


值得一提的是,偶尔玩玩随机性和一些前卫的设计是不是很有趣,就像哈林哥的音乐一样,如今他的音乐风格是不是和以前的相比变得另类太多,但是大家却反而喜欢听,他也变得比以前更红了。

 

15、方向

许多设计一个很重要的点,是你的眼睛最先看向画面里的哪个位置,下一步又该看什么?符不符合眼睛看事物的逻辑。


很多研究已经分析了我们眼睛运动习惯的一个惯常模式,就是查看特定的东西。下图可以很好的解释。

研究证明,眼睛看东西有一个常见的模式,以“E”或“F”的形状看东西,当涉及到网页,把导航栏放在页面的左边或顶部是最好的选择。


另一种常见的模式,眼睛以一个“Z”的形状看东西,如下图所示。

总的来说,眼睛从左上角看到右下角,是一个大致扫一遍的过程。这你就得好好想想,怎样才能在“扫一遍”的过程中看到你想要展现的信息。


看下图,就是一个经典的使用方向的例子。

 


 16、规则

这一点肯定会引发设计师们的世纪大战,有些说设计有规则,有些说没有,但从技术上说,他们都是对的。


正如同任何技能,有些东西你必须学习,这就是一般的规则。比如要用矢量的图形,不要像素化的,这些很多都是设计的规则。


但是,正如许多人认为,一旦你学会了这些规则,就是要打破这些规则的时候到了。
让我们看看一个例子,是如何故意打破规则的?


卡森是一个前卫的设计师,这张杂志封面产生了令人震惊的,动态的,破坏规则的设计,今天仍然受到赞赏。


另一个关于卡森的故事是他设计一个音乐家受访的版面。他竟然选择一个类似符号的字体,使整个版面变得不可读了。不过给我一万个胆子我也不敢这么做,否则明天铁定卷铺盖回家了。


卡森经常会和其他违规的设计师交流不同的想法来打破你的认知。这种“偏头痛”的文字不知道大家是怎么想的,反正我是只有“呵呵”了。


不过规则是用来打破的,因为设计这种东西并没有准确的界限,对于你来说,也会有个质的飞越。


17、运动


你听说过或见过有人描述一幅画或一件艺术品很有“动感”吗?你可能被这词整困惑了,毕竟,一件静态的绘画是如何移动的?但是,运动是视觉艺术的一大组成部分,包括平面设计。


早些时候,我们讨论了关于设计的方向和流程,这些因素在你设计“动感”的时候起了很大的作用。


但是,你想给一个元素一个字面意义上的“动感”,该怎么做呢?也许你有一个球,你想表现出它在运动;或者汽车,你想变现它在一条公路上行驶。有很多方法可以描绘这种运动,所以让我来举几个例子吧。
首先要说到的就是透明度!


下面logo的例子,几何形状的各种不透明度的叠影瞬间展示了一个干净、复杂的运动感。

 


同样,看看这个由克拉克艾伦设计的关于2012届奥运会的海报。通过简单的不透明的图层慢慢叠加从而变得复杂而浑浊,最终形成了强烈的速度感和运动感。



运动也可以通过一个模糊效果实现。看看这个例子,将运动模糊效果应用到一个静态页面是如此的成功。
下例中,由德国设计师anzinger设计的图书封面。将物体的边缘设计成模糊的产生运动错觉的有趣效果。


最后,运动也可以通过运动线来表现。这些都是常见的漫画和插图,使字符看起来像是要逃跑了一样。


让我们看看一个例子。


下面这个例子使用运动线来表现运动。一种微妙但有效的设计方式给元素一个动态的边缘,不是赶脚立马就不一样了?


18、深度


深度是设计世界中一个重要而令人兴奋的原则。即使有很多的媒介,你可以创造一个深度的感知和幻觉,从而超越二维设计。


那么,我们如何在设计中创造一个深度的幻觉呢?


首先,我们有什么可能是最常用的技术,阴影!学会素描的童鞋都知道,阴影可以瞬间让物体变得真实起来。所以我们平常也要善于观察身边的事物,看看光啊影啊神马的,不然当初学素描干嘛,为了砸钱玩吗?


下面这张海报呢,给物体都加上了阴影,说白了就是拟物风,每一个阴影对应不同的元素的表现方式都不一样,不要问我为什么,你和你朋友站一起看看,两个人的阴影会是一样的吗,如果一样的话,恭喜你,终于找到了你的双胞胎兄弟。



另一种技术呢是重叠某些元素。这与扁平风有点不相符,为了让画面看起来有层次感,设计师们也是卯足了劲。比如下图中的这个设计,元素各种重叠,白色边框也可以看成是一个层次,是不是深度感瞬间就不一样了?



另一种技术是玩视觉角度,这是一种技术,往往给元素一个“3D效果”瞬间真实了有木有?通过调整某些元素的角度,你可以给它们错觉,创造即时深度。


让我们看看一个例子。


这个电子海报由尼尔史蒂文斯设计,每个字母向右倾斜一点点,给了他们独特的形状和深度。从这种简单的说明、阴影和调整的角度来看,每个元素的设计方式有助于创建一个动态的和引人入胜的效果。


当然,如今的时代已被扁平风所取代,在设计中已很难看到拟物有深度的效果,就像苹果以前的系统都是拟物风,而现在的苹果界面,大家不难发现,已被扁平风所取代。不过也有例外,就像老罗的锤子科技,依然特立独行地坚持着他们的拟物风,值得给老罗一点掌声。

 


19、排版

印刷术可以说是设计的最大的基础之一,这个就可以从古说到今了,那时候中国才是最屌的,什么小日本啊,美国啊根本比不了我们。不过排版也得根据你到底想表达什么而定。


让我们看看关于排版的一个例子。


这些杂志是由本杰明设计的,每个排版布局都有着其相对应的目的。

关于排版,其实很多人都在阅读性和设计感之间纠结,但一般来说,关于字体,印刷的话最好使用衬线体;网站、手机界面什么的,无衬线体比较好。


(所以很多杂志的文字会用宋体,手机界面用兰亭黑或苹方等等)。



下图呢,可以说是最错误的案例(放了那么多经典案例,终于可以来一个反面教材了)。


所以呢,大家要注意以下几点:


1、注意你的标题。
2、确保正文的文字不要太大也不要太小。

3、尽量避免一个版面使用过多的字体。
4、左对齐是最容易阅读的。


如果有疑问,就打印出来看看,会很容易发现问题所在。


说到排版,还有一个很值得一说的自定义字体—艺术字!


这本杂志设计只使用几种不同的字体,但总体来看,这些艺术字非常的时尚和有趣!


快看,快看!


Come on ! Baby !



20、组成

作文需要一个完美的结尾,因为它是一个最终的总结。 


“作文”是指在你的设计中元素的整体安排,这听起来有点沉闷。但它实际上是一种对元素来说很有趣的玩法。


“组成”基本上就是把前面我所说的19种元素相结合起来,你可以使用规模、重复、排版、线条、随机性等等等等,以创造独特的,合适的布局。


来看看别人是如何组成的。


该设计把重点放在“30”上,通过使用规模和深度,来突出它。让“30”放大再放大,以至于撑满整个页面。

这些只是在设计中比较简单的实现方式。注意他们都是如何用这个特定的方式来创造一个强大的、有吸引力的和有效的设计。


这里的另一个随机性的例子。跟前一个相比该设计采用了类似的技术和设计原则,但产生了一个非常不同的结果。这张海报明显不是为了突出最大的人物主体,而是为了突出色块上的字,所以有时候最大的元素并一定是主角。



总的来说,通过使用不同的组合、技术和内容,你能够创建一个各种牛逼、无底线的布局。

文章摘自:ski研习社app;如有侵权请联系小编删除

官方网站:http://www.

微信投稿:wechat@

川台设计与品牌

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多