非凡体验设计

15个令人惊讶的3D交互Flash网站

admin — Tue, 30 Mar 2010 10:45:58 +0000

越来越多的人开始关注Flash3D交互网站，当然大量3DFlash引擎也给开发和设计人员提供更好的接口，尤其使用Papervision3D引擎设计实时的3D用户界面，下面展示了15个利用3D引擎设计的Flash网站。这些网站将把设计人员的思路引入新的境界。

学习使用3DFlash引擎教程

Park.seasons

This one is more of an experiment, but I included it because it looks incredible.

Motorola Razr2 :: Gondry’s Dream

2009最佳4款娱乐领域互动新媒体作品！

admin — Sat, 27 Mar 2010 16:26:19 +0000

2009年Adobe MAX大赛上展现的入围互动新媒体作品选一：

BBC电台“大大小小”媒体播放插件Big & Small by Plug-in Media

Big & Small是一款可以让孩子们在线与自己喜欢的卡通人物在一起娱乐，学习的在线体验系统。开发使用Adobe Flex 3, Flash CS4 Professional, Photoshop CS4, and Soundbooth CS4.

>>在线体验Big&Small

格莱美博物馆交互系统GRAMMY Museum Interactives by Second Story Interactive Studios

格莱美博物馆交互系统，通过4个视觉装置来令博物馆的参观者参与到音乐创作中来。开发使用Adobe Flex 3, After Effects CS3, Flash CS3 Professional, Photoshop CS3, and Illustrator CS3.

杀戮地带2网页版游戏Killzone 2 Webgame by Agency Republic

杀戮地带2在线多人网页游戏。采用CS4创作

>>在线体验《杀戮地带2》网页游戏

美国职业棒球联盟在线播放器MLB.TV Media Player 4.0 (MLB.com) by MLB Advanced Media, L.P. -MAX 2009 Winner

美国职业棒球联盟MLB媒体播放器，通过这个播放器球迷们可以实时和点播游戏，统计他们钟爱的球队和添加评论。

开发：Adobe Flex 3, Flash Media Encoding Server, Flash Media Interactive Server, Flash Media Live Encoder, Flash Media Streaming Server, After Effects CS4, Dreamweaver CS4, Photoshop CS4, and IllustratorCS4.

>>在线体验MLB媒体播放器

{更新:3月25日现场火爆之场面}【演讲下载】设计你的梦想——精准的职业之路

admin — Fri, 19 Mar 2010 10:40:54 +0000

加我好友的朋友请表明身份…

大家还是那么可耐！

本次活动资料下载：

【PPT】设计你的梦想——精准的职业之路【2010-3-18】.pdf

职业规划图【2010-3-18】.png

【蓝图】梦想蓝图【2010-3-18】.png

Flash软件技能树.png

【简历】模拟毕业生简历【2010-3-18】

本次活动相册：站位,稍后传…

不吃斋不念佛，可爱的海报，还有个性手势！

当天结束后提问环节发放的礼品“速度魔方”！

[上图：现场的同学们]

[现场PPT和俺]

[俺和刘平平童鞋，背景是Windows经典画面]

[老杨同志和老片子]
“谁有当天工作人员的照片发给我，他们很辛苦~”
当天活动照片集锦如上

我想这次最重要不外乎：

1）各位亲们提供的独家“谍报”正是因为你们亲身的经历，能够使 07，08，09届的童鞋们能够更加鼓起自信的勇气和找到学习与就业的最佳途径

包括：Kimtao，Reflux，脩，毛毛虫，彬Go，小艺

2）全部参与演讲过程的童鞋们的积极互动，以及提出的深刻问题，你们的问题我会陆续更新至此，希望我身边的人能够为大家做进一步的解答！

3）媒体实验室工作人员将近一个月的准备

希望能够补充的：

1）由于时间有限，我的内容，不能更加深入，包括涉及到的软件与职位。希望看到的同志可以帮助我完善并提供更为完备的内容

2）梦想蓝图，希望可以有同志帮助我做成可以自己绘制的版本，而不是现在这样的一张图。同时能够帮助美化

3）演讲中，涉及到一份简历，这份简历是我通过一个朋友建立完善的。一份最基础的适合于本科毕业生的，但个人觉得还缺很多内容，请在职场中的朋友，帮助我完善。

