当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 体验ebay AIR

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 体验ebay AIR


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 158 ::
收藏到网摘: n/a

原文:http://aliue.cn/blog/?p=150

刚才要说的是这几天亲身体验了一下ebay的AIR感觉挺不错的,无论从界面,交互,功能上都感觉挺好的。关于topic中的“剑走偏锋”是因为我认为在现在看来AIR在很多人眼中还是“异类”,大部分的人还是没有接触过的,如果你现在对身边的朋友说“嘿,别在网页上网买东西了,下个ebay家的AIR用用”,八成那个哥哥会满头问号“AIR是什么东东,空气还能下载么”,当然这只是调侃,但是AIR并没有大面积的普及应用,确实会让开发出来的项目深陷窘境,所以ebay敢走这步棋利用RIA中的AIR开发“半桌面级的B2B业务”也算得上是剑走偏锋了,我是说这是一步好棋,希望我们的国内B2B老大也可以快加快步伐,利用RIA利剑也来切一块蛋糕吃吃。ok,我们一起来看看ebay 的“ebay desktop”吧。

ok,1st,目标任务:登录。点击图标弹出一个AIR的登陆界面:

Figure .1.ebay desktop的登陆界面

如果没有ebay的账号,可以点击“Get one now”注册一个,如果已经有了可以直接输入id和pwd然后“Sign In Securety”登陆。

2.登录后我们可以看到程序呈现的主界面,我们将其最大化:

Figure .2.登陆后的主界面

我们可以看到其界面非常友好,略显金黄的界面身后仿佛蕴藏着一座巨大的宝藏一般,等待你的挖掘,排列整齐的各个模块和模块标题看一遍可以很容易联想到可能会是干什么用的。

3 .任务:搜索货品,ok,借助国外的数据库我能找到什么我想要的货品呢?我在搜索栏中输入“enya”,然后打开搜索界面(完成任务方法1):

Figure .3.搜索后的页面

ok,这就是搜索完显示的界面,其实通过页面切换你会发现这个页面正是Figure2中主页面右上角的第二个图标“Find”的页面,下面就是搜索的结果,而上边的那一块是从搜索结果中筛选,也就是设置filter(过滤器)来进行精确查找,这个页面有两个东西需要介绍和提出异议(以后陈述)。要介绍的是我们可以通过中间暗红条右侧熟悉的feed按钮来把这次搜索进行订阅,后面你就会发现这个feed的功能还是很强大的,不光会提供“搜索关键词”的feed,还能订阅卖主的相关信息,关注卖主的货品动向。而这些,都会在主页面的左上侧“My Favorite Searches”模块中显示,方便你随时查看,怎么样够贴心了吧。

Figure .4.主页上的收藏模块(可以收藏搜索和卖家两种信息)

ok,这是通过最直接的搜索方式,下面我们可以通过系统自带的分类通过类别来做进参考性的查找(完成任务方法2),我们可以看到主页面这个模块:

Figure .5.系统提供的分类搜索模块

这种信息结构模式类似于VISTA和Mac OS中的目录查看方式,确实一目了然,非常直观,在有限的空间展现无限的层次,但是Ebay只给出了最深3层的IA,有得在第2层就会可以进行搜索了,当然层次数量上确实也符合7+-2记忆规律。

接下来我们来看一看假如我们选择了一件物品双击,那么会怎么样呢?答案应该会和你期望的差不多吧,双击货品的话就会出现下面的界面:

Figure .6.货品查看时的主要界面截图

这就是物品信息的主要界面,左边是上下文相关的物品,这个上下文主要包括两种情况,一种是从搜索里面查看物品时的上下文,一种是在最近浏览的物品中的上下文这两种,上图显示的是后者,因为我们可以看到它提供了可以删除的图标,也就说明了这种上下文情况下我们可以具有改动的权限,而搜索上下文明显只是呈现结果或者过滤结果,让你随便删除搜索结果显然是没有意义的。

下面我们拉近镜头(来,摄影师我们给个特写!),看拉近的界面:

Figure .7.货品信息细节截图

ok,拉近后我们可以看到,左边用了一个Flex里面的<mx:ToggleButtonBar>标签,用选项卡这种方式来展示货品的相关信息,第一张选项卡是货品的照片,卖主的地理位置,等等,这个照片的效果是动态的,做得挺好的;第二章选项卡就是卖主的详细信息了:

Figure .8.卖家的信用信息

这种类似于淘宝™的用户自评信用体系,展示了卖主的信用和货品和好坏;第三个选项卡是“(bids)物品竞价”,这种模式淘宝™也有,就是我们俗说的拍卖;第三个选项卡是支付的手段,我们可以看到“PayPal”的身影,而最后一个选项卡“shipping(货运)”显示了物流运费情况。右边的控件展示了这件物品的总价格。如果是你对这件货品感兴趣,上图的右上角几个标签可以帮助你:第一个是图标是关注这件物品,选择后它会显示在主页面上(后面有截图,Figure.11的介绍);第二个是可以给卖家发送信息,这点我感觉即时性不是很好,这点后面我们会有讨论;第三个是个记事本方便你记录些信息;第四个是个时间的提醒,有些物品会有下架时间的。

看完后你可以根据竞价或者购买两种模式来进行自己的选择,因为,我还没有试过购买,所以all is stop here!我们做了这么多事情,如果下次我再登陆怎么办?信息会保留么?我们可以点击右上角的“HOME”回主页面看看发生了什么.

