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,上下键选择商品或者“立即购买”和“加入收藏”按钮。

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

触摸点击区域

touchtargetsizes
屏幕增大,可以显示更多的内容,但是使用触摸屏控件的密度不宜过大,否则不便点击。各个手机和PC操作系统都对可点击的区域都有推荐值:

iPhone:最小29×44px。

Windows Phone:推荐9mm/34px,最小7mm/26px,元素之间的距离最小7mm/26px,元素的可视区域是点击区域的60-100%。对于经常使用、会导致危险性操作(比如删除数据)的界面元素、在屏幕角落并且手指难以点击的元素和子任务中元素(比如拨号),推荐点击区域大于9mm。

Nokia:推荐不小于1cm(0.4″)的点击区域。最小值为:

  • 食指点击7×7mm/1mm间距
  • 拇指点击8×8mm/2mm间距
  • 列表选项之间有5mm间距

Ubuntu:按钮和其他控件的大小取决于成人的手指(16mm-20mm)、手指肚(10mm-14mm)和指尖(8mm-10mm),推荐不小于1cm(0.4″)的点击区域。

(以上译自lukew's blog)

点击的区域是按照物理尺寸计算的,如果按照iPhone去类推其他触摸屏幕的可点区域w×t,假设该触摸屏的精度为d,计算公式是:w/d=29/164,t/d=44/164。(164是iPhone的屏幕精度)

Windows Phone对于危险性的控件建议是增大可点区域,我倒认为应该减小可点区域,对于没有危险性的控件可适当增大,保证元素之间的距离即可。比如手机界面中的“□记住密码”,一般是只有多选框“□”是可点区域,不妨将“记住密码”也包含在内,增加多选框的可点区域。

Swype

Swype是很好的触摸屏输入的解决方案,每分钟输入可以提高到50个字母。

  • 输入时,手指不用抬起和按下,在屏幕上滑行即可,省掉一部分时间。
  • 省去空格输入,每次滑行一次之后,字母后面默认有空格。
  • 英文的猜词、纠正、匹配和修改。

Swype的算法是否利用折线的滑行输入会提高点击的准确率,可以更精准地选中的较小的点击区域呢?