拖放三部曲——从“把大象放进冰箱”说起

标签: 拖放 三部曲 大象 | 发表时间:2011-03-22 18:57 | 作者:CDCer Han
出处:http://ucdchina.com/rss/all

开篇呈上赵本山和宋丹丹的小品笑话:
 要把大象放进冰箱总共分几步?
把大象塞进冰箱要3步:1 把冰箱门打开;2 把大象装进去;3 把冰箱门带上。
这虽是一则脑筋急转弯的笑话,但却提炼出我们生活中将一个物体放进另外一个物体里通常有的3个步骤。
 
1.    虚实结合的世界
 随着信息化时代的到来,我们的生活不仅局限于可触摸的自然环境,而且拓展到无形的虚拟环境中。继而,真实生活中的行为,如购物、交友、娱乐,也会映射到虚拟环境里。虚拟世界中,鼠标、键盘甚至身体的一部分就可以帮助我们完成自然环境中的事情。我们的生活也因为“虚实结合”而越加丰富多彩。

2.    虚拟世界中【放入】的操作历程
 刚刚说到,人们在自然界的行为方式会映射到虚拟环境中。问题在于,虚拟环境里的行为和自然环境中是否一致?如果不一致,虚拟环境中是否应该有不一样的特质?
自使用鼠标、键盘操作电脑以来,我们被教育的操作习惯经历了这样的过程:鼠标右键单击(复制、粘贴)——键盘快捷键(Ctrl+C, Ctrl+V)——鼠标拖放。每一次革新都让我们领会到计算机越变越聪明,也越来越了解人类的语言。
此次以桌面环境为例,谈谈虚拟环境中如何实现“把大象放进冰箱”,即把一个要素放入另外的要素中。
要素设定:要素A和要素B 。
目标设定:将要素A放入到要素B中。
根据不同的操作习惯,本文罗列了如下的步骤:

上图的操作方式映射出:
【鼠标右键】的操作需要用户花很多时间在鼠标右键单击的选择上;
【鼠标双击和键盘】的操作较之于【鼠标右键】更专注,对于熟悉键盘的人来说,很快可以完成操作。
【鼠标双击+拖放】操作很直白,用户可以见证要素A进入要素B的全过程。
上图从左向右的操作方式的演变,正是人机界面向越来越自然、简便的交互方式的进步。
 
3.     拖放三部曲
【鼠标双击+拖放】一定是人们将一个物体放入到另外一个物体最直接、最自然、最便捷的操作方式?
或许可以这样:

以上三步骤仅为【拖放】过程,省略了鼠标双击打开和关闭。用户只需要拖动图标到指定目标的图标上,就可以完成将一个物体放入另外物体里的操作。因为在电脑的虚拟空间中,只要接上电源,电脑就是一个开放的空间,几乎不存在封闭的区域。用户也不需要有和现实生活中“打开”一样的动作。仅从要素B(文件夹)的图标来看,它寓意为未完全封闭。
但这样很简单、直接的动作,用户如何知道可以拖动?拖动可以实现什么功能?何时拖动,拖动到哪?
以上看似简单的三个拖放过程中,仔细解读,其实开发者做足了文章,下面拖放三部曲就隆重登场了。

 
拖放部曲一——邀请拖动
用户将鼠标移动到被拖动要素时,被拖动要素的背景色和边框变化意在告诉你:这里可以进行操作。
 
拖放部曲二——拖动
当被拖动要素的中心点进入放置位置区域时,出现信息提示框,告诉你可以实现的功能——移动要素。需要说明的是,如果拖动的操作是在同一个存盘中进行,系统默认为“移动”;若不在同一个盘中,系统默认为“复制”。
 
拖放部曲三——放置
当用户释放鼠标,要素直接进入到另外的要素中,这里也可以通过文件夹直接查看要素A的缩略图。如果移动的要素所占空间很大,系统会弹出进度条,显示需要移动的时间。
 
4.    桌面拖放交互和WEB拖放交互的比较
拖放的应用早已从桌面应用拓展到WEB应用,拖放的功能也不仅限于以上举例的放入功能,还包括元素重排、启动exe文件等。由于本文篇幅有限,在这里也不针对所有功能进行详细阐述。下面以桌面应用和WEB应用的代表-iGoogle来梳理拖放交互的细节。 

从以上桌面和WEB拖放交互来看,WEB的拖放的交互并没有桌面环境中的拖放交互丰富,这跟浏览器环境本身的限制有关。但在WEB环境中,光标的变化却有很强的拖动暗示,这也是帮助人们实现拖动最重要的开始。从以上鼠标操作和拖动要素的比较图中,设计师也可以从中找到更多拖放交互设计的参考。
 
5.    拖放的局限
诚然,在虚拟世界中,拖放带给我们极强的体验感,但其本身的一些局限也需要引起设计师注意。
第一,拖放动作适合在拖动目标可见的情况下进行,若目标不可见,用户可能会误拖动到另外的位置。通常,拖放行为发生在在一个画面中。
第二,拖放过程中,用户需要一直按下鼠标,如果起始位置和目标位置的距离很远,而且目标很小,用户很可能就也不知道拖动到什么地方了。因此,拖放的交互设计还需要参考费茨定律。

