聚焦当前任务

三星ONE UI 2.0今年系统更新，着手打造轻应用体验。其中一项更新如下面图所示；当你在看视频时候，不会被来电给打断，而是以一种对话框的形式出现，问候您是否要接电话。这种设计大大提高了用户体验，解决之前全屏来电的困扰。

增强手势交互

今年Android Q更新系统，新增手势操作功能，试想平时我们喜欢坐在沙发或者躺着看电影，手机放在一边，恰巧这时候你很累，想切换正在观看的电视剧或者正在听的歌曲，使用手势操作将大大提高便捷性。

Android Q 音乐播放器手势切换歌曲

BYTON 概念汽车设计

以后如果智能家居领域引入手势识别技术，比如在智能电视，空调，窗帘等等，那么将是多么方便的事情（如早上睡醒就可以躺在床上通过手势打开窗帘，比你去找遥控器方便很多呢），其实想想还是非常有可能的，我们技术不断突破都是为了解决人类需求问题。比如谁曾经会想到手机可以折叠屏？

Use  Gestures on an OPPO

超强折叠多任务处理

2019年5月，安卓手机生态系统发生巨大变化，以Android Q为例子，手机多任务折叠处理任务革命开始，之前我们在使用APP的时候，是无法同时使用其他APP的，比如我在看视频时候,我是无法使用通讯软件发消息的，但是现在安卓多任务处理革命开启。以后我们将可以一个屏幕使用2个产品了，这也正符合未来大屏手机、PAD、折叠屏手机开启技术先例。

Android Q :Powering foldables

new ipad Pro（apple已实现一屏多app任务模式）

安卓生态系统今年打开多任务折叠处理模式，后续将会有更多应用来适配这种模式，毕竟目前还是安卓市场最大。

AR与VR技术逐渐普及

华为、谷歌、微软、FB都在造智能眼镜，AR增强现实技术与VR虚拟现实技术已经逐渐在我们生活中越来越多了的场景出现，其中谷歌smart glasses能与AI语音、通讯软件、ins、脸书，导航等等很多应用相连接，这样你在路上就不需要掏出手机来查看短信邮件，且你在导航时候不需掏出手机，想看时间直接语音唤起（大大减少了低头族，安全性提高）。

Google ar smart glasses

smart glasses 智能提醒与导航

也许有些伙伴说不方便，比如如何查看回复消息，其实这些不必担心，通过头部去控制，比如左推获取最近应用通知，右推可以看到回复的短信等。

AR增强现实技术(随处可以投射现场会议！惊呆了)

VR虚拟现实技术

办公室带上VR眼镜可以做早操锻炼！

智能响应微交互

是什么？我们都知道微交互动画， 但是这种智能的微交互动画，加强情感化元素特征，来自三星 ONE UI 2.0系统中的带来生动的运动图标，让用户清晰知道目前运行的应用。

Samsung One UI 2 Offical

更自然的AI语音

语音交互使用在越来越多的场景，在车载场景设计中，移动端设计，AI语音助手（Siri、Alexa、Cortana、Google Assistant）或者家庭智能助手等，给我们带来极大便利，那么在2020年这一趋势将持续迅猛发展，惠及更多用户群体，伴随着大数据逐步全面覆盖，技术成熟，自然语言处理能力增强，今后智能助手真的可能懂你的心！

产品设计中的规则一直是无摩擦的界面，这些界面使完成任务变得尽可能快捷和容易。但是，在一个可以学习用户需求和习惯（并为他们完成工作）的更智能技术时代，我们需要功能之外的新模型来与用户进行交互，现在该进行连接设计了。

智能读取视频字幕与翻译

之前很痛苦，下载的视频听不懂语言，现在这个不必担心了，2019年 Andriod Q已经在其系统解决这个问题，可以智能读取视频中的声音转化成字幕显示。你还在担心下载的国外教程看不懂了吗？

Google Pixel Buds

带着谷歌今年出Google Pixel Buds耳机出门旅游，不担心听不懂说他国语言了。

滑动式输入

2019-ipad OS 

滚动视差布局

2019-Apple News

总结

新技术的诞生必将带来新一波的设计趋势，我们作为设计师要时刻观察互联网流行趋势，并且对未来的科技与生活时刻保持前瞻性！通过以此来提升自身对各大互联网产品的悟性，更是培养对设计更深刻的领悟。

原文地址：功夫UX（公众号）

作者：LoveXiaoTao

在 iPhone 发布之前，很多手机厂商都在寻找真正适合手机的触摸屏设计。但它们看起来都不太智能，因为手机有40%的区域都是实体键盘，那就意味着，固定的按钮无法为 App 提供定制化功能。

2007. 革命性的滑动解锁

– 初代 iPhone 

2007年第一代 iPhone 掀起了智能手机的革命，具有高分辨率、多点触控 Multi-Touch 功能的 iPhone，真正确立了手势交互的标准。Jobs 放出领先对手5年的狂言，经典的滑动解锁设计，更是让人们赞叹不已。

初代 iPhone

2009. 经典的多任务

– webOS 卡片式交互

2011. 三大金刚键

– Android 4.0

2011年10月19日，三星与Google联合在香港正式发布了首款搭载了Android4.0 的手机GALAXY Nexus。最新的 Android 操作系统引入了屏幕内虚拟导航栏，最终，返回键、主页键和多任务键的组合日渐深入人心，“三大金刚键”的名号应运而生。

虚拟导航栏的优势其实不少，顺应了触摸屏成为主流的发展趋势。但缺点就是 App 程序内的底栏会和虚拟导航栏组成“双下巴”，让人难以忍受。

2012. 魅族的小圆圈

– 小圆圈 

魅族独特的交互方式一直是它的优势，在安卓阵营都使用三大金刚键的背景下，魅族率先做出了小圆圈的设计。它可以实现多种手势功能，例如锁屏，返回，呼出语音等功能。

– mBack

「mBack，触摸返回上一级，按压返回桌面。」

魅族 mBack 是继小圆点后又一标志性设计，魅族用一颗实体按键同时实现了返回和回到桌面两个功能，多任务则交给了屏幕底部上滑呼出。

2012. 英雄末路

– 为触屏而生的 BlackBerry OS 10

