标签云

My Friends

albin Brisy Siker Zerode 火山大陆 乐闻设计 这素点坑 Robin VIPUI 帝夏社 Brthrush 摩西的可靠不可靠 两点一线

Blog Icon

logo

What I am Doing...

  • “伟大领袖”、“天赐大将军”、“世界著名的文学家”、“我们星球的卫士”、“所有杰出将军中最杰出的将军”、“众神之神”、“21世纪的北极星”、“一位拥有百科全书一样丰富知识”的“哲学巨人”、“一位文学、艺术和建筑大师”、“人类最伟大的音乐天才”、“人类智慧的化身”的金正日将军访华。 3 days ago
  • @RayZh 节哀!!!! in reply to RayZh 1 week ago
  • 英特尔宣布将以78.6亿美元收购McAfee,SSG可喜可贺! 2 weeks ago
  • @akinayang 他们最近很忙,也可以等你到了长沙以后再和他联系。 in reply to akinayang 2 weeks ago
  • @wintrwong 你可以试一下gowalla,ipad iphone都有! in reply to wintrwong 2 weeks ago
  • 刚看了本年度催泪大片“唐山大地震”,哭了!! 3 weeks ago
  • @akinayang 废话!难道非要等到别人踩你一脚,你才知道其实自己是趴着的。 in reply to akinayang 3 weeks ago
  • 刚才在出租车上听到一档笑话广播节目,叫做"八颗牙齿晒太阳"。有意思。 3 weeks ago
  • More updates...

Posting tweet...

What I am Seeing

通缉犯带回北京吃的东西长沙无名粉店广告牌香港理工大学Jesus is god地铁略影上山火车线香港地铁HiDonFirst classNight in HK超级nb的摄像头紧急停机镛记路牌

拇指和触摸的对话——单手触屏手机的大拇指体验

躺在床上在看手机里面的电子书;地铁里一只手拎着东西,一只手在拨号码;正在做饭的时候,手机响了,一只手沾满了油;这些情况下的人有什么共同点?只有一只手进行手机操作!

具有糟糕的单手操作体验的手机会让用户在某些情形下抓狂,而良好的设计则能解救他们,让他们更加轻松地应付各种操作。我个人非常怀念以前简单的按键 手机,无论在什么情况下,一只手都能顺利得应付下来,有的手机还有专门为左手用户设计的左右按键调换模式(Accessibility的典范)。发展到触 摸屏幕后,这个原则好像慢慢地被人忘记了,按钮越做越小,用户只能用手指尖去点击,操作也越来越复杂,这实在是与用户体验相去甚远的道路。

当然,市面上也不乏仍然出现着许多具有优秀单手操作体验的手机。从Else mobile前段时间发布的手机图片能够看出,该手机从界面上专门为单手操作做了很多优化。

拇指的人机工程学

在单手对触摸屏手机进行操作的时候,一般是以四个手指和手掌为依托,用大拇指进行操作,因此单手操作触屏手机变成了拇指和触摸屏的一场“对话”。

人机工程学的研究表明中,大拇指有三个关节能够活动(它们从上往下分别是):

位于拇指外观中部的“拇指第一关节”:能向前弯曲最大90度,少数人能向后弯曲

位于拇指外观根部的“拇指第二关节”:能向前弯曲最大90度,少数人能向后弯曲

位于拇指和手腕连接处的“腕掌关节”:腕掌关节能够进行较大程度的屈伸,收展,所以能完成对掌运动(对掌运动是拇指骨外展,屈和旋内运动的总和。其结果使拇指尖能与其它各指掌面接触,而这是除拇指外其他手指腕掌关节都无法完成的)

手势

一般在操作时候,用户与触摸屏进行交互主要是通过不同的手势来进行。现有的触摸屏能够识别用户的手势有:tap,double tap, touch& hold, pan,flick,pinch & strech

Tap:用户用单个手指轻击触摸屏,随后马上与触摸屏分开

Double tap: 短时间,两次tap操作

Touch & hold:用户用手指轻击触摸屏,保持不动

Pan:用户手指轻击触摸屏,在不离开的情况下,移动手指

Flick:用户手指轻击触摸屏,然后迅速的滑动,同时离开屏幕(想象一下,你用手指在弹一个东西)

Pinch & stretch:用户用两个手指分别往两个方向移动。

在这里,我们只探讨一下单手操作触摸屏手机的拇指行为,所以先剔除掉pinch & stretch这个手势。

如何操作?

(接下来的部分,希望读者用一只手拿着自己的手机,亲自感受一下)

