探索滑动手势

Nokia N9刚刚发布,滑动手势承担了更多的功能性操作。从按键手机到iPhone的Home键,让人不禁联想,实现全触摸屏手机已经指日可待了。

iPhone Home键已经承担的过多的操作,单击退出程序,双击进入多任务,自定义三击显示辅助操作,组合开机键截屏,恐怕这是所有手机中使用率最频繁的按键了。但是功能越来越多,要么继续压榨按键,要么挖掘新的手势操,责任自然落在点击和滑动这两个最基础的手势操作。

比起电脑鼠标,触摸点击存在问题,但同时交互设计上可在采取各种优化措施。

触摸屏点击形式本身单一,没有左右键点击之分。对于手机系统,可以获取触摸区域和时间,由此根据触摸目标和时间长短衍生出长按操作,相当于鼠标右键点击;根据触摸的时间间隔衍生出双击,但与鼠标的双击有区别。以鼠标在桌面上打开应用程序为例,鼠标停留效果之后第一击选择目标焦点,第二击相当于确认目标,触摸屏点击没有鼠标停留效果和选择目标焦点的概念,相比之下简化了操作,但是少了必要的富交互效果,比如查看图标属性。

鼠标可以精确到1像素,触摸屏点击区域推荐为29像素,而且用户在点击触摸屏目标区域时并没有真正点中,存在一定偏差。这种缺陷在按键密集的输入法上体现尤为明显,频繁的误点击会影响用户的操作流。

滑动手势可以和长按组合出拖动,除此之外仅仅停留在滑动页面显示区域。滑动模拟物理运动规律,慢速滑动时页面滚动的范围等于手指运动的区域,快速滑动时滚动的范围要计算手指移动的惯性,页面移动速度由快变慢。手机得到的参数有:触摸点坐标和时间,但坐标点和时间关系并不是一维的, 触摸点坐标随着时间变化也会发生变化,由此可以分析出手指移动的起始点、终点、移动速度、加速度和滑动曲线等。

与点击和操作按键相比,滑动优势存在不少优势:

1.没有明确的目标区域。比如浏览器页面中任何位置都可以执行滑动操作。N9解锁屏向上滑可以显示多任务,向右滑动显示消息推送和功能列表, iPad版Maven浏览器将页面滚动限制在特定区域,反而会影响页面的操作效率,书签和else-mobile一样将原本层级点击操作转变为滑动操作,用户手持设备的方式各不相同,同样会遇到操作效率和单级中显现的功能有限的问题,优点在于其形式占用的空间小。

2.小区域内可以容纳更多的选项。百度手机输入法的拼音拇指输入,“2abc”同时显示在一个按键,在按键上上滑数字“2”,利用滑动的方向选择不同的字母或者数字。还有MIUI最新的百变解锁屏,同样是在利用同样的起点但方向不同的滑动区分操作。

3.比连续点击更快速。Swype输入法之所以快捷,把点击变为滑动操作,省去连续输入过程中的手指重复的抬起和按下。

4.弥补点击难以精确的缺陷。iPhone和wp7使用滑动操作调节文本光标,以滑动的位移代替点击插入光标。

N9屏外的触摸区只是全触摸屏手机发展过程中的过渡方案,其实没有触摸区也能胜任已有的滑动,猜想系统在判断滑动起始点可以用屏幕内的边缘为基准,增加触摸区的概念纯粹是“欺骗”用户,减少误操作。滑动操作并不像点击那样立即响应,当中途发现误操作也是可以取消。从屏幕内滑向屏幕外应该可以执行页面内滑动,因为在滑动的开始时系统无法预知终点是否会在屏幕外。