2012 年 5 月，黑莓在美国召开发布会，展示了其专门为 Z10 研发的全新移动操作系统 BB 10。

黑莓 Z10 整个机身正面没有 Home 键或者菜单键来干扰视线，因为手势滑动是 BB 10 的核心交互，到现在为止这个操作依然让我记忆深刻，那可是2012年！

黑莓曾经把这个功能叫做flow，也就是上划解锁，向上滑动返回主页，和 iPhone X 一样的操作方式。但由于应用生态软件匮乏，最终宣告失败。

2013. 悬浮手势

– 索尼 Xperia  Sola

索尼在 Xperia  Sola 上引入 “浮空触屏技术”（Floating touch），你不需要触摸到屏幕就能滑动 Web 网页，当手指进入到距离屏幕 15 毫米的范围内就能触发操作手势。而且它的感应器很灵敏，能够识别有效的点击，滑动，轻扫等手势。

这项功能之后在三星 Galaxy S4 也得到了应用：

2017. 手势的崛起

– iPhone X 开启全面屏时代

2018. 拥抱全面屏手势

– vivo

– 小米 MIUI

– 魅族 Flyme

2019. 一统江湖

– Android Q

在今年的 Google I/O 大会上，新版本 Android Q 除了保留传统的三大虚拟按键和 Android P 的二键设计之外，启用新手势交互方案，屏幕底部便不会再出现返回键和导航栏，只会剩下一个指示条，所有手势也都改成了和 iOS 系统一样的操作逻辑，两大阵营在交互上终于达成一致。

– 未来已来：隔空手势交互

LG 在今年 MWC 发布的 G8 ThinQ 带来 Air Motion 隔空手势操作，而 Google 方面也证实 Pixel 4 将支持人脸解锁和隔空手势。Pixel 4 整合了 Soli 雷达遥控方案，让你能利用手势进行静音、切歌等等操作。你看，这个功能在吃小龙虾的时候，是不是很方便呢？

总结

随着时间的推移，手机相关技术和功能都在不断向前发展。在全面屏的潮流之后，手势交互未来又会往哪方面发展呢？让我们一起期待新的技术革命早点到来。

By the way，如果你喜欢我的文章的话，欢迎点赞、转发，谢谢大家！

原文地址： 洋爷（公众号）

 

显示系统状态

JakobNielsen的第一个启发式用户界面设计声明：“系统应该始终在合理的时间内做出适当的反馈让用户了解正在发生的事情。”这意味着用户界面应该通过提供反馈让用户及时了解正在发生的事情。应用程序不应该让用户猜测——它应该告诉用户发生了什么，微交互可以通过适当的视觉反馈帮助用户理解。

数据上传和下载过程是应用微交互动画的绝佳机会。

数据下载动画 (Image: Nick Buturishvili)

另一个动画是“下拉刷新”，它在移动设备上表示内容更新过程。一个令人愉快的刷新动画可以让用户咯咯地笑。

下拉刷新（图片：Toma Reznichenko）

重点：动画提供应用程序进程状态的实时通知，使用户能够快速了解正在发生的事情。

使按钮和操作可感知

用户界面元素，如按钮和控件，即使它们位于一层玻璃的后面，也应该是可感知的。按钮可以模仿常见物理对象的交互。简单的说，你可以通过对用户输入的视觉响应来增加清晰度。

（图片来源：谷歌）

重点：视觉反馈之所以起作用，是因为它能满足用户对确认的自然需求。点击一个应用程序感觉很好，因为你知道发生了什么。

创建有意义的过度

你可以在导航之间平滑的动画向用户传递信息，解释屏幕上元素排列的变化或强化元素的层次结构。

图标可以从一种形状变成列外一种形状，在不同的时间提供双重功能。

（图片来源：谷歌）

动效设计可以有效的引导用户的注意力，既可以提供信息，也可以给用户带来快乐。这对移动设备和智能手表帮助非常大，因为在这些屏幕上无法输入大量的信息。

Apple的ios UI 的转场就是一个很棒的例子。在下面的示例中，用户选择文件夹或应用程序并放大到其详细视图（或直接到应用程序的主屏幕），

（图片来源：Rian Van Der Merwe）

另一个很好的例子是通过颜色和持久元素在两个状态之间创建视觉连接的动画。这使得过渡平稳而轻松。

重点：微交互能够在页面之间建立可视连接，并增加UI的清晰度。

帮助用户开始使用

微交互在用户入门期间是非常有用的。入门流程中完美的用户体验和动画会对首次使用该应用程序的用户产生巨大影响。他们通过突出显示最重要的功能和控件，在应用程序启动后指导和教育用户。

图片：Ramotion

重点：微交互可以展示信息并帮助用户有效地实现目标。

突出显示UI界面中的变化

微交互能够引起用户的注意。在很多情况下，动画用于吸引他们注意重要的细节（例如消息通知）。但是，请确保动画具有功能性，适用你的用户。

通知（图片来源：Arjun Kani）

重点：微交互可以为用户提供良好的视觉提示。

添加令人愉快的细节

微交互动画的最基本用途是过渡。但是，当动画以超出标准操作范围的方式使用时，应用程序能够真正的取悦用户。下面的按钮能够完美地改变状态并提供双重功能：通知用户并创造一个奇迹。

社交媒体分享（图片：Kei Sato）

重点：时刻关注用户情感，这在交互中起着非常重要的作用。

设计微交互时应该考虑什么？

当你创建包含过多元素的视觉设计时，请记住以下几点：

1、使微交互几乎不可见且完全正常。

确保动画符合功能目的，不会感到尴尬或恼人。对于频繁和次要的操作，响应应该是适度的，而对于不常见和主要的操作，响应应该更加强烈。

2、保持持久

微交互必须能够长期使用。在第一百次使用后，第一次看起来有趣的东西也可能会变得烦人。

3、遵循Kiss原则

过渡设计的微交互可能是致命的。微交互不应该使屏幕过载，导致长时间的加载过程。相反，他们应该通过即时传递有价值的信息来节省时间。

4、不要从零开始

你要时刻了解目标受众及其背景。利用这些知识使你的微交互更加精确和有效。

5、与其他UI元素创建视觉和谐

微交互应该与应用程序的风格相匹配，帮助产品建立品质感。

