Posts Tagged ‘交互设计’

Axure组件值传递妙用

一月 23rd, 2010

Axure是产品原型设计的一大利器,其所作出每一个原型都有以下组件(widget)构成,如文本块(Text Panel)、矩形框(Rectangle)、按钮(button)、文本输入框(Text Field)、以及让众多Axurers喜爱的动态层面板(Dynamic Panel)等。正是因为这些功能形态各异的组件组成了一个产品的基本框架、原始形态,而每个组件都可以拥有一个名号–标签(label),通过对标签命名、组件赋值就可以作出一些令人惊喜的交互效果。

一、利用组件赋值值传递

淘宝改版了,但淘宝的登录入口还是没变,可见阿里人对淘宝登录入口的自信。

taobao_login

利用AxureRP5.6做的原型(下载RP文件请点击taobao-login-axure,查看效果请点击这里),如下图

taobao_login_axure

步骤分解如下:

1 如上图,建立帐户名和密码两个输入框,分别打上user和password标签(label),便于登录按钮识别判断

2 新建立动态层面板(dynamic panel),将面板命名为error ,右键将其隐藏

3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.右键error动态层面板,新建两 个动态层,分别命名为user_error和password_error

4 编辑两个动态层,如将user_error编辑为“用户不存在”、将password_error编辑为“密码不匹配”,这里只考虑简单的两个判断,登录前端后端鉴权多达几十种判断都可以在error动态层里面显示

关键一步,编辑case条件对输入框赋值并进行判断:点击登录按钮,Axure右上侧会出现”注释&交互”栏,建立两个case条件:一是当帐户名输入框user不等于ashnotes.com时,在error动态层面板触发显示user_error动态层;二是当密码输入框password不等于123456时,在error动态层面板触发显示password_error动态层,具体步骤如下图所示。

taobao_login_axure2

3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.
右键error动态层面板,新建两个动态层,分别命名为user_error和password_error

6 最后是case条件的处理来控制error动态层面板,及其他出错提示。在实际运用过程中由于case判断过多的情 况下,可以在需求书上加以详细描述,便于后台开发人员了解判断逻辑及编码。

二、利用标签命名值传递

京东的订单核对页在处理新老收货人信息,点击修改者切换到输入新地址状态,保存则回到填写好的地址状态,只有切花,交互清晰明了,值得模仿、推荐。

360buy_confirm

利用AxureRP5.6做的原型(下载RP文件请点击360buy-confirm-axure,查看效果请点击这里),如下图
360buy_confirm_axure

1 新建modify和address两个动态层面板,每个面板新建两个层,各自对应命名为1、2号层
2 具体原理是对动态层面板各组件命名,交叉触发显示,即利用modify的1号动态层同时触发显示其本身的2号层及address的2号动态层;modify的2号动态层触发显示其本身的1号层及address的1号动态层。呵呵,说起来拗口,点击“修改”和“关闭”后看看效果就知道了
——————————————————-可爱的分割线————————————————–
备注:丁宇同学曾在《从“产品需求文档”(PRD)到“产品设计文档”(PDD)》 提出将产品原型与PRD融在一个文档中。这是一个很好的倡议,但得基于产品与开发两方的深度认可。毕竟axure的独门利器集中于快速交付html交互产出物 ,在产品设计沟通、体验模拟、展示演说方面才是他的初衷,而PRD更多的是产品研发过程中所需要的详细雕琢的文档。

i-dong游戏中心原型优化

八月 16th, 2009


周末参加了J.S.阅微同学组织、泰山在线赞助的华南UE小组-深圳-第九次聚会,席间探讨了导航的讨论,并体验了泰山在线旗下的i-dong在线游戏。为泰山的领导和产品经理热诚及对UE重视所感动,写一篇i-dong的游戏中心原型优化,给大家分享。

先给大家看看i-dong的游戏中心原型,如下图:

i-dong-prototype

为方便分析对原型做了区域标注,如下图:

i-dong-prototype-tips

