曉生語錄

移动互联网产品设计

Palm和Android的返回键

Palm的返回操作是在手势区向左滑动,Android有“返回”按键,两者的共同点就是触摸屏上没有像iPhone那样的“返回”控件。因而有想法将手机客户端的界面设计中加上“返回”,是否合理呢?

加上“返回”控件有以下优点:

  • 指示。界面上“返回”控件还能起到指示的作用,明确告诉用户当前界面是否是可以返回的,在不知所措的情况下,用户也不用胡乱去探索界面中是否有掩藏的操作。非触摸屏手机通常左软键为“菜单”“确定”之类的操作,右软键为“返回”“关闭”的操作,“菜单”有很多隐藏的选项,需要用户去记忆,但是“返回”却是非常明确的。
  • 连贯。在使用触摸屏时,手指通常在操作“返回”和“菜单”之类的操作会离开触摸屏,操作不连贯。触摸屏的体验更好,期望用户的手指能一直停留在触摸屏上,尽量减少触摸屏和按键操作之间的频繁切换。
  • 方便。触摸屏上点击控件比使用手势区和按键更方便。

但是任何元素的使用都是有条件的:

  1. 有空间。界面上有空间一直放“返回”控件,要保证“返回”控件的一致性,放在固定的位置。
  2. 返回操作频繁。由于界面的层级关系多,返回操作比较频繁。如果界面就两层,那用户很容易知道当前界面是否需要返回,指示的作用就没有必要了。
  3. 确实方便。也许在界面上放上“返回”控件的想法来源于iPhone,设计师感觉这样用起来挺方便,在Palm和Android也要这样做,这就太主观了。iPhone的“返回”是放在界面的左上角,对于触摸屏而言,左上角是单手使用时最难以点击的区域。如果将“返回”控件放在触摸屏底部的话,对于像摩托里程碑这样的手机,返回键虽然是在触摸屏之外,但是操作的感觉和触摸屏几乎完全一样,那这时操作上方便是非常弱的。
  4. 用户习惯。Palm手机属于小众化手机,也许用户是Palm的狂热分子,就喜欢手势区的操作。但也不意味着就一定需要完全遵从用户习惯,如果提供了更好的使用方式,用户的习惯也是可以改变的。

这些都是推理,任何理论都代替不了用户最终的反馈,衡量设计的好坏还是要看用户真实使用产品时的感受。

触摸屏手机交互设计

触摸屏已经得到广泛的应用,触摸手势也将逐步取代鼠标和实体按键之类的输入方式,为手机和电脑等大众化电子产品带来了全新的操作体验:

  • 自然和直观。 每个人都知道如何用手指去点击,当看起来和现实生活中物体相似时,用户更容易明白如何去操作,这也是自然用户界面(NUI-Natural User Interface)的特点之一。
  • 侵扰程度较低。 打字和使用鼠标点击时,会发出声音,而在触摸是无声并且方面,使用手指即可,不需要找笔。
  • 便携。 使用触摸屏时也能完成大部分任务,更为灵活,也不需要任何的工作平台和鼠标和键盘之类的外接设备。
  • 直接和融入感。相对于鼠标的指针移动,使用手指和触摸屏上物体的交互更能让用户融入在操作中。

触摸提供了真实的互动方式,界面中元素的移动、滑行和旋转等动态效果也符合物体运动规律。但是现在新技术的应用并非完美,也存在一定问题:

  • 难以微操作。手指无法点击较小的控件,鼠标指针可以精确到1像素,而手指的指尖或者指肚决定了触摸的精确度。
  • 难以输入。有限的触摸空间、难以改变光标位置和虚拟键盘的调用等问题使得大段的文本输入较为困难。

touch1

  • 容易疲劳。当使用触摸屏平板电脑时,手腕和颈椎关节容易疲劳,不利于长时间使用。

else

else-mobile

  • 难以点击屏幕的边缘区域。当单手握住触摸屏手机时,以大拇指为圆心,大拇指长为半径在手机屏幕上的约四分之一圆环区域最容易点击,离此区域越远,越是难以点击。