作者：Nick Babich
原文：www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
译者：Coldrain1
个人主页：i.ui.cn/ucenter/310170.html

场景是真实的以人为中心的体验细节。场景依赖于人，没有人的意识和动作就不存在场景。

——《场景革命》

场景赋予行为意义，每一种新鲜的行为体验的背后，都伴随着新的场景洞察。在传统的产品设计与交互设计之间的一个重要区别是，看待环境和行为引导对于塑造人的体验所起的作用的重要性不同，所以交互设计师在设计过程中，需聚焦于用户使用场景中的服务流程和行为引导设计，预期用户目标，为用户提供符合心智模型的流畅体验。

对于使用场景的思考是交互设计的基础。在不同的场景下，用户对于同一功能的心理预期和交互模式会有所不同。基于场景思维做设计，可以有效的帮助设计师：

• 判断功能需求是否真实，解决了用户什么问题
• 深入地思考场景细节，包括：发生地点、使用频率、情绪状态、行为模式，用户是否借助其他外力
• 发掘功能的延伸性及其价值，做好迭代设计

场景思维的细节体验设计

“场景”通俗地讲是，谁，在何时，在哪里，做了什么事情。在移动互联网时代，场景是真实的以人为中心的体验细节。场景依赖于人，没有人的意识和动作就不存在场景。通过对场景的因素思考，可以帮助设计师更好的理解用户真实需求。

通过充分的理解这些场景，并以此为基础，我们可以基于用户的使用场景，为用户找到更直观的方式，提供有效的互动，使他们能够流畅地完成预期目标。

1.只有当使用场景与用户感知接近乃至完全吻合时，用户才没有拒绝的理由

获取位置权限

在获取用户位置权限的设计中，大部分设计都会在第一次打开app时，通知用户需要获取位置权限。在这种使用场景中，用户的普遍认知是：困惑，为什么我需要给你获取我的通讯资料和位置信息的权限。但对于新用户来说，场景的应用主要表现为简单、轻、快体验，所以在获取位置权限时，用户需要明白，在获取权限后，我将获得什么，因为用户更容易许可他们想要使用的功能。

图1，获取用户位置权限设计

在这个设计中，有两种出发角度的逻辑，分别是从功能出发的逻辑思维和场景出发的逻辑思维：

图2，功能和场景逻辑思维对比

同样是开启获取位置权限的设计目标，场景思维下的设计方案更倾向于将设计放在用户的使用场景中，从与之相关的用户需求出发，注重结合产品的使用场景与产品功能的结合，做引导和暗示，告诉用户开启此功能的效用，从而使用户清楚的知道我将会获得什么，实现用户需求与产品功能的自然过渡，不允许用户say no。

错误反馈

同样的例子还有错误反馈。用户在出现错误的场景中，大部分用户的认知是：我哪里错了，该如何修正。在下图中有两种设计方案：

图3，在情境里反馈，用户更容易修改

左边的设计逻辑是，填写完之后再修改。流程是：用户填写表单，弹出popup，通知错误。在这种设计方案下，在用户提交表单后，再弹出popup提示用户错误，使用户脱离表单场景，且不可在当前页进行针对性的修改，打断用户流程，用户需返回后再寻找哪里错误，并进行修改。

还有一种设计逻辑是：边填写边修改。在这种场景下，用户可以实时的知道数据的正确性，还可以针对性的获取修改建议，直接在错误表单上进行修改。这种设计方案使用户不会收到干扰，更专注于当前任务，顺利完成表单填写。

这两种设计方案的区别在于：前者更注重完成产品功能而后者更注重用户体验。在场景思维下，以用户使用交互的具体环境为基础，让使用场景与用户需求感知接近乃至完全吻合时来引导用户实现预期目标，让产品具有更优越的体验。

2.场景是流动的，交互过程应该符合用户的直觉

相对于用户当前的任务来说，场景是一个不断变化的概念。随着场景的不断变化，用户的需求也不断改变，所以，用户需要通过简约的交互来帮助自己快速定位内容或功能，整个过程应该符合用户的直觉，而不是层层挖掘。应尽量用少的页面使用户以更简单的操作来完成目标。

简化流程，渐进自然

当场景发生变化时，我们应该让用户决定下一步该做什么。在下一场景插入变化时，会使用户处于被动的位置，而我们要做的是，改变布局，使其非常直观自然的来满足他们的需求。

图4，INSTAGRAM 将滤镜整合入流程中

这里最好的例子，便是在Instagram中。现今，用户发布照片的普遍的现象是：要先去美图。那么在发布照片的功能流程中，可以来对比一下微信发布朋友圈照片流程和Instagram的发布流程：

图5，微信 VS. INSTAGRAM发布照片流程

从流程中可以看出，ins的用户在用户在完成照片选择之后，可以直接通过滤镜完成对相片的美颜功能。相比于微信，要去切换至其他美图的app，这种功能的自然过渡符合用户美颜照片的心智模型。在整个流程中，他们将滤镜控件整合为用户发布照片的流程的之一，而不是单独的作为一个独立的功能，放置在另一个位置，这种无缝添加的微交互流程，是基于对用户使用场景的洞察，使用户感觉时刻可以在可控制的范围内，而不是偏离他们原本的预期。

从上可看出，基于使用场景的思考，可以更好的洞察用户在使用场景中的需求，使交互流程更加灵活多变，设计方案跟随场景变化而变化，用场景代替功能，将需求自然而然过渡到功能体验上来，使功能更加具有意义。

3.情感化细节设计，激发用户动机与决策

情感化设计一直是增强用户体验的“引爆点”。在一些场景下，加入社交元素、游戏元素以及个性化元素，可以大大增强用户的参与度。

Gogobot 是一款移动旅游分享应用，他通过地理定位功能，记录用户去过的地方，并且让用户点评商店、景点、分享在gogobot平台上。除此之外，在旅游场景下，她捕捉了用户在旅途中习惯于收藏旅游明信片这样的一个细节行为，为app提供了一个直觉且简单的功能－制作明信片，这样不仅可以提供用户定制化服务，还可以激发和引导用户为其他旅客提供旅游资讯，通过场景化的思维方式解决了用户在平台上获取真实旅游资讯的真实需求。

