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

我的网站

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

时间:2016-05-11 10:54来源:微信公众号:大熊拨清波。 作者:未知 点击:
三、阴影 几乎是GUI界面设计诞生的那一刻起,阴影的运用就无处不在。 20世纪末的应用界面基本上都长这样: 「Windows 2000 Pro预览版」 可以看到,界面设

三、阴影

几乎是GUI界面设计诞生的那一刻起,阴影的运用就无处不在。

20世纪末的应用界面基本上都长这样:

wszn20160505

「Windows 2000 Pro预览版」

可以看到,界面设计有高光有阴影有渐变。在当时GUI设计是一个新兴的行业,大家都没有可参考的对象,传统的平面印刷设计很难拿来借鉴,同时又受制于制图软件特性限制,也就有了如上图的结果。

后来设计工具不断迭代,手法也越来越多,特别是iPhone OS(是的那会还不叫iOS)出世后,拟物设计「Skeuomorph」风靡整个设计圈,在iOS 6的时候达到了顶峰。几乎所有设计师都在拼命画ICON,花费大量的时间在界面中的投影、反射、纹理、高光上,谁的设计能让人更想”舔”一口,谁就赢了:

11dx20160505

「被无数设计师临摹的图表界面,设计师 Mike 的作品」

iOS 7 推行扁平化设计后,当时的设计圈就炸开了锅。「这么多年辛苦练习的设计技巧,说抛弃就抛弃?」于是他们还是想到了阴影。你要说2014年最流行的设计风格是什么,毫无疑问是渐变「Gradient」+长投影「Long shadow」:

10dx20160505

「典型的长投影设计」

如果你还有印象的话,一定记得当时Appstore只要上推荐榜的应用,一大半都是这种风格。

艺术源于生活,长投影在生活中也随处可见:

9dx20160505

「罗德岛艺术设计学院——艺术博物馆外立面的长投影」

紧接着设计师们就看腻了长投影,开始转向纸片化的设计,另加上大范围的薄阴影烘托质感。风格依旧是扁平的,只是大家在探索的过程中往里面加入了很多新的元素,变着法子做出不一样的感觉。

8dx20160505

「泰国设计师 buatoom 设计的广告banner」

为了更好的理解在这二十年里的设计风格演变,大熊画了下面的图来管中窥豹:

7dx20160505

「阴影在设计中运用的演变」

大熊想说的是,对潮流不要抗拒,新的设计风格兴起一定有它的时代背景。(比如扁平化的设计将设计师从无止尽的像素堆叠中解放出来,从更实用的角度去做设计,让精力回归到最基本的交互和使用体验上。)然而也要时刻保持思考,风格是皮外物,适合的才是好的。

花这么长篇幅说阴影跟文章的主题「设计的最后一公里」有关系吗?

别着急,有的。

还是举个栗子,这是大熊2014年给某个定制高端户外游的公司做的视觉概念设定,仔细一看,问题不少。首先是采用卡片式的设计,最好将内容和背景脱离开,否则「可点击」的暗示不够强烈;其次是采用了幽灵按钮「Ghost Button」,要补充一些必要的细节让内容更完整。

6dx20160505

「Before」

所以我们可以这么改进:

通过边框「Border」和阴影「Shadow」将卡片导航与背景明显分割开;提高文字的可读性;

给幽灵按钮增加细节,即便鼠标没有移到上面处于「Hover」状态,也要给人明显可点击的暗示;

5dx20160505

「After」

是否看出区别:右侧底部卡片的标题可读性提高了,卡片和背景也分割的更明显。

一点点阴影,差别可以如此大。

四、氛围

优秀的设计作品无一不重视氛围的渲染,就好像去餐馆吃饭,同样一盘菜摆在苍蝇馆子的餐桌上,和摆在米其林餐厅里,人们对它的价格预期是不一样的。我们花了95%的时间在反复推敲设计的合理性,交互的一致性。为何不多花那5%的时间,将最终要给别人看的设计好好打磨,呈现一个更好的样貌?

我们还是来举个栗子,这是大熊很久以前练习时绘制的灯塔:

4dx20160505

「Before」

这张卡片设计没有丝毫特别之处,换句话说,太单调了。

我想我们可以从这几个方面入手,强化设计最终呈现的效果:

呼应主题的背景,可以用高斯模糊或渐变;

一些细微的装饰性元素;

文字和阴影;

一起动手试试:

3dx20160505

看起来是不是比原来孤零零的卡片更完整。

这就是为什么我们要强调氛围的重要性,同样的设计,仅仅多用一些心思,就提升了整个设计作品的完成度。

「越用心,越美好」这句话,在这里是适用的。

五、字体

大熊对字体的研究只有皮毛,但有一点记得很清楚:用对字体,设计才得体。

你不会想要在卡通风格的设计中用宋体,同理,也不会用娃娃体去做严肃文学作品的封面

用错字体,就像是穿着高跟鞋去登山,夹着拖鞋去跑步,总归是劳心乏力,还不好看。

十分惭愧,大熊平时用的最多的英文字体,无非就是这么几款:

2dx20160505

「基本都是系统自带字体,请善用搜索引擎」

此外不得不提的是,大熊所在公司当前的LOGO,也是在Lucida Grande这款字体的基础上做的变形设计(这款字体实在是太经典了):

1dx20160505

「haobtc LOGO

所以,这对你意味着…

每当设计接近尾声时,时刻记着从这五个角度重新梳理一遍(这里只是抛砖引玉):层次、色彩、阴影、氛围、字体,你会发现,如果每样都比之前好那么一点点,整体设计会大有不同。

设计中的「最后一公里」,归根结底是细节的积累,用心探索,设计会越做越好。

这篇文章里提到的几点,不过是设计中经常会碰到的常识,要想真正提高设计能力,还需要大量反复的练习。设计圈内高手如云,大熊依然徘徊在门外。只有通过不断学习,或许才有一天能做出让别人感动的设计,与大家共勉。

欢迎关注大熊的微信公众号:大熊拨清波。

dxqr160411_

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