所谓设计,就是要解决以上列举的问题,设计适应手指触摸的界面,并发挥触摸屏操作的优点,在已有基础上挖掘更新的操作方式。通过增大控件之间高度和间距,可以增加其可点击区域,提升触摸的精确度,与此同时还要注意以下问题:

  • 减少点击次数。手指的抬起和按下比鼠标点击费力。
  • 减少手指位移。手指移动不能像指针那样调整平移的速度。
  • 充分利用已有控件。如两个控件去完成同一操作和闲置某一控件是对有限屏幕的浪费,触摸屏的界面的操作应更为巧妙。
  • 尽量保证操作的可见。可对操作进行分级处理,但不可像鼠标右键那样隐藏操作,避免用户去查找。
  • 保证初级用户的使用,提升高级用户的快捷操作。如用户是多为初级用户,使用点击和平移这样的基础手势(长按是否算?)就能完成所有操作,在此之后,将多种操作手势作为快捷操作,提升操作效率。
  • 发挥手势操作的优势。但如果应用特别的手势能提高操作效率和更好的操作体验,应控制用户的学习曲线并注意引导用户学习操作。将手势限定在点击和平移,并不意味着将界面的操作安装手机操作系统那样去做,平移手势也能变成输入方式(如百度点划输入法)、功能选择和界面灵活切换等等。

……(后续部分省略)

注:界面的发展过程及其特点:

  • CLI(Command Line Interface):static、disconnected、high-low、directed、recall、abstract、textual
  • GUI(Graphical User Interface):responsive、indirect、double medium、exploratory、recongnition、indirect、graphical
  • NUI(Natural User Interface):evocative、unmediated、fast few contextual、intuition、direct、physical

参考资料:

  1. http://msdn.microsoft.com/en-us/library/cc872774.aspx
  2. http://10gui.com/video/
  3. http://www.slideshare.net/ArnoutdeVries/multitouch-interaction-overview

触摸屏手机中应用程序界面的切换形式

触摸屏手机中应用程序常见的有两种页面切换方式:标签式和滑屏式。

img_0269

标签栏来源于网页设计中,通过点击标签来切换网页。在物理按键式的手机上的底部通常只有左右两个或者左中右三个工具按键,分别用左右软键和快捷键操作。在触摸屏上可以增加到五个或者更多的工具或者标签,可以像网页那样切换多个页面。

标签栏中的页面可以出现上下滚动条,以上下排序为呈现形式,能在视觉和功能上区分出信息的重要性,排在顶部的信息更为重要。

wp77

像Android、iPhone和Window Phone 7手机操作系统一样的滑屏式的操作体验更好,只能靠平移的手势来操作,是触摸屏独有的设计。虽然在物理按键式的手机上也会出现滑动式效果,但是只是用于多标签界面之间的切换动画,界面并没有很强的逻辑关系,界面可以从右往左读,也可以从左往右读,左右排序的信息没上下排序那样有重点。

在视觉上,滑屏式的界面是左右连续的完整页面,可以左右移动。由于每个界面中并不会出现上下滚动条,如果增加新内容,必须横向增加,就像iPhone手机操作系统新icon的界面都是不断在右边新建,底部的圆点起到的作用和滚动条相似,让用户知道当前界面所在的位置。

滑屏式的界面在横向扩展还需注意,由于各个界面并没有明确的名字,如果扩展到三个以上不同内容的界面,将会增加用户的记忆负担。iPhone的界面之所以可以横向“无限”增加是因为新页面属于同种内容,对于用户而言界面只有两种,最左边的搜索界面和右边的icon列表。

早期的多标签是模拟电话薄一样的样式,还有个别的3D式手机操作系统,以模拟现实生活中物体的使用来便于用户理解。当用户使用习惯之后在形式上会渐渐地区别于真实物体,就像本博客右侧的“关于晓生、文章列表和精品网摘”,起到的是多标签作用,但是形式上已经有很大的改变。

ds_hierachicalmodel

像iPhone的滑屏式和翻滚式的动画也是基于生活中物理规律,有助于用户理解页面之间的层级关系。

« Newer PostsOlder Posts »