交互设计的背景

交互设计的概念上一章节已经讲过了,我们还是需要进一步了解什么交互设计的发展背景,为什么会出现这个行业?

说起来还很有意思的,我们的互联网时代发展有这么几个阶段:

1.网页设计-美工时代

注重模板设计,信息展示,各种特效、对联浮窗、弹出框,配色杂乱现在回过头看2004年的网页简直不能直视。         不过那个时代的网页设计并非是由现在所称为的网页界面设计师所设计,多数是培训机构学习3月的网页设计班….当时我走在大街上,各种培训机构招生在路边发传单.这些初期的设计者并没得到尊重,在老板和同事眼中不是设计而是称呼他们为美工。

这里其实已经有交互了,只不过没有专门注意到这部分,其实交互是被用户或需求分析所设计好的,由程序和美工一起商量着做了。

下图政府类型网站,现在已经形成模板了,所有政府网站都是这么个类型,看起来好复杂的网站…..

图一:

1

美工重视觉效果。单纯靠视觉效果去评价作品,主观且随意,记得这里面还有些小段子:美工在“资深鉴赏家“老板的要求下从1.0版本改到9.0版本,最后老板还说:恩,我觉得不错,可是还是少了点什么!我们还是用1.0那个吧。我觉得那个最好!~” 哈,现在说这些都是美工的辛酸泪啊…不论怎么说美工对于网站设计起到一定的促进发展作用。

2.网页设计-UI时代

UI是User Interface的缩写,翻译为【用户界面】;

这个时期我们可以看到许多非常精美的软件产品或网站,但是却非常难用,逻辑不清,但这些不能怪罪于UI,因为UI是负责把软件变成人们第一眼就看着觉得舒服,美观,无可挑剔的界面展示,所以真正这个时候大家开始开始关注到美观之后所凸显的交互方面问题。

下面一些UI时代的产品截图:

图2:老牌播放器的UI设计

2

在这个阶段 慢慢衍生出界面加交互设计模式,也就是当美观到达一定程度,加上交互设计就相对来说使产品提升了很高的层次。

图3现在的千千静听

3

4

在产品发展的路程中有太多要说的,但我们这里拿出我们和交互有关的来讲的话,未必千千静听被百度收购不是好事,虽然把千千静听的产品整合到百度音乐这个产品里,但是我们还是能在新产品中看到老产品那些没变的东西,这个就是交互

即使百度音乐界面换多少次,名字换成什么,如果交互动作还是熟悉的,那么用户会记得你来自千千静听。

由此我们引申出新的web2.0时代

3.Web2.0时代

这个时代是产品UED时代,所谓UED时代则是用户体验至上的设计思路,延伸解读就是以用户为中心的设计(UCD)的模式进行的产品设计则是UED时代。

我们先来简单了解下UED

UED 用户体验设计

这是一个市场指导的设计方式,我们的客户全部是用户,而不是老板,这点如果你的老板还不知道,你需要告诉他。

UED 分几个层次

5

上述的四个层次是评价一款产品是否达到了用户需求的最有效手段,我们之所以称作体验设计,就是要达到用户的心理预期能够得到满足。

UED一般而言是个部门或组织,架构基本如下:

解决用户可用:需求分析、产品功能设计产品经理

解决用户有用:文案策划、产品运营方案

解决用户易用:视觉界面设计交互设计

解决用户想用:用户研究、抓取用户特征、挖掘用户需求;

4.交互设计的必要性

这部分有些参考了前辈Heidi格物志的文章,因为他解析的交互设计背景太全面了,而且写得特别好,适合新手学习。

例如说我给你一份资料,这个资料使用的U盘,我把U盘给你,并对你说你插到你的电脑上拷贝到你自己电脑里。这件事你去实施的时候,如果你插入你的电脑这个U盘没反应,你电脑也没有看到有任何的盘符出现找不到我说的那个文档,这个时候,就与我们两个的心理预期不同了,这个交互就没有达成,所以你可能会不高兴,可能会砸电脑,可能会换好几个电脑去尝试确认是否自己电脑坏掉了。

