技多不压身！视觉设计师应该修炼的五个交互设计技能

编者按：2016年，视觉+交互兼通的设计师就业价值会更高，虽然大多数视觉设计师都没有经过正式的交互基础训练，不过别急，今天@IrioLee 翻译的这篇Smashingmagazine 好文，分享了5个能提高你交互技能的方法，一起来试试。

现在，所有基于Web进行设计的人都需要对交互设计原则有一个基本的了解。即使你没有在人机交互、用户体验设计或人性因素等方向的正式学习训练，但只要你了解这些学科的基本原理，依然会大大提高了你设计的成功机会。这一点对视觉设计师尤为明显。大多数视觉设计师都在艺术学校或者在培训机构经过正式或者非正式的训练。

虽然这些机构专注于对沟通进行设计，但两类机构通常都无法提供强大的交互设计基础。对于你来说，拥有更广泛的技能集合，不仅使你的设计更成功的，而且会让你变得更有就业价值（即你变成了独角兽）。在这里没办法说得详尽，不过在你开始之前，下面有五个关键的策略，值得你在下一个项目中去理解和实现它们。

1. 主动与你的客户交谈

在设计在线体验的时候，你要了解的最重要的事情是你的受众。了解他们是谁，他们做什么为生，年纪多大，如何工作，他们如何理解网络，并如何使用它，是在什么样的设备上，这些都提供了对他们的痛点的宝贵观察，而你需要负责解决他们的痛点。

对你的设计制定明确的约束也有助于你的设计过程。例如，如果你的受众在医院主要使用移动设备访问网络，那么你的设计必须能够响应式地兼容这些设备，以及设备被使用时的环境。此外，你应该在构建在沟通型设计的基础上了解你的受众，发现用户对颜色和字体之类元素的敏感性（比如物理上或文化上的）。

要了解你的受众，需要你与目标用户直接对话。这些对话可能发生在不同的论坛里。而最客观的方法，比如问卷调查是挺好的，但没有什么能比面对面地与你的客户交谈更好。根据你的工作目标，找到目标受众也有可能简单到比如，直接去当地的咖啡馆，花5美元买一把的礼物卡片，然后和咖啡馆里的顾客聊天。大多数人会很愿意花10到15分钟的时间分享他们的意见，来换一张咖啡馆的礼物卡片。其他用来发现用户方法还有比如，在Craglists网站上发布广告，从你的客户名单里拉取名字，联系贸易组织（例如对于像护士之类的特定用户类型），还有花时间去那些你的用户也会花时间去的地点（例如，音乐爱好者会出现在音乐会上）。

最初的对话可能会是令人尴尬的，但是随着次数越来越多，交谈的节奏会越来越接近问题。用户的模式也开始出现，从而让你可以定制每个访谈的问题，使之更为恰当。你从这些活动里学到的经验，可以用来帮助你创建用户角色模型——比如典型用户对你的设计的表现的集合，可以为你未来的设计决策提供决策的上下文。

2. 为用户确定方向

现在你已经对你的用户是谁有了理解，当他们使用你的设计时为他们确定方向是很重要的。为用户定向可以为他们提供一个非静态的体验。为了有效地提供这种体验，你的设计应该告诉用户三件事：

1）他们现在在哪里

在网站的大背景下，任何在线体验的关键都是理解用户目前在处理什么。如果用户很明显地知道他们在哪里，他们更有可能明白在当前的页面上你需要他们做。例如，如果用户知道他们在一个”产品详情页面“上，他们应该会期待看到购买的链接，也许还有一些关于其他产品的选项。

2）他们如何是到达的

如果说提供给用户明确的当前位置能为你预期的用户行为提供环境，那么你也要向用户展示他们到达过程的路径，提供了一个安全网。安全网是指用户对自己的行动有一个舒适的认知，如果用户跑到了错误的地方，他们就会知道他们可以退到之前的地方再试一次。

3）他们可以到哪里去

你已经明确了用户在哪里，以及他们如何是到达的，使得如果他们到了错误的地方可以回溯并尝试另一条路径。但如果他们已经准备好继续前进，或者他们认为回溯的路径也不会提供他们想要的内容，那么让用户知道在这一点有什么选项可用是必要的，不要让用户处在一个死胡同里。

永远都应该有一个可以继续行进的选项。有一个很好的例子是没有结果时的搜索结果页面。你应该让用户知道没有结果可以匹配他们的搜索查询，但同时应该有选项可以帮助他们寻求答案（例如相关搜索词）。用户行进的方式可以体现在你网站的导航上，但也可以作为情境支持来实现。

情境支持是指显然是可点击的界面元素，如按钮和滑块。

