<2012.1@CDC> 边缘及交互密度

市面上现有的主流手机操作系统有一些优秀的体验,比如android从顶部下滑出的通知中心。Palm的context menu 从屏幕下部的感应区呼出。Nokia N9 就更为纯粹,把just swipe——从侧面滑动切换手机态视为核心的设计理念。仔细看还挺邪门儿的,从顶部向下,从底部向上,从侧面向内——它们是如此热衷于边缘,以至于当我们想再这么做的时候,发现四周都被它们用光了:)

为什么是边缘?我想到两个原因,第一个记忆成本,第二个fitts定律。

画了三张图,试着每张图停留5秒钟,记住黑点的位置:

事实上可以将黑点理解为界面中需要定位的信息,随机摆放的情况下,5秒钟的时间很可能一个也记录不下。

下一张,仍然是5秒钟的时间

同样是5秒钟的时间,结果确有所不同。原因就在于本来一个黑点对应两个信息(x,y),但再这张图中,其中一个信息被大大简化了,以至大体能记下一两个点的位置。当我们真的用到边缘的时候,情况还更简单一些,比如下一张图,同样是5秒钟时间。

显而易见的一个结论是边缘的记忆成本要低一些,道理也很简单,如果黑点在屏幕内,每个点有两个维度的信息,x,y,而在屏幕边缘时,因为边缘只有四个,很容易区分,以至这个维度的信息几乎可以忽略,这样自然更容易定位了。

第二可以说明边缘道理的就是fitts定律,它可以简单的描述成定位一个目标的时间,取决于目标与当前位置的距离,以及目标的大小(还有其他因素,但和界面相关度较小)。距离越近时间越短,目标越大,时间越短。更详细的内容可以参见这里

表面看来,fitts定律和边缘没有什么直接的关系,但仔细想下,我们所谓的“移动到边缘”和“从边缘移入”实际的目标点并非边缘本身,而是“边缘外”。可以想象,如果我们需要定位到边缘上的一点,多了少了都不算数,其实还是蛮难的,但如果只要移出边缘就算数,那显然会容易很多。套用到fitts定律上,目标点的位置实际上是边缘的一些像素及边缘之外的全部面积,这个目标点就足够大了,以至fitts定律因为一个分母的增大而使得界面的效率提高。如下图。

另外还有一些我曾经做过的设计作为案例,比如下面的解锁界面,上边为概念稿,下边是我们再产品正式开发前改进的稿件,这个设计可以在现在市面上的腾讯定制的手机上可能到。

右图中的小字为“拖动图标到屏幕边缘解锁”。这个设计充分利用了屏幕的四个边缘,出去可以从fitts定律解释的效率提高外,同时有的优点包括:可以盲解锁(解锁键在屏幕正中,感应区域也较大,容易定位),进而可以不用看到屏幕既可完成解锁甚至还可以进入到你想要的应用(屏幕四周对应四个常用界面),也就是说在你从口袋里拿出它的这个过程,从解锁到选择应用一并完成了。

当然,不论什么设计都不是完美无缺的,比如这个设计也受到一些挑战,诸如:“为什么有四个入口,一个不是挺好,移动端设计力求一个页面完成一个功能,不用这么复杂”。这点我不认同,也涉及到另外一个有关交互密度的话题。移动端的设计虽然力求功能简洁明了,但不能一概而论。100个功能不可能安排100个页面来完成,交互密度需要和用户熟悉程度相关。画了下面的图标,但只是感觉而已,未经论证:

在NOKIA工作的时候,一个设计师说起他们的调研结果:用户每天在手机屏幕停留的时间,大约60%-70%以上在主屏幕(home screen)上,这一结论好像那个直接导致了我们看到nokiaN97刚上市时那个繁华的过了头的主页面,先不论这个设计的好坏,数据上是比较客观的(3年前的数据)。对于用户非常熟悉的界面,我们虽然不必像N97的主页面一样排满功能,但在功能,内容布局中将密度提高一些是可以接受的,这样有利于用户有效的提高操作效率。也一并解释上述设计中四个入口的问题。

摩托罗拉在去年年末推出了一款新的手机,界面上和我们之前的设计非常相近,并非想说moto抄袭,应该只是个偶然,因为腾讯也经常要面对抄袭的指责,可能大家都是中国人,习惯这个词了,但是设计上并没有那么多抄袭可言。好的想法是可以碰撞的。总的来说这并不是一个很烂的设计。

关于边缘及交互密度,在桌面软件中有很多应用,mac,win7系统中有很多相关的优秀体验。最近我们在QQ2012的概念稿中也有充分的体现,短时间内不便放设计稿上来,终究它能带来一些不错的体验,值得实践一下。