4）职业规划图中仅仅包括8大领域（艺术广告领域、游戏领域、互联网开发领域、虚拟现实（VR）电视台、特效公司、娱乐影视、动画）希望能够有其他适合数字媒体专业毕业生的领域方向。或者有正在从事某个领域的朋友可以把自己的方向写出来。

5）每个职业领域的“梦想进阶树”，因为本人不能有全部的亲身经历，所以希望有从事这方面的朋友可以画出自己的“梦想进阶树”，我PPT提供的“梦想进阶树”来自网络，没有融入实战经验。

6）已经就职朋友发来的学习方法，由于时间有限，仅仅收集了Kimtao的学习技巧，希望大家能过提供更多的。。。

如果大家在以上的部门有自己的想法，可以在下面留言，或者通过
wyl.otrees@gmail.com

yalynn.com

联系我，我将回复你们所需要的资料，帮助你们完善本主题。

【陆续更新。。。】

“富媒体交互设计”领域的顶级盛典MAX Awards

admin — Sat, 30 Jan 2010 13:02:32 +0000

今天介绍的就是鼎鼎大名的“Adobe MAX Awards”，是Adobe公司一年一度的口号为“沟通，探索，激情”为主题的大赛，因为Adobe公司在多媒体领域与富媒体、RIA等方面提供卓越的产品，所以MAX大会也被认为是“富媒体交互设计”顶尖技术与产品的较量。

接下来几天，我将为大家介绍在广告与品牌Advertising and Branding, 教育Education, 企业级应用Enterprise Productivity, 娱乐Entertainment, 移动Mobile, 公共领域Public Sector, 社会化计算Social Computing, 社会责任感Social Responsibility.几个奖项角逐的情况。

2009年MAX大奖赛4天的会议上，全球顶尖的多媒体设计人员与开发人员将就“社会化计算”，“客户端”，“云计算”，“跨平台富媒体”，“移动装置”等进行研讨与作品角逐。

详细获奖视频见下面…

非凡体验设计正式开博！符合信产部开始！

admin — Thu, 28 Jan 2010 08:47:29 +0000

如果你喜欢这个博客，那么在右侧可以通过feedburner产生的Feed进行订阅。
进过icp的审批终于得到那个数字。也突然发现“抓虾”对通过Google的Feedburner产生的Feed是需要进行备案号验证的，如果你的blog没有备案号的话你仅仅能看到“正在抓取中。。。”-_-!
总之，庆祝。。。
在这里你能看到，关于Flash RIA的关注，富媒体交互设计的系列文章，交互产品高科技酷玩装置，以及电影娱乐领域的最新交互设备！

创建一朵社会化Flower，分享给世界！

admin — Mon, 25 Jan 2010 13:33:42 +0000

如果你想用一只独具匠心的花朵来表达你的思想，分享给你的朋友，那么Facebook的一个合作Flash富媒体站点“Adobe Peapods”可以帮你办到。通过连接Facebook的相册，将可以代表自己兴趣的图片与头像打扮成枝叶，然后选择你的Keyword来表述你自己。最后混音一段节奏感十足的音乐，就可以通过邮件分享给你的朋友，当然没有Facebook也可以试试哦！

【>>我也要创建自己的“花朵”】

越来越多的社会化网络中都可以找到我们的踪迹，有没有更新奇有趣的方法可以代表我们呢，我把他称之为“社会化符号”，通过社会化网络我们可以分享相册，日志，围脖等等，这些信息的的放大与挖掘就可以成为标示我们自己的“社会化符号”，可以包括关键词，最喜爱的图片，卡哇伊头像……

中间的一朵就是我创建的……hoho

首先为你的种子创建名字……

富媒体RIA应用点评：花朵的中心花蕊是你facebook的头像，枝叶就是图片喽。很欣赏作者将社会化网络抽象为一朵花的创意，并结合Flash网站特有的哦交互性能。配合评分系统，地区、名称的索引系统，以及邮件发送系统来构建的富媒体应用程序RIA。这也是近年来位数不多的分享制作类的精品了……

【>>我也要创建自己的“花朵”】

一步步教你20个最佳Flash游戏

admin — Wed, 20 Jan 2010 19:00:53 +0000

创建Flash游戏是一个相当艰难的工作，但是也很有趣，本文推荐了20个最佳Flash的游戏教程，可以帮助你创建一些简单的Flash游戏，你还可以下载文章中提供的一些游戏的代码及相关资源（打开的速度可能会有些慢，请耐心等待片刻）……