那么如果这个U盘正常启动有按照我先前描述的反馈结果给你就是另外一回事了,因为我们希望在插入U盘之后得到我们希望的结果,这就是交互

再举个小例子,我们的手机可能大家多数人是天天带着的,我们拨打一个号码,输入号码后单击了播出键,但是电话却没有播出,而是转到发短信的界面了,你的心理预期,没有达到,那么这个是交互动作吗?答案是肯定的,但却不是正确的交互而是错误的交互动作。(这里假设程序设计是这么设计的)

6

交互的系统方法,让交互的输出物快速迭代呈现,并且低成本。不需要开发,不需要视觉,就能够将抽象的想法具像呈现原型,方便的且低成本的工作方法,方便项目组进行多种可能性的探索。

交互设计师需要去发现、解决一些产品上的细节,用户使用习惯问题,各种不好的交互我们会找一个时间单独做个剖析。

交互的系统方法,让交互的输出物快速迭代呈现,并且低成本。不需要开发,不需要视觉,就能够将抽象的想法具像呈现原型,方便的且低成本的工作方法,方便项目组进行多种可能性的探索。在一轮轮的评审和讨论中让决策人和参与方根据项目的阶段逐步聚焦。最终输出一个最终版的原型草图。

当然,产品经理视觉设计师若有可能多做一些,也可以不需要交互设计师。事实上,大多数创业型的公司,确实是没有交互设计师的。但这不意味着交互设计缺失,有可能是产品经理或者视觉承担了此阶段的工作。但是,产品经理在平衡商业和用户的点上,往往会更多站在老板或者KPI的角度,而视觉设计师感性大于理性,更加纠结于各种视觉细节,会不自觉在项目前期就引入太多视觉元素,让项目组在讨论中偏离核心方向。

 

总归来说,他们的专攻方向是不一样的。

7

 

8

 

我个人认为交互设计师的工作围绕以上四件事情展开。入门的人,很容易将重点落到第二点:快速迭代呈现上,所以他们会直接问:你们都用什么工具?能给我们培训一下工具吗?

其实工具真的不是重点,想法若有,发现白纸和笔都是最好的工具。所以进阶的交互设计师后来会明白这一点,他们会回归到需求本源:这是什么?为什么要做?我们要解决的是什么问题?非要如此解决吗?

举个例子,若有需求方说:帮我设计一个花瓶。小A设计师就直接去做花瓶去了。小B多问了几句:多大的花瓶?什么材质的?什么时候要?预算是多少?小C则问:你要花瓶做什么的?是放鲜花还是做室内装饰用的?小A肯定做出了花瓶,但是未必是顾客想要的。小B也做了花瓶,顾客也买单了,已经合格了。但是小C则有可能让顾客惊喜。顾客表面要的是花瓶,但是实际上是在寻求一种解决方案。他要解决的问题有可能是风水问题,有可能是美化家庭,有可能是装一束鲜花……若不了解这个背后,你也许只能给他一个花瓶,而不是其他的更加适合他但是他描述不出来的,甚至没意识到的。

在实践中,我曾遇到一个需求,在一个新的频道即将发布前,需要做一个预热页面。这个预热页面比正式的页面提前几天发布。运营同事说需要提前让目标顾客知道一个新的频道要上线了,那么原来的设想就是在这个页面上介绍一下新的频道,以及新频道上线后的精彩活动。

追问:你的目标是让这些人知道有这件事情,还是让他们知道有这件事情并且在频道发布后回访呢?需求是后者。那么一个简单的介绍页面只能达到前者的目标。这群人知道这件事情,但是一周后就会淡忘这件事情,这群人绝大多数不会成为正式频道发布后造访的那拨人,那为何还提前预热?要达成后者的目标,我们则需要放钩子,比如在预热期间让用户抢积分,免费送积分,折扣券等,并且限定了积分或者折扣券只在正式发布那天有效等。

数据可以看出一些需求,但是数据是个有意思的武器。武器可以让用户的行为显像化直观化,但是你依然不了解这些数据的背后有什么样的顾客行为。比如,数据显示某购物网站主流用户也许是集中在25岁到29岁。这是个事实。那么我们的产品有可能会认为就是要满足这类顾客的需求。但是有可能是我们在设计上太偏重这个阶段的用户群,让其他用户更难去用我们的产品。