图6，GOGOBOT制作明信片

小结

场景化思维是思考用户需求，寻求解决方案的重要技能。通过场景化的思考，可以帮助设计师重新定义用户的真实需求，探索场景中用户、地点、事物之间的内在关系，通过这种方式逐步去理解设计，探索新的交互方式的可能性。

原文链接:dianrong

交互设计从来都不容易。它包括了用户行为的深度分析，和一丝不苟的规划。随着新技术和交互设计模式的出现，事情并不会变容易。

艳丽的图片、顺畅的鼠标悬停效果和意外的动画，不再那么容易引起用户注意了。但难题却没有解决——如何创造令人愉快的用户体验，让用户面带笑容完成转化？如果你对常见的设计陷阱有所警觉，就能更少犯错。

为了方便——可能也为了让你知道你不是独自一人——以下总结了最常见的交互设计误区。

1. 铺天盖地的创新

网页设计师都非常有创造力。我们希望通过作品来表达自我。我们总是在寻求创新的设计方法来脱颖而出。但是，当涉及到交互设计时，创新并不总是好事。甚至会给你的网站带来坏的影响。用户渴望熟悉的事物，他们总是会遵循一些特定的操作方式。

Randy J. Hunt，Etsy的创意总监和Product Design for the Web作者，清晰地陈述过：“嘿，设计师：别再TM自作聪明了。”在文章中，他详细解释了为什么别在网页设计上过分热衷创新。

以Iotorama网站为例。它挺漂亮，音乐深情，但是看着满屏幕移动的球，用户不知所措。不要误解我的意思，这个项目非常出色，超级有创造力！我喜欢这个大胆的创意，但它一点也不直观。

还有一个例子。Safety on the Slopes项目背后的创作者想到一个巧妙的交互式图形，用来警告用户冬季运动的危险。非常创新，同时也很直观、有趣、令人印象深刻。

2. 令人困惑的导航

“不要自作聪明”的准则也可以沿用到导航上。有些设计师试图使用折衷的名称来寻求新颖。比如Chijoff网站就让用户不知道他们究竟提供什么，如何聘请他们。需要看上好一阵子，才能理解“共同创造”页面实际上就等同于“服务”。甚至还有，通读整页后用户仍然不知道该怎么做……页面末尾只有个小注册表单用来获取最新的行业新闻和提示！在“联系”页面也没有表单，只有邮编和邮箱地址。使人们联络或聘用他们非常困难。

你能猜出“Universe”在Maison Margiela网站中是什么意思吗？实际上它链接到他们的Facebook主页。谁能想到？

相反，看看legworkstudio的网站。它的创意与超凡令人震撼。导航非常清晰不含糊。用户绝对不会迷路。

3. 杂乱无章

有一段时期，网站都试图把一切可能的东西摆上台面。那些日子已经一去不复返，但是很多网站仍然在犯这个错误。看看这个在线商城：

设计师试图坚持一种单色配色，但是大量颜色不同的色块、logo和字体，在这个页面上就足够让用户步履蹒跚。搜索框有着醒目的文案：“那么，今天你想要什么？”，但整个布局的外观和感觉非常过时。

EBay是主要在在线零售商之一，在这点上做得不错。没有用产品图片、促销和各种行动召唤塞满整个页面，而是保持它干净简洁，强调他们确实希望用户首先关注的东西，并附上清晰的提示，接下来该怎么做。

4. 注意对比，大哥！

对比是创造视觉层级、吸引用户注意特定元素的最重要的方式之一。在网页设计中，对比不仅仅意味着颜色使用，也包括尺寸、形状和位置。

这个网站是最简单生动的例子。他们做到了统一一致，但整体背景和按钮并不够吸引人，尤其是在订购按钮上。

相比来看这个。颜色选用很接近，但结果却完全不同。而且，创新的滚动效果，流畅地介绍了产品的新功能——反光材料。很酷，对吧？

5. 忽视表单样式

表单设计是用户体验最基本的部分。每个网站都有一个目标——无论是树立榜样、直接售卖产品或是提供信息。不幸的是，许多网站有着光鲜的首页，却宁可用长表单和复杂的验证码来使用户厌烦致死。除非用户有强烈的先导动机，否则他们就会离开。

有了JCF这样的有效的跨浏览器的解决方案，是时候忘记那些丑陋的默认表单元素了，转向一种更加沉浸的用户体验吧。

另一件气人的事，是表单要求太多信息，或者没通过完善测试。例如sketchybusiness.io的表单高亮显示了所有的空白框，甚至包括非必填项。

如果你看了mostlyserious.io的表单，你绝对会喜欢它的鼠标悬停和按钮按下状态。而且，“别害羞”的提示文案增加了一丝亲切幽默的感觉。

最后……

不要懒于测试！对你重要的对于顾客未必重要。他们在哪里遇到问题卡住？是导航、奇特的视觉差滚动效果、还是长时间加载的视频？用户测试的最大好处之一，是你可以通过用户的视角来观察，关注他们的需求、做出改进。不要抑制你的创造力。要牢记网站访客可能会感到困惑和沮丧。

你见过最糟的交互设计错误是什么？可以在评论中分享你的想法和故事。

原文链接：http://designmodo.com/5-interaction-design-mistakes/

译文链接：http://colachan.com/post/3458

在交互设计中如何加以利用时间？它是可控的吗？

元素的时间控制难以描述，但我们都能感觉得到，从令人厌烦的等待加载，到令人愉快的轻松穿梭于页面间。时间控制的范围很广，大到可感受到的时间增量，小到区区毫秒。单独看似乎没有意义，但无论如何，它积累起来就能影响用户的看法。

本文中我们讨论的内容涵盖一切随时间变化的元素：视频、音频、动画等等。我们会从时间为何重要讲起，然后讨论时间控制的要素，还有如何改善它们，之后我们会探索快速和简洁如何发挥作用。

时间为何重要

时间是个难以掌控的概念，因为它的范围如此广阔。就像一个电子的大小，相对于我们银河系几乎无法察觉。一毫秒的跨度也一样，相比一个千年，根本感受不到。

但是数字世界的时间与人类的时间不同。几秒的差距，就决定了体验是令人沮丧还是令人愉悦。我们可以把它归为基本的人类心理学：

