Archive for the ‘互联网’ category

Axure 组件变量值传递妙用

一月 23rd, 2010

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

一、利用组件变量赋值值传递

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

taobao_login

利用  AxureRP 5.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

利用 AxureRP 5.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更多的是产品研发过程中所需要的详细雕琢的文档。

2010年用户体验挂历

十二月 23rd, 2009

2010年用户体验挂历

2009年马上就要结束了,“用户体验”已成为上至领导老大下至我等平民百姓挂在嘴边的口头禅。

究竟体验是什么?体验好,但又好在哪里?以下列出国外Frank Spillers 作的2010年用户体验挂历

加上阿石对09年各产品用户体验的理解加以点评,不到之处欢迎指正!

一月份 Intuitive( 让产品具有让人产生直觉的

直觉意思就是不需要理解。对一个产品来说,一个让人有直觉的产品是通过设计来满足用户期望的;对用户产品说直觉就是产品就如、自己期望的那样运行操作,而且她们也没必要过问自己为什么那样。

如QQ2009面板中个人信息面板中,空间、邮箱、钱包、邮箱上的数字消息提醒,一看就让人明白有新的、多少消息提醒,点击进去后直觉告诉用户回去哪里。

一月份 Intuitive( 让产品具有让人产生直觉的)

二月份 Sociability(让产品具有社交性的)

社交性给予了用户扩展社交交互和社交行为的方法.一个产品越具有高度的社交性,那么它也就越能够更好的将用户和社区联系在一起.社交界面可以促进用户状态、用户的归属感及群体解决问题的能力,而这些可以使得用户参与贡献、分享及共同进步。

如Slideshare是一家做Slide、PPT稿件上传分享的网站,里面有象twitter那样follow和发送短消息那样的社交功能。

二月份 Sociability(让产品具有社交性的)

三月份 Explicitness(让产品直截了当的吧)

条条框框是直截了当的死敌。产品给使用过程中的条条框框和逻辑能力要求会导致用户挫败感。”dumbing it down”的意思就是产品设计过程中要注意避免用户不知道你所知道的。

淘宝的站内搜索在之前阿石日志站内搜索的演化——淘宝篇》中提到过,新版淘宝站内搜索给用户最大的观感就是直截了当的一搜就看到搜索结果,不像现在正式版中搜索到的还有一大堆筛选分类,搜索结果在类目多时第一眼看上去更像是分类器。不过这种直截了当的做法也可能引起老用户的反弹,如最近《万店签名!共同抵制淘宝的按“人气”排名》的帖子引起很大反响,其实淘宝站内搜索还是在A/B test,但A Test中已然在改动实际触犯了老用户的真金白银实际利益。

三月份 Explicitness(让产品直截了当的吧)

四月份 Context of Use(注意产品使用过程中的情境

任何一款产品或者一组用户行为都“生存在”在一个独特的情境当中,这个情境是由产品所在的环境、企业文化、工作流程、产品设计情感、社会现象等各种因素塑造的。拥抱产品使用情境的设计吧,这样就能更加懂得什么样的用户什么时候需要她(产品)。

如豆瓣9点的根据用户上网时间情境的白天、黑夜模式自动切换

四月份 Context of Use(注意产品使用过程中的情境)1

四月份 Context of Use(注意产品使用过程中的情境)2

五月份 Personas(请关注产品的用户身份)

“用户身份”本意是拉丁语的“面具”。一个“用户身份”就是一个用户档案,抑或是一个具体用户、用户行为、用户期望和用户需求的快照。好的“用户身份”,植根于用户行为的深度观察和了解,用以帮助优化产品设计并对其追踪跟进,以及使产品设计更加体现真实的生活。

如新浪微薄的对名人推出的新浪认证小徽章,因为有真实,才会有用户努力追求真实。对比与139说客的“真实互联”,新浪的认证更容易形成用户层级,也富于可操作性。

五月份 Personas(请关注产品的用户身份)

—————到了2010下半年的分页符,转载请注明来自阿石的日志www.ashnotes.com——————

六月份 Task-Oriented Design(面向任务的产品设计)

一个面向任务的产品设计可以给予用户有益的产品功能点和特点,使得她们可以更加容易地完成任务(或一组动作流程)、更快的达到她们的目标和释放产品学习和使用过程中造成的阻滞感。

如京东的购物车流程设计,随着用户购买的进度区分购买流程的步骤,到了订单核对页,还可以点击进度导航往前一级回退,这个细节设计让人佩服,值得学习。

六月份 Task-Oriented Design(面向任务的产品设计)

七月份 Progressive Disclosure(进度显示)

进度显示是一项连续界面过程中展示信息和动作交互设计技艺,用以避免用户感到不知所措。通过显示信息的进度,你可以向用户展示每一步的产品信息主要部分,这样可以帮助用户在使用过程中的发现她们平时不易发现的产品强大特点和功能。

如QQ软件安装进度展示,不仅显示安装进度, 还可以在安装过程中以简单、清晰图文展示新版推出的功能,在QQ版本屡创“新高”的09年这一招无疑是个很好的熨贴。

七月份 Progressive Disclosure(进度显示)


八月份 Pleasurability(令人心情舒畅的)

令人心情舒畅的产品会让人产生一种深度情感体验的满足感。越是让人心情舒畅的产品,它也就越能够从社交、生理及认知上满足用户,甚至是她们的价值观。用户会对一个高度令人舒畅的产品产生积极反应,甚至会“爱上”这款产品。

如身边的苹果控们热爱力推的iphone 3Gs,谁也不能否认“信乔布斯哥”的威力,谁说产品不能让人产生信仰?

八月份 Pleasurability(令人心情舒畅的)

九月份 Cognitive Overload(信息设计中关于认知的过度加载)

认知的过度加载描述了这样的一个情境:用户在海量信息中感到不知所措,以至于达到认知的极限。困惑、沮丧、神奇、甚至无助等用户使用产品过程中产生的阻滞感都是常常都是来自于认知过度加载。当用户抱怨道:“太多了”时,这其实就是用户对产品发出认知“被”过度加载的信号!

信息设计的认知过度加载实在是太常见了,一本《don’t make me think》道尽了信息设计过程出现的种种现象,著名的Krug三大定律也是解决这个问题的良方

九月份 Cognitive Overload(信息设计中关于认知的过度加载)

十月份 Containership(UI设计中的集装箱理论)

“集装箱”讲的是相关类信息的视觉组合。只要有联系的信息都可以被组合或是在界面的同一区域看上去是组合的,或包含的。提供好的集装箱意味着提供可以将各种控制走到一起清晰的边界。例如,在产品设计过程中,一个表现为“局域性”的动作不能表现为和“全局性”动作。

江苏移动首页“优惠与活动”中全球通、动感地带、神州行三个Tab切换,全球通的品牌色是蓝色,区块背景是全球通的logo,当切换到动感地带时,Tab标题的颜色也随之切换为动感地带的品牌色橙色,背景换位动感地带的logo。局域性有封装的“集装箱”,也有清晰的边界。

十月份 Containership(UI设计中的集装箱理论)1十月份 Containership(UI设计中的集装箱理论)2

十一月份 Synch (让用户与产品一起同步心跳)

“同步”即在用户和产品之间存在的一种直觉合并的状态或者是“流”。产品和谐的运行在用户的工作韵律当中,例如产品以更少的错误、和用户在一起、以及和用户一起“心跳”。带有 同步感的产品设计会让用户产生一种“情感孽债”,而这种情感会帮助用户完成任务、强化用户的满足感以及提高产品的舒适感。

如豆瓣电台,用户期盼豆瓣算法可以向其推送好的歌曲,豆瓣算法也需要吸收统计用户的偏好(我喜欢、不在播放、跳过曲目)等动作,用户和产品各取所需,两者之间自然有一条一起心跳的“流”。

十一月份 Synch (让用户与产品一起同步心跳)

十二月份 Desirability (让用户对产品产生令人向往性)

“令人向往性”是指用户实际想要和需要的一个特点或一些功能点,这里不仅指的是她们需要这些,更是期望这些都在产品用户体验里面。可用性将目光聚焦于使产品使用变得更加容易,令人向往性呢这是和用户在一起想要、需要、以至一起向往。不管是可用性还是令人向往性,都是一个好的用户体验的必须,而令人向往性则须优先考虑。

令人向往性的产品今年非Google wave莫属,社交娱乐、即时通讯、团队协作集成到一个平台下无疑是一个平台级产品的梦想,也十分令人向往的。不过Frank Spillers本人在可用性与令人向往性的优先上,阿石认为值得商榷,给用户“画饼想像”的理念当然很好,如果基本的可用性不能达到要求,令人向往性则成了无本之末。

十二月份 Desirability (让用户对产品产生令人向往性)

Axure RP及广磊兄

十二月 18th, 2009

axure

Axure RP 作为一款“快速实现、准确表达、带有交互效果且易于上手”的原型设计工具,在 UE ( user experience ,用户体验)越来越受到互联网行业产品经理、策划、和公司领导重视的今天,Axure 已经可以和office类软件、脑图软件在产品设计过程中 产品设计人员 UED 实践过程的必用善软,可以称谓为“三大产品设计利器”。但是在这款工具在实际运用过程中却有一些争议。

  • “做出来的效果怎么这么山寨啊,一点都不好看”,有的市场负责人、公司领导如是说
  • “把原型直接做成 DIV+CSS 不是更好吗?直接给程序套不是又快又省事嘛”,有负责前端的同学就是这样干的
  • “操作难度大,学习成本高,还是洋文的!”,新人还未上手埋怨道

之所以出现以上争议现象,是因为在现今互联网行业精细化运作与领导拍脑袋加拍板、传统个人站长“一人可以搞定一切”相互碰撞的结果,而这种结果就误解了  Axure 这款工具需求的初衷。

在 Axure官网 下面有用三个单词组成的原型设计流程图“设计、体验、展示”,这也道出了无论是个人打法还是团队协作,都需要先做好信息设计、 搞定流程交互,然后在正式上马之前还要给个人大脑呈现或大家面前 demo 展示一下这样的工作进程。 但是问题出来了,信息设计 word 可以做,流程 visio、excel 也可以搞,演示用 ppt 也能代替为何非要用另外一套 Axure 呢?这其实是个好问题,很多人用Axure的人避而不答,一味的追新立意。Axure作为一款快速原型设计工具,其核心特点是快速产出html交互产出物,在领导拍脑袋之前也有时间让他看看跳跃于众人脑袋中的需求模型呈现效果如何;也可以让市场、开发人员一起 过来碰碰,碰一下市场策略在页面如何展示、开发实施可行性等,一旦遇到修改意见Axure可快速迭代保存并发布给各团队角色进行二次PK, Axure 在团队之间沟通高效率在这里就体现出来了。 论及个人,word、excel等善软能够vba高级编程、 div+css 实现也未尝有何不好,所谓“草木竹石,皆可为剑”,如何使用工具表达信息架构,让用户用较少的时间和思考完成信息找寻及将一款工具用到极致人机合一才是王道。但交互演示、团队沟通这两方面功效目前还没有工具和Axure媲美的。

关于 Axure 操作难度,阿石认为较难的无非是  dynamic panel (动态面板,Axure 的层,可以制作弹出框、Tab等 )和一些传值调用(可以赋予逻辑条件相关值,可以一次控制N个层),看看官方视频、 切合自己实际摸索基本也都会了,在这里推一下尹广磊兄,我与广磊兄07年在网上相识,当时都在搞育儿项目。他的webppd网站产品原型设计论坛集中了国内原型设计的实战高手和各种axure实践经验分享,而他本身就是Axure大拿,为人热肠有求必应,且是axure.org域名的持有者,为Axure在中国产品人员的普及做了很大的贡献,可谓 Axure 在中国的布道者,有什么问题和想法可以去看看,看看总有收获。

Related Posts with Thumbnails