1. )3D Slidin Puzzle

2. )Pool Game

3. )Pseudo 3D Pong Game

4. )Star Shooter

5. )Away3d Game

6. )Baloon Shooter

7. )Mini Golf

8. )Racing Game

9. )Random Wheel

10. )Guessnext

11. )Ball Game

12. )Chicken and Eggs Game

13. )Minesweeper

14. )“Nodes” Game

15. )Strange Way to Move

16. )Tower Defense Game

17. )Catapult Game

18. )Helicopter Games

19. )Base Defender

20. )PongOut Game

操纵世界，挂在脖子上的高科技装备！【第六感技术】

admin — Wed, 20 Jan 2010 10:51:39 +0000

《少数派报告》的汤大帅曾经用双手控制的眼前的电脑全息界面。如果你也想和他一样，那么有福了，来自MIT的印度小伙子Pranav可以帮你实现。

记得电影导演用那个2手组合成相框的手势来确定拍摄目标吗？（当然很多童鞋们也喜欢玩）没错，你现在不用回到摄像机上然后按动红色圈圈的按钮了。保持住你的手势，就可以把里面的世界拍摄到你的掌上PDA中，恩，是的，不需要摄像机什么的，这个手势就可以。

你可能看到类似的科幻，在报纸上看视频。ok，买份4毛的报纸，然后看看这些新闻背后的故事吧，如果有人觉得你的4毛前比他的值，那么告诉他这是“第六感”，如果他觉得你是疯子，那么就看看他身上的投射的“关键词吧”，看看这个人的背景，职业，甚至Facebook，人人网上面他的爱好吧。。。或者你想看看超市中买到辣酱是否被央视曝过光，书店中的图书在豆瓣上面的平分的话，没错这些都是“第六感”技术。

来自MIT的Pranav童鞋（一位天才印度男），用一个网络摄像头+便携电池投影机+指甲油+耳机+PDA来完成你与自然世界的交互，并通过信息来帮助你生活中的困扰得到解决。存储你的所见所闻。这项技术已经被用于印度与美国的一些地方，印度男说印度总统考虑过用于核设施研究，当然比起核研究，350美刀的成本则更令我们开心。

Pranav童鞋现场演示（来自TED的现场演示，全场起来鼓掌。）

发现越来越多的技术来自于几百美元的制作成本，看来苹果与微软大神该好好考虑下了。

下面的视频你将看到：

用手势照相，利用手掌当做手机键盘，在任意墙壁上修改照片，在地铁的地板上和朋友玩游戏，用一张白纸来玩赛程游戏。。。

http://www.pranavmistry.com/projects/sixthsense/

项目导师Pattie Maes 对“six sense”“第六感”做报告

【第六感项目】

【pranav个人网站】

打造完美WEB2.0的“行为请求按钮”！

admin — Wed, 14 Oct 2009 03:17:02 +0000

声明：本文为作者理解的译作，文中涉及作者的主观意见，请免板砖。如果需要原汁原味，请访问【原文链接】
[版权声明]:版权归作者Lynn和非凡体验设计所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明：http://www.yalynn.com

今天看到SMASHING提出了一篇关于“Call to Action Buttons”的文章。那么什么是“call to action buttons”呢？我暂且译为“行为请求按钮”（欢迎对文章中的翻译与术语进行指证）。这种按钮是网页设计中常见的“征求用户行为的按钮！”举个简单的例子，如常见的“Buy this now!”按钮，“Learn more…”按钮。这种按钮请求用户进行点击，进而用来完成一种额外的操纵。

那么我们如何更好的设计能够有效鼓励用户点击、吸引用户注意力的“行为请求按钮”呢？这篇文章就将分享一些行之有效的设计方法和进一步对“行为请求按钮”进行深入的探索。

有效的最佳实践

设计行为请求按钮一定是要深思熟虑并且再三规划，为了更好的工作，设计“行为请求按钮”的步骤应该是你设计系统原型和信息架构时的一部分，在这里将介绍一些设计技术。

绘制引人注目的尺寸

尺寸的大小在网页设计元素中的重要性：较大的元素更为重要，当决定行为的重要性时尺寸的大小对“行为请求按钮”至关重要。

