设计师常见的问题(一)——需求和方案

我时常会听到类似的对话:
需求方:“我这里要新增一个选项,原来用户可以选择按数量购买,现在新增加一个按金额购买,你觉得用单选按钮还是用标签切换好?”
设计师:“标签切换吧,用单选按钮的话,界面会比较复杂,体验不好”
需求方:“我觉得单选按钮更直观,用户不用切换标签可以一目了然”
设计师:“但是这样的话…(此处省略500字)”

也许你也会经常听到这样的讨论,不就是设计师和需求方在讨论项目需求吗?不,你错了,他们不在讨论需求。他们跳过了需求,直接在讨论方案了。
这也是我们这次谈论的主题“需求和方案”

1. 需求和方案的关系

需求就是目前存在的问题,而方案是解决问题的方法。两者的关系就像确诊和开药一般:确认需求就是确诊,方案就是开药。先确诊后才能对症下药。如果还没确诊就讨论哪种药疗效好,不光治不了病,还会害人。所以,正确的理解需求是方案设计的源头,这个源头直接影响设计方案去向,需求理解正确了才能保证做正确的事,而设计方案只是把事做正确。

2. 如何区分需求和方案

区分需求和方案实际上很简单,需求就是用户的期望、顾虑:为了实现某一目的、为了达到某种效果,为了更方便、为了更便宜、为了更快的完成任务。需求和界面没有关系,和技术实现也没有关系。 而方案是为了满足需求而设计出来的解决办法,它可以有很多种,每一种的投入产出也不同,我们设计好的界面就是一种方案。

先看几个例子:
1)我这边需要做几个页面,让用户可以提交ta的建议
2)需要有一个比价的功能,让用户可以选择最优惠的商品
3)用户需要一个最简洁的方式来进行注册
以上3个例子中你觉得哪些是需求,哪些是方案?

///////////////我是一条答案分割线////////////////

1)
需要做页面——方案 ;用户可以提交ta的建议——方案
从这条中我理解的需求是:用户希望表达他的意见(或者是我们想知道用户的想法)。但解决这个问题有很多方法:提供用户填写建议的页面是一种方案。留下客服的电话和QQ,让用户主动联系;让用户留下联系方式,我们的客服回访都是解决方案。具体用哪一种方案就要具体问题具体分析,比如要知道用户为什么希望表达意见,用户表达的是什么意见等等。

2)
需要有一个比价的功能——方案;让用户可以选择最优惠的商品——需求
从这条中我理解的需求是:用户对于价格比较敏感,用户希望买到实惠的商品。但解决这个问题有很多方法:提供比价功能是一种方案。直接推送最实惠的商品;提供用户优惠券都是解决方案。具体哪一种方案就要具体问题具体分析,比如要知道用户为什么对价格敏感,出售商品的特点等等

3)
需要一个最简洁的方式来进行注册——方案
这条比较难理解它的需求,因为从这条看不出为什么要用户注册,所以首先要了解为什么要用户注册后才能判断

你都答对了吗?

3. 做设计?你先等一下

当需求方过来和你讨论,“我想要给用户两种选择,你觉得用单选按钮好还是用标签切换好?” 这时,别接着这个话题和他讨论下去。 没有了解需求的前提下讨论方案不靠谱。换做我就会说:“做设计?你先等一下,我想先了解XXXXX”

A Day Made of Galss by Corning

两段Corning公司给我们带来的视频,玻璃将成为最智慧的材料,它将出现在在我们未来的生活中。虽说是概念视频,但我觉得离我们并不遥远。视频中的交互方式除了我们熟悉的点击、拖拉外,还有“扔”就是将一个设备中的信息发送到另外一个设备的交互动作,非常cool。除此之外就是设备间的连接,非常简单,只需将一个设备放在另为一个设备上就ok了。


A Day Made of Galss 1


A Day Made of Galss 2


‘Window To The World’ 丰田展示多媒体车窗概念

三分钟令人兴奋的短片’Window to the World’,丰田展示了他们为后排乘客行驶途中,缓解疲劳,打法时间而退出的多媒体车窗概念。后座车窗变成了交互式多媒体透明屏幕,是一种与车外世界互动的工具。触摸式的车窗,你可以绘画,获得车窗外的信息,多点触摸放大一个区域。

