Redesign淘宝随身购

淘宝随身购java版1.0已发布近6个月,适配的机型还只是240×320px和320×240px的手机,解压了SuiShenGou_for_NokiaE71_Alpha1.0.jar,发现xml中未定义图片的高宽及间距,不知为何没有完成最后20%的工作,而通过修改图片的大小和xml即可完成界面适配。

taobao

随身购的模式是客户端和浏览器,男装和MP3等功能是放置读取数据并显示在客户端,而点击彩票功能之后跳出客户端进入wap淘宝彩票频道。

jar文件共596k,图片占了345k,有个dat文件91k,估计是字体集。各种手机默认的字体大小不一,加载字体集之后界面显示统一,可以避免因手机默认字体过大而导致的显示不完全等问题。视觉设计挺好,但交互设计部分个人有不同看法,尝试重新设计。

1.去掉左软键的“确定”,一直显示“菜单”。理由:

  • 在主界面使用方向键选择功能,按确定键选中功能,这是选中“菜单”选项最常用最方便的方法。
  • 弹出“菜单”选项有“1.进入”,有了上面的方法之后,这个选项的使用率很低,可以去掉。
  • 按左软键,弹出“菜单”选项之后,按向上或者向下键选择选项,再按左软键才会使用到“确定”,手指放置在方向键就能完成的操作就不必移到左右软键上。
  • 去掉“确定”之后,按左软键可以弹出或者关闭“菜单”选项。

2.弹出的“菜单”选项加上数字快捷键。

3.去掉非主界面最顶部的功能导航。理由:

  • 随身购的内容是选择商品和查看详情,是最主要的内容,导航是辅助内容,占据了高度为42px的位置,手机屏幕那么小,特别是在横屏幕320×240px手机上,辅助内容能越少越好。
  • 顶部的功能导航操作并不方便。如在选择商品时切换功能时,要多次按向上键,焦点移到“人气”,再按向上键,选择功能;或者按一次左右键把焦点移到“人气”tab栏,再按向上键。如在“宝贝详情”界面上,那只能按多次向上键了,这种操作还不如返回到“主界面”重新选择功能,或者在“菜单”选项中加入导航的功能。

4.去掉导航之后,增加tab,去掉灰色线控制滚动条的功能。

  • 在进入“宝贝详情”界面中,必须按方向键控制灰色线。因为按照控件实现滚动的话,有可能部分内容显示不全。如果灰色线在最底部,此界面不支持焦点的上下循环滚动,要按十多次向上键之后才能切换tab。
  • 去掉导航之后,每个界面中可以多显示2-3行的文字,每个tab中可显示内容增多。“宝贝详情”界面中tab增加至5个,每个tab中显示的内容减少。
  • “立即购买”和“加入收藏”按钮由左右排列改为上下排列,利用按钮实现界面滚动。(效果有待考证)
  • 左右键可以选择tab,上下键选择商品或者“立即购买”和“加入收藏”按钮。

总体而言,现有客户端的交互设计逻辑挺清晰,用户使用习惯的话也没用大问题,但是重新设计之后可以减少很多不必要的操作。

Redesign淘宝随身购》有10个想法

  1. 图片都看不到啊,很影响对文字的理解啊。
    不会是我的机器有问题吧?

    有个小建议哈,觉得你的博客导航有点儿问题。其实文章分类很重要的,是信息架构的第一步,帮助我一目了然你的博客是关于哪些内容的,也方便我找到我想要的内容。

    另外互相加个友链好吗?

  2. 只有一个图片,看不到嘛?
    博客的标签有些乱,数目太多。
    可以加友链。

  3. 你整个站点儿的图片我都看不到。你是上传到服务器了吗?
    也可能是我这儿网速慢,你图片又太大的缘故?
    保险起见,我晚上回家再试试

  4. 更正一下,这篇和多点触摸区域这两篇的图打不开,其余的都可以。

  5. 基本认同晓生的看法,尤其是“菜单”的重要性,非常多客户端都没有重视并规范起来,有的是把“菜单”变换成确定,有的是在不同界面多次无意义变换字眼和功能,其实,菜单最根本的就是要做出Windows的“开始”菜单,就好了,因为手机屏幕小,一定是需要一个能够在多界面进行统筹的按钮, “菜单”经常变换会影响用户判断,尤其是有些客户端虽然把菜单改动成“确定”后,实际仍然是“菜单”,原先公司的客户端上也经常发生菜单混乱现象。
    还有一点,如果是在触摸屏上,部分客户端应该做到点击菜单上功能选项时,应该是直接执行聚焦并点击,不要用户需点击两次才能确认一个功能的情况。 淘宝的这个java客户端从界面上来说基本上还是挺适合的,尤其是java软件来说

  6. 总体上而言,淘宝java做的还是不错的。

    但是很多客户端“菜单”选项比较“掩蔽”,当找不到操作时,才会想到去“菜单”中去找,不像iPhone那么直观。

  7. 可惜,所有外链是FLICKR的图片都无法显示在你的博客里。。

评论已关闭。