（作为情境支持的入门，我们选取诺曼的《日常生活的设计》的例子。虽然有点过时，但它为产品设计师应该如何看待他们的产品奠定了坚实的基础，）。

清晰的网站定向为用户提供舒适的感受，同时减少了用户犯错的机会，提高了当他们真的犯错时可以很快恢复的可能性。

3. 尽量简单

视觉设计师有可能是受美学追求的驱动才把某个元素添加到布局里，但不一定能够服务于交互的目的。虽然说美学元素很可能为体验润色，增加好感，但在设计一个交互体验时，应该考虑选择更简单的设计。

简化则意味着把屏幕上的元素减少到最基本的，能够促进用户的任务完成的那部分。以这一部分作为基线来开始，然后再添加少量的装饰。你要考虑好网站的品牌。品牌不仅审美的反映，更是体验的反映。如果一个网站做得很漂亮的，但这种漂亮又使得用户无法完成事务，那么这个网站（或品牌）最终是会失败的。

美学元素在任何体验中总有一席之地并且用途强大，但至关重要的的是你首先要确保体验是可用的。

4. 设计出对话

视觉设计训练主要专注于对沟通的设计，交互设计则努力地关注反馈回路——从本质上讲也就是用户与网站之间的对话。

当你打磨好网站的体验，便为系统提供了当用户做对或做错什么时与用户沟通的方式，确保你的体验能明确显示出用户是否成功操作以及用户要完成事务必须进行的动作。

你要使用你的视觉设计和沟通技巧为这类反馈式的对话构建视觉语言，确保无论用户在体验的哪一部分，任何来自网站的信息在设计和表示方法上是一致的。不同的信息可能需要不同的对待方法，用户会迅速学习整个系统，然后用户与该网站的对话就开始出现。从本质上讲，你是在人性化网站的体验（以及其背后的公司），主动预测用户的需求和提供能减轻用户受挫的信息和行动。

▲ Think Vitamin网站一直与用户保持着对话

5. 工作流：理解前提和后继

视觉设计是美丽的，也是静态的。交互设计则是构建多个页面间和多个状态间的一系列工作流。当你设计每个单独的页面时，要考虑好用户能在这个页面做什么，以及下一步如何汇入到工作流中。如果你刚刚在页面上添加了注册表单，就要想想当用户按下“提交”按钮后会发生什么。页面会刷新吗？会有一个确认页面吗？如果表单上有错误呢？如果用户点击“返回”按钮呢？这些体验的工作流中的组件。每个页面或者状态都只是用户的点击流中的一小部分。你要面临的挑战是，每个用户可能都有一个相对独特的点击流，这取决于他们是如何到达你的网站的还有他们来这个网站的原因。你已经使用你对用户的理解为用户导向，你也提供了简洁的界面，创建了与用户间的成功对话：现在你要确保每次交互都有合乎逻辑的下一步骤。下一步骤应该适应你已经创建的体验和视觉语言，这样的体验才会令人感到完整性和一致性。这些元素都能够增加品牌的可信度，增加用户对你的设计的信任。

小贴士：了解你的“材料”

设计师Jonathan Ive，作为iPod的设计者（同时还有其他产品），促进了这样的想法，即所有类型的设计师都必须了解他们正在使用的材料。这也适用于交互设计。理解组成的Web的“材料”是至关重要的。粗略地学习HMTL、CSS、Javascript和相关技术会增强你对媒介的理解，并为你提供一个更现实看待你的设计的角度。你能找到的最好的相关资源，便是将要实现你的作品的开发人员。定期地与他们聊你的设计，并感受下你的建议在他们使用的技术下是否是可行的。更好的做法是，自己也开始学习基础知识。你不需要成为一个明星程序员，但如果你足够了解你的作品实现用的媒介是如何工作的，可以极大地帮助你塑造你的交互设计。

总结

交互设计是一个涉及多方面的学科，它把静态的沟通连接在一起形成一种体验。设计网站的核心是理解这门学科的基本原则，这样才能创造出不仅美观，而且能实际上解决业务问题，给用户带来愉悦的网站。本文只触及到了交互设计相关问题的表面。但对于任何类型的Web设计师，在设计任何事务或交互时，考虑这些基本层面是必要的。

欢迎关注译者的微信公众号：简并

附交互新手入门手册：

网易设计总监亲历分享！
《网易美女设计主管！交互设计菜鸟如何入门？》

交互设计自学超全合集！
《交互设计师修炼指南！教你从零开始成为优秀交互设计师》

阿里巴巴资深交互设计师经验！
《推荐！交互设计那些事儿（一）》

原文地址：smashingmagazine
译者：@IrioLee

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量104万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com