用户界面中加入插图,10大理由告诉你如何靠它增强用户体验

过去的几年中，用户界面中加入插图经常是最受欢迎也最稳定的设计趋势之一。今天，摹客的老汉伴将带领各位一起探讨设计师在网页或移动APP的UI设计，尤其是核心视觉元素中使用插图的理由。

什么是插图？

基本上，插图是对特定概念，文本或过程的视觉解释。这是一个以此支持、澄清乃至扩展他们从其它信息来源获取的思路的图像，通常以文本的方式给出。这个词原本就意味着“为这些事物投光”，因此它的主要目的是帮助客户理解或想象更好的东西。

多年来，插图已被融合到各类印刷品中，如书册，杂志，报纸，海报，传单，教育材料。后来，动画和视频制成为插画带来了新的氛围。最近，新的科技和软件实现了数字插画时代的发展。

随着网站和移动应用程序的不断下降，插画的意愿和应用也不断上升。由于其美观性和成就性，插画也有成为提升可用性、情感和触觉吸引力的界面之一。但是在UI设计中有什么功能是可以借助插图来表明的呢？

界面设计中使用插图的方式

和其它界面元素一样，插画的功用性多于装饰性，可以使信息或交互变得更清晰明了，也非常时尚。所以，何乐而不为？下面是我总结的可以使用插图的地方：

•主页横幅

•主题图片

•吉祥物和人物

•博客文章图片

•引导流程和工具提示

•奖励和其它游戏化图形

•通知和系统消息

•贴纸（特别适用于Messenger应用程序）

•讲故事

•信息图表

•营销材料和广告横幅

•内容类型的可视标记

•支持网页或应用的社交网络页面。

以下是插图在界面设计中深受欢迎的十大原因–也许你可以考量在下一个设计项目中使用他们。

界面设计中使用插图的十大原因

1.自定义插图为原创性和戏剧和谐奠定了稳固的基础

图形为图标、印刷品或品牌相关的东西带来了一丝风格和时尚。在竞争激烈的全球中，脱颖而出至关重要。否则，人们反而可能不会尝试你的产品，更不用说知道它的好处了。

顺便说一下，这就是为什么许多公司将手稿用作博客文章、评论和登录页面的主页横幅的理由。在这些状况下，设计师可以按照目标受众喜好对作品进行调整，并将其与特定项目或主题背后的业务目标或看法进行平衡。这样可以找到富有创意的意象、配色方案、角色和环境，从而有效地吸引特定的听众群或读者。

看看这副关于UI动画的文章的意象标题插图。智能电脑扮演幕墙或屏幕的角色，就像在木偶剧院中使用的那个，设计师充当演员，每个演员都展现了特定的动作表现模型。

2.插图充当可视触发器，可迅速传输必要的消息

绝大多数人对图像的认知能力达到文字。这是一个无关好坏的事实，只是设计师可以运用这一点来提高网页或移动布局的视觉效果。一般来说，人们颇具非常广泛的素养来认知视觉标记，识别和处理数据，甚至转化为高级抽象的图像。

事实例证：

•心理学家宣称他们必须至少1/10秒来获取视觉画面或元素的通常认知（文本项目的速度确实不可能）

•视觉效果能更快地释放到大脑。重要的信息往往被大脑固定为触觉图像，即使他们是借助文本感知获取的

•与背景和周边元素相结合，图像不易遭受影响，而文本则高度依赖于可读性

•图像有助于保留大量记忆。这意味着处理界面的客户不应该处理和记住比实际还要更多的数据，因此交互变得更快

•当来自不同国家/地区的人使用应用或网站时，界面中的视觉效果可以使其非常通用

•图片突出了带有文本识别自然问题的用户的认知极限，例如阅读障碍或非阅读学龄前成人。

所有上述内容组成了与插图建立强大而迅速视觉联想的厚实理由：字符、颜色、构图、可辨识的细节将迅速通知用户并支持文本方式中给出的消息。

这是一个数字代理商的登录页面，通过一个由篮球运动员代表的主页横幅形象逐渐释放其打算迎来最高的商业挑战和目标的信息。

也有一个实例是为LunnScape创建的主题插图。LunnScape是一家专门从事景观设计和动物护理的公司。这些艺术品旨在用于营销活动，社交网络和网站。经过一系列的实验，设计师想出了明亮颜色和线条圆润的图形。其中一个插图的特征是他们忙于园艺，而第二个插图反映了公共空间的景色与水景设计。你看，通过这种的设计，插图立即与景观主题确立了宝贵的联系。

3.图形为Web或移动界面中应用的副本提供有效支持

正如之前提到的，在许多状况下，图片可以成为一种比复制更通用的通信软件。但是，也有一些陷阱需要认真考量。感知的速度并不是我们唯一必须的东西：人们可以超快地认知插图，但即使它们存储的信息不清晰以及可以被双重阅读，速度将能够带给积极的用户体验。

快速捕获造成错误理解的图形不能被定义为识别，它也是被迅速注意到。识别除了意味着速度，还意味着需要给你用户指示正确的动作或传达正确的触觉元素信息。因此，请立刻消除视觉隐喻以免引起误会或出错关联。

此处是一个金融服务网站的例子，帮助养老金领取者有效地管控他们的钱并降低它们的储蓄。艺术作品会立刻传送信息，使其与标语保持一致。这样，当布局中的所有元素协同工作时，网页看上去就很吸引人。

4.插图是一个很高的造就性故事的检验工具

简而言之，讲故事是将不同信息块合并为一个故事的方式，使他们更让人印象审核，并在各个别之间设立牢固的联系。这种方式在营销和客户体验设计方面体现得十分有效。

