从平庸到卓越！5个帮你快速提高设计稿质感的实用方法

为什么别人的作品看起来很有质感，细节到位，自己的作品平淡无奇，不满意？问题是什么？如何在设计作品的最后“化妆”，让最终设计脱颖而出？以下五个经验可以帮助你解决这个问题(层次、色彩、阴影、字体、氛围)。

最后一公里？最后一公里！

最后一公里「Last Kilometer」这个概念最初被用来描述公共交通末端的问题。后来，所有的行业都开始使用它，并逐渐扩展到完成一件事的最后和关键的一步。（通常很困难，但如果解决得当，它可以为整个事情形成一个完美的闭环）在设计领域，熊认为这是「最后一公里」问题恰恰落在最终项目的呈现上。

你有没有想过这样一个问题：你读了很多自己的设计书籍，“设计牛”的文章并没有落下，工作几年的项目并不难说，至少数量足够，合理地说“设计经验”非常丰富。但你为什么要去参观呢？ dribbble、behance、FWA的时候总能明显感觉到，明明风格差不多，别人的作品看起来很有质感，细节到位，自己的作品平淡无奇，不满意。问题是什么？

不仅新设计师会有这样的困惑，就连经历过百战的资深设计师也会面临类似的瓶颈，但深度不同。

因此，如何settlet呢？、如何在设计作品的最后“定妆”，让最终的设计脱颖而出？

以下五个经验可以帮助你解决这个问题。

一、层次

层次分为平面和深度。任何设计师都应该充分认识到，有节奏的层次变化可以在用户心中产生微妙的化学反应。

让我们举个栗子。

这是一个简单的底图＋文本（背景是卡塔尔航空公司）没有什么特别之处。然而，有很多问题。如果你不赶快补救，你根本拿不到。首先是平面布局的层次。所有内容都堆积在一起，失去了视觉重心；其次，画面没有深度感。如果你停下来，你会觉得很无聊。

「Before」

理清思路，我们可以从这些地方入手：

区分一级标题、二级标题和正文的强弱层次；

沿左翼切割方形框，形成深度感；

看看效果：

「After」

看到区别了吗？按照刚才的想法稍加修改，是不是立刻焕然一新？

原理很简单：

通过后期突出或弱化画面中的元素，人为地创造出视觉差异，大大增强了画面的立体感。

「画面元素在人眼中呈现的顺序」

在设计中多运用这样的技巧，为自己的设计创造一种有节奏的层次感，结果可能会大不相同。

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

二、色彩

在改变职业设计之前，熊是一名土木工程师。项目中密集的CAD线是红色和绿色的，没有盲人是幸运的。即使是像熊这样的残渣也可以通过以后的持续练习，几乎不能在设计中使用正确的颜色，更不用说你了。因此，颜色必须努力调整，否则原来好的设计草案可能会因为颜色不够“积极”，可怜地进入冷宫。

让我们来看看这张图：

毫无疑问，后者一定更舒服吗？但一切都要问为什么，我们提取图片的颜色来看：

左边有10多种色样，右边只有3种色样。

「Color Schemer Studio」

我们上图中的Coloror Schemer采取的颜色进行现场配色，是否没有违和感：

「蒙特里安的作品风格是根据近似颜色重新组合的」

除了互补色，色轮上对应的两种颜色是视觉冲击最强的颜色组合。

但是不要拿来，先敲定一个主色和几个辅色:

确定色块的比例：

「常用的做法」

然后说同色系，比较简单，一组可用的颜色可以通过加深或者淡化基本颜色来定义:

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

最后，我们来谈谈从自然中取色。以大表哥的照片为例，把Adobe放进去 Color 图片中的主要颜色自动识别：

「Adobe Color 识别颜色」

根据这些颜色和主辅色的比例，我们可以在几分钟内完成一个可用的布局设计：

「这里稍微提高了图片的亮度和饱和度」

假如在设计中发现作品不尽如人意，也许问题就在于色彩。

以上四种技能在任何场景下都可以灵活运用，现在就知道该怎么办了。

三、阴影

从GUI界面设计诞生的那一刻起，阴影的使用就无处不在。

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

「Windows 2000 Pro预览版」

可以看到，界面设置有亮点、阴影和渐变。当时，GUI设计是一个新兴的行业，没有人可以参考。传统的平面印刷设计难以借鉴。同时，由于制图软件的特点，结果如上图所示。