行为呼叫按钮尺寸与周围的元素

Lifetree Creative展示了行为请求按钮尺寸的重要性。将其与LOGO进行呼应。为了抢眼，行为请求按钮大概比LOGO宽出20%。即使LOGO放在了网页的最顶部，您的眼睛仍然请求你采取点击行为，这恰恰因为其较大的按钮尺寸。

相对与行为请求按钮的尺寸更重要的“请求行为”

一个网页可能会有多个请求行为。为了说明一个行为请求按钮相对其他按钮的重要性，你可能会改变他们的大小。这里有一个paramore|redd网站关于行为请求按钮中“注册sign up”按钮比“继续阅读continue reading”按钮更大，这也说明了在这个博客中注册行为比继续阅读行为更为重要的原因。

建立更有吸引力的突出布局

行为呼叫按钮在网页中的位置也是吸引眼球的决定性因素。相对其他按钮更为靠近顶部的按钮位置更能带来目标网页的转化率，这是因为用户更容易收到鼓动，进而采取行动。

安排在一个更与众不同的位置

“行为请求按钮”安置在一个网页布局的与众不同的位置，这里大家可以参考这个网站dailymile，他们的“行为请求按钮”看上去相对其他网站元素飘起来一样。

放置在网页顶部

为了说明这一概念，让我们来看看“Post a job发布工作”这个行为请求按钮。她被放置在Your Web Job顶部的右上角。这是一个非常突出的位置。他更容易引起注意，进而被记住。例如，一个发布工作的浏览者不论在那个页面浏览，他们都能够更加印象深刻的记住“Post a job”这个按钮。

放置在布局的中心

行为请求按钮放置在布局的中心更能影响用户的行为。例如这个网站，行为请求按钮没有被制作成与其他网页元素更高的对比度，他用了一个非常简单吸引注意力的方法。

使用空白来分离“行为呼叫按钮”

IconDock显示如何使用足够的空白来达到效果，或者使用一小部分空白来设计“行为请求按钮”这是因为利用空白来分离的元素与元素。

利用空白的变化来表示逻辑上的关系

使用高对比度的颜色

颜色对比周围的元素

背景色与前景色的对比

提供一个间接的替代行为

一个页面能够拥有多个“行为请求按钮”，有时有必要提供一个次要的“行为”用来说服用户如果采取行动必须的首要行为。例如，在用户注册网络服务之前一些用户可能会需要进一步的资料，提示以注册的后续行为;次要的行为可能会要求他们采取的产品旅游或访问更多的信息。

主要行为旁边显示次要行为

也显示了如果需要次要按钮进行下一步所需要的主要按钮的概念。在这个案例中，主要行为是“Buy it”购买，而如果需要在购买之前进行尝试，那么可以通过次级行为首先进行“下载”。注意主要行为的背景对比度更高，其次也利用了从右至左的视觉特点。

Displaying secondary actions below the primary action在主要行为下方显示次要行为

Alternatively, you may wish to display the secondary action below the primary action. This may be necessary if you need to have greater visual separation of your calls for action. Virb shows this situation where the “Join Now” call to action is placed above the secondary action of taking the product tour. Notice that the secondary action is further separated from the primary action by using a more muted color for its default state.

Convey a sense of urgency传达一种紧迫感

通过大胆，自信和具有指令性的词语来达到这种效果。这种概念用来说服用户不要在迟疑，等待，否则会得到惩罚或丧失机会。

Organizing for America

关于“行为请求按钮”的额外资源

How to Create a Slick and Clean Button in Photoshop
This tutorial on Six Revisions, written by me, will show you how to make large and noticeable call to action buttons step by step.

Inspirational Buttons in web design – Pattern Tap
If you need some inspiration on good button designs, check out this Pattern Tap collection.

10 techniques for an effective ‘call to action’
Paul Boag discusses some techniques for making good call to action buttons.

Good Call-To-Action Buttons
UX Booth has a good piece on what a good call to action button consists of.

Firefox Shows How a Strong Call to Action Can Boost Landing Page Performance
Read about how a good call to action button can improve conversions. You’ll find a comparison between the call to action buttons used by Firefox, Opera, and Internet Explorer.

Web Design Trends: Call To Action Buttons
Lee Munroe puts together a showcase of call to action buttons, along with a discussion on current design trends.