<2011.12 Recovery> 关于我

关于我

发表于 2011 年 12 月 4 日

常常被人问到这样的问题:你如何评价自己?有时真是让人挠头,对于我这种没什么思想的人来说,这无疑是个哲学问题。

我想起了小时候,那时很有意思,常常自命不凡,觉得自己一定不是普通人,周围人的存在就是为了演戏配合我,自己一定是那个被某种神秘力量监视并束之高阁的人。这个很像金凯瑞的楚门的世界。不过我实在是个很理性的人,心想大家都在演戏,小动物们终究是公正客观的,所以就去跑去看小猫小狗的眼神,如果我确实不同,应该得到一些不同的反馈吧,结果实在令人失望,除了发现自己更容易被狗咬之外,也没什么特别,加上后来大了懂事了些,这种幼稚的自恋不知不觉也就都忘了。

记忆有点模糊,好像之后自己从浪漫主义直接跨入了现实主义,又在思考这个所谓的哲学问题,自己生在了世界上人口最多的国家,又是人口最多的汉族,传统家庭,还是个男的,简直就是“大多数”的典型代表。这是不是意味着自己天生平凡?心想也许是吧,要说很多事也比较配合这个结论,当时在中学,我自恃有些天资,每次考试排名也算靠前,有意思的是,大多数情况下,我的排名都是第二,即使第一的位置一直在变。几年过去基本就是“二”过来的。家里人对我这点印象深刻,还经常不知道是夸奖还是讽刺的说:发挥很稳定。说自己什么好呢,平庸中的最优秀,第二梯队的排头兵。

为了不写成流水账,省略若干字,回到现在的我。

感觉人越老越时间过得快,算下来一个月之后就是29岁了,很多事没想清楚真对不起这把年纪。深刻忏悔加苦思冥想后总结一下,自己的成败得失都源于一点:一直没什么思想,但一直比较努力。磕磕绊绊工作也有两年半的时间,相对的努力弥补了他情商低下的硬伤,成绩尚可,另外值得欣慰的就是,这种傻并卖力的工作方式仿佛替自己争取到了更稳固的基础和长远来看更有说服力的口碑,这都让我找到了一种小人得志似的意外收获的快感,以致在很长的一段时间内,自己准备继续这样的人生态度。

Robin(rigo design)曾经讲述自己的经营理念:不走捷径,很欣赏这几个字,与他不同的是,他知道捷径不走,而我是真的不知道捷径在哪,没办法。如上面所说的,在弯路上行走能收获很多不同的风景,当你看重的是一个个踏实的脚印时,也许前进的距离已经不是最重要的了。事实上结果往往还更好些,你的收获变成了一种自然而然,而非刻意为之,所以一不小心还顺便贴上了正直的标签,何乐而不为。

就这样,两年半的时间,三个行业大会的演讲,破格晋升到了高级,不务正业的在一个5000人参加的工业设计比赛中拿了第一,从零开始学会了编程,另外有机会带领一个十多人的小团队(虽然情商太低很累,另外没有任命),我想应该对自己中彩票式的经历感到知足了——说着说着仿佛自己有了阿甘式的英雄主义色彩,所以不能再吹牛了。

除了情商的问题,我还是一个不擅表达的人,没有微博,没有SNS, QQ只是纯消息工具,这些缺点是显然的,以致现在只能用又长又蹩脚的句子写一个开篇,不过我想这正是我越发的正视及积极改变的开端,希望今后的内容能给来到这里的人一些实质的有用的启发吧。

/高歌

<2010.4@CDC> 创造设计中的优雅与节奏

创造设计中的优雅与节奏

gg / 交互设计 / 2010.04.09 / 相关标签

  首先是跑题的部分,最近听到“交互设计师的危机”的说法。这个话题已经有了不少讨论,比如Cooper上的文章“交互设计前途渺茫”(Alan Cooper,被誉为交互设计之父,见www.cooper.com,它的“concept Projects”我认为是情景应用于设计表达的一个良好范例)。DavidW同学做了翻译,并有感而发的写了一些文章如“交互设计师如何提高自己的能力”其中颇具讽刺的语言风格很让人喜欢。又如Mark Blythe的文章“从鼠标到iPod,设计师之死”,这篇有些文艺性的文章给了我一些关于设计师前途的启发。