后来设计工具不断迭代，技术越来越多，尤其是iPhone OS(是的，那不叫iOS)出生后，拟物设计「Skeuomorph」整个设计圈在iOS中很受欢迎 6.达到顶峰。几乎所有的设计师都在努力画ICON，在界面的投影、反射、纹理、亮点上花费了大量的时间。谁的设计能让人更想“舔”，谁就赢了:

「图表界面被无数设计师复制，设计师 Mike的作品」

iOS 7 扁平化设计实施后，当时的设计圈爆炸了。「这么多年的设计技巧，说抛弃就抛弃？」所以他们还是想到了阴影。毫无疑问，2014年最流行的设计风格是什么？「Gradient」+长投影「Long shadow」：

「典型的长投影设计」

如果你还有印象，一定要记住，只要Appstore在推荐榜上的应用，大部分都是这种风格。

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

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

然后设计师厌倦了长投影，开始转向纸质设计，加上大范围的薄阴影来衬托纹理。风格仍然是平的，但我们在探索的过程中添加了很多新的元素，改变了做出不同感觉的方式。

「泰国设计师 buatom设计的广告baner」

为了更好地理解这20年来设计风格的演变，大熊画了以下图片来窥视豹子：

「阴影在设计中的演变」

熊想说的是，不要抗拒这一趋势。新设计风格的兴起必须有其时代背景。（例如，平面设计解放了设计师从无尽像素堆叠中解放的设计，从更实用的角度进行设计，使能源回归到最基本的互动和使用体验。）然而，我们也应该始终保持思考，风格是皮革，适合好。

花这么长的时间谈论阴影和文章的主题「设计的最后一公里」有关系吗？

别担心，有的。

让我们举个栗子。这是大熊在2014年为一家定制的高端户外旅游公司设置的视觉概念。仔细看，有很多问题。首先是卡片设计。最好将内容和背景分开，否则「可点击」暗示不够强烈；其次，使用幽灵按钮「Ghost Button」，补充一些必要的细节，使内容更加完整。

「Before」

因此，我们可以这样改进：

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

添加幽灵按钮的细节，即使鼠标没有移动到上面「Hover」状态，也要给人明显可点击的暗示；

「After」

区别是否可见：右下角卡片标题可读性提高，卡片和背景分割更加明显。

一点点阴影，差别可以这么大。

四、氛围

所有优秀的设计作品都注重氛围的渲染，就像去餐馆吃饭一样。苍蝇餐厅的餐桌上放着同一道菜，这与米其林餐厅的价格预期不同。我们花了95%的时间反复思考设计的合理性和互动的一致性。为什么不花5%的时间打磨别人最终看到的设计，呈现出更好的外观？

让我们举一个栗子。这是大熊很久以前练习时画的灯塔：

「Before」

这张卡片的设计一点也不特别。换句话说，它太单调了。我认为我们可以从这些方面入手，加强设计的最终效果：

高斯模糊或渐变可用于呼应主题的背景；

一些微妙的装饰元素；

文字和阴影；

一起试试:

它看起来比原来孤独的卡片更完整吗？

这就是为什么我们要强调氛围的重要性，同样的设计，只要多用心思，就能提高整个设计作品的完成度。

「越用心，越美」这句话适用于这里。

五、字体

大熊对字体的研究只有皮毛，但有一件事要记住：使用正确的字体，设计得体。

在卡通风格的设计中，你不想用宋体，同样，也不想用娃娃体做严肃文学作品的封面。

使用错误的字体，就像穿着高跟鞋去爬山，穿着拖鞋去跑步，总是疲惫不堪，还不好看。

我很惭愧，大熊平时用的最多的英文字体就是这么几个:

「系统基本都有自己的字体，请善用搜索引擎」

此外，必须提到的是，大熊公司目前的LOGO也在Lucida 基于Grande字体的变形设计(这个字体太经典了)：

「haobtc LOGO」

所以，这对你来说意味着…

每当设计接近尾声时，记得从这五个角度重新梳理(这里只是抛砖引玉)：层次、色彩、阴影、氛围、字体，你会发现，如果一切都比以前好一点，整体设计就会大不相同。

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

本文中提到的几点只是设计中经常遇到的常识。为了真正提高设计能力，我们还需要大量的反复练习。设计界有很多专家，大熊仍然在门外徘徊。只有通过不断的学习，也许有一天我们才能做出让别人感动的设计，并鼓励大家。