A区: 游戏内容区,包含了分类类目和类下各游戏名称。
B区:游戏玩家区,包含玩家账户、社交 、及系统设置和退出
C区: 游戏状态区,包括硬件设备运行情况、网络状态以及玩家登录情况
问题:
1 很显然A区是原型设计者重点突出的核心区,一是摆明这里游戏丰富,二是希望玩家一上来就可以挑选游戏,迅速进入游戏状态。
但将游戏分类和游戏同区全部展示,以及健身类和益智类游戏循环滚动(无限制的)无疑分化了玩家选择。因为i-dong的手柄感应控制不像电脑的鼠标可以随意、快速选择,这一物理属性就决定了i-dong游戏中心在设计交互时必须平衡如何快速让玩家决策、选定自己玩的游戏而同时保持自己游戏的丰富性。
而玩家在选择具体游戏时,游戏区块会弹出”?”号让人不可捉摸,云天同学也表示了质疑,因为我的选择是明智的,为何还要给个问号质疑我的选择呢?虽然设计者的初衷是考虑问号相当于帮助中心,有啥不明白的点击问号,她会告诉你。
2 B区和C区有同质化倾向、对各自区域功能定位存在逻辑混乱。B区的注销本意是删除账户,但这里的功能实际是退出功能,在文案设计时可考虑用“退出”代替让人感觉更平实。“已登录”很明显是玩家的登录状态,似乎更应该放在B区。同时“已登录”为何采用按钮形式且不可点击切换(如隐身?退出?),更让人感觉困惑,还不如直接去掉。
优化方案:
1 对A区即游戏内容区采用Tab形式,隔开分类类目和类内容,信息可寻性得以加强;同时增大各游戏区块,更醒目,方便玩家识别。
将选中状态的问号去掉,或者用其他icon或“查看详情”等字样代替
2 简化B区,强调用户中心;将“设置”和“退出”剥离出来,并放置C区底部,强调“系统”概念,和左侧“系统”状态保持信息平衡

A区: 游戏内容区,包含了分类类目和类下各游戏名称。
B区:游戏玩家区,包含玩家账户、社交 、及系统设置和退出
C区: 游戏状态区,包括硬件设备运行情况、网络状态以及玩家登录情况

问题:

1 很显然A区是原型设计者重点突出的核心区,一是摆明这里游戏丰富,二是希望玩家一上来就可以挑选游戏,迅速进入游戏状态。但将游戏分类和游戏同区全部展示,以及健身类和益智类游戏循环滚动(无限制的)无疑分化了玩家选择。因为i-dong的手柄感应控制不像电脑的鼠标可以随意、快速选择,这一物理属性就决定了i-dong游戏中心在设计交互时必须平衡如何快速让玩家决策、选定自己玩的游戏而同时保持自己游戏的丰富性。

而玩家在选择具体游戏时,游戏区块会弹出”?”号让人不可捉摸,在场的云天同学也表示了质疑,因为我的选择是明智的,为何还要给个问号质疑我的选择呢?虽然设计者的初衷是考虑问号相当于帮助中心,有啥不明白的点击问号,她会告诉你。

2 B区和C区有同质化倾向、对各自区域功能定位存在逻辑混乱。B区的注销本意是删除账户,但这里的功能实际是退出功能,在文案设计时可考虑用“退出”代替让人感觉更平实。“已登录”很明显是玩家的登录状态,似乎更应该放在B区。同时“已登录”为何采用按钮形式且不可点击切换(如隐身?退出?),更让人感觉困惑,还不如直接去掉。

优化方案:

1 对A区即游戏内容区采用Tab形式,隔开分类类目和类内容,信息可寻性得以加强;同时增大各游戏区块,更醒目,方便玩家识别。将选中状态的问号去掉,或者用其他icon或“查看详情”等字样代替

2 简化B区,强调用户中心;将“设置”和“退出”剥离出来,并放置C区底部,强调“系统”概念,和左侧“系统”状态保持信息平衡

优化效果:

i-dong-prototype-optimize

以上是用Axure制作的原型,有兴趣的同学,可以点击这里,查看效果….


Related Posts with Thumbnails