声明：本文为作者理解的译作，文中涉及作者的主观意见，请免板砖。如果需要原汁原味，请访问【原文链接】
[版权声明]:版权归作者Lynn所有，转载时请以超链接形式标明文章原始出处和作者信息及本声明：http://www.wangyaliln.com.cn

【转】互联网交互事件分析

admin — Mon, 12 Oct 2009 07:44:43 +0000

【引用：http://ued.taobao.com/blog/2009/09/27/guyin/】

挖坟

交互设计（Interaction Design）产生于二十世纪八十年代，在1984年一次设计会议上，大名鼎鼎的英国交互设计师比尔·莫格里奇首次提出交互设计这个概念，作为一门关注交互体验的新学科而存在并发展到今天，他一开始给它命名为“软面（Soft Face）”，由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后来把它更名为“Interaction Design”――交互设计。

思考

交互设计是一种如何让产品易用并尽可能让人乐在其中的技术，他包括了解目标用户在产品使用过程中的心理反应，了解用户在同产品交互时彼此的行为，了解大部分用户交互行为的习惯，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。

交互设计在产品上的使用也越来越得到各大网站以及网民的重视，交互设计的理论也日益丰满，经典的交互案例也渐渐丰富起来。

今天我们来分析一下互联网上交互设计的一些事件，为大家的研究和应用提一些个人肤浅的看法。

其实交互可以理解为在使用产品过程中用户的感觉以及针对感觉的反馈。从这个层面上来看，生活中交互是无处不在的。交互产生的感觉就是我们平时所熟知的五感，即听觉，视觉，嗅觉，味觉，触觉。当然你一定要认为交互可以给你带来第六感，我也不反对，因为确实有好的交互让你有种神秘莫测的感觉，而且可以让你沿着设计师预想的方向去使用产品。其中应用于互联网的交互设计基本上是没有嗅觉和味觉的，虽然不排除将来可能会相关硬件产品作为这些感觉的输出设备（比如不好看的网站，某输出设备直接散发出臭味，或者某输出设备尝起来很苦），但是我们目前只讨论目前绝大部分输入设备带来的感觉。（注一）

分析

我们在使用互联网产品的时候，听觉，视觉，触觉是经常被触发的。在此我对互联网产品的交互事件进行了分类：听觉交互事件，视觉交互事件，键盘交互事件，鼠标交互事件。后两者虽然都属于触觉交互事件，但基于网民的操作习惯（键盘流，鼠标流），我觉得分开会比较容易讨论这个话题，尽管某些时候他们都混合在一起，难以分开。(注二)

听觉交互事件

听觉交互事件顾名思义就是：耳朵听到的声音给用户感觉，并产生的相关反应的过程。比如WINDOWS的系统提示音，网络游戏中的一些音效，很多论坛的短消息提醒，等等。听觉交互事件的主要交互目的是有四种：提示，警告，反馈，补充。我分别举例说明一下。

提示：比如很多即时通信软件的好友上线提示，系统消息提示。

警告：系统操作错误的警告音，软件登录密码错误，某些游戏中红血警告，时间限定警告，机会限定警告。

反馈：注册成功，升级成功，操作按钮被点击。

补充：很多FLASH站的背景音乐，游戏中的战马嘶鸣、马蹄绝尘、刀剑铿锵，电子杂志翻页音效。

声音交互事件的交互方式很单一，就是默认在交互过程中发出声音。它的优点是提醒用户注意，在输出设备（听筒、音箱等）齐全的情况下，信息传达稳定，用户容易接收，交互效果最好。但它也有缺点，就是受制于输出设备，如果没有音箱或者听筒，交互效果就基本没有。所以听觉交互事件一般不独立用在互联网产品上。

听觉交互事件的注意事项：

1.不独立使用，应该与其他交互事件配合使用，至少要与视觉交互配合。

2.不强制用户接受，有选择项可以让用户关闭，不要期待用户为你去关输出设备。

视觉交互事件

视觉交互事件就是眼睛看到的界面给用户的感觉，并产生的相关反应的过程。视觉交互事件经常和其他交互事件混合在一起使用，但它本身可以独立使用。比如很多线下活动在线上作的网络广告，某些电影的线上海报，某些牛人的个人网站通知，流程图，注册时用户确认已阅读用户协议前不可点击（或倒计时完成后方可点击）的按钮等等。