6.    后记
可能用户完成拖放就1秒钟,该功能也小到用户不会察觉其中丰富的变化,甚至可能有人认为笔者用上千字来阐述拖放是小题大做。但设计师却不能看不到这个小功能背后隐藏着用户长久的使用习惯和需求。作为设计师而言,我们可能需要思考:如何提炼用户的需求和使用习惯,从而设计出既符合用户日常使用习惯,自然又便捷的交互方式。  

源地址:http://cdc.tencent.com/?p=3712

相关 [拖放 三部曲 大象] 推荐:

拖放三部曲——从“把大象放进冰箱”说起

- Han - 所有文章 - UCD大社区
开篇呈上赵本山和宋丹丹的小品笑话:.  要把大象放进冰箱总共分几步. 把大象塞进冰箱要3步:1 把冰箱门打开;2 把大象装进去;3 把冰箱门带上. 这虽是一则脑筋急转弯的笑话,但却提炼出我们生活中将一个物体放进另外一个物体里通常有的3个步骤.  随着信息化时代的到来,我们的生活不仅局限于可触摸的自然环境,而且拓展到无形的虚拟环境中.

个人私藏的电影三部曲

- alavinid - 盘点控 – Mtime时光网
土耳其导演赛米的倒叙的一个主角约瑟夫一生的电影三部曲,风格平静缓慢,叙事简朴暗含张力,诸多的诗话长镜头,我的至爱. 格斯范桑特的极简主义实验电影,标志性的长镜头、跟镜头和一如既往的沉默,我的至爱. 2.《方泰尼亚往事三部曲》. 葡萄牙导演佩德罗科斯塔的代表作,实验电影,也是标志性的固定长镜头,灰暗的电影基调,一种近乎残酷的冷峻深刻,颇为震撼.

创业三部曲之一——学技术

- 小宇 - Tech2IPO
我从创立3家科技公司的经历中学到了什么. 36kr 上的这篇文章直截了当的告诉你,作为一个想要成功的创业者,你需要具备哪些素质. 然而,这些素质因人而异,并不是所有创业者都需要从同一个模子里造出来才 能成功. 但是,在与许多创业者接触的交流中,我们发现大家遇到一些共性问题. 这些问题并不是创业者自身素质问题,也并不是无法改变的,而是很多有想法有激 情的创业者不擅长的.

创业三部曲之二——找伙伴

- Frank Cai - Tech2IPO
十几年前,两个技术牛人合作开发出了一个搜索引擎叫Google,现以成为全球最强大使用范围最广的信息工具. 如今,两位创始人一位掌管技术一位是CEO. 这充分说明,要想能够成功运作,即使是一个技术氛围再浓的公司,创始人也需要从技术中走出来,做一些非技术的工作. 在《创业三部曲之一——学技术》一文中我们提到,在互联网行业创业,技术是必不可少的.

营销策略制定的三部曲

- - 互联网的那点事
营销理论多如牛毛,常常学了这个、忘了那个,甚至在真正执行的时候有如瞎子摸象一般,造成多数的营销策略无法产生预期的效果,因此我在这裡试着将营销分为叁块拼图,带大家一窥现代营销的整体面貌,让大家能在短时间内理解并掌握何谓营销?以及应该如何进行策略的拟定. 首先,第一块版图,环境与情况:消费者在什么状况下会想到(使用)你的产品或服务?.

打造高绩效文化三部曲

- - 创业邦
  高级管理者往往认为企业文化很难衡量或者很难改变. 因此,许多人的选择是,不对企业文化领域进行投资——即使有很多事实表明,如果管理者能够有技巧地进行企业文化管理,企业将因此形成竞争性优势,进而成就非凡、经久不衰.   澳大利亚四大银行之一的澳新银行(ANZ Bank),其实践很好地说明了这一点. 十年前,澳新银行采用了一个措施,希望通过一个“有别于传统增长战略的独特计划,达到重塑澳新银行文化以提高效率和盈利的目标”.

jQuery插件编写之三部曲

- - Web前端 - ITeye博客
1、选择一个jQuery框架,如:. //定义你的属性名myPlugin. //使用return this.each运用在多个控件上并实现链式操作. //使用暴露方式设置插件默认参数,这对于让插件的使用者更容易用较少的代码覆盖和修改插件默认设置.  2、添加引用编写好的插件.  首先给你的插件起个名,推荐命名方法为:jquery.[插件名].js,如上面可以命名为jquery.myPlugin.js.

美国动漫店游之:唱了20年的“三部曲”

- weawea - 理想生活实验室
这次给大家介绍我所在城市的一家传统美式漫画店. 起因是我偶然得到几个未上色的战棋模型,兴起了寻找可以买到更多模型的念头. 门口漫画店倒是有几家,可没人卖模型,不过每个店主都提到要去一家叫作“TRILOGY”的店,有一位还好心指了路,我便按图索骥而去. 在门口看招牌就觉得小店的名字很有意思:TRILOGY——“三部曲”,下面还写明了主要的三项经营内容:漫画、卡片、游戏.