1. 记忆与注意力是有限的——正如我们在交互设计最佳实践中描述的，设计师应当评估界面的认知负荷。否则，用户会苦于短暂记忆导致的信息丢失，使他们沮丧。
2. 人们必须感到一切尽在掌控——没有人愿意受科技的支配。正如我们最新的博文中陈述的，有些人仍然把计算机作为黑盒子对待。让人等待的电子产品，会给人一种不够格的傲慢印象。

用户的操作是有节奏的。在用户体验领域，时间的度是以10的量级来丈量的。用户判断是否值得在一个网站花费时间，只需要0.05秒。如果它们决定留下，通常会在2-4分之内离开。

无论目标是更新你的Facebook信息流，或是在Amazon上对比购买产品，每项体验都可以分解为一系列的交互，交互操作之间的耗时对用户体验会产生复合影响。

交互设计中的时间要素

那时间和交互设计具体有什么关系？设计顾问David Malouf相信，时间把交互设计与其他用户体验学科区分开来。时间远非线性的过程，因为随时间流逝所有交互都会发生。Malouf建议，我们可以具体从3个不同角度来检验时间：步调、响应和环境。

1. 步调

在设计方面，步调与固定时间内完成的事情息息相关。你马上就会想到，“那么用户完成的事情当然越多越好”，但这未必正确。

来源：席克定律

根据经验，操作流程远比可用的操作数量重要。席克定律说到，过多的界面元素实际上阻碍决策（因此也影响目标的完成）。

想一想，比如有一组庞大的注册表单，和另一组分成多页面的小表单，两者信息相同，会有怎样的区别。长表单会花费更少的时间，但一系列小表单似乎更容易掌控，对用户也不那么复杂。

下面的例子来自LinkedIn，结合表单引导和进度条是个很不错的策略，改善了体验的步调。创建一套专业档案所需的冗长过程被分为4个可掌控的步骤。用户也能看到它们的进度到了什么地步，这会激励他们继续进行。步调与效率关系不大，更多是用户是否对体验感到舒适——不会使他们负担过重，也不会减慢它们的速度。

来源：LinkedIn表单引导

2. 响应

产品的反应时间与用户的掌控程度直接相关。Jakob Nielsen说过，电子产品最重要的3个响应时间范围是：

• 1秒——直接控制——用户感觉他们在直接操纵这个系统，就像使用真实的工具一样。除了结果的视觉呈现外，不需要任何反馈。
• 1秒——间接控制——用户会注意到延迟，但在网站的体验中仍然感觉尽在掌握。比如对于加载新页面，这个延迟是可以接受的。
• 10秒——部分控制——用户的注意力已经转移，操作流程中断。反馈对于减少半途而废至关重要，这就是加载界面如此流行的原因。

响应时间中的延迟必须与任务的重要性相称。例如，加载云端面板，5秒是可以接受的。但是触发一个下拉菜单就不可忍受了。延迟越长，用户与界面之间的关系就越趋于分裂。

来源：UXPin

3. 环境

如何、何时、何地，甚至为何使用一个应用，都对时间感知有所影响。

比如，网站的平均停留为2-4分钟，尽管电商销售流程的平均要持续28分钟（这甚至都没有考虑销售的品类——买一辆车可得花上几个月）。同样的，那些在商场购物会通过移动设备比价的人，比坐在家中沙发里购物的人更重视速度。

来源：理解企业中移动运算的时间、地点与环境

如果你发现用户过早离开你的网站，你就得修改链接文案了。你还可以检查页面的视觉层级（颜色、对比、字体），确保重要的信息得到了强调。

但是，这些吸引眼球的方法，在单独一页沉浸式内容中或许有违直觉，例如博客。这种情况下，你最好善加利用留白来强调内容（就像Medium那样）。同一个获取注意力的策略，依据网站类型的不同，会产生两种不同的效果——这都取决于环境。

越快越好……在某种程度上

讨论一个界面的步调时，我们提到过并非总是越快越好。

坦言之，绝大多数时间相关的可用性问题，都由于系统反应太慢。但是，也有些情况速度太快反而不好。通常，速度太快的界面会导致两个问题：错过信息，或是用户跟不上。

来源：FourSquare_

1. 用户错过信息

信息变化太快时，用户只要看一眼屏幕的其他地方，就会错过它。这些通常适用于并非由用户触发的意外操作，而且通常这个变化离相关操作越远，越容易被忽略。有简单的补救方法可以将注意力引向这些变化，通过恰当处理的动画效果（我们稍后会讨论）。

我们可以把西门子作为界面速度过快的例子。此例中，向用户展示了如下页面，然后询问他们是否发现了西门子有洗衣机的特别促销。

来源：Auto Forwarding

正如Jakob Nielsen，Nielsen-Norman Group的联合创始人所描述的，即使页面顶部以巨大文字展示了促销信息，用户还是没看到。为什么会发生这种事情？因为轮播图（其实更像手风琴效果）每5秒自动切换一张。每次屏幕切换，唯一的指示器就是右侧的边栏——它通常都被忽略了，因为这两个行动召唤看起来像是banner（从而引发了banner盲区）。

2. 用户跟不上

即使用户注意到屏幕上快速切换的动画，也未必能理解。这通常发生在轮播图、旋转体和其他自动切换功能中——用户被图片激起了好奇心，当他们把鼠标移上去，它已经变成了另一张不怎么有吸引力的图。

可以发现，先前西门子的案例就是糟糕的用户体验决策的综合体。无论如何，5秒的轮播图是其中最糟糕的。因为它占屏幕主导地位，轮播图立刻就能吸引用户注意。但是这个轮播图每5秒改变一次，使用户迷失方向，并没有清晰表达出促销信息。用户并没有触发这个操作，于是为了努力赢回用户体验的控制权，他们对用户体验的其他不足更加敏感（比如糟糕的文案）。

来源：应该使用轮播图吗？

实际上，最好是摈弃自动切换的轮播图，因为它们最擅长分散注意力，最让人沮丧。目标与轮播图内容无关的用户，会发现它令人分心。真正需要了解其内容的用户，又无法及时反应。

对于非母语用户，响应问题更严重。年纪越大，或越不熟悉科技产品，越难以使用。要确保你的界面反应不至于太快，这些建议很有帮助：