我再举一个具体的例子，某网站出现一个震撼的广告图，内容为“浙江移动推出充值200送200优惠活动，请到附近营业厅办理。”用户可能不会点击，他会打电话给移动公司询问，或者告知朋友去充值，或者直接就去营业厅办理了。这个人只要有了反应，交互事件就进行得很完美，广告效果就达到了。视觉交互与其他事件交互的结合也比比皆是，我就不一一枚举了。

视觉交互事件是用户最直观最容易获得的体验，因此它需要具备美观，吸引，冲击，共鸣等特点。这一部分与界面视觉设计需要关注的部分重合，但不完全一样。

视觉交互事件的注意事项：

1.表达清晰，有时甚至要牺牲美观来满足信息清晰的传达

2.与目标用户群产生共鸣，从文案、配色、图案等方面来提高吸引力，让用户有深入了解产品的欲望

3.配合其他交互事件使用时，尽可能满足其他交互事件的需求，避免产出好看不中用的华而不实的产品

鼠标交互事件

鼠标交互事件顾名思义就是用户使用产品时，通过鼠标操作产生感觉，并产生相关反应的过程。鼠标交互事件是最常用的也是最重要的交互事件。比如导航条，很多性格测试，不计名投票系统，一些网页版小游戏，某些FLASH广告，部分网站上出现的快捷菜单等等都属于鼠标交互事件。鼠标交互事件包括主键点击，悬浮，双击，选中，副键点击，滚动等，经常体现在超链接,JS写的ON系列事件，FLASH的按钮等场景中。

鼠标交互事件因为操作比较简单，得到很多入门级网民的喜爱，我们在用户体验研究测试中也确实能找到这一类的用户，就是传说中的“鼠标流”，整个交互过程只用鼠标来完成，虽然这不能代表所有网民，但确实代表了一种趋势，用户都喜欢简单的交互方式，只不过我们更关注的是有效，如果用户点来点去，找不到入口（出口），达不到目的，那么这个鼠标交互事件就是失败的，需要改进了。

既然鼠标交互事件有这些需求，我们就应该在设计的时候权衡简单和有效的关系了。必须需要的步骤，我们一步都不能省，我相信用户不会吝惜一次点击的。另外一方面，我们不能因为用户不在乎多一次点击，就让用户不知道先点哪个的地方或者不停地点击。再举个例子，网站的快捷菜单，可以直达很多地方。我们不能把所有的页面都列出来，那样就变成sitemap了，在某个页面上的快捷菜单最好只列出重要的，常用的，或者相关的链接就行了；也不能只列一个“帮助中心”的快捷链接，尽管我相信你的帮助中心作得非常有条理，用户还是需要点了再点，一级接一级的去找到相关的帮助，如果能直接到本页面相关的帮助不是更好？这个权衡非常具有挑战性，希望大家在作交互设计的时候多考虑，多调查，多试验，相信能找到一个比较好的方案。

鼠标交互事件的注意事项：

1.傻瓜式：简单方便，在满足用户使用需求的同时，尽量减少点击次数。

2.提示明显：让用户知道哪里地方可以点击，点击哪里可以最快达成目标。这个需要在界面及文案上对用户给予引导。

3.反馈及时：用户在鼠标交互事件产生之后，能给以及时的反馈，比如鼠标经过变色，点击错误发出警告，跳转页面后能直接到相关的位置，AJAX请求后要反馈出明显的视觉提醒或者页面变化

4.层次分明：用户点击之后，能有整个操作过程的提示，在操作失误后可以返回重新操作，已经点击过的是不是需要记录状态等等。

键盘交互事件

键盘交互事件就是用户使用产品过程中，通过键盘操作产生交互体验的过程。键盘交互在网络产品的交互过程应用得相当普遍，比如撰写日志，添加评论，ENTER提交，小键盘翻页，TAB切换焦点，某些网页游戏的快捷键等等。键盘交互事件通常和鼠标交互混合使用，构成了互联网产品的主要交互行为。用户在进行键盘交互之前，对时间和精力的花费有一定的预期，由于多年互联网产品交互过程对用户习惯的培养，用户在进行键盘交互事件的时候耐心明显多于其他交互事件。所以键盘交互事件要充分利用用户对此事件的耐心，并且要充分尊重用户的习惯。举例说明：文本框里面的提示语在焦点产生的时候要有全选功能或者删除功能；文本框输入完成后要有ENTER提交的功能，而文本域输入完成后则是CTRL+ENTER作为提交，因为ENTER此时会作为换行的用途；有些文本输入有字数限制时需要提示剩余字数；有些文本域输入有时效性，需要有保存草稿功能，或者有时效性的提示；在需要设置快捷键的时候不要和系统默认的一些快捷相冲突，如果冲突了还不如不要。