由于“腕掌关节”的活动范围和活动程度与“拇指关节”相比都更加大,同时也更加轻松,所以当用户的拇指从放松状态(拇指伸直)转移到需要与触摸屏接 触的状态时,会优先使用腕掌关节(人还真是一种很懒的动物)。不信的话,请尝试一下单手握住屏幕,并自然的用大拇指触摸屏幕。另外,如果需要用手指尖触摸 屏幕的话(想象一下有一个设计非常小的按钮需要你按动),拇指第一关节会向前弯曲90度,但与触摸屏接触时,仍然只活动腕掌关节。

在用户进行drag手势时,也会优先使用腕掌关节,只有当仅仅使用腕掌关节无法达到所需要的距离时,才考虑使用拇指的第一和第二关节。如果你是右手 用户,请把手机放在手掌上,用大拇指从右上角到左部再到右下角,进行一个最大范围的弧形滑动,你就会明白我想说的意思了。对于右手用户来说,触摸屏单手操 作还有一个“死区”—左上角(左手用户则是右上角)。因此,在设计需要在特殊环境下,必须单手操作的时候,该区域需要非常谨慎的使用(想想WM右上角的关 闭按钮对于左撇子用户是多么大的一个噩梦)。

Flick是一个非常有趣的操作手势,用户在操作的时候,同样偏向于使用腕掌关节。但是腕掌关节的活动速度比拇指中部的第一关节的运动速度慢,当需 要很快速度的Flick行为时,会自然地转向移动拇指第一关节。但是,别忘了,第一关节只能前后弯曲,所以只使用第一关节的Flick,只能上下操作 (对!,弧线都不可以,除非有腕掌关节的参与)。

另外,想象一下是用户在使用Drag手势来上下滑动屏幕,其的运行轨迹也将会是一个弧线(那是因为他们在偷懒,腕掌关节运动多轻松,多美妙)。

用户是很忙的,让他们轻松一点,如果一只手能操作就用一只手吧。人类的进步在于解放了双手的直立行走,触摸屏手机的进步会不会在于解放了其中一只手呢?

Windows Phone 7 的用户体验

注:本文章先发布在iFanr上,最先为三个小章节(series, focus,  waiting),一时兴起,又添加了一个小章节(Start),发布在山姆的维拉上,与大家交流。

Series

对于微软开发 windows phone 我个人一点也不意外,Zune 这么好的一个平台为什么不好好利用一下。

Alan Kay 说过“People who are really serious about software should make their own hardware”,拥有能够自己控制的软件和硬件整合的研发,能够大大提高用户体验的满意度。iPhone OS 在 Apple 工程师的调教下,对硬件做了非常大的优化,最终的操作体验获得了大家的认同。而微软在移动设备方面却一直专注于做移动设备的基础平台,通过赚取平台的使用 费来生存。在设计基于平台的软件时,兼容性必然成为最为重要的因素,较大兼容性能保证最大程度地扩展市场份额。为了维持平台的最大兼容性,用户体验则被大 大削弱。

Windows phone 的发布让微软总算部分挺直了自己的腰杆,之所以称之为“部分”,是因为 windows phone 并不只是为了某一款特定的机型而设计,也不是号召所有的智能机都采用的平台化产品。研发时,微软会与各个硬件厂商紧密合作,开发一系列运行 windows phone 系统的机器,对于这些机器,他们有一个详细硬件SPEC来规范,比如:一定需要电容屏,一定需要有 GPS 模块等等。所以,准确的来说 windows phone 我们应该叫他“windows phone 7 series”。

我想,这样的改变对于 windows phone 的团队来说,表明他们的设计不再聚焦在平台的搭建上,而聚焦在最终的 End user 上,趋向也从 Biz 变成了Entertainment。在研发过程中,有了更为详细和明确的 End user 作为指导,自然能够带来更好的用户体验。

Focus

从整体的 UX 设计风格上看,iPhone 聚焦在操作的功能层面,而 windows phone 则聚焦在操作的信息层面。

打开 iPhone 的主界面,一堆网格状的图标仿佛在展示他所拥有的所有功能,SMS,Mail,Calendar,Photos,Facebook,twitter。你想 要看短信,点选SMS图标;你想要看你今天的日程表,点选 calendar 图标;你想要看照片,点击 photos 图标。额…想要一个新的功能,没问题,在App store,你可以购买到几乎你想要有的所有功能。

但当用户打开 windows phone 时,感觉会和 iphone 完全不一样,没有一堆功能性的图标,所有的东西都是信息。在剔除了所有的分散你视觉注意力的框架控件以后,你所要的信息就组成了你看到的界面。

当信息没有框架进行区分和约束以后,信息的分类和信息的排布就变得更加重要了。windows phone 的界面则引入了一个叫做“hubs”的概念,你大可以想象他就是一个大大的集合体,他把你所有的信息像社区一样都整合在了一起,你需要的只是一个账户和一 次登录,以后所有的信息(facebook 的好友,twitter 的留言,flickr 的照片等等)都会自动同步到你的手机上来。