另外,交互要始终平衡的除了商业与用户、技术,就是ROI, 也即投入产出比。

解决一个问题,满足一个需求,有多种方法。有的属于过度设计。有的属于隔靴搔痒——需要多搔很长时间才能解决问题。所以交互需要有四两拨千金的意识,在探索阶段,不放过一个灵感,多做一些探索去求寻最佳解决方案。在后期则当快刀斩乱麻,当断则断。

9

在整个项目流程中,交互则在四个阶段有不同程度的参与,并且这几个阶段并不是严格的串行,而是并行中迭代的。

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

(0)
iouedioued
上一篇 2014-09-22
下一篇 2014-09-27

相关推荐

  • Axure快捷键大全 Axure RP Pro 6.5快捷键

    转载请注明:Axure中文网 » Axure快捷键大全 Axure RP Pro 6.5快捷键

    2015-01-01
  • 以简书为案例讲述「尼尔森十大可用性原则」

    尼尔森(Jakob Nielsen)是一位人机交互学博士,于1995年1月1日发表了「十大可用性原则」。 1995年以来,他通过自己的 Alertbox 邮件列表以及 useit.com 网站,向成千上万的 Web 设计师传授 Web 易用性方面的知识,…

    原型设计教程 2014-10-09
  • [自译]我们如何使用原型,原型又如何让我们更加高效

    原型是至关重要的,它能够帮助你的团队创造出最好的产品。它是一个机会来试验你的想法,并转化为有形的状态,你可以继续测试或者展开。当你的原型失败之后,你也会很软着陆-这里还有很多机会去迭代和改进。

    2016-09-08
  • Axure官方核心训练手册PDF(翻译)

    原文链接:http://www.axure.com/learn [button type="warning" text="你一定在找下载按钮! 我就是咯~" url="http://vdisk.weibo.com/lc/39hnccunqVIwNCwvF5b" open_new_tab="true"] 密码:J026  

    2015-08-13
  • 产品经理如何有效的使用Axure?

    在产品的设计阶段,产品经理必须做的一件事情就是原型的制作以及PRD的撰写。当前进行网页原型制作的最佳工具莫过于Axure了。在Axure之前,经常用到的工具有Visio、Word等。Axure与其他工具的最大区别在于Axure RP 能帮助产品经理快捷、简便、直观的构建中脑海中的产品,构建出来的产品包括页面示意图、操作流程图、甚至高保真的交互设计,并且可以生成用于演示的网页文件,方便演示。

    2014-12-31
  • 视频网站APP设计原型图

    最近据GEO媒体报道,关于中国国内网络视频APP洞察分析的分析报告表。 该报告调查了华东和华北地区的约1亿用户,分析了各家视频App 3月的使用情况。数据显示,用户使用视频App高峰是在午休时间和睡觉前,即每天的13…

    2015-12-21
  • Justinmind 6.5 激活/破解 延迟使用时间FOR MAC

    Justinmind6.5 for mac延长试用时间 1、解压后获得jm6.5_cr.sh文件 2、打开终端(方式一:到“Lauchpad”中找到“其他”,里面找到“终端”点击打开;方式二:快捷键“control + 空格”,在“spotlight搜索”中输入“终端”启动…

    2015-05-28
  • Axure案例-联想输入提示,Axure中继器的使用

    点击右面下载:axure-case-https://www.iamue.com 不多说了,源文件分享,使用Axure打开编辑可以查看原理。 日安 转载的童鞋带上:木卫艾欧网-交互学堂》 Axure案例-联想输入提示,Axure中继器的使用 

    IxD案例 2015-02-04
  • Axure官方教程中文版第4课:构建交互动作-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(4).MP4 新建文件 1、添加一个按钮和两个文本框 2、禁用第二个文本框 3、设置第一个文本框不可点击 4、设置第二文本可用 5、将第二个文本框设置获…

    2015-01-26
  • Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04