翻译理论丨20条不应该打破的宏图准则-下篇

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

翻译自Mary
Stribley所总结的20条不该打破的设计规则,对设计新人会有很大帮助betway体育app 1

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

Design rules you should never break.jpg (116.6 KB, 下载次数: 0)


下载附件

上篇戳这里: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)

2015-10-27 14:32 上传

11.对比

14.
避免使用不协调的颜色
betway体育app 2

对比.jpg

设计色彩搭配.jpg (35.21 KB, 下载次数: 0)

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

下载附件

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

2015-10-27 14:32 上传

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

与我们熟知的撞色不同,不协调的颜色一般是指色环上两个相距甚远甚至对立的颜色搭配到了一起。这样的颜色组合通常会有一种污浊、模糊的感觉,使眼睛很难辨认两个颜色的界限。避免颜色不协调的简单方法就是使用高对比度的色调。正如右图所给的例子,白色与绿色的高对比度下,眼睛可以很容易的捕捉到两个颜色之间的界限,而且也不会像颜色不协调的左图那样有污浊和模糊感。从审美的角度来说,我们通常避免使用不协调的颜色,这样可以使你的设计赏心悦目。但你仍可以因为一些特殊原因去打破这一规则。不协调的颜色经常受一些设计师尤其是广告商的喜爱,因为他们觉得这样能创造出更吸引眼球的设计。15.
不要把白色空间当作空白空间
betway体育app 3

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

合理利用空间设计.jpg (68.72 KB, 下载次数: 0)

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

下载附件

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

2015-10-27 14:32 上传

Bike Expo New York by Jonathan Correira.jpg

白色的空间是一种多元又高效的工具,它可以对设计发挥着特殊的作用。恰当地利用留白对你的设计非常有益。它可以使人们将注意力集中到画面中你想强调的地方,让设计更透气;还可以平衡设计中的各个元素,或是使你的设计更具成熟的表现力。留白的另一个意义便是,你可以不需要添加任何元素就可以使设计更具感染力。请看上图降噪耳机海报的案例。左边的海报留白很少,图片和文字充斥着整个空间。而右图的海报,战略性的运用了白色空间。“100%
noise cancellation”
显得更具视觉效果,产品被放在了焦点位置,也没有其它内容与之相冲突。与这类似的案例有很多,它们都在向我们验证白色空间有着它不容忽视的作用,它不用填满图片、纹理或文字,而是像其它元素一样承担着它在设计中的职责。所以,不妨在你的设计中尝试并看看它的效果吧。16.
不要盲目追赶设计潮流
betway体育app 4

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

不要盲目追赶设计潮流.jpg (47.58 KB, 下载次数: 0)

One by Robbie Cobb5.jpg

下载附件

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

2015-10-27 14:32 上传

Audible.png

设计有时像时尚,某种流行元素的出现,在一段时间内受到疯狂的追捧,然后又销声匿迹。一旦那些热潮过去,你曾经到处搜罗的服装、物件将变得过时且被人们遗忘。设计也是如此,一段时间内一种新的样式或方法开始流行,每个人都去追逐这个潮流,因为它新颖时髦并且容易复制。但是潮流来得快也去得快,因此你设计的logo仅仅在一段时间内受人瞩目,然后就迅速消失在大众视线。但这并非要你故意忽视当下的潮流。而是在关注这些潮流的时候,试着找出它们流行背后的原因。最近一个特别风行的潮流就是X型logo。你也许已经知道我在说什么:由一些符号元素和字母围绕着X放置,组成的像遁形徽章一样的logo。这个潮流之所以流行了一段时间,是因为它们简单好看。但正是由于它们被广泛的使用,导致这股热潮就像它们迅速风靡一样迅速地消退了。我们需要跳出潮流去分析:为什么它会流行起来?我能从中提取到什么来提升我的设计?在X型logo的例子中,也许你可以得到这么一个启示:是否可以利用几何线来塑造你的画面,就像图中所示的那样。无论如何,不要盲目地追赶潮流,要从潮流中学到点什么并恰当地运用它们,才能使你的设计经久不衰。17.
使用正确的工具
betway体育app 5

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

使用正确的工具.jpg (54.15 KB, 下载次数: 0)

12.边框

下载附件

边框.jpg

2015-10-27 14:32 上传

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

就像一个工人不会用锤子钉钉,设计师不仅应该知道特定情况下该用什么工具,更需要知道哪些工具不能用。运用恰当的工具就可以很容易避免logo栅格化这个常见的错误。如果你完全不熟悉这点,那么就让小编向你快速普及一下。这里有两种电子图像文件,位图和矢量图。位图由许多网格像素组成的,而矢量图由线条和路径组成。两者之间最大的区别就是图像的缩放能力。因为位图是由一个个像素点组成,当放大到一定程度时,图像就会出现像素化,但是矢量文件就不会有这个问题。因为矢量文件可以任意缩放而不会使图像的形状和边缘模糊,所以一般logo更倾向于矢量,它可以满足不同尺寸的需求,小到一支铅笔,大到一幢楼房,矢量logo的应用范围可以非常广。如果你创建的是一个位图logo,显然会局限了品牌的应用。因此,选择正确的图像格式非常重要,它可以帮助你轻松地避免掉类似删格化logo所造成的问题。回到主题,一个好的设计师不应该仅仅知道这些格式的不同之处,还要知道什么时候用什么工具。一般Photoshop用于处理位图,Illustrator处理矢量图,所以请确保熟悉这些软件,在着手设计之前你要清楚知道它们能做什么,可以创造什么。18.
考虑你的媒介
betway体育app 6

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

