三、阴影 几乎是GUI界面设计诞生的那一刻起,阴影的运用就无处不在。 20世纪末的应用界面基本上都长这样: 「Windows 2000 Pro预览版」 可以看到,界面设计有高光有阴影有渐变。在当时GUI设计是一个新兴的行业,大家都没有可参考的对象,传统的平面印刷设计很难拿来借鉴,同时又受制于制图软件特性限制,也就有了如上图的结果。 后来设计工具不断迭代,手法也越来越多,特别是iPhone OS(是的那会还不叫iOS)出世后,拟物设计「Skeuomorph」风靡整个设计圈,在iOS 6的时候达到了顶峰。几乎所有设计师都在拼命画ICON,花费大量的时间在界面中的投影、反射、纹理、高光上,谁的设计能让人更想”舔”一口,谁就赢了: 「被无数设计师临摹的图表界面,设计师 Mike 的作品」 iOS 7 推行扁平化设计后,当时的设计圈就炸开了锅。「这么多年辛苦练习的设计技巧,说抛弃就抛弃?」于是他们还是想到了阴影。你要说2014年最流行的设计风格是什么,毫无疑问是渐变「Gradient」+长投影「Long shadow」: 「典型的长投影设计」 如果你还有印象的话,一定记得当时Appstore只要上推荐榜的应用,一大半都是这种风格。 艺术源于生活,长投影在生活中也随处可见: 「罗德岛艺术设计学院——艺术博物馆外立面的长投影」 紧接着设计师们就看腻了长投影,开始转向纸片化的设计,另加上大范围的薄阴影烘托质感。风格依旧是扁平的,只是大家在探索的过程中往里面加入了很多新的元素,变着法子做出不一样的感觉。 「泰国设计师 buatoom 设计的广告banner」 为了更好的理解在这二十年里的设计风格演变,大熊画了下面的图来管中窥豹: 「阴影在设计中运用的演变」 大熊想说的是,对潮流不要抗拒,新的设计风格兴起一定有它的时代背景。(比如扁平化的设计将设计师从无止尽的像素堆叠中解放出来,从更实用的角度去做设计,让精力回归到最基本的交互和使用体验上。)然而也要时刻保持思考,风格是皮外物,适合的才是好的。 花这么长篇幅说阴影跟文章的主题「设计的最后一公里」有关系吗? 别着急,有的。 还是举个栗子,这是大熊2014年给某个定制高端户外游的公司做的视觉概念设定,仔细一看,问题不少。首先是采用卡片式的设计,最好将内容和背景脱离开,否则「可点击」的暗示不够强烈;其次是采用了幽灵按钮「Ghost Button」,要补充一些必要的细节让内容更完整。 「Before」 所以我们可以这么改进: 通过边框「Border」和阴影「Shadow」将卡片导航与背景明显分割开;提高文字的可读性; 给幽灵按钮增加细节,即便鼠标没有移到上面处于「Hover」状态,也要给人明显可点击的暗示; 「After」 是否看出区别:右侧底部卡片的标题可读性提高了,卡片和背景也分割的更明显。 一点点阴影,差别可以如此大。 四、氛围 优秀的设计作品无一不重视氛围的渲染,就好像去餐馆吃饭,同样一盘菜摆在苍蝇馆子的餐桌上,和摆在米其林餐厅里,人们对它的价格预期是不一样的。我们花了95%的时间在反复推敲设计的合理性,交互的一致性。为何不多花那5%的时间,将最终要给别人看的设计好好打磨,呈现一个更好的样貌? 我们还是来举个栗子,这是大熊很久以前练习时绘制的灯塔: 「Before」 这张卡片设计没有丝毫特别之处,换句话说,太单调了。 我想我们可以从这几个方面入手,强化设计最终呈现的效果: 呼应主题的背景,可以用高斯模糊或渐变; 一些细微的装饰性元素; 文字和阴影; 一起动手试试: 看起来是不是比原来孤零零的卡片更完整。 这就是为什么我们要强调氛围的重要性,同样的设计,仅仅多用一些心思,就提升了整个设计作品的完成度。 「越用心,越美好」这句话,在这里是适用的。 五、字体 大熊对字体的研究只有皮毛,但有一点记得很清楚:用对字体,设计才得体。 你不会想要在卡通风格的设计中用宋体,同理,也不会用娃娃体去做严肃文学作品的封面。 用错字体,就像是穿着高跟鞋去登山,夹着拖鞋去跑步,总归是劳心乏力,还不好看。 十分惭愧,大熊平时用的最多的英文字体,无非就是这么几款: 「基本都是系统自带字体,请善用搜索引擎」 此外不得不提的是,大熊所在公司当前的LOGO,也是在Lucida Grande这款字体的基础上做的变形设计(这款字体实在是太经典了): 「haobtc LOGO」 所以,这对你意味着… 每当设计接近尾声时,时刻记着从这五个角度重新梳理一遍(这里只是抛砖引玉):层次、色彩、阴影、氛围、字体,你会发现,如果每样都比之前好那么一点点,整体设计会大有不同。 设计中的「最后一公里」,归根结底是细节的积累,用心探索,设计会越做越好。 这篇文章里提到的几点,不过是设计中经常会碰到的常识,要想真正提高设计能力,还需要大量反复的练习。设计圈内高手如云,大熊依然徘徊在门外。只有通过不断学习,或许才有一天能做出让别人感动的设计,与大家共勉。 欢迎关注大熊的微信公众号:大熊拨清波。 |