交互设计的背景

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

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

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

相关推荐

  • 交互设计师成长分为三个阶段

    提起交互设计,它既没有界面视觉设计绚丽,也没有用户体验设计有趣,看起来枯燥乏味,学起来复杂难懂,但它却是整个产品流程中最核心的部分之一。一个牛X的交互设计师是睥睨天下的,无论薪资还是技术。(以上海地区为例)但在通往牛X的路上……很多人还没开始就放弃了经常会有人说交互设计好像已经趋于饱和,现在从事这个行业没机会了。照这么说,公务员是我见过的饱和度最高的行业了,但每年还是有那么多人争得头破血流要为人民服务。就像金字塔一样,往往最底层的那一部...

    2018-04-18
  • Axure教程:用Axure画出手绘效果的原型图

    前段时间跟大家介绍了一个软件Balsamiq Mockups,这是一个可以简单画出的手绘效果原型图的软件,操作也很简单!后来有朋友问我Axure可以画出手绘效果的原型图吗?答案的肯定的,只不过没有Balsamiq Mockups那么手绘,但是也可以改善一下Axure里总是横平竖直的视觉感受!

    2014-12-31
  • JustinMind免费版与JustinMind Pro的区别

    justinmind是一个可以免费创建移动和web原型的工具。 justinmind的免费版不仅仅是体验式的,它是永远免费,目的是为一些公司或个人处理小型项目。 在获得永久免费版本之前,你还可以享受我们的30天免费试用专业版带…

    JustinMind 2015-08-25
  • Axure官方教程中文版第5课:动态面板介绍-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(5).MP4 新建文件 1、添加一张图片和按钮 2、转换为动态面板并添加状态 3、为每个状态添加一张图片 4、设置点击“Next”按钮时进行下个状态的切换

    2015-01-26
  • 实例学Axure7.0简约教程 产品原型必备技能

    首先我们要知道Axure是产品经理、原型师经常使用的原型设计工具,能快速地把自己想要的方案展示出来,给程序、美工参考。加快产品开发进度及工作效率,弥补了返工重做的机率。 我们打开Axure,把我们想要的产品方案…

    原型设计教程 2014-09-28
  • 004. 如何关闭IE浏览器在生成原型时候的安全警告

    在上一节中,我们学习了如何生成网页原型的三种方法,当时我们采用的默认浏览器,搜狗浏览器,没有弹出安全警告,一般情况下,如果你的浏览器是IE的话,在每次生成网页原型的时候都会弹出如下安全警告,如图: &nbs…

    2014-09-12
  • ​JUSTINMIND权威指南:开篇-约法三章

    ​在学习 Justinmind 原型设计软件之前我们先来约法三章,希望能和你达成君子之约。 约定一:练习题一定要去做并且坚持     根据每一小节留下的练习题打开软件进行练习,然后把你的练习题分享到我的微信公众平台:Wo…

    JustinMind 2015-07-31
  • 【Mockplus教程】怎样在Mockplus中使用图片轮播?

      1、创建移动项目 2、从交互分类中添加一个图片轮播组件 3、点击图片轮播组件上小工具条上的图片选择按钮 4、选择一张或多张图片。(这里只会把对话框中勾选中的图片加载到图片轮播组件中,可以点击每张图片上…

    2015-10-28
  • Axure基础教程:产品流程图的制作方法详解

    一个产品设计之初,必先从流程图做起,流程图可以用来表达产品各式各样的流程,今天我们就来聊聊Axure里面流程图的做法

    2014-12-31
  • JustinMind交互与事件

    JustinMind交互事件说明 1.事件与交互 事件是JustinMind的一个关键功能,Justinmind Prototyper的事件由两个主要部分组成:一个是事件的触发(或用户事件),另一个是一组操作。每一个事件必须在屏幕上定义一个特定…

    2015-04-22