Figure .9.一番搜索、浏览后的主页面(信息饱满)

看看Figure.1对比一下,是不是内容多了很多,呵呵,都有用么,看看左边中间:

Figure .10.最近按照系统目录搜索的分类

这个是嘛东西呢?这是你通过系统提供的目录浏览时用过的最后一级的分类信息,一共显示十条。再看正下面的三栏:

Figure .11.关注的、竞价的、和最近浏览货品的模块截图

左边栏显示的是关注的货品(前边有提到),就是我刚才看的那张Enya的CD;中间呢,就是你竞价的物品,和竞价的结果,看见绿色的“Winning”了么,这件nike的腕环我竞价成功了,花费是6SGD(新加坡元),后来我打开邮箱发现所有交易信息会由系统发信让你确认的;而右边呢就是最近你看过的物品,一行对应一个物品。看来ebay 的交互设计师确实很下功夫啊,感觉东西很多但是每一个模块都是那么有用。

ok,这样一来我们就以一个使用者的身份完成了对这个Ebay desktop的AIR程序的浏览。当然这是一个使用的过程,细节部分其实处理的也蛮不错的,感兴趣的话,你可以下载下来试试,感受感受。后面我们会来探讨一些问题,例如交互方面的或者用户体验方面的也会给大家在提供一些信息,谢谢。

相关软件的下载可以在“下载”页面中的“软件下载”文件夹下#001和#002编号软件。

体验ebay AIR的小结

9月19日我写了一篇关于ebay AIR的文章《剑走偏锋:体验ebay的AIR》,其中关于ebay AIR的使用做了第一人称的叙述,过去12天了,我想写一下使用过程中的一些设计细节的想法。今天是国庆节祝咱们国家繁荣安定,祝人民平安幸福,祝您假期愉快,enjoy your life…

如果已经忘记了当时的内容,可以点击这里回忆一下。在文章的Figure3下面)我谈到了有一个地方需要提出异议,这个地方要提出异议的就是搜索页面的“翻页模块”,记得以前西贝在blue idea的论坛里提过这个话题,我当时给出的答案是马里兰大学发明的“鱼目菜单”,但是后来想想,这个回答还不是很好的。我重新思考了一下感觉这下面的表述应该更好一些:

我认为鱼目菜单的表现形式固然很好,很吸引人,但不适用与所有场合,比如在论坛查看某一版的帖子,我觉得就不是很实用,因为用户在翻页显示帖子之前的动机与这个“翻页模块”毫无关系,也就是说,我翻帖子和这个“翻页模块”实际上是没有瓜葛的,“翻页模块”是个“方式”。但是有些场合这种鱼目翻页的效果却是很好的,你比如在有限的屏幕空间上显示A-Z的字母词根,如果采用传统的翻页,那么在使用的过程中就会浪费很多的时间,甚至会打破用户的“心流”。这时我们可以设计成“我们查阅辞典”时的一种心智模型,而利用鱼目菜单却可以很好的表现这种的模型的实际应用效果,这是“翻页模块”为用户提供的就不仅仅是一种“方式”了,还有提供了查阅时的“方法”。

上面是顺便说叨一下,切入正题咱谈ebay的东西。我说这个ebay AIR的翻页效果要提出异议,是说在交互使用的过程中这种方式会不会影响用户,我们看一下这个“翻页”:

上面是这个翻页模块的默认状态,我们模拟一下一些阈值操作:

step.1

屏显:

思考:我看完了第14页,下面该看页15页了;

操作:鼠标点击“15”;

显示:

step.2

屏显:

思考:我看完第15页了,下面该看16页了,but where is 16 ?是否是那个向右的三角。

操作:点击右三角;

显示:

思考:哦,原来如此,果然是。

step.3

屏显:

思考:我看完第16页了,下面该看17页了;

操作:鼠标点击“17”

显示:

思考:16的位置被17替代了,那再按18是不是17的位置也被18替代了?(后经过验证却是如此)。Ok,我们可以看到在step1和step3中的操作都没有问题,也没有碰到过挫折,但是在第二步中我们停顿了一下,当然这只是以我的个体建立的步骤,但是客观的对比step2和step3,我觉得step2如果也有automatic的后续页出现或者给予其他暗示可以顺利过渡到16页,那我觉得就很好了。但是很可惜一个“向右的三角”说明了什么?我们应该了解平常上网的翻页中还有一个“向右三角”后加一个“|”的情况她表示最后一页,但是如果用户是个green thumb怎么办,她混淆了两个符号,认为那是个最后一页的符号,但是却显示着“…42”,那她会停留相对更长的一段时间,直到她决定尝试着去按那个“值得怀疑的三角”,这是异议之一。

异议二,我认为这个翻页的模块大小设计的有些小,对于“精致的翻页”我们似乎显得不敢下手,小心翼翼的就怕触动了潘多拉的盒子一般,而且我对比了几种分辨率下的翻页模块和数字、三角形热点的大小,发现他们不是自适应的而是个固定的一个大小,那么我们就担心那些使用着“豪华的”2048×1536的人家是否需要买个放大镜呢,当然如果在“用户调查分辨率的数据”面前认为设计这么大就合适了的话,我认为我可以安静的闭上嘴了。

异议三,关于这个三角,我认为他还不能完全表达一个“下一页”的意思,至少我认为这还不是很严谨的,这点我认为需要考虑到。