交互设计师的前途在哪里?DavidW同学说到,交互设计师没什么考核标准。加上所用的工具乱七八糟:十八般触手可及的东西,就连餐桌上擦嘴的纸巾都可以拿来干活,进一步怀疑那些使用餐巾工作的交互设计师是从餐饮业转行过来的,颇具讽刺意味,却也很坦诚。我想门槛过低,必然导致行业认可度不足,专业度不够,工程师就会把设计师比作美工。这些都值得我们思考,不过一时不至于心灰意冷,Alibaba UED团队的文章“交互设计师的专业度表现”,在一定程度上解决了交互设计师功课及格的问题,然而看完后让我更感兴趣的是“100分”设计师该如何炼就。

我想无论Cooper的网站,DavidW,或是Mark Blythe,都试图给交互设计找出一条前途光明的道路。他们有着各自不同的前瞻性的思考,值得借鉴。我也想借助这个话题,提供一个相对不同的思路,谈一谈在现有趋势下如何创造更好的设计以缓解“危机”。

先看趋势。Mark Blythe 提到:“早期计算机界面的设计者主要关心一些可测量结果,人们在不同的界面上需要花费多少时间完成一个任务。这样的问题可以通过观察和实验来解决,设计的过程相当的清晰透明。”这让我想起了网页设计同学说到的“网页端的设计需要能让用户快速定位目标,点击,快速响应”。不难发现,其实这个过程的量化最终是解决可用性层面的“效率”“效用”问题,作为基本的设计原则,这些无懈可击。但值得一提的是,不论浏览器的框架或是网页内容本身,这种趋势正在悄然的发生变化,比如piovtgoogle wave。他们越来越“App化”。因为长远考虑,摩尔定律使得关于效率效用的问题越发的退出人们的视线,而当搜索引擎都趋向于快速准确的提供搜索结果;华丽的用户界面不再是技术门槛之时,传统的用户体验虽然依旧是主旋律,却有些力不从心。交互怎样才能助力设计并将其推向一个新的高度?我想主要有两个方向,其一是新技术的刺激,VR虚拟现实,AR增强现实,TUI可触界面等等,前一段知名的MIT学生的第六感装置就是AR 技术的一种变形。另一个方向是提升现有体验,找出新的设计点。这里提出我一些自己的体会,我暂时将他们描述为设计中的优雅及节奏。

举几个工业产品的例子来说明。这样举例一个原因是我的工业设计专业背景,另外一个是工业产品比信息化产品更早的遇到了可用性的瓶颈,用户已经不再关心他们的效用,效率。而转向了更为高层次的需求。从他们身上我们可以试图寻找到一些提升现有体验设计的灵感。

首先是Apple,Apple的设计不论硬件还是软件上都是业界的领导者,最初认识到它的优雅可以说是从它的呼吸灯开始的,从powerbook g3和ibook起,只要当用户合上笔记本的时候,位于笔记本前端的睡眠指示灯就会呈呼吸状的闪动。细细想来,这种亲切感仿佛源于人的内心,与其说它是视觉效果不如把它比作成一种共鸣。Apple的这种设计思想贯穿了它产品线的始终。我把它称为:符合用户的经典思维。所谓经典思维,可以看作我们成长过程中(或天性中已存在的)认为事物固有的样子和属性,一个简单的例子,物体从A点到B点,经典思维认为它必定经过一个路径,而不会是在A点消失B点出现。当然如果此时恰好是雾天,那么它渐渐消失在A点而后在B点渐渐出现也是符合经典思维的。我们再将这个过程细化,从A点到B点,现实世界中的物体必定经历一个先加速后减速的过程。而不是一上来就有固定的速度。这个感觉有点像拉开一个抽屉。我们先来看看Apple是怎么做的。我试着着做了一些非常初步的工作。以下是用相机拍摄下来的iPhone短信程序的屏幕切换动画,将动画单帧播放,可以得到以下一系列截图。因为每个单帧画面的间隔时间相同。我们把每帧变化的结果放到坐标轴上,试着将“优雅”进行一些量化。

d表示距离,总大小是屏幕的宽度。F是帧数,按30fps这个过程大约0.4秒。我们可以看出,趋势上是一个先加速后减速的过程,它的背后定对应某一函数曲线,而一般这种运动曲线可以应用三角函数sin实现,但这里它更像是sin的平方根(这个猜测应该不准确,还请了解iPhone SDK的同学指正)。

如果以上可以作为iPhone体验上优雅的一个点,那么iPhone优秀的体验就是有这些点交织出的平面。我们将这部分工作更进一步,来看一下iPhone的主界面交互。iPhone的主界面模拟了一个有弹簧卡扣装置的物理表面。(想象每个屏幕后方都是一个半圆形凸起,有一个带弹簧的探针压在两个屏幕中间的缝隙上)。它最大限度的贴近物理世界,去符合我们的经典思维。

