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

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

相关推荐

  • 这些走心的用户体验应该多学学

    不仅仅局限于互联网的设计,可能还有服务,线下的设计等。先问一下自己,到底什么是好的用户体验?我认为有以下三点:第一,无需思考,符合本能的设计。(反例,各种需要用户大量动脑的设计)第二,不打扰用户,让用户沉浸的设计。(反例,各种不必要的弹窗提示)第三,温暖的设计,细节打动人心,超出用户的心理预期。(反例,各种冰冷的缺省页面)1.网易云音乐分享提示最近发现了网易云音乐的一个小彩蛋,那就是在播放页当你点了某一首音乐喜欢后,会给你跳出来一个可爱...

    2018-02-01
  • 电梯按钮的交互设计

    开始注意和观察电梯的按钮面板,是因为觉察到自己因常乘的两部电梯设计细节方面的种种不同而陷入了混乱。电梯常常会和自己"想的不一样",即预设的或已建立的心理模型失效了,我们不得不重新审视电梯的操作面板,重新建立心理模型,找到对应的按钮。如果日常常搭乘几部电梯,它们之间的操作规则和心理模型还不一样的话,一是容易让人混乱,二则给人增加了记忆负担,实在是很麻烦。觉得这一小块可操作区域很有趣很值得分析之后,好奇之下找了不少图进行研究,五花八门的设计...

    2018-02-06
  • 全国高校“用户体验、视觉界面(UI) 设计、交互设计新技术实践教学与应用师资研修班

    商务合作联系QQ:3158521867 或加微信号:jujiao01一、会议背景近年来新技术、新趋势不断爆发,同时掀起了互联网的蜕变热潮,行业和用户更加成熟理性,随着网站和平台开发需求不断增多,智能手机广泛应用,用户体验、视觉界面(UI) 设计、交互设计对于网络产品来说是赢得用户的关键特性。苹果、google等顶级企业的成功案例已经深刻说明了这一点。打破传统界限,连接商业与技术,在新商业环境中实现更大的价值,把设计领域、设计概念向外延展...

    2018-03-30
  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • 5步快速制作移动动效

    Sketch+Keynote双剑合璧:5步快速制作移动动效 2014年,Facebook推出了新闻阅读应用Paper,诸多交互细节与炫酷动效启动了界面设计的新时代,Google的Material Design更是将移动动效提升到了app基础体验环节的高度。…

    2015-04-11
  • 价值重估的狗和鱼 一 有趣的哲学文章

    来源:经济观察报    李冬君 有人将庄子与古希腊哲人第欧根尼相比。两人同时,一个在东方,一个在西方,一个喜好在河边钓钓鱼,一个喜欢躺在街上像野狗那样晒晒太阳,在同一个天空下玩耍。   希腊是哲学的国度…

    交互设计 2014-09-21
  • 音控音乐播放器"乐流":最懂你的播放器

    不得不说最近这个简单到极致的音乐播放器已经在你的身边成为了话题,大家在讨论这个新颖的设计,我很早就关注到这个爱派派了,最近安卓版也上线了,下载下来做了一番体验,我从UE交互进行了解析,看看这款爱派派做…

    2014-11-17
  • 4款视频app交互设计浅析

    作者对腾讯视频、爱奇艺、搜狐视频和芒果TV进行界面的整体对比,希望能给各位带来一些收获和启发。

    2017-05-10
  • 如何提高用户体验

    不同复杂的需求需不同的设计例如:一个非常简单的优化,不会涉及太多修改和分析,就不需要过多冗余的内容;一个复杂庞大的需求,需要复杂的分析和展现。设计前,需要对需求的复杂度有认知,明确该采用什么方式来展现设计内容。绿色区域很容易触及、黄色代表需要展开,而红色代表用户需要改变设备手持方式将视觉简化,隐藏一切不必要的操作,注定用户认知成本的增加,不利用各个模块的跳转:突出某些功能的同时,也不必避免其他的内容被感知。不同的方式,可视化的表达,体验...

    2018-03-21
  • 同一个人的微博,首页连续出现48条是怎样的体验?

    如果你是微博的轻度用户,可能偶尔觉得刷出来的内容有些不对劲;而如果你是微博的重度用户,那你很可能觉得微博的 timeline 有时候刷的很不爽。

    2017-05-14