如何在单一的设计项目上混合插图和图片

你是否厌倦了千篇一律的设计方式，你想试试一些冒险的设计方式、风格吗？你是不否想过，或许可以将图片与插图混搭结合在你的设计中？一个手绘元素可以增加设计的趣味性（比如像以前我们所推送的在拍摄的照片上添加一些搞怪的手绘元素）。当然，图像与插画的结合，看起来会更轻松、更真实一些。

这种技术可能会有点难以操作，但是，或许你看到一些漂亮的示例后，会对你有所启发。

今天我们将探讨这一趋势，并提供一些示例和小贴士，帮助你启发头脑风暴，用一些创造性的方式来融入你的设计。

本文原作者 Carrie Cousins，P大点S翻译！

1、使用插图作为 UI 的一部分

有时候，你可能会把一些元素整合融入到设计中去，但是，你是否有过认真的思考。对于UI来说，许多用户界面元素往往会以某种特定的方式呈现，他们不一定是手绘风格，但通常是一些类似于“网页”按钮的东西。

如果你想尝试手绘效果，使你的设计更上一层楼，或许你可以考虑使用插图（草图/素描）作为你设计中的一个重要的组成部分。

上图是WittyCookie的网站截图，它体现了一种奇思妙想的设计理念，它将插图和hero-style视频混搭组合，融入整体设计中，吸引了用户的目光。手绘元素在视频下方，类似于窗帘一样，有种可以让你拉的感觉，这样的处理，让网站看起来不那么像一个推销工作的机构，而更像是想要跟你一起玩耍，显得乐趣感、轻松感十足。

这个概念是有趣的，当你没有一个漂亮的图片或者视频目录时，或许你可以考虑用这样的方式来融入你的设计。

2、信息优先

当执行一个设计项目时，如果插图是你的第一直觉反应时，先画轮廓。在添加照片或视频元素之前，先绘制图示的部分，看看设计的位置。

上面的图片是Made by Few的网站截图。它的整个设计中，复杂的插图，尤其是插图上的人物，随着你的鼠标动作，令人印象深刻，包括设计师都可以欣赏到它的细节。在插画的下方，是一个循环的视频会议的场景。这个元素虽然小，但是却清晰的传达了，这是一个现场活动的视频，与插图完美的搭配，或许能勾起你的好奇心，你会想注册一下，看看这到底是什么。插图与视频的完美结合，烘托了会议氛围的传达。

上面的图像是 One Happy Camper 网站的截图。这是一种有趣的组合方式，照片与背景混合搭配，信息与图像同步呈现，你甚至可以使用纯白色的背景和黑白照片组合。背景的变化有效地传达了信息内容，让用户清晰了解你的网站主题。

3、把插图混合进排版

当你没有那么多优质的图像时，将插图混合进排版中，也是一个巧妙的方式。尽管这个概念听起来有点奇怪，思考一下：添加一个简单的插图元素来强调一个视频或照片，它可以突出你传达你想让用户知道的信息。

上面的 Achrival 网站使用的就是这样的，一个有趣的设计方式。A 这个元素作为该机构的标志（A 其本身的动态很漂亮，我截图截不好，有兴趣的可以进他们网站看看 www.archrival.com），短视频循环，律动的A，更能吸引人的注意。假如没有“A”这个元素，你看就的就只是不停循环的图像，你的目光根本无法聚焦。这是一种不同的设计方式，但却足以像一样大标题一样，吸引用户的注意。

4、考虑动画

插图，无论是手绘插画，还是计算机绘制的数字插画，它们都可以很容易的添加一些简单的动画。从导航工具到吸引用户的趣味景点，动画插图可以让你的设计增加趣味性，让你有意想不到的效果。

对于动画，不要走极端，保持简单和目的性就好。每个动画都应该有一个目标：提供一个链接、一个定向的提示或一个惊喜，一切吸引用户的，让用户感兴趣的目标。

你可能不希望这种设计方式应用到财务规划项目上，但是，你可以看到，我们上面的截图，Taylor Made，它上面所使用的插图动画和摄影都很漂亮。动画图像似乎使财务规划看起来不那么复杂和困难，有利于指引用户点击链接。

网站的插图还填充了颜色，中和后的组合，让它最终得到一个富有趣味性的、吸引人的、易于操作的设计。

5、讲述一个故事

当涉及到混合真实和插图的图像时，最好的组合是，有效地讲述一个故事。视觉匹配内容的情绪，让人感觉它们是一体的。

通常情况下，使用这种设计方式，更多的是为一次性的内容所采用（比如说专题之类的），但它们往往集成了一个更为完整的品牌战略。看看上面的 Cone Flower Creamery，它的网站设计使用了大部分的图解故事来讲述故事，传达情绪，这样的方式，将使用户更加的了解该品牌。当你想看到更多，用图片来填补这一空白。设计是非常简单的，专注于故事本身，而不是用于创建它的技术。

我们的另一个示例是  Kuoz，它是一个图片和插图作品的展示网站。仔细看看分组，深入了解为什么这个设计作品不会令人感到混乱。图片和插图通过类似的配色方案联系在一起，每一个展示项目，看起来都让人感觉像是错位，却又显得和谐。

它的有趣在于，混合图片和插图看起来，像是他们故意为之，却为显得和谐。运用这种设计方式，我们需要做的是，不应该使图片和插图，看起来像一堆卡在一个页面上的元素。

结语

你有足够的勇气去采取这样的设计方式，跟随这样的设计趋势吗？虽然这项技术可以看起来令人惊叹，但是很大的可能，客户并不一定能接受。

如果，你想应用这些设计方式，提前绘制一些插图，让你可以进一步推销你的设计概念。带一些这样的设计示例，效果好的示例，向其他人展示你能做什么。记住，讲述一个故事，吸引用户！