举个例子,比如我想要知道“我的好友 Jill 现在正在干什么?”。在操作 iphone 时,你将关注于“干什么”,你会打开你 iphone 的 twitter 软件。而在操作 windows phone 时,你会关注于“好友 Jill”,你会直接找到 Jill,然后查看他的状态更新。

设计聚焦在信息层面,还是聚焦在功能层面对用户来说并没有太多的问题(基于社区的设计好像最近更容易得到大家的认同),重要的在于它其后是否有一个 能够循环的系统。iPhone 关注于功能,用户几乎所有的需求能在 app store 上找到对应的功能,app store 也在源源不断得给 iPhone 提供动力。对于微软来说,做了那么久的 live 社区,将它的一些经验用在 windows phone 上也并不是件难事。

除此,windows phone 的信息整合还在于他强大的 search 功能,在此用户可以搜索本地和远程的所有数据。在于 GPS 配合的状态下,search 一部电影名称,便能自动找到你附近的电影院在播放该电影的列表。

Start (本章节为后来添加)

从视频上看,windows phone的解锁方式类似于Android,从下往上像拉抽屉一样抽出来,将隐藏在屏保壁纸下方的主界面显示出来。这是一个较为酷炫的方式,也符合内容至上,去除框架的理念。但从新用户的角度来看,这个设计有点过于隐蔽,与iphone上巨大的解锁滑块相比,比较不容易为用户所理解。还好,这个问题并不严重,完全符合设计上的“学过一次,终生不忘”的原则。、

诚然,将Windows phone和iphone相比是相当不公平的,iphone是在2007年发布的产品,按照一般产品的周期,现在的iphone已经是“爷爷”级别的了。在那以后发布的“牛机”都把自己称为iphone杀手,我把这种现象看做是对自己前辈的一种崇敬,在很多时候,还仅仅是崇敬而已。从最基础的解锁方式来说,我还没有看到任何一款手机能够在UX的各个层面都超过iphone,新用户能否在第一次操作就能解锁手机?用户能否在拥挤的公车或地铁上解锁手机?用户能否在只有一只手操作的情况下解锁手机?有没有体验过在帮朋友接手机电话时,解不开锁而崩溃的尴尬?

解锁,还是简单一点的好。回头看看还是座机电话直接—-把它“拎起来”。
 

Waiting

在电容触摸屏的使用中,误操作是非常容易发生的,这也与电容屏只能与手交互有关,宽大的手指只能在屏幕上进行模糊操作。在误操作发生时,如何能够快 速回到前状态就显得尤为重要,iPhone 在底部大大的返回按钮仿佛就是一个保险,无论你进行了什么操作,无论你犯了什么错误,不要急,轻轻点击一下,你的 iPhone 就回来了。

在 windows phone 的中,下部有两个按钮都表示返回,一个用于返回上一个页面,一个用于返回至开始界面。这样的设计强迫用户开始思考,我到底要回到哪里?我到底要按哪一个按 钮?我并没有实际操作真正的 windows phone,对于操作的体验不好作判断,但我曾经使用过一段时间 Zune HD,Zune 的界面层级较为复杂,操作一会儿以后就不知道自己在哪儿了。因此,一个设计良好的返回按钮和返回操作是非常重要的,请给 windows phone 也安上一个大大的保险吧。

不管怎么样,windows phone 确实给了大家一些新的期待。在 MIX10 上,我们期待一些更加让人兴奋地消息吧。

Magic Mouse和10GUI

不可否认,鼠标和键盘的确是人际交互的两个非常伟大的发明,他们作为用户输入模式的一部分与图形界面一起将电脑的操作门槛降低,将它变成一个普通人可以使用的一个工具。可是没有什么是永远不变的,操作的技术仍然需要发展,发展的方向将是越来越利于用户操作,效率,易用性,易学性等都将是衡量的标准。

自从Multi-touch技术在iphone 和surface应用以来,曝光率大大提高,大有领导未来发展趋势之前景。苹果最新的magic mouse也将multi-touch技术融入到鼠标上来,与传统鼠标相比,magic mouse 增加了几种鼠标手势,只需要在鼠标表面用手指进行触摸操作,便能完成一些诸如缩放,滚动,翻页等快捷操作。个人而言,我对用拿鼠标的那只手的食指和中指进行缩放的手势操作持保留意见,由于操作时,需要其他三个手指架住鼠标来保持静止,貌似此操作并不自然(可能由于我个人手指进化比较缓慢,手指灵活性不够)。按照以往的经验,操作舒适并不是苹果公司的鼠标的特点,它只需要酷炫,只要消费者买单,便成功了。

magic-mouse