1. 让用户手动控制——屏幕上的快速变化，必须限制为由用户的操作触发。否则，这就违反了最少意外原则，这是指用户通常都不喜欢突发事件。
2. 用动画来减慢速度——用800毫秒到1秒之间的动画来表现屏幕上的变化。
3. 给每个轮播图留出足够的时间——如果你必须用自动切换的轮播图，要大声朗读其中文案，然后所花时间再乘以2.5。这就是每张轮播图应该停留的时间。还有当鼠标指在轮播图上，要确保切换暂停。

记住，交互设计中，感知到的就是真实的。令人愉快的等待，远比推着用户列队前进要好。

点击要简单，而非快速

既然提到速度，很有必要纠正另一个普遍的设计误区，3次点击原则——这个原则指出，用户通过3次及以内的点击，应该要能查看网站的任何内容。对于这个3次点击原则的最佳描述，可以说“意图是好的，但造成了误导”。

来源：你仍在信守的5个用户体验谎言

Hubspot的前用户体验总监，Joshua Porter创作的这张图表表明，点击次数与用户的满意程度并不存在确切的关联。其中的教训是，设计师应当少考虑让用户尽快完成任务，多考虑让用户尽可能容易地完成任务——目的不同，是界面设计存在差异的依据。

为了进一步印证我们的观点，看看这张图表。它遵循了3次点击原则，因为任何页面确实可以通过3次点击到达，但这种模式真的提升了可用性吗？它其实损害了可用性，因为用户得从过多的导航中过滤出他们的选择。而且，当他们到达新页面，他们需要再次从众多选项中过滤。

来源：Oracle

看看上面的Oracle网站。当然，你可以在3次点击内进入任何产品类目（例如数据库或Java），但你真的想这么做吗？

相反，我们建议遵循1次点击原则：每一项交互都让用户离目标更接近一步。这种策略有助于缩减顶级导航的项目数量，而不会使用户迷惑。它有助于让人关注探索的体验，而非探索路径本身。

来源：Chase

1. 打开了我的帐号页面。我看见一个行动召唤，Ultimate Rewards，我点击了。

来源：Chase

1. 进入了奖励页面。我看见选项Use Points和Earn Points。我点了Use Points。

来源：Chase

1. 当来到点数兑换页面，我能看到有多少点数可用，有多数可以兑换。我选定了数量，兑换现金，然后达成了目标。

来源：Chase

这需要3次以上的点击，但每次点击都只花很少的精力。而且每次点击都让用户在通向目标的道路上更进一步。现在，如果你仍然坚持3次点击原则，你可能会把顶级导航其中一项设为“使用奖励”。点击次数当然减少了，但这种扁平式的策略实际上会展现过多的项目，难以同时筛选过滤。因此为了更短的点击路径，牺牲了可用性。

我们想要强调3次点击原则背后的精神：点击应该尽可能简单和直观。并非确保用户在网站上所花的时间最少，而是值得的。

总结

提到交互设计，一秒的延迟就能左右成功与失败。如果用户体验太慢，人们会感到沮丧。如果太快，人们会错过重要信息（或者不明白它的意思）。理解人类对于时间的认知、速度（和轮播图）的限制，还有直接点击的重要性。

如果有疑问，记住这条简单的可用性原则：清晰就会顺畅，顺畅就会快。

原文链接

译文链接

作者信息：
Jerry Cao
Jerry Cao is a content strategist at UXPin — the wireframing and prototyping app — where he develops in-app and online content for the wireframing and prototyping platform.

科幻作家艾萨克·阿西莫夫在他的机器人系列故事中创造了“机器人学三大法则”。这些法则被永久性地植入每个机器人，作为防止灾难、保护人类的最后一道保险。我很好奇，我们最后一道保险是什么？对于交互设计师而言，三大法则又是什么？

用户对于界面的感知，离不开它的形式、内容和行为。就像工业与平面设计师专注于形式那样，交互设计师将行为作为最重要的元素来考虑。要通过设计来左右用户的体验，首先要考虑我们的三大法则，界面的行为如何表现，它对用户的行为产生什么影响。它们必须得作为稳固的基础，在它之上构建其他交互设计原则。幸运的是，我将要运用的三大法则早已有人提出——三大法则的主人，Mac电脑项目背后的大脑，Jef Raskin。他在他的著作The Humane Interface的某一页中写下了这三条铁律，本书在交互设计中的地位接近圣经。细细品读，你会发现现代最流行的用户界面，都采用了这本里程碑式的著作中的概念与技巧，其中也包括微软和苹果的设备。

第一法则

善加利用阿西莫夫的三大法则本身，Raskin写道“交互设计第一法则应该是：电脑不应该妨碍你的工作，或由于不作为而使你的工作受到损害”[1]。我们都应该牢记，电脑是一件用来完成任务的工具；最终目标不可能或极少情况下是使用软件本身。因此，我们可以一致同意，在电脑上最恶劣的体验就是让工作蒙受损失。唯一一件比丢失已完成的工作更糟的，是丢失无法精确还原的数据，比如创意类的工作。

当你键入时，应用应当如实反映数据，并尽可能防止你丢失工作。可能你会觉得这只是工程师该考虑的。开发者应该确保他们的软件有防护措施和冗余，来防止数据丢失（还有一些潜在bug），不是吗？实际上，数据保护与工作保存也是界面设计的任务，作为设计师必须预先行动——通过用户研究——发现用户会如何损失工作，或是不得不重复工作。这就意味着要加入一些保护，比如强大的撤销功能和破坏性操作保护，来防止无意的数据丢失。很棒的一个例子就是GitHub仓库的删除对话框，它确实发挥作用，不同于其他确认对话框，它强迫你输入仓库名称才能继续。这个技巧很聪明，在删除过程中迫使用户的注意力集中到仓库名上。安全措施防止用户习惯性的操作导致损失。

GitHub删除确认对话框。

第一法则也适用于保存用户的工作相关与内容本身。比如，要选择一系列项目进行操作（比如说文件），需要大量的精力。因此，建议在工作流程中保留选中状态，将它们保存在一个可以撤销的操作列表中。类似的，如果界面允许用户对元素进行自定义或排序，这些排序或自定义都应该保存下来。

