Archive for the ‘信息架构’ category

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 在中国的布道者,有什么问题和想法可以去看看,看看总有收获。

Protonotes:在线原型注释工具

十一月 26th, 2009

Protonotes

Protonotes,顾名思义,是由prototype和notes和两个单词组成的合成词,翻译为“原型注释”,之所以加上在线二字,是因为产品团队制作原型时可通过Protonotes官方提供的数据库和自己设定的数据库,把相关的注释文字写进数据库、团队协作查看,让文本注释在线随时随地查看,方便沟通需求的好工具。

使用Protonotes也超级简单,不须下载任何工具,通过网上注册,填写邮箱地址申请团队协作码(groupnumber)。注意查收来自info@protonotes.com的电子邮件,内容一般如下:

Welcome to Protonotes!

Using Protonotes is easy. Your Protonotes group number is EkfN4pUZF8BG. All you need to do is copy and paste the code below into the <head> of any page of your prototype:

<script src=”http://www.protonotes.com/js/protonotes.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var groupnumber=”
EkfN4pUZF8BG“;
</script>

……….

这个回复邮件目地是告诉申请人两件事情:
一是团队协作码EkfN4pUZF8BG,这应该是随机并唯一的。任何团队成员共享一个团队协作码,便于统一使用查看;
二是在原型(如axure生成的index.html)插入 <script></script>JS代码段,便于加载Protonotes;

这里要说明的是JS代码段必须插在原型html页面的<head>和</head>之间,并随时保证网络链接通畅。
下面是官方的测试页面和截图 http://www.protonotes.com/test-protonotes-out.html

Protonotes_test1

团队任何成员通过嵌入的Protonotes导航,可以在原型页面任何位置新建、拖曳、查看备份注释标签,并传到Protonotes给用户设定官方数据库,为数据安全隐私起见用户自己也可以设定数据库来同步注释文本。无论如何,团队成员只要通过以下链接都可以查看注释文本(备注:其中groupnumber是都各自不同的,这里是阿石自己申请的)

http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG

如果是自己设定的数据库,Protonotes会在设定数据库完成后分配一个privetedb码,具体查看

http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG&privatedb=SdT68P9ab0yp

AxureRP本身是带有注释功能,但在展示透明效果略差以及缺少注释同步备份功能上,虽然有团队share功能,但在给领导演示、产品展示方面Protonotes有可乘之机~稍微不足的是Protonote不支持中文,中文打注释时会出现乱码。另外我自己利用Protonotes的注释效果,也欢迎各位有兴趣的同学在上面打注释,:)http://www.ashnotes.com/experience/i-dong-game-center/

网上商城广告页是否需要面包屑导航

十一月 5th, 2009

hansel_and_gretel

【背景知识】

电子商务在中国各地四处开花,深度运营是任何B2C团队日常工作的必备思想,根据市场策略、产品特征,需要设计师制作各种各样的专题页、促销页,这里同统称“广告页”。

面包屑导航,又叫层级菜单,之所以叫面包屑导航,是起源于格林童话中hansel 和 gretel仍在森林的面包屑踪迹,而防止自己迷路。可用性大师Jakob在起官网面包屑导航在主流网上商城广告页的现状》
广告页作为各大网上商城搞活动运营的必备良药,其在网站的层级结构中一般为“首页 > 广告页”的二级模式,为了维护管理,可能还需要“首页 > 专题 > 广告页”等更多层级模式(这一点可在各大网站链接结构可以看出来)。然而广告页作为市场领导宏伟战略的高地、页面设计师肆意发挥艺术才华的自留地,面包屑导航却甚少得到二者的青睐,如:

看到这些主流的网上商城,还有无论是淘宝还是鼎鼎大名的amazon,广告页都没有标识面包屑,让人甚是不解。那不禁让人发问:广告页不需要面包屑导航吗?

【为什么需要面包屑导航?】
Jakob在文章指出,80%美国年度获奖的网站都使用了面包屑导航,而之所以使用,无外基于以下几点:

  • 显示用户浏览网站的当前位置
  • 一次点击直达网站结构最高级(首页)
  • 在用户可用性测试中,用户使用面包屑导航没有发生问题
  • 占页面很少位置(潜台词:既然很少,为何不用呢?)

【网上商城广告页是否需要面包屑导航?】

按照Jakob说法,究竟是否使用面包屑导航,起实质是偏重网站结构与还是照顾用户浏览行为问题。试想一个用户刚来一个网站(首页),或才浏览了一个页面,对用户来说“我在哪里并不重要,重要的是网站能给我带来啥”,这时网站结构是主要问题,如何在页面设计中给用户造成很好的逻辑清晰、来回自如的页面效果是用户期望的;而当用户逛了N个页面,从A目录跳到B目录,从公告跳到专题,来来回回,象“hansel 和 gretel迷路”的那样的用户体验感就会产生,此时照顾用户浏览行为就成为主要矛盾,面包屑导航就成了必要。

【小结】

广告页作为一个单独页面,来源路径无外是网上商城首页广告、营销电子邮件、第三方网站广告,在此之前可以说用户浏览前置路径是NULL,用户在此网上的浏览轨迹几乎是零,如何给用户呈现最佳页面效果是主要的,因此“占用空间、破坏美感”的面包屑导航是可以缺失的。但若是方便用户查看历史广告页管理,由于在在“首页>广告页”中加入了“首页>广告列表页>广告页”要给用户呈现列表,此时面包屑导航则不可缺少。

Related Posts with Thumbnails