尊重主流的操作习惯非常重要，在此特别提出。比如我很不喜欢QQ的CTRL+ALT+Z的默认提取消息，因为这是PHOTOSHOP的返回上一步的快捷键，这个设置非常干扰我的工作；我很喜欢GOOGLE文档里的CTRL+Z(俗称后悔键)和CTRL+Y（俗称恢复键），因为它符合大多数互联网产品的操作习惯。虽然有些习惯比较偏向个人，但我相信一定有很多产品自作聪明的设置了一些快捷键，反而干扰了一些常用软件或者系统的默认快捷键，本来是一个好的交互意愿，却取得了相反的交互体验。

键盘交互事件的注意事项：

1.安全性：键盘交互事件可能透露一些用户的个人信息，或者泄露一些隐私，好的互联网产品应该给于用户以保护。

2.稳定性：在利用用户对此交互事件的耐心来收集信息或者获得反馈的同时，要保证用户的耐心要有成果，不能让用户浪费时间和精力，结果前功尽弃，或者功亏一篑。

3.一致性：不要指望用户对键盘交互事件拥有高超的辨别能力而采取不同的操作方式，如果你采用了一种交互方式，尽量在相同或者相似的交互场景中延续使用相同的交互方式，退一步说，不要用不一样的交互方式，再退一步说，千万不要用相反的交互方式。这一点对视觉交互也很重要，但对于能称作界面设计师的人（不包含图片处理员）来说，一般这种一致性是可以保持的。

4.尊重习惯：目前互联网产品中有一些是非常伟大（或者说强大）的产品，不管交互方式是否绝对完美，至少他已经用市场占有率和时间的延续性培养了用户一些既有的习惯，交互设计师不要轻易打破用户的现有习惯，这并不是说不能有创新，而是指在现有习惯上优化和提升交互体验，是对现有交互方式的延展。

总结

以上是我对互联网产品的交互事件所作的分类和分析，尽管现实产品的交互事件都很复杂，但基本是这几种事件的组合，如果我们能在基础的事件上作好交互设计，那把复杂的交互事件作好希望就会很大。

另外业内对一个产品的交互设计作得好不好，没有一个标准，通过以上分析，虽然我们依然无法制定出这一标准，但是我们可以从上面的分析看出一个交互设计是不是作得不好。在我看来，这也是一个进步了。我希望各位同行都来贡献自己的力量，将好的交互设计应用在更多的产品，让用户得到更好的体验。

个人的一些分析，难免有不足，希望大家补充和指正。(本文较长，无图，枯燥，理论，对能读到这里的朋友表示感谢)

补充

注一:

与宗羲讨论时，宗羲认为： “五感”应该是交互的“输入”(input)，也就是通过人类的“五感”作为外界的信息进入大脑，而交互产生的感觉应该摘引《情感化设计》里所描速的三层来描述，即：本能层、行为层、反思层。

宗羲的解释非常正确，但我这里说的五感是具体交互事件产生的感觉，是点到线来分析问题的（纵向），而情感化设计里所提到的三层结构是点到面来分析问题（横向）。个人感觉并不冲突。

注二:

与宗羲继续讨论时，宗羲认为：我个人觉得应该从输入和输出来区分。听觉交互事件，视觉交互事件是交互中的输入(对于人类来说，下同)，即交互设备将信息反馈给人类的过程，键盘交互事件，鼠标交互事件是输出信息，即人类将反馈输出给交互设备。输入+输出就形成了“交互”。

输入和输出的区分方法是可行的，但用来归纳交互事件我觉得有不足的地方，文中有例子表明有些交互事件是直接到达反思层的，可能对交互设备根本没有输出任何信息。

所以虽然有了宗羲的提醒，本文还有留下一个遗憾，就是文章结构不够严谨。点到面的结构经过叠加，可以形成整体，而点到线的结构是不足的，如果线与线之间的关系没有明确表达出来，形成的整体是有缺陷的。