【编者按】本文译者@C7210 网站和移动产品身上的科技味道是与生俱来的，界面背后交织着各种代码脚本、信息、链接等，这些复杂的数据与逻辑必须通过网页或应用的界面与用户进行互动，而设计师们的职责之一，就是想办法让这些“接口”更容易访问和使用，让用户更亲切。

有很多方法可以帮助设计师们“中和”掉产品身上的科技气息，其中最简单直白而卓有成效的就是打造更亲切友好、更有人情味儿的设计方案。

这自然是关于“情感化设计”的话题，而本文则会重点讨论其中的一个方面，即手绘、手写和草图风格对产品个性及整体体验所能起到的提升作用。

个性与真实

手绘与草图风格的视觉元素是展现产品个性、传达真实效果的好方法。想象一下，当收到亲人或朋友寄来的信件或贺卡时，你希望里面的内容是对方手写的还是打印出来的？手写的信息无论到什么时候都比机器产出的更加亲切友好对叭？在网站和移动产品当中，这个道理同样有它的适用之处。虽然不是纸质，但我们仍可以让用户界面当中的内容看上去像是来自于真人之手，给用户带来更多真实可信的感觉。接下来我们一起看几个实际的产品范例。

形象与气质

首先是Balsamiq，他们的产品本身就是帮助设计师制作草图风格的原型的。

Balsamiq的功能非常强劲，不过它一直保持着非常“基础”的外观形象与气质，让设计师们可以找到使用纸和笔的感觉。一方面，我们可以通过它来打造低保真手绘风格的产出物，另外一方面，这个核心功能也使Balsamiq自身成为了一个具有独特形象和气质的产品。

品牌识别

手绘风格可以给图像带来独特的性格特征。人类特有的带有瑕疵的笔迹可以形成一种非常微妙的、机器难以复制的视觉张力，让浏览者不自觉的将注意力投入进来进行观察；相比之下，计算机绘制出的那些精确而完美的图形在如今反而成为了一种过于普通、难以吸引眼球的东西。

代码编辑器Notepad++就有一个很乖巧很有特色的手绘风格logo，里面的小变色龙象征着多种类型的代码，2乎乎的非常可爱，让人忍不住多看上几眼。另外，手绘风格同时也象征着用户通过这款产品做的事情的本质——从无到有的创造。这样一个logo会让用户牢牢的将Notepad++的品牌记在心里，而且很难与其它同类产品混淆。

个性

手绘和手写风格的元素可以让产品承载起强烈的个性，在用户与网站或移动应用之间建立起情感层面的关联。通过手绘风格表达出的内容可以让人感觉到其背后有真人存在；这里所说的“真人”，即包括产出内容的人，也包括用心打造内容表现形式的设计师们。让用户在使用产品的过程中潜移默化的感受到真切的人和人之间的交流，这对于提升产品的可信度及体验满意度是非常重要的。

MathBoard是一款帮助小孩儿练习算数的iPad应用。它的界面所模拟的是经典的黑板外观，输入及输出的内容都模仿了粉笔的效果。整个练习以解题为主要形式，小孩儿们在想不出来的时候还可以在左侧的黑板上直接进行书写演算。用户在这款产品中所能感受到的是真实的学习氛围，而不是冰冷枯燥的人机对话。

推荐阅读：为产品赋予人格 – 情感化设计的组成要素及实践案例

信息与内容

产品当中内容的呈现方式将决定着用户能否有效的获取和理解信息。要在恰当的时候，以足够抢眼的方式把用户的目光吸引过来；信息必须简单明了，与相关功能具有明确的关联，并且能够有效引导用户执行接下来的操作。在实际当中要做到这些其实不是件容易的事。下面我们来看几个通过手绘和草图效果来传达信息、引导用户的例子叭。

对功能进行诠释

作为设计师，我们对手绘草图在这方面的作用早已不陌生了。我们经常需要通过草图或故事板向团队其他成员展示想法，介绍设计方案；其实这种方法在很多时候同样可以用在实际产品当中。例如你有一个在概念和功能方面相对较新或是较为复杂的产品，那么不妨在介绍当中加入一些草图形式的视觉元素，更直观的向用户描述一些原本非常抽象的概念。这种方式可以给用户带来一种更加“私人化”的感觉，好像服务提供商或是设计师正在当面为他进行介绍讲解一样。

TestFlight(提供移动应用测试服务)在这方面做的很棒。你可以在他们的首页当中找到大量手绘草图风格的视觉元素，特别是在向开发者介绍其服务特色的地方，草图搭配简单文案的形式不仅能有效的吸引浏览者的注意力，而且非常直观易懂。

可视化的展示流程

与之前的一点类似，我们同样可以使用手绘草图向用户展示产品的功能流程。实际上，要在产品或服务中提供完美的解决方案是很难的，如果能够以更加坦诚和友好的姿态展示出一些复杂方案所涉及到的流程，即使它们看上去并不流光溢彩，却可以让用户感受到一份真实可信。

设计师兼前端开发者Alex Faure在他的网站中通过手绘风格的视觉元素搭配文案向访问者展示了网站设计开发服务当中的重要流程步骤，给人的感觉便是非常用心，值得信任，仿佛不仅是他本人精通于提供这项服务，而且他很乐于让潜在用户也一起参与到整件事的流程当中进行沟通互动。

引导用户

无论设计网站还是移动应用，设计师们都要时刻考虑到用户当前所处的操作环节，提供必要的引导以帮助他们顺利完成目标。(推荐阅读：具有引导性的移动应用界面设计模式)

在这方面，手绘风格的图标也是你可以考虑使用的设计元素。当然，大家都知道图标在界面设计当中的重要性，那么手绘风格的有什么不同呢？和前文所述的道理类似，我们通常所使用的那些图标固然更加漂亮，充满细节，但越是精致的图标，越会给人一种“软件制造”的感觉，而手绘风格则显得更加个人化，更具亲和力，能给用户带来一种真人交流的感觉。多数人更加倾向于接受真人的指引与帮助，而不是机器。

iPhone应用Stamped使用了非常漂亮而且含义准确的手绘风格图标来引导用户。该应用本身就是基于真实人类之间的分享交流的，而手绘风格的视觉元素则在“人情味”方面又锦上添了个花。

人物介绍

无论是新创企业，还是工作室、自由设计师，如今大家都越发看重团队或个人的介绍页面。站在用户的角度讲，人们也更加希望了解某个网站产品或应用服务背后的那些真实的人。一个简单的“联系我们”已然不够了，人们希望知道他们能联系的到底是谁。你所做的介绍越个人化，人们就会越发的信任你。

令人喜爱

能否做到让人喜爱是很关键的。如果人们感觉到了你的傲慢无礼，那么即使你提供的个人信息再详细也是毫无意义的，人们总是更乐于相信那些他们喜欢的人。在介绍信息当中使用手绘元素，这可以让个人或团队的形象更具亲和力，看上去更生动、更富创意、容易相处。