尽量的临摹:利用临摹提升你的UI设计技能

有一种方法可以有效地提升你的界面设计水平,帮助你拓宽视觉语言词汇,但是很少被一些专业的设计师提及。 是什么呢? 临摹——画家和作家们已经用了几个世纪的方法。对我 […]

2017年2月20日

有一种方法可以有效地提升你的界面设计水平,帮助你拓宽视觉语言词汇,但是很少被一些专业的设计师提及。

是什么呢?

临摹——画家和作家们已经用了几个世纪的方法。对我们来说,是将一些优秀的UI作品一个像素一个像素的临摹出来的方法。

临摹的技巧在于挑选,要挑选比你现在水平高一点的设计作品来临摹。通过你自己的鼠标临摹之后,你会拓宽你的技巧。

所以,如果你想提升对颜色的感觉,找一些大胆使用颜色和过渡色的作品;如果你想在高端的品牌形象上有所收获,就找一些相对豪华、时尚的品评网站进行临摹。

当然临摹并不是什么捷径,有时候还有些枯燥平淡,但是确实是我所知的最有效的UI学习方法。

哪个是原作哪个是临摹呢?

作家也会临摹

好多人都曾经利用临摹来提升他们的写作技能。

  • 杰克·伦敦 曾临摹过 Rudyard Kipling 的文字,来学习他顶尖的措辞和节奏技巧。
  • 罗伯特·刘易斯·史蒂文 会非常仔细的学习他看过的美丽的文字片段,然后利用记忆将其在自己的作品中再现。
  • 本杰明·富兰克林会对好文章中的每一个句子进行评论,几天以后尝试着重新写一篇,再对两篇文章进行比较。

这个名单还很长。正如作家通过研究精彩的文字来琢磨那些文字、短语、节奏等的细微的选择,一个设计师也需要通过临摹去体会设计中的布局、文字、颜色以及各种装饰。

让我们再来看看另外一种具有非常悠久历史的艺术形式中的临摹方法,

绘画大师

在美术画廊的临摹。

在美术画廊的临摹。

游览美术馆的时候,你可能会经常看到上图那样的画面。相对作家来说,画家们有更悠久的临摹的历史。莱昂纳多·达芬奇通过临摹他的老师来提升技巧,这是文艺复兴时期的学徒艺术家的惯例。达芬奇甚至将临摹作为学生的实践项目:

艺术家应该首先通过临摹大师的作品来练习技巧。

为什么呢?因为临摹可以训练你的眼睛。当你临摹现实的场景的时候,虽然没有什么限制,但是在你掌握熟练地造型、色彩技巧之前会不知道何去何从,临摹则可以帮助你隔离掉额外的东西而专注于基础的练习。

界面设计师虽然不需要绘制现实的场景,临摹也可以提供一个有效地方法去摒弃额外的干扰因素,从而迅速提升你的基础技能。

一切在于细节

要点在于,当你一个个像素的临摹的时候,你会被迫的考虑一些原作者考虑的问题:选用哪种字体?多大合适?用什么背景图片?你会沉浸在那些优秀的设计师所作出的细微的决策中。

你可能会说,会不会在临摹中将一些该注意的决策都忽略掉了呢?也有可能。但是只要做好了,临摹还是会展现给你一些设计决策,一些你自己从来没有关注过的点。

临摹 Epicurrence Oahu 网站是我重要的学习经历。

临摹 Epicurrence Oahu 网站是我重要的学习经历。

举个栗子。我最有价值的一次临摹经历是对Dann Petty 的 Epicurrence 网站的临摹。

  • 超大的字体
    临摹中用到的“Hawaii”的首字母 H 的字号竟然是365号。这么多年的设计中我从来没有敢用过这么大的字。当然他是将字母做成了装饰元素,和图片结合在了一起,非常酷。
  • 利用画笔的描边作为“shadow”
    在标头、菠萝、游泳的图片下面,原本应该是一些阴影的地方却使用了笔触的效果,哇,这真是一个奇妙的手法。
  • 有适当间距的大写字母的使用
    毫无疑问,利用大写字母可以增强元素的对其的感觉、提升间距可以让字体更优雅是教科书式的做法,我发现自己越来越不自觉的应用这些方法。

在临摹这个作品之前,我只是想“哇,这真的很棒”,但是看了之后并不能把作品中的技巧变成自己的。只有临摹之后,我才真正吸收了作者的考虑方法和设计技巧。

对 Vic Bell 的 Skedio 图标集的临摹让我的技能得到了很大的提升。(红色的是我的临摹)

对 Vic Bell 的 Skedio 图标集的临摹让我的技能得到了很大的提升。(红色的是我的临摹)

这是另外一个例子。Skedio 是图标设计大师 Vic Bell 的作品。这又是一个令人着迷的练习,因为 Vic 的图标总是比我自己的图标有着更多和更丰富的额细节。她会用两个细微的技巧:

  • 一个稍微浅一些的蓝色
    对比第二行的第一个图标“setting”,描边和填充颜色深浅不一。而我之前设计的图标大都只有一种颜色。
  • 一个稍微细一点的描边
    第一行第二个“tags”中代表文字的两条线和第三个“upgrades”中的箭头,所用的粗细和描边是不一样的。我一直以为图标中粗细需要完全一致,但事实上 Vic 使用了 3px和4px 的两种粗细。