延伸一点,如果你是Apple的交互设计师,会怎样定义iPhone主界面的交互呢?“跟随手指运动,左右滑动切换屏幕,边缘处反弹”。如果是这样的命题,我想工程师不可能做出我们今天可以感受到的Apple的用户体验。我们排除掉点击图标,调整位置等等交互点,单就手指切换屏幕一个操作来说:首先手指触及屏幕,看上去屏幕会同步跟随手指移动,这并不准确,实际上手指移动了一定距离后屏幕才开始随动(有iPhone的同学可以试用一下,android同理),这个距离在2mm左右,而后,左右滑动,滑动就会切屏?也不尽然,要看手指离开屏幕时的瞬时速度,大于一个值会切换,此时屏幕按释放时的速度加一个摩擦力继续向前,到达边缘反弹。如果小于这个值(静止释放时瞬时速度是0,也在此情况之中)要看当前拖动的屏幕是否超过屏幕宽度的二分之一,超过切屏,没超过弹回,此时都是在释放速度之上添加加一个加速度,到达边缘返回。另外还要考虑在两个最外侧屏幕操作时行为有什么不同,以及释放后屏幕仍在运动中时再次操作的屏幕行为。想必真正列下来将会是一个相当复杂的流程图。端木说到,他在Apple工作时并没有交互设计师这个职位,工程师做了绝大部分工作,我们便越发的清楚原因在哪里。

没有时间去做iPhone的界面模拟,但先前我用AS3模拟了Hero主界面的一些行为,以下视频可以作为参考,其中图形界面是由BLIZZARD同学完成的。请见以下视频:

http://cgi.video.qq.com/v1/videopl?v=6OyBwxNBkSj

接下来说一下Bang&Olufsen这家丹麦世界级视听品牌给我的启发,macbook pro 右侧是B&O BeoCenter2 cd播放机,发烧友一定对它耳熟能详。轻按一下,它光滑的椭圆形表面会展开成两翼,上盖张开,cd抬起,仿佛我们记忆中某种灵异的生物。审视它的优雅,我们会发现:效率不再是优先元素,而仪式感被大大提前了。就纯粹的可用性而言,它比不过一般的cd机,而它的体验更多的集中在它的仪式感之上。相比Apple这种大众产品所具有的优雅,我把B&O归结为小众的优雅,因为它可以抛弃效率,并不适用于所有人,感觉这种优雅可以应用于我们设计的高端应用当中。工业产品的元素也许不容易应用到我们现在的工作上,还好B&O同样提供了一个与其产品风格类似的播放器BeoPlayer,有兴趣的同学可以下载来试用,体验一下B&O式的优雅。希望也能从中得到一些灵感。在设计高端应用时,回忆一下B&O的仪式感。

提到Muji CD机,不得不说到深泽直人(Muji CD机的设计者,也是我最喜欢的设计师之一)CDC博客关于深泽直人的一篇转载文章“意识的核心”让我们看到了一个真正的设计师式的思考,在这里,抛开Muji CD机极具创意的外形来看它的播放过程。它只有一个向下拉的操作,极致简单的设计美学。另一方面它,打开开关,它并不会立即启动,而是间隔一下,音乐随即开始,设计师仿佛在营造一种声音从远方传来的意境,亲切而舒适。我想这就是节奏的一个表象,实际上这种稍显延迟的设计也同样出现在07 iPhone发布时的一个场景,Jobs听着音乐而此时他的同事打来电话,音乐缓慢落下转换为铃声,到通话结束,一个小的间隔之后,音乐响起。类比前面的两个例子。Muji CD机的,功能会让位于设计,如将曲目切换,音量调节被放置在不方便操作的位置,这种强调设计意志的产品有时会给人一些设计师孤芳自赏的感觉,所以可以将这种优雅比作是设计师式的优雅,当我们的团队有了足够和行业领导力以及顶尖的设计水平之时,便可以尝试用这种设计师式的优雅去引领潮流。

顺应了趋势,找到了新的设计点,可设计师的核心竞争力还是没有解决,用户体验得到重视的结果就是老板,工程师都过来做交互设计,交互设计师怎么办?既然大家都来抢饭碗,那我们也主动出击好了,这虽然是调侃的说法,但却是我能给出的最切实的建议。这一点启发源于我以前的同事及前辈刘颖,在解决产品团队协同的问题上,她给出了我认为最合理的的方案:去了解团队中各个角色所作的工作,交互设计处于产品链条的最中央,就更有义务去做好这样的工作,试着做一些用户研究,试着做一些开发工作,一有助于自身专业能力的认可,二有利于提高团队效率。当交互设计师成长为中坚力量之时,前途必然一片光明。