交互设计的背景

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

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

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

相关推荐

  • 023. axure制作项目符号列表样式

    像这样的在文字前面添加项目符合列表,不只是在word中可以实现,在axure中也可以很方便添加 l  Axure rp 6.5的软件安装、汉化与注册 l  认识Axure的软件界面 l  生成网页原型的三种方法 l  如何关闭IE浏览器在生成…

    2014-09-12
  • 关于使用Principle的一些小建议

    在日常的设计工作中,难免会遇到一些制作可交互原型的工作。可交互的原型对比于静态原型来说,直观是最大的优点。其次,在研究一些动效的时候,直接调好参数给工程师,会比口述来得更加简单粗暴,效率更好。现在的…

    2016-10-28
  • Mockplus原型交互跟我做之10–关闭弹出面板的那点事儿

    弹出面板,是我们经常使用的组件。今天,就来说说关闭弹出面板的事儿。 内容相对不那么好玩,但是挺重要,所以你需要了解。耐心阅读下,你发现并不复杂,同样是简单的。 一、自动关闭 默认情况下,弹出面板弹出后,…

    2016-07-07
  • 100%干货!大型互联网公司精益产品设计流程

    相对于传统产品设计流程,精益产品设计流程越来越受互联网公司,特别是创业公司青睐,但很多人听过精益创业、精益设计,但并不明白其中的奥秘,本文就带大家揭开精益产品设计的流程方法和要点。 首先我们来看看传统…

    2016-05-31
  • [Mockplus教程]创建

    新建页面可以使用三种方式来实现: 1 点击右边页面树顶部的“+”按钮; 2 在右边页面面板空白处右击,在弹出菜单中选择“新建页面”; 3 直接使用快捷键Ctrl+Enter(MAC系统为Command+Enter)。 下面为三种方式新建页面…

    Mockplus 2015-09-18
  • Axure 7.0清空输入框效果

    本文中介绍这种带清空键的搜索框的设计思路和制作方法,供大家参考。 我们先来分析一下这种搜索框的交互逻辑。搜索框在获得和失去焦点时,清空键都将被隐藏;在搜索框中输入文字时,清空键将被显示,点击清空键,搜…

    2015-06-29
  • 013. 图片热区——axure线框图部件库介绍

    首先,我们将图片热区组建拖动到axure页面编辑区域 1. 图片热区为页面图片或者其他部件添加热区,添加交互 我们一般在做专题的时候,会遇到一些组合商品,但是又需要单独分别设置连接,如果是2张图片还好办点,可是…

    2014-09-12
  • 【Mockplus教程】标尺和参考线

    每个页面都拥有单独的标尺和参考线,可以用于辅助组件的对齐以及尺寸调整。   1. 使用标尺   新建页面之后,在主菜单中选择“显示标尺”即可看到工作区左边和上边显示出 标尺。标尺有两种显示方式:百分比…

    Mockplus 2015-08-31
  • 在线预览Axure文件,使用新浪SAE发布在线Axure文档

      俗话说,不会写代码的产品经理不是好的射鸡湿。关于产品经理与技术之间的微妙关系,扯开了讲可是长篇大论,比如知乎上这个问题:IT 行业产品经理(尤其是创业的)需要懂技术吗?懂到什么程度?,以及这个:…

    2016-01-07
  • Axure RP 8.0 抽奖大转盘实例教程附.RP下载与视频演示

    原标题:【AxureRP8实现真正抽奖大转盘】 效果图: Demo地址:http://www.iaxure.com/share/luck/ (有广告) 视频: 实现过程: 1、生成一个0-360之间的随机数,保存至变量; 2、旋转转盘到达指定角度,案例中为3-…

    2015-08-24