但是,无论怎么样,基于鼠标+单一指针的用户输入模式(input usage model),其“交互宽度”(Interaction Bandwidth)仍然是很窄的。这一点,其实Multi-Touch其实有非常大的优势,他可以支持多个位置的指向和点击操作。换句话来说,这个进步的差距就像用“一指禅(一个指头)”打键盘的速度与十个指头全用上的打键盘的速度差别。

R. Clayton Miller基于“交互带宽”的考虑,有了一个新的建立在multi-touch触控板上idea-10GUI。他将multi-touch的触控板与显示器的位置一一对应,用户在触控板上用10个手指的所有操作,都会被触控板侦测到,然后反映到机器的操作中去。我曾在我的硕士毕业论文《基于用户行为的笔记本电脑输入模式研究与设计》中对触控板的输入进行过研究,触控板由于与电脑屏幕的映射是最为直接的,因此对于电脑操作初学者来说,他是最容易上手,也是最适合他们的一种输入模式。

multi-touch1

multi-touch2

而在10GUI软件的设计上,Miller重新设计了新的操作方式,利用了图形界面的“Z”轴,将所有窗口水平一字排开。同时它还充分利用了multi-touch的手势操作,每种手势定义一个特定的操作:用单个指头进行选中,拖动操作;两个手指控制每个程序里面内容的移动和放大缩小;三个手指控制每个程序的的放大缩小与程序与程序之间的排列,四个手指控制所有窗口的放大与缩小(具体请自行看视频:vimeo视频请自备楼梯)。

 multi-touch3

multi-touch5

 

当然,作为一种新的用户输入模式,10GUI还有非常多的漏洞,比如:光标移动的指向操作与拖动操作如何区分;复杂软件(如photoshop)如何操作;多手指操作的初学者如何学习;用户在操作过程中如何避免误操作;如何快捷地与键盘上普通操作进行切换等等。

但是,从中我们却能看到一些崭新的东西,这些也许对未来输入模式的发展的影响将是不可估量的:图形界面中三维“Z”轴的利用;完整而新颖的的手势定义等等。所有的这些都有可能意味着新的未来。

James Dyson的无扇叶风扇:Air Multiplier

James Dyson

James Dyson,对,就是那个英皇毕业,花了五年设计了一台真空吸尘器,买了二十五年的家伙;也就是那个在欧洲卖不火,却在日本大受欢迎的吸尘器的作者。

最近他带来了一些非常cool的东西—–没有扇叶的风扇—-Air Multiplier。 

air-multiplier

没有扇叶,整个风扇的显得那么的简洁,非常漂亮。

从设计的角度来说,没有叶片的风扇能带来一些显而易见的好处:清洗简单,安全性提高,减少机器的震动。

从外形上来看,更能容易做一些Organic的造型。

air-multiplier_3

那么没有扇叶有时如何发出风的呢?要知道这个,我们需要先补习一些流体力学的基础知识。

Coanda 效应:

亨利·康达在著名工程师Gustav Effel(就是设计埃菲尔铁塔和纽约自由女神结构的那个Effel)的支持下,开始研究流体力学,发现了所谓“边界层吸附效应”(boundary layer attachment,也称射流效应),通常也称 Coanda 效应(所以也有直译为康达效应的)。Coanda 效应指出,如果平顺地流动的流体经过具有一定弯度的凸表面的时候,有向凸表面吸附的趋向。(转自“百度百科”)

简单的来说,Coanda效应能够让流体(水流或空气)随着物体的表面流动,在离开物体的瞬间,其运动方向由于惯性作用将与末端的法线垂直。

当我们把一个金属勺放在流水的下方时,可以发现水会沿着勺子的外壁流动,并且在离开勺子的瞬间仍然保持着运动趋势。

5d212aa81deac8a2cb130ced

 Air Multiplier就是利用了这样的原理:

首先,底座将大量的空气以5.28加仑每秒的流量吸入,随后空气被增压,带入环形的内壁中,最后在从其宽度只有1.3mm,倒流角13度的缝隙中“挤”出,挤出的空气具有较大的流速,沿着环形的壁向外射出。运动空气的流动会造成空气压力的变化,风于是就产生了。按照官方网站的说法:产生的喷射气流速度将比吸入的流速提高14倍。

air-multiplie_2 

其实是一个很简单的原理,要做出实际产品却并不是简单的事情。就拿 “5.28加仑的空气吸入并增压” 这一过程来说, 一定与Dyson对流体力学的了解,以及他在十多年前,制作真空吸尘器时,对空气压缩知识的深入研究分不开的。

二十年前,Dyson用一款吸尘器颠覆了一个曾今被认为已经非常成熟的市场。

现在,他又用Air Multiplier再一次猛击我们的脑袋。

要知道,就像Terence Conran所说的“(工业)设计不仅仅是产品外形的改变,更重要的是产品核心的创新”