考虑你的媒介.jpg (53.7 KB, 下载次数: 0)

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

下载附件

Joe’s Coffee by Trevor Finnegan.jpg

2015-10-27 14:32 上传

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

你的设计在什么地方出现?海报,网站,还是杂志?准确的知道设计的应用媒介是十分必要的,因为这关系到公众会如何看到你的设计。如果你不把所有细节考虑在内,会在某种程度上影响你设计的展现效果。在为出版社设计的时候,忽略订口是一个常见的错误。订口是书本的相对两页中间的空间,它的存在是为了解决可读性和提供装订空间。在设计装订物时,设计师必须把它们考虑在内,也就是确保不要在这个空间内放任何的图像和文字。否则,在装订过程中,内容将会横跨两页,订口部分的内容会被逢合进去,图像和文字也会随之扭曲。图中所给的例子展示了文字在装订过后的不同呈现效果。就像右图所做的那样,将图文安排在订口以外,就可以防止内容被拉进装订的部分中去。那么我们怎样避免这个问题呢?沟通是一个古老但是有效的办法。如果你不确定,不妨与印刷商、客户或是委托人谈一谈,确定订口的空间,然后再排版。19.
知道语法的规则
betway体育app 7

Poster Design via MyDesy.jpg

知道语法的规则.jpg (83.29 KB, 下载次数: 0)

13.栅格

下载附件

栅格.jpg

2015-10-27 14:32 上传

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

语法是一个艰难的工程,如果没有他人指出,你恐怕很难发现自己已经打破了那些隐藏在其中你所不知道的规则。花些时间看些关于语法规则的书可以保持设计的专业性,还可以使你在外面发现他人错误时感到欣喜。让我们快速浏览一下这块内容。首先,“&”符号。“&”符号不在正文内出现,请避免使用“&”代替“and”。“&”反而更多的用在组织机构的标题上(例如“Johnson
&
Johnson”)、风格化的logo或是识别性的设计上。另一个很好改的错误是标点后的两倍空格。有什么简单的解决方法呢?很遗憾没有。一倍空格往往就足够用了。如果你发现你的文字看上去太挤,你也许应该尝试一下调整字间距或是换一个新的字体,而不要再使用两倍空格。还有一点需要注意的是连字符和破折号,即使它们在一篇文章中很少见,你还是会碰到它们。基本上有三种破折线:连字符号”-“,破折号”–”和长破折号”—”。连字符号是用来连接两个单词的(比如“custom-bUIlt”);短破折号是用来连接数值的(比如“1984–1998”);长破折号大概是大写字母M这么长,它偶尔会在句子中用到,用来代替逗号(比如“Grammar
is hard — or so I once
thought”)。语法的规则很多,当它显得不是那么重要的时候,许多设计师便开始争论是否需要关注它。但这是一个细小却强大的工具,它能使你的设计看起来专业且严谨。20.
不要使用太多的效果
betway体育app 8

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

不要使用太多的效果.jpg (50.04 KB, 下载次数: 0)

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

下载附件

Five Column Grid via Magazine Designing.png

2015-10-27 14:32 上传

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

还记得Office软件里“艺术字”的特效吗?在文字上增加彩虹渐变,阴影,倒角和其它天花乱坠的效果。不得不说,“艺术字”的年代已经过时了,现在是时候搁置那些“炫酷”的效果了。很多时候,当谈到交互设计,我们就知道简单往往就是最好的,这就意味着你要反复问自己“我应该往设计中加这些东西吗?”诸如阴影,倒角,纹理和渐变等,所有的效果都会有被需要用到的时候,不要把它们都放在一起。表格和图表是滥用效果的重灾区。左图所示的柱状图用了很多效果和元素。而右图就展示了如何通过去除这些效果和元素来整合信息,使设计更清晰美观且便于阅读。当你无法去掉某些标签、数值和元素的时候,尽可能的删掉一些不必要的效果以减少冲突,使主要信息重新凸显出来。有时候少即是多。其实最终的规则只有一条,那就是没有规则。有时候挑战这些规则和了解设计基础同样重要,甚至更加重要。一个最好的例子,传奇设计师David
Carson创办了实验性的Ray Gun杂志并为其设计。1994年,Carson用”Zapf
Dingbats”(一个基于符号的字体)发表了一篇对音乐家Bryan
Ferry的完整采访,仅仅是因为他认为采访十分的无聊,他就把文章设计得完全无法辨认。由此看来,打破规则有时候是让设计名垂千古的好方法。原文作者:
Mary Stribley设计注意事项, 文案排版注意, 设计小细节

Twelve Column Grid via Magazine Designing.png

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

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

YouCanNowMagazine by Matt Willey.jpg

14.随意性

随意性.png

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

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

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

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

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

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

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

Seed by Laura Berglund.jpg

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

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

Indicadores by Juan Camilo Corredor.png

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

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

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

15.方向

方向.jpg

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

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

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

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

Z-Diagram via Tuts+.jpg

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

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

让我们看看相关的例子。

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

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

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

16.规则

规则.jpg

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

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图