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的算法是否利用折线的滑行输入会提高点击的准确率,可以更精准地选中的较小的点击区域呢?

iPhone VS Android 应用程序界面

iPhone和Android应用程序界面形式不同,而iPhone选择应用程序要易于Android。

iphone_openclose

如当前界面都为手机系统主界面,iPhone选择应用程序的操作为:

  1. 左右平移手势切换页面
  2. 查找到应用程序并点击

android_applications

Android选择应用程序的操作为:

  1. 点击APPlication menu
  2. 上下平移手势滚动页面
  3. 查找到应用程序并点击

首先Android必须在触摸屏精准点击这个约40×40像素的显示区域,而iPhone可以直接开始查找功能。

Android的应用程序排列不分页,程序一多就记不住每个程序所在的确切位置,查找起来比较费力。而iPhone有分页,每页的功能的4×4的排列方式,现在手机上已经装了5页的应用程序,我能基本记住每个功能所在的确切位置,如第二页右上角是“植物大战僵尸”。

这些也影响到切换功能的操作。如已运行某个程序,iPhone切换应用程序的操作为:

  1. 按Home键,关闭程序返回进入应用程序的界面
  2. 左右平移手势切换页面(如果查找的应用程序已在当前界面,此步操作可省略)
  3. 查找到应用程序并点击

Android切换应用程序的操作为:

  1. 按Home键,关闭程序返回主界面
  2. 触摸屏精准点击APPlication menu,由物理按键切换到触摸屏
  3. 上下平移手势滚动页面
  4. 查找到应用程序并点击

iPhone最快可以2步运行新的应用程序,而Android却必须执行以上4步操作,操作的效率低于iPhone。

在应用程序中,iPhone有表视图、标签栏、工具栏和控件列表等标准组件,有利于组织信息、信息扁平化和操作流畅度,而Android的标准组件效果较差。

部分内容来源于lukew’s blog

避免输入

常有用户常抱怨iPhone的输入按键太小,难以点击,手机的输入速度一直是个难点。因此手机交互设计如要出现输入框,要重点考虑如何减少输入,提升用户操作的流畅度。另外,手机的显示能力有限,不能像网页那样提供大量的选项供用户选择,每个界面都必须提供最有价值的信息。

提供选项。对于用户经常输入的字符可以提炼为热门选项,便于用户选择。

比如使用手机购买数字点卡,对于购买量大的的热门点卡(魔兽和Q币等),QVGA(240*320像素)的手机可以提供10个选项。如用户已购买过某类商品时,可替换热门点卡的数据,采用购买记录和热门点卡相结合的方法。数字点卡属于用户重复消费的商品,而机票、电影票和图书不是重复消费的商品,如将此类购买记录放置在首页够用户选择就没有意义。

热门选项的必须够“热门”,如10个选项的点击率为30%,那就可以减少30%的用户输入,那就达到热门选项的目的。但是如热门选项的点击率不到10%,那对于手机有限的显示空间来说,这就是一种浪费。

选项过多则不便查找,还不如直接输入。

控件记忆性。将用户输入的字符记录在输入框中,iPhone的输入框可以加入“书签”功能,可以记住用户输入的所有字符。点击“书签”,进入table view或者自定义弹出框,显示的顺序按输入的时间顺序依次排列。

输入的数据要有个过滤的过程,对于无价值的输入字符不予保存。如手机充值功能中用户填写10位的手机号码,点击“充值”按钮,手机客户端提醒用户输入手机号码格式错误,此时这10位手机号码不应记录。

利用手机系统信息。手机的通讯录包含姓名、手机号码和地址等信息,在填写表格时可以调用这些信息。如当为朋友手机充值时,需通讯录中找到手机号码,然后背下来,打开程序找到手机充值功能再输入手机号码。如能调用手机的通讯录,点击手机号码输入框右边的图标,进入通讯录后选择好友的手机号码即可。

快速查找。iPhone的通讯录有按姓名首字母查找姓名的功能,便于从大量数据中搜索。如购买飞机票要搜索城市,可提供城市便宜首字母搜索的功能,输入“N”,过滤出“南京”和“南宁”等城市。

数据的重复利用。对于同类的字符可以重复利用,如填写机票的乘客信息时,需要输入的手机号码,可以调用手机充值功能中已经输入过的有效手机号码。

如输入无法避免,可引导用户输入,如告知用户输入数据有什么作用。在输入之后提供用户有效的信息,让用户感觉耽搁一些时间去输入是有价值的。

iPad用户体验准则

本文译自《iPad User Experience Guidelines》,供个人学习之用,水平有限,难免有欠妥之处。

iPad用户体验最主要体现在内容和交互:

  • 淡化程序UI,以便用户关注所需的内容。
  • 美观的内容形式,富有真实感。
  • 充分利用设备的性能来增强内容的交互性。

支持所有方位

优秀iPad程序的其中一个重要因素是可以在所有方位上运行。竖向的大屏幕可以满足用户浏览内容的需求(当竖屏幕较小时,用户就会将屏幕旋转为横屏幕,这样一行就可以显示较多的文字)。用户不太会注意最小设备结构minimaldevice frame;使用iPhone时,用户单手握住手机时,屏幕多为竖向显示;而双手使用iPad,屏幕的显示方位并不能确定或者home按键的位置,他们不认为设备有默认方位。这就导致用户期望程序可以在当前方位上运行。所以程序尽量满足iPad各方位的运行要求。

保证以首要内容为重点。当旋转iPad的方位时,如重点显示的内容发生变化,用户会感觉对程序失去控制。

旋转时如何显示辅助信息或者功能。尽管能保证上一条,还要考虑如何显示较为次要的信息。例如邮箱功能中,首要内容时发邮件,次要内容是联系人和收件箱的列表。

5cc5f4aa74742a4472c39af571fc9d96

横屏的次要内容显示在左边的分视图中

7e34a19a48b392473774cdcdfa60287f

竖屏的次要内容显示在气泡框中。

再如,横屏时,一款游戏以长方形显示,当旋转到竖屏时,需要调整屏幕上的显示区域,游戏显示边框的上面或者下面增加显示空间,用于显示辅助信息,而不是垂直拉伸显示区域来撑满整个屏幕。

避免布局变化过大或者无缘由地改变。所有方位中都显示相似的UI布局旋转时尽可能保留信息和文本的原有格式。尤其阅读文本时,重要的是避免旋转之后用户找不到读到哪儿了。如果非要对页面重新布局,可以使用动画帮助用户理解当前页面的变化。例如,当旋转时要必须增加或者移除文本框时,可以选择隐藏动作并在新布局中简单地淡出。为了有助于合理地设计旋转动作,可考虑在真实的生活中是如何和它们交互的。

避免使用UI元素或者定义一个旋转的手势来完成旋转动作。应该是内容随着iPad的旋转而旋转。

为每个显示方位各提供一个启动图片。比如提供1004×768和748×1024的图片来满足两个方位的显示要求。

仔细考虑程序是否可以在所有方位上运行。有些程序只能在横屏或者竖屏下显示,此时:

  • 显示程序为正常显示方式,无论当前iPad是什么方位。避免使用UI元素来告知用户旋转设备。支持180度旋转。
  • 可以特殊处理输入式旋转动作。有些游戏把旋转设备当成操作方式,这时候横竖屏切换时,可不改变游戏的显示方位。

继续阅读iPad用户体验准则