织梦CMS - 轻松建站从此开始!

我的网站

5个帮你快速提高设计稿质感的实用方法

时间:2016-05-11 10:54来源:微信公众号:大熊拨清波。 作者:未知 点击:
为什么别人的作品看上去很有质感,细节到位,自己的就平淡无奇,谈不上满意。问题到底出在哪?如何给设计作品最后定妆,让最终的设计脱颖而出?下面这5条经验之谈(层次、色彩、阴影、字体、氛围)能帮你搞定这个问题。 最后一公里?最后一公里! 最后一公里「Last Kilometer」这个概念,最早是

为什么别人的作品看上去很有质感,细节到位,自己的就平淡无奇,谈不上满意。问题到底出在哪?如何给设计作品最后”定妆”,让最终的设计脱颖而出?下面这5条经验之谈(层次、色彩、阴影、字体、氛围)能帮你搞定这个问题。

最后一公里?最后一公里!

最后一公里「Last Kilometer」这个概念,最早是拿来形容公共交通末梢的问题。后来各个行业都开始用,就逐渐引申为完成一件事最后且关键性的一步。(通常很棘手,但如果解决得当就能为整件事形成完美的闭环)而在设计领域里,大熊认为这「最后一公里」的问题,恰恰就落在最终项目的呈现上。

你可曾想过这么一个问题:自己设计书看的不少,”设计大牛”的文章一篇不落,工作几年经手的项目不说多有难度,至少数量上也很足够了,照理说”设计经验”很丰富。可为什么逛 dribbble、behance、FWA 时,总能明显感觉到,明明风格相近,别人的作品看上去很有质感,细节到位,自己的就平淡无奇,谈不上满意。问题到底出在哪?

不光是刚入门的设计师会有这样的困惑,就连”身经百战”的资深设计师,也会面临类似的瓶颈,只是深度不同。

所以,如何settle、如何给设计作品最后”定妆”,让最终的设计脱颖而出?

下面这5条经验之谈能帮你搞定这个问题。

一、层次

层次分平面和纵深。任何一个设计师,都应该充分意识到,有节奏的层次变化,能在用户内心产生微妙的化学反应。

我们来举个栗子。

这是一个简单的底图+文字(背景是卡塔尔航空),没有任何特别之处。然而却问题多多,不赶紧补救一下,根本拿不出手。首当其冲的是平面版式的层次,全部内容堆到一起,丢失视觉重心;其次是画面没有纵深感,稍作停留就觉得乏味。

5个帮你快速提高设计稿质感的实用方法

「Before」

理一下思路,我们可以从这几个地方入手:

一级标题、二级标题、正文的强弱层次区分开;

沿着左侧的机翼割裂方形框,形成纵深感;

来看看效果:

32dx20160505

「After」

看出区别了吗。按照刚才的思路稍作修改,是不是立刻焕然一新。

原理很简单:

通过后期将画面中的元素突出或弱化,人为的制造出视觉差,大大增强画面的立体感。

31dx20160505

「画面元素在人眼中呈现的先后次序」

在设计中多多运用这样的技巧,给自己的设计制造富有节奏的层次感,结果可能就大有不同。

是为「设计最后一公里」之层次。

二、色彩

大熊在转行做设计前,是一个土木工程师。项目里密密麻麻的CAD走线大红大绿,没有眼瞎已经是侥幸。连大熊这样的渣渣都能通过后期不断练习,勉强在设计中把颜色基本用对,你们就更不用说了。所以,色彩一定要花功夫调整,否则可能原本不错的设计稿因为颜色用的不够“正”,就被可怜的打入冷宫。

我们来看这幅图:

30dx20160505

毫无疑问,肯定是后者更舒服?可是凡事要多问为什么,我们把画面的颜色提取出来看看:

29dx20160505

左侧的色样超过10种,右侧的色样不过3种。

28dx20160505

永远记住,在绝大多数没有把握的情况下,要严格控制画面中颜色的数量,否则很容易擦枪走火。

再来看另外一个栗子:

27dx20160505

同样的,大熊将颜色提取出来,对应至色轮:

26dx20160505

发现症结所在了吗?

25dx20160505

什么样的产品,就运用什么样的颜色组合。

24dx20160505

大熊在设计选色上,自己总结了4种办法,效率非常高(也曾在公司内分享过):

近似色

互补色

同色系

自然(图片中)寻找

拿近似色来说,有现成的工具比如 Adobe Color,以及 Apple 设计师也在用的Color Schemer Studio 2 帮忙,在色轮上取正负30°的颜色,通常就是非常好的近似色组合。

23dx20160505

「Adobe Color」

22dx20160505

「Color Schemer Studio」

我们将上图Color Schemer取的颜色来一次现场配色,是不是毫无违和感:

21dx20160505

「蒙特里安构成派的作品风格,按近似色重新组合」

再说互补色,色轮上对应的两个颜色就是视觉冲击最强的颜色组合。

20dx20160505

但是千万不要拿来就要,先敲定一个主色和若干辅色:

19dx20160505

再确定色块的比例:

18dx20160505

「比较常用的做法」

接着说同色系,这个比较简单,通过加深或减淡基本色,就可以定义一组可用的颜色出来:

17dx20160505

16dx20160505

15dx20160505

大熊基本上是选定一种颜色后,分别叠加20%透明度的白色和20%透明度的黑色,得到了想要的同类色组合。

最后说说从自然中取色,拿一张大表姐的照片举例,放入Adobe Color 自动识别出图片中的主要颜色:

14dx20160505

「Adobe Color 识别颜色」

根据这几个颜色以及主辅色的比例,我们可以在短短几分钟就完成一个可用的版式设计

13dx20160505

「这里稍微提升了画面的亮度和饱和度」

如果在设计中发现作品不合心意,没准问题就出在颜色上。

上述4个技巧在任何场景下都可以灵活运用,这下知道该怎么做了吧。

(责任编辑:RGB)

织梦二维码生成器
顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容