为什么Apple的Time Machine和自动保存，还有Dropbox的历史版本这么棒，就因为遵守了第一“法则”。它们承认人类会犯错这个事实，尽管用户可能会触发一个破坏工作或数据的操作，那并非他们的意图。

Apple的“浏览所有版本”功能非常棒。

第二法则

Raskin继续写道，好的第二法则应该是“电脑不该浪费时间，或要求你做非必要的工作”[2]。很常见的情况，用户肩负众多任务，因为人工执行一项任务比编写一个系统让它自动执行简单的多。这些情况下，如果技术允许，电脑应该承担起这些工作。比如迫使用户选择信用卡的类型，虽然从卡号就可以推断出来。

Stripe就做对了，自动检测信用卡的类型。

用户学习一套新的界面或系统数据模型，所花的时间与精力也要纳入考虑，要与总工作量取得平衡。用效率较低的方式执行一项操作，或许比学习一种高效的新方式再操作工作量少。用户只原意与少量界面进行交互。至于其他，稍加牺牲效率，换取更加直观的操作或许是值得的。

假设某种状况下你需要迫使用户改变他们自己的思维模式，这时需要谨慎。因为这项设计抉择会影响用户的内容结构（通常出于技术要求），而非让他们自己决定如何组织信息，或是使用他们熟悉的结构。优秀的界面以用户最想要最易懂的形式展现信息系统。以多数银行希望你存钱的方式为例。通常，你需要把钱分几个账户存，或是存在一个账户上，然后自己判断哪些不该花。Simple用了另一个方案。相比强迫用户思考存款的运转方式（比如在银行账户中），Simple让你简单通过“目的”设置任意数量的钱，这些数目与之后的交易一起，都在“可使用”余额的追踪下。

Simple的“可使用”能辨认出人们确切的用钱方式。

第三法则

我相信，Raskin的书余下的所有部分，讲的就是第三法则。他说界面应该是人道主义的；它应当“响应人类的需要，并且体谅人类的弱点”[3]。这是整部以用户为中心的设计的核心定律，由此得到其他的交互设计原则。好的交互设计永远都会尊重人脑和身体的局限。它有必要对我们的本能物理反应和文化价值保持敏感。

让界面变得人道主义的一个例子，是围绕人们同时只能注意一件事情进行设计。比如，键盘大写锁定键上的指示灯。它本身并不是个好的解决方法，无法避免误触开启大写锁定模式，因为用户按下时，关注点通常不在按键上。Mac的密码输入就处理得很好，它在输入框内提供了视觉指示，表明大写锁定被开启了，用户此时就在看输入框。

大写锁定的信息就在你需要的地方。

“响应用户需求”的一个例子，是在他们进行操作或执行工作流程时，持续展示用户关心的内容（注意：他们关心的是目的，而不是你的应用）。看看Amazon，它自动显示你查看的镜头是否匹配你近期购买的相机。

Amazon的相机镜头匹配组件。

最后一条“定律”是交互设计定律的精髓。在今天的世界，要知道设计界面非常重要的一点就是人道主义，从认知的格式塔原则和平面设计原则，到相关的文化心理学。我们的工作永无止境。随着时间流逝，技术前景和我们的文化环境在缓慢改变，我们将颠簸前行，继续演进我们的设计与设计流程。

无论如何，这三条定律是我不断回溯的基本准则，它们再三成为成功的界面的试金石。在你决策界面的外观和行为时，牢记它们很有帮助，不论你最终设计的美学样式如何。

总结

1. 电脑不应该妨碍你的工作，或由于不作为而使你的工作受到损害。
2. 电脑不该浪费时间，或要求你做非必要的工作。
3. 界面应该是人道主义的；它应当响应人类的需要，并且体谅人类的弱点。

原文链接

译文链接

来自UXPin的Jerry Cao，通过本文向我们解释了如何保持视觉与交互的协调。

我不想贬低文字的重要性，但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互，但那些视觉元素（比如图标、菜单、图像等）才是用户实际上操作的东西。虽然有些可用性专家会提及Craigslist甚至Amazon，作为丑陋但可用（而且受欢迎）的网站案例。但毫无疑问，美感总会有所帮助。

情感是用户体验的关键：视觉设计优秀的网站能使用户放松，提升可信度和易用性。考虑到多数用户注意力短暂，认知往往成为事实：如果视觉做得很糟糕，用户不会费神去深入研究你的交互设计。

让我们来细说视觉的重要性，因为它关系到交互，保证了清晰的方向指引和一致性。

01. 尊重视觉的主导地位

我们从案例展示开始。看看下面的文字：

很显然，我们都知道“黄色”一词所指的颜色。但当多数人看到它时，他们理解到的可能只有红色。文字的外观取代了它的真正含义。

信息图专家David McCandless表明，我们大部分的脑力资源都花在了视觉上。

作为人类，视觉是我们的主要感观。但是其他动物更多依赖听觉与嗅觉，我们是视觉主导的生物。正如数据记者兼信息图专家David McCandless在一场引人入胜的TED演讲中提到的，我们会调动全部感观，但多数的脑力都花在了视觉上——虽然我们很难察觉。他用计算机进行了类比……

“视觉是感观中最迅速的。它和计算机网络的速度相同。之后是触觉，相当于一个U盘的速度。然后才是听觉与嗅觉，约等于硬盘的速度。

“后面才是可怜的味觉，运算速度几乎近似便携式计算器。角落里那个小方块，百分之0.7，那就是我们实际了解的量。所以你的很多感观——绝大多数感观都是视觉上的，它蜂拥而来——你却浑然不觉。”

视觉影响行为，也影响体验，Stephen P. Anderson说。

但是对于交互设计这意味着什么？它意味着你对产品做出的每一项视觉上的决策，都对交互有极大的影响，即使是在不知不觉间。

产品设计顾问Stephen P. Anderson指出，视觉影响的不只是体验，也会影响用户的行为。

这就是说好的视觉设计可以提升销量，提高注册量和转化率，激发某些特定的用户行为。看看下面这两个表单：

表单A

表单B

记住，交互设计的目标之一就是让用户尽可能少地思考。你认为哪个更有利于销售？哪个视觉上看更舒服？

