20项最重要的设计原则(下)

翻译:jzjz
最近沉迷阴阳师翻译拖太久了,然而昨天手抖把吸血姬给喂了......今天不长记性把鲤鱼精给喂了......痛定思痛,默默开始写翻译超度一下她们T-T

翻译:jzjz

译文仅供个人学习,不用于任何形式商业目的,转载请注明原作者、文章来源、翻译作者及简书链接,版权归原文作者所有。

上海快三,译文仅供个人学习,不用于任何形式商业目的,转载请注明原作者、文章来源、翻译作者及简书链接,版权归原文作者所有。



上篇戳这里:http://www.jianshu.com/p/e0821738d504
![Uploading Poster Design via MyDesy_730596.jpg . . .]](http://upload-images.jianshu.io/upload_images/148196-f432e68bcb753ae1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

当你是一个设计初学者时,会有很多东西需要学习,有很多因素需要考虑, 更不用说当下技术不断发展,新软件不断发布,新的趋势也随之而来。这实在有点让人招架不住。

11.对比

本文将带给你20项设计原则,希望帮助你在这个创造性的环境中理清头绪。 放轻松,让我们来讨论一些原则。

对比.jpg

20项最重要的设计原则.jpg

对比是能够让你的设计紧跟潮流的一个关键因素,这也是许多客户的需求。

  1. 线

对比是指设计作品中两个元素之间的差异程度。

线.jpg

一些常见的对比包括明与暗、厚与薄、大与小等等。

线条有助于增强,引导和创造动作。

对比对可读性和易辨性有着很大的影响。这也是为什么小说或者其他出版物要以白纸黑字的形式呈现。想象一下如果是浅灰色的字印在白纸上,那还能看吗?所以如果你在做类似的设计,请注意提升对比度。

我相信我们都知道什么是线,还是要在这里做下定义:线可以是任何线性标记。 所以,线条就是一切。 即使你现在读的这些字都是由数千条曲线、折线和直线组成的。

看看Jonathan Correira设计的这张海报。 海报的主题分为两半,一半以绿色为主,另一半则以深灰为主,两半的颜色对比都有相应的调整以保证所呈现的内容都很容易辨识。

线条也可以左右思维。 直线可以唤起秩序和整洁,波浪线可以创造动感,折线可以暗示紧张或兴奋。

想象一下,如果“New York”的颜色与“Bike Expo”颜色相同,海报的对比度将大大降低这样阅读起来会很困难。

在摄影中经常会使用“引导线”( leading lines)来引导人们的视线。 人们在看照片时会跟着引导线找到照片中的焦点。

Bike Expo New York by Jonathan Correira.jpg

让我们看看网络设计中使用的“引导线”的例子。 这个网页使用了一个很酷的折线网格,这是一个非常明显的引导线,这条折线引导线会带你一路向下浏览页面,从一节内容到下一节内容。

Robbie Cobb 的这幅作品也是高度比度设计的代表之一。设计中包含了明与暗,薄与厚的对比。

PRA-Website-Design-662x2184.jpg

One by Robbie Cobb5.jpg

设计插图的一个很好的方式就是利用鲜明的线条。 来看看KseniaStavrøva为服装品牌SNDCT设计的这些插图。 通过使用简单的白色线条来展现每个图案,使设计整体被给予很强的内聚性和可识别的风格。 你也可以考虑在插图中使用强调线条的方式来创造有趣的效果。

对比不仅仅能够起到让设计中的元素风格化或让元素更易读的作用,它还能够引导人们的行为。这点在网站中很常被使用,我们来看看 Audible’s网站的登录页。

Posters-for-SNDCT-by-Ksenia-Stavrøva-1-662x937.png

Audible.png

Posters-for-SNDCT-by-Ksenia-Stavrøva-2-662x937.png

暗色系的背景以及背景中被淡化的图像和明亮的红色按钮形成了鲜明的对比。这种设计使得登录页的行为召唤功能(引导注册)更加明显。

2 比例

12.边框

比例.jpg

边框.jpg

比例营造出设计作品中的重点,戏剧性的和辅助性的层次。

如同照片和其他艺术品,边框对设计作品来说也很重要。 我们通常认为摄影中的边框主要决定了照片中的内容包含什么,不包含什么,在设计中也是这样的。

比例在设计中占有很重要的位置,通常意义上将,比例就是设计中各个元素的大小尺寸。

边框中有形的边框可以起到凸显元素的作用。

比例可以帮助我们理解设计作品。想象一下如果你要在大象旁边画一只老鼠,你很可能会把老鼠画的比大象小很多,这将有助于人们立即理解你的作品。

我们来看看由Trevor Finnegan设计的这个菜单,特别推荐的菜谱和企业使命被线框框出,让读者的目光马上就可以注意到这两部分内容。这种简单的方式完全可以帮助你提升对重点内容的强调。

比例帮助我们理解作品, 但是比例并不总是基于现实主义。 您可以用戏剧性的比例来组合你作品中的元素以达到震撼的效果,同时凸显出作品中的重点是什么。

Joe’s Coffee by Trevor Finnegan.jpg

例如,Gabz Grzegorz Domaradzki设计的这幅《Drive》的电影海报。 在这张海报中,主角的形象占了极大的比例,其余的角色的形象则都被弱化了。

边框不一定是有形的。 如果你正在设计中考虑采用摄影元素,也可以考虑用这些元素来设计边框。 来看看下面这幅海报,海报中的边框是周围看似随意摆放的各种工具。 这样也可以打造出一个视觉上的边框并引导读者观看到真正重要的内容。

2Scale_1-662x993.jpg

Poster Design via MyDesy.jpg

这张海报的布局比例并不是基于现实主义,海报中通过戏剧性的放大和缩小人物的脸部帮助人们快速了解每个 人物在电影中的重要程度,然而人们的面孔在现实生活中通常是相同的大小。

13.栅格

这种通过缩放设计元素来传达信息的方法,通常被称为“层次”,这点我们将在后面详细讨论。让我们再来看一个使用比例来突出重点的例子。

栅格.jpg

下面这个出版物的设计来自 The Consult。设计中放大了一部分的统计数据,信息和数字,使人们将大部分的注意力集中到这部分数据上来。

栅格就像地基,是构建成功设计的第一步。 栅格是一个设计的总体概要,决定着放置哪些元素,哪些元素要与哪些元素保持一致。

2Scale_2-662x2312 (1).jpg

栅格虽然重要,但是在设计中它却是隐形的存在。用户只会感受到设计内容的整洁、清晰、有序,却看不到真正让这些内容有序的对齐的线。

3.色彩

让我们来看一些栅格的案例。

色彩.jpg

Five Column Grid via Magazine Designing.png

好色彩带来好设计。

上面这个例子来自Nikola杂志,设计案例中选用的是五列栅格,其中一些元素仅在一列中显示,一些元素会占据两列或三列,然而设计整体看起来却非常整洁干净。

色彩对于设计的重要性是毋庸置疑的,可以说色彩对于设计来说是最重要的。色彩能够影响情绪,传达情绪,制造氛围,每种色彩都有着特定的含义。所以可以说设计的成败在于色彩。

Twelve Column Grid via Magazine Designing.png

让我们看两个品牌案例。 首先是由Smack Bang Designs设计的女性肌肤童颜服务“Lite Luxe”。 设计中选择了浅、柔、淡雅的色调。 白色、浅灰色、柔和的胭脂色调以及金铜色,这些颜色互相补充,打造出一个平和、优雅、女性化的设计。

这个例子还是来自Nikola杂志。这次的设计展示了十二列栅格在元素对齐中的灵活性。 我们再次看到一些元素横跨多列,而一些元素仅占两三列。 不要认为栅格包含区域内所有的地方都需要填充上内容或者着色,它的划分能够给你的创作带来了无限的可能。

3Colour_1-662x2068.jpg

现在我们大概了解了栅格是什么,以及是如何应用的。让我们再来看看高阶栅格运用的案例。案例来自 Matt Willey,能看出作品中用的是几列栅格吗?三列? 还是六列? 无论这个作品被看做是用哪种方式划分,作品里的每个元素都是对齐的。这充分展现了栅格灵活,适应性强的特性,所以在你下一个设计中考虑试试它吧,它会让你的作品简洁、醒目、有吸引力~

另一案例是Sagmeister&Walsh为果汁品牌Frooti所做的设计。与之前的例子不同,这个设计选择的是一个对比度非常鲜明的色调,打造出了一个更加充满活力,精力充沛和俏皮的感觉。

YouCanNowMagazine by Matt Willey.jpg

3Colour_2-662x2453.jpg

14.随意性

色彩不是一个仅限于打造品牌的颜色,我们可以把这个原则延展到许多领域比如摄影。滤镜和图像调节工具给了我们调整照片色彩和色调带来了无限的可能。

随意性.png

如果你想设计一个时尚或精致路线的海报,可以尝试在图像中使用黑色系单色滤镜,例如Canva的'Street'滤镜。或者考虑降低图像颜色的对比度使其更柔和,更平和。

到目前为止,我们一直在讲述对齐和秩序。 但是,更自然,粗犷和随意的设计呢? 随意性在设计发挥了很大作用,但是这里指的随意性并不是普通的意义上的随意性, 我们可将这种随意性称之为“设计随意性”。

4.重复

“设计随意性”和其他形式的随意性的区别在于目的和执行。设计的主要目的应该是沟通 ——通过作品你要对消费者说什么? 想说的是否都清晰的表达出来了? 如何使作品与消费者沟通中的共鸣更强烈?

重复.jpg

让我们来看看下面这幅设计作品,这类作品往往很容易被认为是“随意的”,但其实都是有意的。 这幅海报是由 Heath Killen 为电影“The Killer Inside Me”设计的。这类作品中大多运用了刮擦、手绘效果,字和词凸起的效果,其间的间隔都是不规则的。

回想一下你知道的任何一个大品牌 可口可乐,谷歌,苹果,耐克,我相信你可以都回想起他们的标志,他们广告标语还有他么惯用的色调是什么样的。 为什么这些品牌的形象如此难忘? 是的—— 重复。

For Film (14/18) by Heath Killen.jpg

对于品牌设计,重复是一个至关重要的因素,无论是在保持品牌一致性方面,还是在品牌整合方面。

这幅海报中的手绘效果和排列层次都运用了一种看上去很随意的方式,有些人会说这阻碍了阅读,但是这样展示是有目的的——这样是希望展现电影里混乱和扭曲的心理。

让我们看看 Michelle Wang的案例。 正如你所看到的,在Michelle Wang的这套设计中,在不同的印刷品上运用相同的色调、相同的标志、以及相同的结构布局。

如果海报里这样的设计被应用到一个关于会说话的快乐小动物那种儿童电影海报中,那样看似随意的效果就不能传达正确的情绪。 但在现在这种情况下“随意性”设计完美地传达了电影的主题。

Michelle Wang.jpg

另外看看这个Laura Berglund的设计作品,作品中利用一定程度的随意性创造了一个自然的,拼贴的效果。 虽然这件作品乍看之下像是被砸在一个页面上,但又有那种时尚的粗糙和凌乱感,再仔细一看会发现它实际上运用了许多设计原则。

重复是创建品牌形象的一个重要因素,同时重复也是在具体的设计作品中常用的元素。 例如在设计图样或纹理时,重复就是整个设计的关键组成部分。

Seed by Laura Berglund.jpg

在Nastya Chamkina这个包装设计中利用重复创建一个美丽的图样。图样不一定像沉闷和花卉或者尘土飞扬的旧窗帘,他们可以是有趣和有价值的。

作品中的每个元素实际上是都是被策略性地定位过后形成天然的引导线来引导读者的眼睛,并且在平面颜色,纹理和图片之间运用了有选择性的平衡。

Teatul by Nastya Chamkina.jpg

下面这幅作品来自Juan Camilo Corredor。 这幅作品可以看做是随意性的全面展现,奇怪的形状、纹理、插图,被以不同寻常的方式剪裁并以有趣的方式安排。

5.负空间

Indicadores by Juan Camilo Corredor.png

负空间.jpg

这幅看似随意的作品如果你剖析它包含的元素,你会注意到某些部分其实是对齐的(左下蓝色形状和它旁边的绿色尖角形状完全是对其的,等等),布局也有助于眼睛浏览页面,甚至有一些栅格进行提示。

物体和物体间所产生出来的图像,称为“负空间”。

所以不必是整齐和有序的才能被归类为设计。 例如“随意性”设计或更前卫设计也可以是吸引人的和超级有趣的设计。

在负空间这一领域公认的翘楚是艺术家 M.C. Escher。 Escher做了许多贯通了“负空间”和“正空间”的创作,比如这张木刻版画“天空和水I”。

在以后的设计中你也可以效仿 Juan Camilo Corredor以奇怪的方式调整元素的大小,仅展示个“a”的尾巴,裁去一只鸡的头,但做这样尝试的同时请注意你要传达的目的和设计原则。

Sky and Water I by MC Escher.jpg

15.方向

通过作品我们可以看到Escher如何利用鸟之间的空间来创造鱼的形状。作品中操纵负空间,使其形成新的元素。

方向.jpg

战略性地使用负空间可以帮助设计者创建令人惊叹的巧妙设计。 来看看这些动物图标,设计师 George Bokhua使用简洁的形状清晰地描绘了每个动物形象。

许多设计要考虑的一个重要方面是眼睛如何在页面上移动,以及其所移动的方向—— 这有时也被称为“流”。 你的眼睛如何在页面上移动? 你的读者确切知道接下来看哪里吗? 你所设计的视觉“流”的方向是他们眼睛的逻辑方向吗?

Animal Graphics by George Bokhua.png

许多研究已经分析了我们眼睛的运动习惯和我们在观察特定事物时的追踪模式。 看看尼尔森诺曼集团的眼动跟踪研究,其跟踪人们的眼睛,同时查看网页,以此观察他们的消费模式。 下图为视觉热图结果展示:

6.对称

F-Shaped Pattern For Reading Web Content via Nielsen Norman Group.jpg

对称.jpg

研究证明,当浏览网页时人们眼睛常见的阅读模式是“E”或“F”形状,所以将你最喜欢的内容放在页面的左边,或者置顶是最好的选择。 眼睛追踪的另一种常见模式是“Z”形,如下所示:

科学证明人们容易被对称的事物所吸引。 我们往往会认为对称的脸、图案和设计更有吸引力和美感。

Z-Diagram via Tuts+.jpg

对称经常被在商标的设计上以达到一种和谐、平衡的效果。一些具有对称标志的大型品牌的例子有塔吉特、麦当劳、香奈儿、星巴克等。

总的来说,人们的眼睛在阅读时会自然地以“扫动”的形式自左上角移动到右下角进行浏览。 具体理论可以看The Gutenberg Diagram的深入解释,具体文章戳这里:http://vanseodesign.com/web-design/3-design-layouts/。

Symmetry_1.jpg

当然尽管这三种阅读形式是基于大量案例得出的经典形式,设计时也不是需要100%遵照。 只要记住,人们阅读时眼睛会从页面左上角开始向下移动就可以了。

当然,对称并不总是也不应该是每个设计的选择。我们所谈到的对称不是在设计中左右或上下镜像一样完美的对称,而是尝试在设计中引入微妙的对称元素。

让我们看看相关的例子。

例如,下面这个婚礼邀请中使用的对称就不是完美的对称,设计师根据所要表达的内容调整了对称部分的一些设计,这样既保持设计对称平衡有序又不会像镜像那样让人发晕,从而打造了一个创造浪漫,平衡还有点小巧思的设计。

这幅设计作品来自Atelier Martino&Jaña。作品以一种非常流畅和自然的方式引导读者的视线,文字就在自上至下贯穿整幅作品的曲线图像上展现, 标题和日期首先映入眼帘(这儿还有个小的层级结构,太妙了~),然后我们的眼睛留会随着图像的引导向下移动流经各个内容。

Jarrid & Laura Wedding Invitation by Nate Koehler.jpg

Guimarães JAZZ 2009 by Atelier Martino&Jaña.jpg

对称并不总是那么明显,有时它是微妙的,有时你可能甚至都没有不注意到设计中的对称。 隐形对称的主要例子可以在编辑设计中找到,更具体地说就是文本框的排布。 在任何杂志中尤其是里面的长文章,你会注意到正文会被分成文本列排布,这些列通常是对称的大小,这样会让人感觉清晰、整洁、有吸引力。

简而言之,这幅设计作品在展示图像的同时,将所需传达的信息以正确的方向顺畅的展现出来。

来看看Brighten the Corners和Anish Kapoor的年度报告设计,展开报告后会发现设计中通过镜像尺寸的文本列来体现对称性。

16.规则

Zumtobel Annual Report by Brighten the Corners and Anish Kapoor.jpg

规则.jpg

在布局中使用一点对称可以创造一种平衡和有序的感觉。 所以下次当你设计出版物或其它内容时,可以或多或少的融入一些对称性设计。 如果你的设计看起来不对劲,那么你可以考虑从对称性入手进行调整。

关于规则这一点肯定会引发很多争论,如果有一屋子设计师肯定有一半宣称在设计中根本没有规则,而另一半肯定会抗议说有很多规则。 理论上来说他们都是对的。

7.透明度

与任何一种技能一样,有一些事情你必须学习,这些就属于一般规则。 例如:确保你展现的是清晰的、不使用低像素图片像等。这些是设计的基础,能够帮助你完成基本的设计。

透明度.jpg

本文由上海快三发布于小说,转载请注明出处:20项最重要的设计原则(下)

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。