AXURE 原型设计教程2——变量控制不同场景的交互演示

该教程适合追求axure功能使用最大化的人,并不是原型设计的目的。追求方便、快速设计交互原型的同学可以无视这篇文章。

实例演示:
演示地址(axure 6 beta生成)

原理:
1. 通过Axure的变量来记录对应的场景
2. 用master 的 onPageLoad 事件根据变量的值来判断dynamic panel对应的state

Ps: 该教程实际上我上一篇变量教程的升级版本,有兴趣的同学可以看这里:Axure 实现网站登录的交互

实例教程:
实例说明:需要设计一个电子商务网站“用户中心”首页的原型。该页面呈现的内容要根据不同用户的情况来显示。比如:用户是vip会员,需要显示vip的标识,用户有一笔需要支付的订单,需要提醒用户有一笔“待支付”订单等等。

1. 分析和整理会产生的的所有场景

1.1 将所有会产生不同场景的条件都罗列出来
当用户进入用户中心首页时:
·如果已经通过实名认证,显示相应的标识
·如果用户已经上传头像,显示头像,否则,则提示用户上传
·如果是2011年的新用户,在公告中显示给新用户营销的信息,否则显示普通的信息
·如果有需要提醒处理的订单,显示提示
·如果是vip用户需要,显示vip的标识

1.2 将这些场景分组,并梳理其中的逻辑关系
AXURE 原型设计教程2——变量控制不同场景的交互演示
Ps:分组可以帮助我分析各种信息展示时的关系,并能够让我们考虑到以后的扩展性

2. 规划Axure的变量和变量值

变量和变量值规划只要能包含所有会出现的场景就可以了。但规划方式的不同将影响影响到axure动作中的逻辑判断的复杂度。

2.1 所有Axure变量,以及变量值对应的关系
AXURE 原型设计教程2——变量控制不同场景的交互演示

2.2 Axure变量组合对应的各种场景
AXURE 原型设计教程2——变量控制不同场景的交互演示

3. 设计“场景控制台”

用户(这里的用户指的是演示这个原型的人,以下同)可以在场景控制台中选择各种场景的组合,来查看对应的交互原型演示
3.1 将可能出现的条件通过Axure的widgets的radio button或者checkbox的方式让用户选择

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.2 同一个选项的radio button(checkbox)设置编组
是否为vip会员为例:

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.2 为每一个radio button(checkbox)命名
是否为vip会员为例: 将“是”的单选框取名为“rb_vip_yes” “否”的单选框取名为“rb_vip_no”

3.3 为“进入demo”按钮添加交互事件,将所有用户的选择记录在变量中
是否为vip会员为例:
3.3.1 为按钮“进入demo”添加交互事件

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.2 添加判断条件:当选中“是否是vip”的单选框“是”时

AXURE 原型设计教程2——变量控制不同场景的交互演示

图5AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.3 选择交互事件,为变量赋值

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.4 点击“open set values editor”按钮打开设置变量面板

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.5 在打开的新窗口中新建变量,变量名为“vip”:

AXURE 原型设计教程2——变量控制不同场景的交互演示

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.6 为变量名“vip” 赋值为“have”(这里的have表示用户选择的条件“是vip用户”)

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.7 用同样的办法,将用户的每一种选择都记录在Axure的变量中

AXURE 原型设计教程2——变量控制不同场景的交互演示

提醒:这里值得一提的是,需要把每个else if 改成 if。因为这里需要对每一种情况都判断一次。

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.4 设置动作的最后一步是链接到原型页面:

AXURE 原型设计教程2——变量控制不同场景的交互演示

4. 设计“用户中心”首页的原型

4.1 根据1.2的场景组来设计用户中心首页信息的布局

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.2. 将场景组中的每一个场景封装成一个dynamic panel
以“用户信用、会员体系”场景组为例

AXURE 原型设计教程2——变量控制不同场景的交互演示
每一种显示内容做在一个state中,如上图,
AXURE 原型设计教程2——变量控制不同场景的交互演示

4.3 将场景组封装成的dynamic panel转化为master
以“用户信用、会员体系”场景组为例