这是为我们今天的佛罗伦萨项目设计的插图集。它是一个可以让自由护士在线寻找工作的系统。设计师创造了原始角色，展示故事，设置氛围，发送信息或以与系统的心情、语气和声音相对应的方法呈现优势。

5.插图在设置情感诉求方面具备重要的力量

毫无问题，我们都是情感动物。谈到爱情设计，AarronWalter说：“许多网站和应用程序正在创造更好的感受。他们再次划分需求的层次结构，包括一个具有欢乐和愉快色彩的新顶层。如果界面可以帮助你完成一项关键任务并让你觉得十分愉快，那是不是很棒？是的，的确是这种！这将是你向同学推荐的一种感受;这将是一个值得传播的看法。”

这就是你可以运用插图实现的一些有效的事情。你投入其中的一切–线条、形状、颜色、面部表情、曲线动态–都会对点燃情绪造成重大影响。通过研究用户行为和制约情感吸引力的动因，设计师可以将插图成为一种超强的工具，将经验与用户情感从最初的互动相互连接。

Kiddy的这个登陆页面的设计概念让保姆雇佣变得更加简洁。可爱正面的元素在富有创意性的插图中扮演关键角色，为用户传递信息和心情。在客户开始阅读服务之前创造所需的氛围，并为所有页面提供另类的外观。

6.定制图形设计为哲学满意度奠定了基础，从而降低了项目的可取性

通过数百次关于“功能优先”主题的探讨和论证，人们对美好和愉悦的自然向往依然存在。当然，实用性和只用性是任何界面的基础。可取性是借助美观可爱的外形让他们注意到你的产品，感受使用它的乐趣，并期望继续使用它。插图则是一种经过精心检查的方法来推动这一目标，因为它们可以添加美感，风格，优雅或任何您想要添加到界面中的内容。

这是一个网页设计概念，为旅客提供简洁明亮的预定服务。它在页面左侧使用持续的3D插图，而右边部分则突显搜索住宿的方式。

7.插图令人难忘且引人入胜。因此他们在增加品牌知名度和可识别性方面有不错的体现

与文本相比，图像在大量记忆中带有更好的粘性。当图像提供信息时，影响即将下降，与目标受众的希望一致的设计、布局使得有插图的UI设计可以比较有效的降低网站或移动应用程序的品类性。这就是插图被广泛用于鼓励流程的缘由之一。

这种是PerfectRecipes应用程序的步骤引导图。在交互开始时，用户设置她们想要推动的目标，例如减少或降低体重，保持健康的食物等。此外，用户或许会标记它们不偏爱的成分，以便应用程序不会显示包括他们的食谱。插图以明亮和原始的方法可视化目标。

这是另一个使用步骤引导的事例。有趣的人物和插图作为app游戏化的关键元素。集成到UI中的原始吉祥物作为通信和交互的核心元素，在不同的状况下，它向用户传递不同的消息，使交互更加用户友好和拟人化。

8.数字插图可有效创建动画影片和互动元素，使交互生动优雅

越来越多的网站和应用程序在用户界面中应用动画。通过这些方法，不仅可以提高可用性，还可以提高情感吸引力和UI外观的精致。这只是为什么我们一直看见动画徽标，图标或者复杂的动漫插图。动画能为趣味、消息和心情带来更多体现力。更重要的是，应用动画视频只是热门且有效的态势之，插图可以取得更高水准的研发和与用户的沟通。

这是Whizzly动画徽标的例子。Whizzly是年轻人展现人才和分享趣味项目的社交网络。应用于标识以及动画版本的戏剧形式使其看出来令人愉快，令人难忘和心情化。

9.基于有趣视觉意象的插图使设计新颖且引人入胜

与艺术一样，在设计中，隐喻是打动用户并使它们考虑所提供的看法的有效方法。插图使设计师无法处理与特定目标和用户相对应的另类隐喻。

这是一个约会应用程序的登录页面的概念，让人们找到它们完美的一对。插图展现了主题制作鲜艳的视觉触发器，并有效地结合了他们联合设备的形象。

平面设计师遭遇的一个关键挑战是寻求原始风格–而这正是促使这件艺术品悖论的缘由。在平面插图的文章中，平面设计师分享了怎样抓住这条金鱼的实用方法，并在标题插图中应用了同样的比喻。

10.人们迅速注意并解码图像，因此明智地使用插图可以使交互更简洁，更便捷

图标和插图等自定义图形可以作为图标清晰直观导航的重大改进。在许多状况下，用户界面中的基本交互通常会节省几秒钟，这点十分重要，并且这只是将带有视觉标记的的内容转化为图形的基本因素。但是，请记住：如果图像可能被错误地解码或根本没有解码，他们则必须额外的复制内容支持。而用户测试将有助于找出这些元素绝对清晰，哪些元素必须用文本解释。

以下是为移动照片编辑器构建的原始图标Cuteen：支持文本提示的优雅插图可帮助用户迅速轻松地处理内容。

要考虑的要点

其实，现有的感知方案不可能满足客户的任何规定，但在图形设计方面有一些需要考量的技巧：

•目标受众（身体素质，年龄，文化背景，总体发展和教育水平）

•典型的产品使用环境

•全球或本地产品差价水平

•所选图形和语义的辨识水平

•图形提供的分心/集中程度

所有提及的技巧都涵盖人类感知能力并妨碍视觉数据感知的品质。对于设计师来说，重要的是要记住：仅仅让用户发现布局的元素是不够的，让人们了解到这种图形的涵义并迅速理解他们所释放的信息是至关重要的。