临摹并不仅仅在于帮助你“看到”这些细节,更在于帮助你熟悉并应用在自己的设计中。

在第一个技巧中,需要给强调颜色搭配上一个辅助的、浅一些的颜色。Vic 会在四中情况中应用到:

  • 作为阴影
    如第二行的第三个图标“delete”,还有第一行的第三个“upgrades”
  • 作为光线
    第三行的第五个“search”
  • 颜色对比
    第一行的第四个图标“help”和第二行第四个“rename”
  • 视觉重量对比
    第一行第一个“all sketches” 和第三行第五个“layers”。利用不同的颜色将白色的前景凸显出来。

这些技巧比任何课堂中学到的都更细微。他们会直接从大师的思想中传递给你,只要你愿意认真进行临摹。

常见的问题

你什么时候进行临摹?

很多天早上我都会临摹30分钟左右。有两个好处:

  • 醒来的时候学习一些新东西激励我开始新的一天。
  • 相比查邮件和微博来说临摹是更有效的唤醒活动。冲咖啡的时候总需要做点事情。

只是30分钟?没临摹完怎么办?

第二天接着来。

我应该临摹些什么?

当然要临摹一些超越你的水平的作品,使用了一些你没用过的技巧的作品。

我利用dribbble找到要临摹的作品。

我利用dribbble找到要临摹的作品。

我喜欢浏览 Dribbble 。 每当我看到喜欢的作品的时候都保存下来。这里有一些设计师的作品我推荐你可以关注一下:

如果你是一个专业的设计师,这里有更多的建议:

  • 有时候我会临摹客户的网站和app,如果他们需要保持原有的样式风格的话。
  • 有时候我会临摹目标客户的网站和app,这样在第一次会面的时候我就能对他们的视觉语言有更深刻的认识。

我必须完全一致的临摹么?

不,你不需要完全一致。但是重要的是不要比原来的差。你需要让它看起来一致或更好,即便细节上可能不完全一样。

你也不可能总是能找到完全一致的资源和字体,所以总会有不一样的地方。Identifont 和 WhatTheFont 可以找到一些常见的字体和图片。

你是否会通过系列的作品来提升某一项技能呢?

临摹某个方面的5个作品来提升,比如说排版就比较适合。

你是用Sketch 还是 HTML和css 进行临摹呢?

我用Sketch。我发现临摹是一项视觉化的训练,css 则是个比较差的方法。写css的时候我会过多的想用什么方法去更好的定位和表现,如果你想成为一个好的前段的话可能可行,但是对于设计师来说太费劲了。

我能把它放进简历中么?

不要这么做。简历是展示你自己作品的地方,临摹仅仅是一个学习过程。

会不会造成剽窃呢?

不会的。这里有一些大设计师Sean McCabe 的建议:

  1. 吸收所有你需要的灵感。
  2. 睡一觉。
  3. 依靠记忆做你的新作品。

顺便说一下,利用记忆而不是根据原作进行临摹,也是临摹技巧的一种。但是我更建议相对专业的人使用这种方法。如果你想提升自己,从原作临摹会让你学到更多的东西。

艺术家和创意群体中有一个显著的共识,那就是创意就是讲一些已经存在的东西进行混合,没有什么东西是完全原创的。

不成熟的诗人模仿;成熟的诗人剽窃;糟糕的诗人毁掉他们拿来的,好的诗人让它们变得更好,或者至少让什么东西不一样。好的诗人将拿来的熔炼成独特的完整的感觉,完全不同于片段的撕裂的感觉;糟糕的诗人随便将其用在完全没有统一性的地方。
– T.S. 艾略特

我想听到还没有发生的音乐,把那些还没有存在的新东西放在一起。
– Brian Eno

所有的写作都是剪辑。拼贴读到的听到的。还有其他的么?
– William S. Burroughs

临摹帮助你发现灵感,将其拼合成你自己的风格。随意的浏览则只能了解表面的技术和风格,但是临摹可以帮助你更深入的拓展自己的技能。

临摹适合我么?

除非你是世界闻名的大师,那么是的,你也适合临摹。

这些基本包含了关于临摹的所有常见的问题。临摹虽然简单,但是会给你意外的收获。如果你经常临摹超越自己水平的作品的话,会积累很多灵感和技巧,可以用到任何的工作中。其他的艺术家们都已经用这个方法几百年了,设计师也需要赶上来了。

所以,下次需要拓展你的视觉词汇的时候,找一个好设计,放一首歌,开始像素的追逐吧。

via:https://www.smashingmagazine.com/2017/02/improving-ui-design-skills-copywork/
by:Erik Kennedy
translated by: IXD

ixd

山工艺交互设计工作室。本专业培养学生具备敏锐的洞察能力,能够发掘用户及市场的需求;严谨的调查分析能力,能够通过社会调查方法分析数字产品的用户体验及市场表现状况;优秀的设计能力,能够把握当前界面、交互设计的潮流,掌握交互设计的艺术及技术能力;良好的沟通协作能力,能够和市场、开发人员流畅、协同合作;一定的文献检索、资料查询能力,掌握初步的科学研究方法。学生不仅学习具体的交互设计方法,又能在实践练习中将理性思维和艺术设计融合为一体,成为综合性、高素质的交互设计专业人才。 作品、文章投稿以及设计事务咨询请联系 ixd@designdaily.cn

发表评论

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