AXURE 原型设计教程2——变量控制不同场景的交互演示

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4. 通过master的OnPageLoad事件,判断dynamic panel应该显示哪个state
该事件的作用是当页面加载master时,通过Axure的变量去判断dynamic panel应该显示哪个state。
以判断“只是vip会员”为例
AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.1 为ico这个master添加OnPageLoad事件

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.2 添加判断条件

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.3 设定panel显示哪个state
以判断“只是vip会员”为例

AXURE 原型设计教程2——变量控制不同场景的交互演示

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.5 同样的方法,设置完成“用户信用、会员体系”场景组dynamic panel的所有的states

AXURE 原型设计教程2——变量控制不同场景的交互演示
4.4.6 其它场景组也是同样设置

5. 添加变量值监测功能,方便测试
同样是用master的OnPageLoad事件,将变量赋值给文本,这里就不啰嗦。

AXURE 原型设计教程2——变量控制不同场景的交互演示

6. 大功告成:)

附实例源文件:rp文件下载

© jerry的交互设计(未经授权严禁转载,更新于2011年1月23日17点)

AXURE RP 6 即将发布

AXURE RP 6 即将发布
持续了半年的5.6版本,终于等来了AXURE RP 6的消息了!
·AXURE RP 6 将在2011年1月31日发布
·现在你可以下载AXURE RP 6 beta版本来体验了

AXURE RP 6的新功能让我非常兴奋,新版本的改进非常实用,解决了早期版本的许多“顽疾” 比如文字不能编辑行距,制作tab比较繁琐等。以下是我整理的新功能的体验:
1. AXURE RP 6 新增页面属性设置
AXURE RP6 新特性
Page Align: 可以设置原型在浏览器中是水品左对齐还是水品居中,非常实用
Back color/Back Image : 可以设置原型页面的背景颜色和图片
Sketch Effects: 还在羡慕Mockups的手绘风格?AXURE RP 6也可以

2. AXURE RP 6 widgets 在移动和缩放时可以实时看到widgets的坐标和大小
AXURE RP6 新特性
AXURE RP6 新特性
这样移动和调整widgets就更加方便和快捷

3. AXURE RP 6 对文本和widgets的设置更加完整了
AXURE RP6 新特性
Line spacing: 设置文本的行距
Padding: 自定义形状的padding值,和css中的类似

4. AXURE RP 6 ButtonShap 新增加selection group 群组功能
AXURE RP6 新特性
该功能也灰常实用,制作tab一下之变得灰常简单。(文章最后有demo演示)

5. AXURE RP 6 变量的控制更加强大,加入了常用函数的功能
AXURE RP6 新特性
懂变量的童鞋都知道,AXURE RP 6 变量控制的提升会让原型的实现复杂程度又上升一个数量级

6. AXURE RP 6 panel的移动交互变得更加强大
AXURE RP6 新特性
AXURE RP 6的panel移动增加了动画效果,再也不用配合wait time交互方式来制作动画效果。(文章最后有demo演示)

7. AXURE RP 6 pannel增加了Drag的交互方式
AXURE RP6 新特性
具体怎么做拖放效果还在研究中…

8. AXURE RP 6的其它改进
AXURE的specification和notes的功能也有改进,但我用得比较少就没有去研究。除此之外官网的介绍中还在原型中增加了feedback的功能(beta版本没有该功能)

AXURE RP 6 beta panel的move交互演示&ButtonShap 新增加selection group演示
以上演示rp文件

更多AXURE RP 6信息参看这里
AXURE RP 6 beta版本下载

in table-概念人机交互视频

[flv width=”496″ height=”384″ image=”/wp-content/uploads/2010/08/intable.jpg”]http://storage.live.com/items/B2E4B1C774EE6296!1903?filename=inTable.flv[/flv]

目前炙手可热的触摸屏的交互方式运用到桌面上,演示的效果很炫。胡乱想想一下,以后朋友聚会只要有个茶几就可以了,茶几提供所有的娱乐活动…

I/O Brush-概念人机交互视频

[flv width=”320″ height=”260″ image=”/wp-content/uploads/2010/08/io_brush.jpg”]http://storage.live.com/items/B2E4B1C774EE6296!1904?filename=brush.flv[/flv]

超酷的想法,把我们看到的任何一切都作为画笔的颜料进行作画,甚至是动态的影像,虽然是2005年的视频,但现在看起来任然让人印象深刻