(图片来自ifanr

三主屏左右滑动切换,形式和操作效果符合物理规律。在应用程序,如果之前是从多任务进入的,从触摸区四个方向滑动都可以返回多任务,从应用程序返回多任务时边界的阴影可以看出是前后两个界面,应用程序在三主屏的前方。在多任务进入应用程序时,应用程序从右边向左滑进显示区域,而不是放大之后覆盖多任务界面,界面之间的位置关系缺乏方向感。

也许受iPhone的影响,这种操作需要时间去适应,在看到视频时本以为从屏幕上方滑进会显示消息通知栏,从底部滑进是返回或者显示多任务。把N9的多任务误以为是safari的多窗口,把多任务作也作为三主屏并显示应用程序的缩略图,比起图标式多任务除了增加点击区域,没有优点。Safari使用网页缩略图显示多窗口,因为缩略图比网站标题操作的效率更高,还可以显示网页的加载状况。N9多任务界面长按操作调出“删除”按钮,为什么要多次一举,不直接在缩略图上显示“删除”图标。

N9的滑动操作确实有创新之处,比iPhone更进一步,但不完美。

试想下iPhone去掉Home键会怎么样?现有的系统界面结构完全符合条件。

浅析手机消息推送设计

消息是提醒用户有更新的内容,可能短信、邮件、好友申请和日程安排。消息的作用在于主动提醒用户,不需要主动刷新程序或者网页去检查更新,比如Android的sina微博,必须手动刷新程序才能更新微博或者查看好友申请。这种做法可以节省流量,对于手机包月用户而言非常有必要的。用户专注于当前任务时,可以接收到其他应用程序推送的消息,用户可以及时处理多任务。

推送机制

ff

最基础的方法是程序实时联网获取消息,但是程序会占用内存,频繁联网耗费电量,程序各自链接自有服务器还会占用很多进程。以轮询(poll)的方式实现时需要程序不定地询问服务器是否有更新,推送(push)的好处在于有消息时由服务器告知手机客户端,手机此时再发起更新,省电省流量,所以智能手机平台都会有推送服务。

apns

iPhone自3.0之后推出消息推送机制,原理是消息由服务器统一处理:

  1. 应用服务器Provider将消息和目标发送给APNs
  2. APNs查找目标iPhone并发送消息
  3. iPhone将消息传递给应用程序,再弹出Push通知

APNs和iPhone保持15分钟的心跳式长连接,维护手机和服务器的联系正常,否则手机会不停发起连接,直到连接到服务器为止。程序不必实时开启和主动检查更新,当收到APNs消息时,iPhone会弹出对话框Push消息并伴随着声音,用户可以选择“view”或者“close”。即使用户当前处在离线状态,用户收到消息之后激活程序,再通过程序链接应用服务器下载邮件或者录音。

mspush

WP7的也有相应的推送服务,无论程序是否开启都可以界面顶部推送Toast Notification,并显示10秒。WP7的Push Client负责于服务器交互,接受到消息时再传送给相应的应用程序,而不需要应用程序各自维护一个进程。如果程序被钉在首页,服务器推送瓦片通知(Tile Notification),改变瓦片的背景图片、数字和标题属性。而弹出框式的原生推送(Raw Notification)只能应用在程序开启时,容许实时更新界面。

除了iPhone的长连接心跳查询,PushMail的IMAP可以支持IDLE特性,邮件客户端登录连接服务器后不会主动检查更新,而是停留在空闲状态,当服务器接收到新邮件再通知邮件客户端,此时客户端会再查询收邮件。或者依靠短信触发,以看不见的短信方式触发程序发起更新,但是短信方式的实现成本较高。(非技术人员,相关技术描述可能有误)

推送形式

iPhone的消息弹出框如果点击“view”会影响当前操作,但是如果点击“close”就再也查看不到消息。由于弹出框形式的限制,没法像Android状态栏那样同时显示多条消息。分散在各个屏幕的badge难以管理,多数badge并没有实际意义,比如花了很长时间更新可能发现某个应用程序只是改了个程序名称。

no2

iPhone的消息缺乏统一的管理,虽然比Android容易推送消息,但在终端没有将消息聚合起来统一管理,所以有设计师对其加以改进,设计了Notifications App。解锁界面显示消息,滑动某条消息可以立即查看具体内容。对现有iPhone的界面操作的基础上加以利用了解锁界面。

no2

双击Home键可以从底部调出消息,而越狱APP Notified Pro和Android一样利用状态栏,两者目的都是为了全局操作。考虑到很多游戏会覆盖状态栏,Notifications的方式较好,同时对用户现有操作系统影响较小。进入该程序中可以对所有消息统一编辑或者清除。

之所以需要统一管理的另外一个原因在于程序越来越多,消息也越多,个别应用程序为了吸引用户注意力,会频繁推送消息,导致消息泛滥和影响用户对重要消息的关注程度。

终端推送设计

除了要了解OS对消息的处理机制和展现形式,消息自身的众多属性可以在设计中加以利用,比如消息的元数据、状态、优先级和同步方式等等。

时效性强的短信、微博私信和邮件处理的优先级更高,可以优先显示在解锁界面。好友申请、系统消息和好友评论等优先级稍低,只以数字提醒并且不带声音,甚至只能在程序开启时提醒。未来情景式消息推送会在手机端发挥作用,优先级会依照信息对用户的有效性有所提升,比如到了某了商店附近触发折扣信息的推送。

服务器在推送消息时,如果可以附带更多样的处理方式、比如查看完整的140字微博、回复、忽略、已读和拒绝,不进入其他程序(如Facebook和短消息)就能操作会提高处理的效率,正如MIUI在主页收到短信时可以立即回复。

程序应该智能识别处理状态,比如已读带处理的消息标记为badge不再重复声音提醒,好友申请可以分为同意、拒绝和忽略,对于在各种手机端被用户忽略的消息可以设定为垃圾消息。

多台设备的消息可以同步处理,如iPhone端的消息未读,切换到PC端时,查阅了更新的内容之后,iPhone端的消息可以取消推送。

未来的消息推送很有可能会向WP7那样往集成化的方向发展,其重要性将越来越高。

参考资料:

MIUI刷机体验

鉴于Android界面丑陋、常有程序自启动和莫名的崩溃等问题,索性刷成MIUI。体验一月有余,感觉良好,官方论坛上用户各种角度对MIUI大加赞赏。毫无疑问,设计已经成了MIUI的核心竞争力之一,个人仅聊聊几个让人印象深刻的设计。

miui12 miui13

之前聊过各种OS的启动画面,MIUI的启动界面做的更为细致,不仅包括了流行的解锁进入常用功能,还可以快速查看短信、未接来电和控制音乐播放。解锁目的是为了防止误操作,也成了触摸屏执行任何操作前的必要步骤,对于查看短信和未接电话等这种短交互显得累赘。将用户解锁之后的常规操作提至解锁界面完成,不会引起误操作的情况下减少了操作步骤,提升了操作效率。

miuico

cooolfire在MIUI主题设计比赛中将解锁界面的形式和功能巧妙结合,视觉上富有美感的同时传达了功能寓意,引导用户操作,和主题也非常统一,称得上是高明的设计手法。取材上选用比较大众的设计风格,有特点但不小众,比起水墨和哪吒等主题更容易获得用户喜爱。只可惜由于ROM的限制,未能在真机上呈现出完整效果。

miui11 miui9

MIUI提升了顶部通知栏的利用率,整合多种常用操作,在全局都可以操作通知和开关。新版本中去掉了通知栏的任务管理,保证了操作入口的一致性,对桌面的编辑模式也有必要按照此法删减,编辑模式中修改壁纸与Menu中的选项重复,显得多余。

ROM本身也加强了任务管理,原先使用Android2.1时,系统启动极慢,开机之后有近30个程序同时运行,安装第三方程序管理器也没有彻底解决这个问题。手机上个别程序开始耍流氓,自动开启或者无法完全卸载,要是遇到街旁这样三更半夜重复推送垃圾消息的应用真让人苦不堪言,非要一一拒绝或者同意好友申请才可关闭消息,希望MIUI能适当管理下消息系统。

miui100 miui110

Android自身对应用程序还区分为桌面快捷方式和功能列表,使用到后期,桌面上可能包括50%的功能和功能插件,这哪里还算是快捷方式?MIUI统一为ios的管理方式,只有桌面功能列表,管理和查找都更为方便。Android的桌面虽然混合了各种插件,但是使用率很低,对操作效率的提升很低,点击插件还要进入程序才能操作,反而让程序常驻耗费电量。

重新了设置项和桌面之后,系统整体逻辑更为清晰,使用过程中只遇到使用习惯上的障碍,基本没有发现信息架构和交互上的大问题。除了桌面管理和程序管理之外,MIUI对联系人、电话和短信等基础应用做了不少优化,比如屏蔽骚扰电话、增加电话录音和删除重复联系人。这些也只有底层ROM可以做好并能获得用户的信任,特别是涉及到安全和隐私问题。(详情参见官方论坛各种评测文章)

miui19 miui20

优化的同时还增加了不少功能,希望不会发展成为臃肿的ROM,毕竟还是有个别功能看起来比较小众化,比如桌面的翻转效果,总是有各种各样的设置项。对于音乐、拍照和天气这样功能,如果不涉及最底层接口,第三方应用也可以做,而且可以做的更好,能费力气刷机的用户肯定也会安装各种应用,避免和其他应用发生竞争关系。除非MIUI已经准备和厂商合作,并期望从这些应用分成中直接获取利益。

miui15 miui17

MIUI对手机管理越来越像PC端,有硬件检测、一键装机、系统备份和DSP管理器,这些功能在手机端非常少见。似乎MIUI不会甘像点心做类似于MTK平台的方案提供商,会和厂商深度合作。一线品牌厂商有能力自行研发和设计ROM,即使使用的话,也会要求独家获得使用权,二三线品牌会选择借助这种ROM提升用户体验和品牌形象。早期番茄花园可以给一些电商带注册用户挣钱或者流量分成,ROM如果植入第三方应用的话也会有这样盈利模式。

Windows Phone 7设计评测报告

WP7

刚入手一部HD7,已经是第五部移动设备了。如果你也已经对ios的水晶风格有了视觉疲劳,厌恶Android毫无设计感的黑底白字,WP7的Metro风格确定能让你眼前一亮。

MTK手机的大喇叭,iPhone精致无比的图标和过场动画,共同点在于对感官有很强烈的刺激,很容易被大众接受,甚至成为装X利器。而朴素的WP7没这么幸运了,小众的设计风格,过于富有内涵而缺乏视觉刺激,连铃声走的都是小清新路线。

Metro中文名为“地铁风格”,设计元素是从地铁飞机场等地的指示图标中提炼而来,经常出入这些场所的人群都是小资阶层,这也正是WP7的目标用户群。设计师们会对于这样的极简主义抱有好感,巧妙融合功能、操作与视觉形式。

解锁

iPhone滑动界面时解锁,增加界面的操作难度,防止放在口袋里误解锁,和Nokia按键手机使用组合键解锁是一个道理,功能和操作没有联系。WP7向上滑动界面,像是翻页面,满足功能的同时页面具有相应的视觉意义。

虽然界面没有iPhone那样的直观指示“移动滑块来解锁”,很容易学会WP7的解锁,强行记住Nokia组合键解锁让人心生乏味甚至有挫败感。左右手势和点击是使用触摸屏时的下意识操作,当用户看到一个界面不知道如何操作时,尝试性点击图标和滑动界面,恰好达到解锁的目的。

首页

wp73

显示常用应用程序的图标和推送的消息数,也可以将单个联系人添加为首页图标。图标只有两种样式,长按可以删除图标。

联系人图标不时有朋友头像和姓名上下滚动的动画效果,保证信息的充分展示,同时也至于让布满色块的界面看起来过于呆板,富有动感和变化。

WP7更注重效率,解锁之后的第一屏就能快速决定使用哪个应用,而不是ios和Android那样过多的应用导致漫无目的的左右移动界面,时间浪费在查找应用和查看应用是否有更新。

状态栏

wp7-icons

一般状态栏只显示时间,点击或者滑动状态栏后显示其余内容,如wifi、信号和电量。进入电话显示信号量,进入wifi环境显示时会保留联网图标一段时间,状态栏应该是随着当前使用显示用户需要知晓的信息,或者是状态栏信息发生变化时提醒用户,只在用户需要的时候显示必要的信息。

进入全屏应用程序,如电子市场和图片,会遮住状态栏。当收到短信和搜索到wifi时,状态栏会显示具体信息,不影响当前使用,显示空间比Android更大,但没有下拉帘的操作。

Android的状态栏非常的拥挤,甚至会出现正在运行的应用程序,比如360和QQ。不得以还要状态栏滚动的动画效果,下拉帘的操作也是由于单行的状态栏无法满足操作才衍生出这样的设计,WP7的状态栏并没有给这些烦人的图标留有显示空间。出发点是优先考虑如何精简信息,而不是通过设计完整呈现它们所有。

导航标题

wp6

界面标题不但起到导航的作用,同时整合了滚动条的部分指示功能,但WP7的导航标题没有完全达到滚动条的三个功能:

  1. 当前页面是否可以滚动。WP7通过显示左右页面的灰色文字标题或者部分正文表示当前页面的可以左右滚动的。
  2. 通过比例显示界面总长度。WP7页面可以左右循环滚动,但没有明确的指示页面的总宽度。如上图标题games会随着界面滚动时相应的左右移动,但并不成比例。回到初始位置时,才意味到界面已经滚动了一圈。
  3. 当前界面所处总界面中位置。取决于第2条。

PC的滚动条可以快速滚动界面,但是由于手机的操作不便和页面显示内容有限,通常没有这样的功能。

控件

wp79

底部工具栏最多显示4个图标,点击“……”显示图标的文字说明或者更多的操作。图标易于识别,视觉上比Android更为连贯。

WP7长按输入框时划出光标,便于从字符串中插入光标,类似于ios的放大镜插入光标。而Android要靠手指的精准点击,难以控制。

wp710

长按已安装的应用程序,会在下方显示多项操作,而不是另外弹出对话框。单个下拉框的操作体验比Android和ios都要好,但是填写表单时,操作效率明显不如可以通过面板切换输入框的ios。下拉框也是这样的设计样式,但从外观上无法区分下拉框和输入框,也许这对用户来说并不重要。长按操作会有相应的进度条,表示长按一定时间时才会响应该操作,Android和iso则是靠程序响应操作之后元素变化来达到视觉反馈。

speech-screen-listening

对话框通常显示在界面顶部,如单手握住4.3寸屏的HD7手机底部时,点击对话框上的控件着实不方便。五个蓝点组成的进度条让我想起Flickr红蓝原点,设计追求的极致是使用最少的元素传达完整的信息。

达到高效的方式是专注最主要的信息。尽量掩藏不必要的控件,几行字和一两个控件让你很容易知道当前应该做什么,你也不会被那些10%情况下才会用到的信息分散注意力,或者说你即使想也做不了其他事情。

排版

wp712

缺少了诸多的视觉元素,仅有图片、色块和不同颜色字号的文字,导致界面缺乏对比。由于没有分割线,有时会分不清界面元素的组织情况。

客户端T-sina的文字排版极为槽糕,满眼不协调的深蓝色的背景色块、缺乏简单的文字对齐和模糊不清的图片。WP7应该出一份基础的排版知识指导第三方应用,毕竟用户大部分时间是花在应用上,不统一的用户体验会影响系统整体。由于Flickr的风格与WP7极为相近,程序只是用来解析和呈现数据流,没有过多的交互效果,只是界面排版效果优于其他平台。

小结

现有WP7的设计还是流于形式,没有看到技术方面的突破,与Android和ios相比没有明显的优势,个人的好感仅限于其设计风格。由于还不支持截图,让我这样的截图党极为不满。缺乏应用,把玩三天就没有新鲜感了。系统版本更新太慢,三月份刚增加复制粘贴、增强邮箱、市场和wifi等基础功能,按照这个速度本年度也出不了靠谱的手机,同样价钱还是推荐买Android手机。

由于界面以色块和文字为主,绘制界面占用的内存少,运行速度自然加快,而Android运行多任务时速度明显变慢甚至导致程序崩溃。除此之外还希望能看到解决大手指问题来提升输入效率,增强消息过滤和联系人分类,现有包括了各种邮箱、Facebook和手机号码强弱联系人,查找起来非常麻烦。

由于系统的限制,呈现信息量和第三方应用可做的交互效果都很有限。高端用户对于效率的需求比较强烈,但90%的用户希望手机除了通话和收发邮件之外可以做更多的事情,需求更为多样化。除了基础应用,系统应该保证足够的可扩展性。

关注@晓生语录

闲扯iPad游戏设计

IMG_0122

每次做地铁时,手机信号不好,只能用iPad打发时间。iPad游戏操作明显不如PSP,只适合玩休闲类游戏,操作简单,适合碎片化时间玩,不会导致沉迷游戏而不能自拔。

IMG_0060

比如《使命召唤》,PSP版体验绝佳,要用到所有按键来操作三维空间视角转换、射击瞄准和狙击射击扔雷。而iPad版视角转换比较不方便,手指要离开底部左右操作区,在界面上大范围的平移,不像PSP那样在左按键区小范围移动手指就可以快速视角转换和射击瞄准,操作不是很连贯。

IMG_0064

《合金装备》的操作区域不限于底部,平移手势操作屏幕都可以射击瞄准。《使命召唤》像是把PSP版游戏移植到iPad,仅把按键变为虚拟按键,没有适应触摸屏操作的设计。《合金装备》射击比较平面化,蹲点攻击,射击要求更精准,玩起来要求注意力非常集中,反而比《使命召唤》吃力,工作之后可不喜欢玩这么伤脑筋的游戏。

IMG_0113

《机器人与枪》的操作更是没有找到窍门,底部左区域同时控制跑到方向和射击方向,右区为射击。如果改为左区控制跑到方向,在屏幕上移动为改变开始射击和射击方向,既发挥了触摸屏的优势,也能提高操作的可控性。(经砍刀兄提醒,才发现右区可以操作射击和射击方向,所以文章中一直没敢自称“游戏玩家”)

IMG_0124

如果攻击方向是由三维定位的话,iPad上操作上比较吃力。《武士》自动调整攻击方向,虚拟方向键控制跑动方向,操作比较方便。尤其值得称赞的是,漫画风格的视觉质量远高于前三个游戏,场面血腥但不恶心。场景不断调整为最佳视角,一刀毙命时的慢动作,随着情节的发展不断学会新技能,这些都增加了游戏的趣味性。但与PSP相比,触摸屏的攻击方向和按键次数难以把控,实体按键可以明确感知是否按下,触摸屏缺乏这样的反馈,也许这也是为什么《武士》界面的右中部要显示连击的次数,用视觉上的反馈弥补触感的缺失。

IMG_0121

《地牢猎手》的操作比较完美,很像PC版的《暗黑破坏神》,适合长时间玩。总计6个角色可以选择,一个角色玩通关大约需12小时,游戏难度是逐渐增加,角色技能没有升到顶级就结束了。如能像《植物大战僵尸》那样,通关之后可以从头继续玩,仅修改部分难度和怪物参数,低成本增加游戏的变数和可持续性。

IMG_0126

《水果忍者》和《坚守阵地》并不是通关性游戏,比的是分数,可以说用户的挑战是无止境的,分数只有更高,没有最高。《坚守阵地》的iPad版比iPhone拓展了双人游戏,发挥大屏幕优势,可以避免个人沉浸式玩游戏而冷落身边的朋友。

IMG_0045

《三国塔防》也是比较经典的塔防式游戏,单关游戏时间比《坚守阵地》短,适合碎片化的时间娱乐之用。可惜很快通关,游戏中缺乏变数,武将PK时的剪刀石头布比较幼稚。如果可以选择不同国家,每次起始武将也不同,对于游戏程序的而言,成本低,但是可以成倍地增加游戏时间。现在的情况是玩一遍之后再不会开启,如果内存爆满,肯定有优先卸载它。

IMG_0094

盈利方式上,《愤怒的小鸟》更为聪明,有多个版本迎合用户需求,限时免费的策略来吸引用户和媒体的注意力。《坚守阵地》也是有免费版,但其中的部分地图需要收费,以免费策略获取用户量之后再盈利。与《愤怒的小鸟》可爱的风格相比,个人更喜欢军事题材的《手榴弹大师》,都是投掷类游戏,但取材上没有《愤怒的小鸟》那样老少皆宜,估计只适合部分男性用户。操作上也都利用了触摸屏的特性,不将操作区域限定于某一个角落。

IMG_0068

《极品飞车》依旧经典,利用重力感应,赛车时像操控汽车的方向盘,是为数不多超过PSP和PC版的游戏。