视觉设计师应该修炼的五个交互设计技能

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

现在,所有基于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

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30215/

(0)
CatherineCatherine
上一篇 2017-05-27 13:52
下一篇 2017-05-27 16:13

相关推荐

  • SKD独家 | 英国交互设计排名

    同学们自从上次🇺🇸美国交互设计的排名一出打算去英国🇬🇧的小伙伴纷纷表示出英国版的排名👌先以交互的分类来划分一下英国的院校:以HCI为主,偏技术研发的院校有:伦敦大学学院(UCL)Human Computer Interaction(Msc)巴斯大学(Bath)Human Computer Interaction(Msc)以UX为主,偏交互装置、技术应用院校有:伦敦传媒学院(LCC)Interaction Design Communica...

    2018-04-17
  • 提高交互设计技能的五个方法

     设计师 交互设计师  现在,所有基于Web进行设计的人都需要对交互设计原则有一个基本的了解。即使你没有在人机交互、用户体验设计或人性因素等方向的正式学习训练,但只要你了解这些学科的基本原理,依…

    2017-08-01
  • 【用户体验.春节特辑】我的家史馆,我的“义务”馆(总第267期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第267期使用我的家史馆APP以来,起初家谱树状图深深吸引了我,在不断完善添加家族成员的同时,越来越觉得只是单纯的成员图像和姓名显得很单薄,已不能满足我对家族每个成员的情感。想到我的后代、我的子孙后代将来看到的只是家族长辈的照片、姓名,这和见到一些陌生的照片姓名难道不一样吗?越想越觉得应该让家族人物更丰富起来。之后就仔...

    2018-02-21
  • 微信红包后台系统可用性设计实践

    作者:方乐明(现任微信支付应用产品系统负责人,主要从事微信红包、微信转账、微信群收款等支付应用产品的系统设计、可用性提升、高性能解决方案设计等,曾负责 2015、2016 和 2017 年春节微信红包系统的性能优化…

    交互专题 2023-03-03
  • 50个国外设计机构网站设计欣赏

    Web设计灵感总是帮助我们走在新趋势, 设计结构、颜色和总体设计过程。有很多灵感的网站列出的主题就是我想要这一个是不同的。所以在这个今天的帖子我收集了50个国外设计机构网站设计欣赏,为你找设计的灵感。

    2017-06-03
  • AxureUX电商平台WEB端交互原型模板正式发布

    01作品信息作品名称:AxureUX电商平台WEB端交互原型模板作品类型:模板类发布日期:2018-02-25最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:13MB作品编号:TEM006作品售价:¥169.00详细介绍及演示:http://www.axureux.com/home/templateswebec.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品...

    2018-03-04
  • 掌握交互设计思想,从用户视觉心理开始

    什么是交互设计师?在刚刚开始研究交互的时候,我也经常问自己:什么是交互设计师?这两年“用户体验”这个词非常火,以前在技术沟通中经常生硬的用“用户体验”这个词来说服技术,难免有些空洞。其实用户体验不止于产品的交互设计有关,还包含产品的内容和服务、表现形式,大部分情况下产品的内容和服务才是整个用户体验的核心。而我所理解的交互设计就是把表现形式、内容和用户行为相互协调的一门学问,是影响用户体验的关键因素之一。另外,按国内就业情况来看,目前交互...

    2018-04-26
  • 现阶段用户体验最完美的混合动力 试驾新款比亚迪唐100

    以上汽车你体验过开一天车只花4元么?你体验过地板油加速无声无息么?你体验过用车供电吃电火锅开Party么?你体验过下大雨没带伞直接把车遥控过来么?你体验过车外雾霾爆表你却淡定自若么?你体验过下坡行驶续航里程却越来越多么?你体验过开个三月车却用不到100元油费么?今天这个车让我们知道到了答案!话说以前以上君并没有太关注过新能源车型,总感觉没有乐趣,但是真正开上贴近生活以后才发现插电混动是真的实用。YishangAuto第一眼看到唐100就...

    2018-04-07
  • 交互设计的门类 & 英国综合类院校及艺术院校在如何定义交互设计?

    艺麸大大带你了解英国交互类TOP院校要知道你离名校并不遥远别走神,好好看完哦~随着科技日新月异的发展,让交互设计一时成了“网红专业”,很多学平面设计或视觉传达的童鞋们纷纷转专业到交互设计大本营。然而各大顶尖院校对于交互设计的专业命名也是“五花八门”,如,服务设计、交互设计、用户体验设计等。交互本来就是一个艺术与科技的完美结合,国内很多院校都不能将其做的很突出和优秀,这就导致了出国学习交互设计成为许多人的想法。那么你有多了解交互设计呢?我...

    2018-04-19
  • 从GUI到CUI,谈谈智能时代的用户体验

    用户体验分为三个层面:有用性、易用性与美观性。有用性是用户体验的根基,美观性属于锦上添花,易用性则与用户对产品的“操作体验”直接相关。User:买一张明天去北京的机票,要国航的;五点前到达,尽量便宜。

    Bot:好的,查到CA XXXX航班,16:00到达,票价XXX元。来自携程。

    User:买了吧。

    Bot:好的。User:订一张明天去北京的机票。

    Bot:好的,还是国航五点前到的最便宜的吧?

    User:对的。

    Bot:好的,已经预定了CA XXXX,16:30到,XXX元。来自携程。

    Bot:另外这次要和上次一样预定当天的万豪酒店吗?

    User:订边上的汉庭,这次公司不报销。

    Bot:好的。User:我要去北京,定个明晚的酒店。

    Bot:好呀好呀,是否要订华贸的万豪酒店?

    User:订边上的汉庭。

    Bot:听起来好杯具,摸摸~

    Bot:话说“边上的汉庭”是什么酒店?

    User:#WTF……(关掉了应用)User:你可爱吗?

    Bot:很可爱呢~

    User:约吗?

    Bot:我们大约有20款车。(难免出现理解不到位的情况)

    User:#hhh果然很SB……User:你可爱吗?

    Bot:您好,这里是XXX汽车经销商,我可以回答你购车相关的问题。

    User:锐腾16款有些什么颜色?

    2017-08-04