第一例中，那密集恐惧症般的间距和过量的文字，让用户望而却步。第二例则色彩丰富、优美，看起来更简洁（尽管用户都得输入这些信息）。

由于交互设计就是要创造人们想用的东西，有吸引力的事物更激发人的渴求，因此更能发挥作用。

图片和导航在这个在线香料商店中相互协调。

不过除了吸引人的交互，优美的设计也提供了一层额外的理解。看看上面这个Old Town Spice Shop案例，你会发现这个网站的橱柜式布局立刻暗示了这家公司的意图和香料产品。

尽管你可能会质疑，用户先看到橱柜还是“Spices”和“Extracts”这些文字。毫无疑问的是，两者相互协调。

02. 提供清晰的方向与指引

用户不会漫无目的浏览网站。人们通常都有个大体概念他们要去哪，但还需要一些指引和线索。他们会在脑海中创建地图，既然我们刚刚提到人是视觉生物，那么就需要一些视觉路标来指路。

某种程度而言，你的导航要像GPS那样。用户需要了解他们当前位置，哪些路线是可行的，下一步该怎么做。

面包屑导航是满足上述3项需求的最直接的方式。就像下面的Newegg 这种常见的UI模式，这种方式给用户留下了清晰的视觉踪迹，来追踪他们的访问过程。

但面包屑导航应该作为备选方式，因为对于页面间的点击跳转，它们在视觉上并不直观。它们多用于层级复杂的网站，比如电商网站，简单的网站不需要它。如果对此持疑，回顾你的网站地图，看看加入面包屑导航能不能提升易用性，或者只是添乱。

面包屑导航、链接——还有菜单、搜索框和可点击的图标——都是基于视觉的手段，让你建立方向和指引。谈到主导航时，你需要让它给人留下强烈的视觉印象。

如果要学习更多导航的最佳实践，请看我们的免费电子书Web UI Design Best Practices，还有这本5-part series，讲的是交互设计中对导航的简化。

03. 确保视觉统一

一致性在交互设计的所有方面都非常重要，不只是视觉。无论如何，视觉上的不一致是非常醒目的（看看世上最糟糕的网站），见证一下设计的地狱。

有些事是不该做的。

一致性展现了网站在设计和排列方面的逻辑，创造更加令人愉悦的体验（我们都知道，开心的用户是会回头的）。

我们之前提过，人们更喜欢统一是因为它增加了可预知性（降低学习成本）。如果你的界面容易学习，它也会更容易使用。人们不喜欢令人不快的惊喜，正如惊讶最小化原则中所说：

不一致引发的问题，是它增加了“认知负荷”。Nielson Norman Group的用户体验专家，Kathryn Whitenton，在热议博文中解释过，认知负荷是用户在使用产品时需要思考的量。

一致性展现了网站在设计和排列方面的逻辑。

每项不一致都迫使用户停下脚步，来处理此处不同所表达的含义，它为何不同，又是如何影响他们的行为。因此，不一致的地方越少，交互越顺畅，体验越好。不一致的现象几乎无处不在：UX Matters的Michael Zuschlag有一张有用的图表。

例如，单选按钮在界面某部分只允许单选，那么它在其他部分就不应该多选。文案也该如此，既然在某个部分用了“保存”作为名称，在其他部分里就不该称作“储存”。如果某张图片触发了一个弹窗，那它在别处就不该打开新窗口。时刻要问自己，“我希望用户如何操作？”

04. 将UI设计模式作为基准

UI设计模式，可以理解为特定情况的最佳设计实践。既然用户已经熟悉各种设计模式，使用它们降低了界面的学习曲线。常见的UI模式包括旋转木马、相关链接、幻灯片……还有更多（可以从这个网站看到，它致力于给它们分门别类）。

Netflix用了相关内容模式，来帮你找到其他可能感兴趣的节目。

比如，Netflix使用了“相关内容”UI模式，帮助用户找到其他可能感兴趣的电影或节目。由于内容是智能生成的，用户交互感觉更像是有人在推荐有用的内容。这并不是一项开创性的设计，但它是个快速有效的解决方案，让你的界面鲜活起来。

当然，UI模式并非即插即用的模块，你还是得基于网站的外观与感觉为它们特殊定制。

要为产品寻找正确的模式，你可以查看各种模式库，通过它们的分类来浏览各种模式，比如“导航”或“输入框”。今年，我们发布了两个单独的UI模式系列（还有财富榜500强企业的使用案例分析）：2014网页UI设计模式和2014移动UI设计模式。

05. 通过风格指南创建一致性

虽然UI模式有助于提升熟悉感，风格指南才能确保全站统一。

风格指南是一部手册，列出了产品的特殊偏好，这些部分很难记忆——比如全站内容的尺寸和字体、主导航的主色与辅助色的颜色梯度、按钮点击状态的表现，等等。

来这里www.yelp.co.uk/styleguide看看Yelp的风格指南。

在UXPin，更新网站时我们会创建风格指南。这能帮助我们估计出额外的工作量，因为我们可以把带有技术细节的截图添加到公司内部wiki中。正如我们在从风格指南到效果图中描述的，这种“拼拼凑凑”的方法对于简易的风格指南非常有效，可以分享给整个公司。

我们在网页UI设计最佳实践中充分讨论了风格指南，包括如何制定、需要包含什么。要了解关于风格指南的更多案例，请看以下几项绝佳资源：

• Starbucks
• MailChimp
• Yelp
• BBC Gel

要深入学习交互设计中的一致性，请看这篇全领域创建用户体验一致性，还有这篇系统、平台和现实世界的统一。

精华总结

人们上网时，他们说自己在“看”网站，而不是与它“互动”，尽管后者更准确。我们严重依赖视觉，视觉引导我们建立观念、解决问题，我们所相信的会引导我们的行为。由于交互设计如此贴近用户体验，通过视觉打造最佳的用户体验，虽然间接，但确信无疑促成了更好的交互。

要深入学习，可以下载这本电子书Interaction Design Best Practices: Words, Visuals, Space。视觉案例研究包含了30多家公司，其中有Google、AirBnB、Facebook、Yahoo。还有一些专家的建议，比如Stephen P. Anderson、Jared Spool等等。

原文链接

VIA: 可乐橙