线框流程图:一款用于工作流程或APP的UX交付

摘要:线框流程图是线框图和流程图的组合。当一些页面在动态变化时,它们能够记录工作流程和屏幕设计。

介绍

在UX领域,线框图是一种常见的的用来表现页面层级布局理念的交付,然而,流程图对于记录复杂的工作流程和用户任务是十分有用的。尽管这两种交付都普遍用于UX领域,然而它们并不是交流设计想法的最佳工具,尤其是在记录没有很多独特页面,却有一些会因用户交互而内容(或布局)产生动态变化的多核页面的手机、桌面、或者 Web APP 的时候。最近几年,一种可供选择的叫做线框流程图的交付,作为解决这些问题的方法浮出水面,线框流程图过去常常被用来表现普通用户任务中上下文的设计。

客官莫急,小的正在拼命为您加载~~

一个网页线框图能够传达那些主要是静态页面的网站或应用的布局想法,内容和页面层级设计,但它在交流复杂的动态操作流程时是没用的。

客官莫急,小的正在拼命为您加载~~

流程图被用来描述后端进程和用户任务流程(正如这个例子),然而,对于UX使用来说,它缺少页面的上下环境——一个严重影响用户体验的因素。

线框流程图作为一种工作流程交付

定义:线框流程图是一种将线框图式的页面布局设计和简化后的像和流程图一样的交互表达方法相结合的设计规范板式。

客官莫急,小的正在拼命为您加载~~

这个低保真线框流程图展示了一个简单的用户任务。屏幕设计的使用,而不是用抽象的流程图符号,使我们能够持续聚焦在这个用户将发生交互的产品上。线框流程图能被高保真创作用于交流详细的设计规范的同时,它们跟用来讨论交流交互设计和用户工作流程的低保真文件一样是有用的。

线框流程图作为一种团队中设计移动端APP时的普通方法出现,在流程图中的每一步都相当于一张填满手机屏幕设计的线框图。因为相对而言,手机屏幕尺寸较小,真实的页面设计(如线框图)能够十分容易取代线框图中的抽象符号。然而,线框流程图不仅限于记录移动端应用和网站——它们同样能被用于桌面产品,典型地就是被用来展示一个屏幕或网页因用户交互而变化的那部分。许多电子商务购物表单和收银台页面的设计,同样适合用线框流程图来细化。

为什么我们需要新的东西:流程图和线框图不能很好的记录复杂的APP

通常说来,介绍一个规范化的新样式是不好的,因为许多相关者不知道如何去解释它。通常来说旧的东西更熟悉。然而,我们确实喜欢线框流程图,因为对于之前见过线框图和流程图的人来说它很容易学,并且线框流程图有足够的优势来克服其他同类产品中的不足之处。

线框图是一种很好的表现布局的方法,但是它们不能很好的描述交互,它们尤其不能很好的记录一个带有很多动态内容的电子产品的布局,例如移动APP和Web APP。当记录带有很多不相关联的、相对静止页面或屏幕的网站(或者其他电子产品)时,线框图是很有用的,因为在这些页面或屏幕上,点一个链接或按钮通常会导航至一个完全不同的页面。

然而,很多现代Web APP和移动端APP只有很少的完整页面,但会基于用户对产品的交互,通过AJAX(或者其他科技)相应地改变内容和布局。不论是选择分类或过滤,产品页面展示就会发生变化的电商产品,还是基于工具、模型、或其他控制参数之间的交互,整体布局和信息的展示就会发生强烈变化的,复杂的、创造性的或技术性的应用,它们都有涵盖。在这些案例中,线框图不能很好的抓住各种布局的可能性,或者内容变化的规则。除此之外,线框图也不能够记录在用户与页面发生交互后,系统呈现给用户的重要反馈。(和系统认证过的用户进行交流得到的反馈,对于一个好的用户体验来说是至关重要的,这在十大易用性原则中被排在第一位。)

另一方面,流程图是一个能全面记录复杂的工作流程和带有多重步骤或路径的交互信息的工具,但常常会忽略交互中的上下环境以及它对用户的影响。用流程图作为一种主要的交付来记录(或构思)交互设计或含有多种用户任务步骤时,会忽视一些在表现在页面上下环境中的信息,而那往往会影响交互的成功。

线框流程图记录交互信息

线框流程图中十分经典的用例图是用来记录一个用户在产品上完成一个普通任务的过程(如,在一个社交媒体APP中“直接发送一条信息给你联系人中的某个人”)。线框流程图中的每一步,一个简单的线框图,或高保真屏幕设计都表现了用户可能用到的屏幕。

箭头是用来表示用户发生行为的特定UI组件(例如点击一个按钮,点击一个链接,等等),指向另一张作为交互发生结果的线框图。交互需求的第二个“点”的不是一个独立的页面或屏幕,而是,它能展示同一个页面中的交互结果,例如内容的改变,展现了交互结果的界面反馈(例如,一个确认信息弹出来,一个颜色的改变,或者一个错误提示)。为了减少线框流程图中的歧义,在流程中箭头能够清晰的说明点击这个“热点”(或者任务)会指向哪一步这是十分重要的。对于一个在单个页面中拥有多重行为目标的复杂Apps,能够清楚的表明热点触发行为尤为重要。

screen-shot-2016-12-12-at-4-59-34-pm

在这个简单的线框图中,展示了一系列的在一个常见的用户任务流程中多个移动端APP 线框图,每一个线框图都代表同一个APP页面,而不是代表了不同的APP页面。每一个步骤都清楚表示了在一个任务流程中热点所连接的下一步。除此之外,在第二步中线框流程图展示了视觉反馈的作用(为了标记这次点击,点击专辑时背景颜色发生了改变)。

除了被大量频繁用于移动端APP,线框流程图对于记录复杂的桌面应用和Web应用同样是有用的。由于用一个全屏桌面线框图来表现一个进程中的每个步骤会浪费很多空间,如果在每一个步骤中大部分的屏幕设计中会保持不变的话,所以仅仅表现屏幕在每一个步骤中变化的那部分(例如对话框,情态,过滤或者分类),就能有效的记录界面相关的,正在改变的那部分,同时依然能提供足够的上下环境。

客官莫急,小的正在拼命为您加载~~

对一个Web APP结构操作说明的做一个简后的高保真桌面流程图,不是屏幕设计的所有部分都需要呈现在每个步骤里的。由于桌面屏幕设计的尺寸更大,如果大部分能够被看到的信息没什么变化的话,没必要每一步都展示整个页面。用一种战术上的方法来展示相关屏幕设计,一种能够看到的只是因用户输入发生变化的那部分。

线框流程图不仅能够展示每个页面中的内容和布局会因用户交互而变化的APP和动态网站的工作流程,它也同样适合于记录在传统静态网站中的任务流程。然而关于用线框流程图来记录静态网站需要注意的是,每张线框图的尺寸可能过大,以至于会丢失被记录的进程的上下环境。

线框流程图对于合作构思

除了是一种程序相关人员和开发者之间交流的有用方法,作为一个团队之间配合的工具,线框流程图同样能够工作得很好。尤其在敏锐的环境中,跨部门团队间能够配合交流得好是十分重要的。

跨部门团队之间的设计研讨会能够碰撞出一些理解上的火花,在这些平行设计工作小组之中,团队成员构思和写下任务流程,然后整个团队讨论这些点,为了潜在的点可视化,UX用线框流程图的方式给每个步骤画草图(并且记录下团队已经同意的点)。

在一个配合的环境中,线框流程图不需要视觉上打磨,这种类型的讨论,用白板或者纸和笔画草图的方式快速的将想法和交互记录下来是非常有效的。

客官莫急,小的正在拼命为您加载~~

在一场NN/g UX 会议中的UX交付研讨,几个团队成员用粘上便签条的手机,标记笔,和纸来讨论一个设计环节中的流程图。这个过程用一个白板就能容易实现,或者仅仅用纸和笔。

结论

线框流程图是一种正在兴起的用于记录移动端和Webapps中用户工作流程和复杂交互方式的UX交付。它们非常适合于呈现一个APP中一个或几个页面的动态改变,通过大量的连接在一起的相对静止页面来捕捉流程却收效较差。作为一种团队间合作与构思的方法,用来思考用户工作流程、任务,以及构思进程中屏幕设计的每一步,线框流程图同样是有用的。

原文地址:https://www.nngroup.com/articles/wireflows/

交互设计的七个定律

关于交互设计的七个定律,开始之前,先说一段写在前面的话:
新手交互设计师,如何迅速成长?简单来说,新手设计师要争取做喜欢的事情。然后从做事中成长,进步会很快。

… much motivations matter. The Zune was crappy because the people at Microsoft don’t really love music or art the way we do. We won because we personally love music. We made the iPod for ourselves, and when you’re doing something for yourself, or your best friend or family, you’re not going to cheese out. If you don’t love something, you’re not going to go the extra mile, work the extra weekend, challenge the status quo as much …

这段话来自乔布斯传,大意是:

… 动机和热情至关重要。Zune设计不好是因为微软没有像苹果这样有热爱音乐和艺术的工作方式。苹果的胜利是因为员工热爱音乐,他们设计iPod是为了他们自己设计。当你是为自己、挚友、家人设计产品的时候,你才会全心全意、不迷失、不退缩。如果你不热爱这件事,你就不会付出额外的精力、时间,更不会去挑战自我、挑战现状 …

对于选择,当然不能盲目和冲动。但是如果思考好了前因后果,理清了风险和局限,就应该有一点点勇气。特别是年轻的时候,做你喜欢做的事情。

对于设计,诚然我们要考虑商业价值、技术局限、公司架构、市场导向、领导意见…… 但是回归本源,还是得看自己最初对设计的期待和梦想。一样,做你喜欢做的事情。

所以,做你喜欢做的事情。:)

交互设计七大定律

“除非有更好的选择,否则就遵从标准”,那在交互设计领域都有哪些法则定律被认作了标准了呢?

作为交互设计之父的阿兰·库珀最为人熟知的或许就是这句“除非有更好的选择,否则就遵从标准”了,在交互设计领域有很多经过了时间的验证的法则定律被认作了标准,那么你都知道都有哪些吗?

 1. Fitts’ Law / 菲茨定律(费茨法则)

cf288b82bee7c5c745192cd6cb06baad_b

定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。

它是 1954 年保罗.菲茨首先提出来的,用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。

定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。

它是 1954 年保罗.菲茨首先提出来的,用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。

菲茨定律的启示:

1.按钮等可点击对象需要合理的大小尺寸。

2.屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。

3.出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。

2. Hick’s Law / 席克定律(希克法则)

定律内容:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。用数学公式表达为反应时间 T=a+b log2(n)。在人机交互中界面中选项越多,意味着用户做出决定的时间越长。例如比起 2 个菜单,每个菜单有 5 项,用户会更快得从有 10 项的 1 个菜单中做出选择。

席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。

3. 神奇数字 7±2 法则

1956 年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个。

4. The Law Of Proximity 接近法则

根据格式塔(Gestalt)心理学:当对象离得太近的时候,意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框,因此当相互靠近的功能块是不相关的话,就说明交互设计可能是有问题的。

5. Tesler’s Law 泰思勒定律(复杂性守恒定律)

该定律认为每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计,收件人地址是不能再简化的,而对于发件人却可以通过客户端的集成来转移它的复杂性。

6. 新乡重夫:防错原则

放错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。

如上图所示我们的评论功能快,在留言框没有内容或邮箱格式不正确的时候是无法获取验证码的,只有两者都满足了才可以。

7. Occam’s Razor 奥卡姆剃刀原理(简单有效原理)

这个原理被称为“如无必要,勿增实体”,即如有两个功能相等的设计,那么选择最简单的。在极客公开课?走进 UC 中 UC 浏览器产品经理苏剑南在”UC 浏览器 For Android 产品设计思考“演讲中也有讲到该原理的应用,”如果 UC 手机浏览器要发布第一个版本 UC 1.0,你会选择哪五个功能?‘’

为了遵守神奇的数字 7 法则本篇就只介绍到这里了,如果你还有兴趣自己去找找其他的定律法则,如与费茨定律接近的 Steering Law转向定律、Gutenberg Diagram古登堡图法则以及雷打不动到哪哪适用的帕累托定律(80/20 原则)、三等分原则等。

最后想说的是虽然这些法则定律被很多人认定为标准,很多人也记得 Alan Cooper 说过的那句名言,但从实际出发这些法则定了起到的只是参考或启发作为,作为交互设计人员千万不能照本宣科,因为只有亲自做过后才会深有体会。

让你移动APP脱颖而出的小细节

Little Big Details For Your Mobile App
by Nick Babich让你移动APP脱颖而出的小细节

让你移动APP脱颖而出的小细节

你应用程序的成功,基于很多因素,但总的来说,用户体验还是最重要的。一个能在市场上脱颖而出的应用,用户体验一定很棒。对移动端产品的用户体验来说,追求最佳的体验是一条非常可靠的方法。在整体产品设计的时候,我们往往很容易忽略一些看起来很好,但又感觉不必要的设计元素。然而,好的与惊人的用户体验之间的区别往往就在于我们这些贴切的小细节的设计。
Your app’s success is based on a combination of factors, but the overall user experience tops them all. The apps that stand out in the market are those that deliver great UX. When it comes down to designing for mobile UX, sticking to best practices is a solid way to go, but during the creation of the big picture it’s fairly easy to skimp over design elements that feel like nice to have but not necessary. However, the difference between creating good experiences and amazing experiences often comes down to how thoughtful we can design these small details.

在这篇文章里,你会明白,为什么说这些小细节的设计与很多显著的设计元素一样重要,这些小细节的设计,同样决定着你的应用的成功

In this article you’ll see why these little big details are just as important as the more obvious elements of your design, and how they help determine the success of your app.让你移动APP脱

启动页
Slash Screen

当用户打开 app 时,最不能做的事情就是让他们等待。但是如果 app 的初始设置非常耗时,又不可能优化该怎么办?你不得不让用户等。如果他们愿意等,你得知道如何 吸引他们。启动页解决了等待的问题,让你有一个简洁有力的窗口来吸引用户。

When a user launches your app, the last thing you want to do is tell them to wait. But what if your app has a time-consuming initial setup phase and there’s impossible to optimize this step? You have to ask users to wait. And if they should wait, you should figure out how to engage them . A splash screen solves the waiting problem and gives you a short but vital window to engage a user in your proposition.

2-3

2-2

这里有一些小贴士,在设计启动页的时候记得注意:
Here’s a few tips to keep in mind when you’ll design a splash screen:
Google 和 Apple 都建议用启动页 模拟更快的加载 来提高用户体验。启动页给到用户即时反馈,表示 app 已经启动并正在加载。 为了保证人们等待的时候不厌倦,给他们一些 娱乐:有意思的,意想不到的,或者任何可以抓住用户注意力的东西,时间长到够 app 启动就好。
Both Google and Apple suggest to use the splash screen to improve the user experience by simulating faster loading times . Splash screen gives the user immediate feedback that the app has started and is loading. To ensure people don’t get bored while waiting for something to happen, offer them some distraction: something fun, something unexpected or anything else that catches your users’ attention long enough for your app to load.

3

如果 app 的初始设置超过 10 秒钟,考虑使用 进度条 来表示正在加载。记住,不确定时间的等待给人的感觉要比确定时间的等待更加漫长。所以,你要给用户一个清晰的标识,他们需要等多长时间。
If your app has a initial setup phase, which takes more than 10 seconds, consider usingprogress indicators to show that loading is in progress. Keep in mind that uncertain waits are longer than known, finite waits . Thus, you should give your users a clear indication of how long they need to wait .

3-3
Make the loading process feel natural by using progress bars.
通过使用进度条让加载过程更自然

让你移动APP脱颖而出的小细节

空状态
Empty States

我们通常会设计一个丰满的界面,布局中的所有元素都完美的放置,看上去很美。但是如果界面正在等待用户操作,该怎么设计?我要说的就是空状态。设计空状态是非常重要的,因为即使它是一个临时状态,它也会是 app 中的一份子, 并且对用户 有用。
空状态的意义不仅是一个装饰。除了向用户提示界面上将要展现的内容,它还可以作为一种 导引 (介绍 app,展示为用户做的事情),或者 助手 (出错时的屏幕)。这两种情况下,你都希望用户能做点什么事情,所以,屏幕不会立即变为空状态。
做好这4个细节设计,让你的移动APP 用户体验脱颖而出
We normally design for a populated interface where everything in the layout perfectly arranged and looks great. But how should we design our screen when it’s pending user action? I’m talking about empty (or blank) states . Designing an empty state is a very important moment, because even it’s meant to be just a temporary stage it should be a natural part of your app and be helpful for your users.

The purpose of a empty state is more than a just decoration. Besides informing the user about what content to expect on the page, empty states can also act as a type of onboarding (they introduce the app and demonstrate what it does to your users) or helping hand for your users (the screen when things go wrong). In both cases, you want your users to do something so that the screen wont’ be empty as soon as possible.
5

下面是一些设计空状态时的小技巧:
Here’s a few tips to keep in mind when you’ll design an empty state:

给新手用户设计空状态。记住新用户的体验很 重要。给他们设计空状态的时候要尽量简单。重点放在用户的主要目标,设计互动性最大化:清晰的信息,合适的图像,一个按钮,这就够了。
做好这4个细节设计,让你的移动APP 用户体验脱颖而出
Empty state for a first-time user. Remember that first time user experiences should be focused . When designing empty states for a first-time users, keep them as simple as possible. Focus on primary user goals and design for maximum interactivity : clear message, right imagery, and a action button is everything you need.
6

Khaylo Workout 是一个关于空状态设计的很好例子。这个空状态告诉用户为什么会看到当前界面(因为他们还没有挑战任何朋友)以及如何操作(点击 + 图标)
Khaylo Workout is a great example of a proper empty state design. This empty state tells users why they see it (because they haven’t challenged any friends) and how to fix it (tap the ‘+’ icon). Image credit: emptystat.es
错误状态。如果空状态时由于系统或用户错误,你必须在友好度和帮助度之间寻找一个平衡。一点小幽默通常可以抹平出错的沮丧,但是更重要的是你要清楚的说明解决问题的步骤。
Error state. If the empty state was due to system or user error, you must find a balance between friendliness and helpfulness. A short sprinkling of humour is often a great way to diffuse the frustration of an error, but it’s more important that you clearly explain the steps to solve the problem.

7
迷失方向,孤立无援,就像在一个荒岛上?遵从 Azendoo 的建议,保持冷静,点个火,然后继续刷新。
Feel lost and unconnected, like you are on a deserted island? Follow the advice from Azendoo, keep calm, light a fire, and keep refreshing.

让你移动APP脱颖而出的小细节

框架界面
Skeleton Screens

Feel lost and unconnected, like you are on a deserted island? Follow the advice from Azendoo, keep calm, light a fire, and keep refreshing. Image credit: emptystat.es
Skeleton Screens
我们通常不考虑内容的不同加载速度——我们一直认为都是立马加载(或者至少非常快)。所以我们通常没有为用户需要等待加载的场合设计。

We don’t usually think about different loading speeds for our content — we believe that it loads instantly (or at least very quickly) all the time. So we don’t usually design the uncomfortable moments when users must wait for content to display.

但是网速不是总是有保障的,它可能比预期的要慢。尤其是下载比较大的内容时(比如图片)。如果你不能缩短时间,至少要让用户等待得舒服一点。你可以用临时信息容器 来保持用户的注意,比如框架界面和图片占位符。比起转圈的加载提示,框架界面能建立对内容的预期,减少认知的负担。
But internet connection speeds aren’t always guaranteed and actions can take longer that expected. This is especially true when heavy content (such an images) is downloading. If you can’t shorten the line you should at least try to make the wait more pleasant for your users. You have a great opportunity to keep users engaged by using temporary information containers , such as skeleton screens and image placeholders. Rather than show a loading spinner, skeleton screens create anticipation of what is to come and reduce cognitive load.

让你移动APP脱颖而出的小细节

几点建议:
Here are a few tips for your design:
框架界面不必很抢眼。只需要凸显必要的信息,比如段落结构。Facebook 的灰色占位符就是个好例子——它加载时使用了元素模板,让用户熟悉正在加载的内容的整体结构。注意框架界面中的图片和线框并没有很大区别。
The load screen doesn’t need to be eye-catching. It should highlight only necessary information such as structure of the sections. Facebook’s gray placeholder is a good example — it uses template elements when loading content and makes the user familiar with the overall structure of the content being loaded. Notice that images used in skeleton screen aren’t drastically different from wireframes

8
对正在加载的图片,可以用图片中的主色填充一个占位符。 Medium 有一个很棒的图片加载效果。首先载入一个小的模糊图片,然后慢慢转变成大图。
For a loading image you can use a placeholder filled with the predominant color of the loading image. Medium has a nice image loading effect. First, load a small blurry image, and then transition to the large image.

9
真正的图片出现之前,你可以看到模糊图片填充的占位符
Before the actual image appears, you can see a placeholder filled with the blurry image.

让你移动APP脱颖而出的小细节

动画反馈
Animated Feedback

好的交互设计会提供反馈。在现实世界,像按钮这样的物体会对我们的交互做出反馈。人们会对 app 中的元素有同样水平的期望。可视的反馈让人们有 掌控感:
Good interaction design provides feedback. In the physical world, objects like buttons respond to our interactions with them. People expect a similar level of responsiveness from app elements. Visual feedback makes users feel in control :

它会告知交互的结果,让结果可见并可以理解。
It communicates the results of any interaction, making it visible and understandable.

它给用户一个信号,这个对象(或者 app )执行一个任务成功或者失败。
动画反馈通过即时的信息沟通来节约时间,并且不能让用户厌烦或者分心。最基础的动画反馈就是 转场:
It gives the user a signal that they (or the app) have succeeded or failed at performing a task.
Animated feedback should save time by instantly communicating information in a way that doesn’t bore or distract the user. The most basic use of animated feedback is in transitions:

10
当用户看的点击/触摸操作引发的一个动画反馈,他们马上知道这个操作被接受了。
When users see an animated feedback triggered by click/tap action, they instantly know the action was accepted.

11当用户点击勾选任务已完成, 包括这个任务的区域就缩小并且变成了绿色。
When user checks the box to indicate that the task is complete, the block containing this task shrinks in size and changes its colour to green.

but an app can truly delight a user whenanimation is used in ways beyond the standard scope of actions.

下面是关于动画反馈的一些提示:
Here are a few tips and things to remember for animated feedback:

动画反馈必须经久不衰。第一次看着新鲜的东西,100 次之后可能就烦了。
Animated feedback must survive long-term use . What seems fun the first time might become annoying after the 100th use.

12

13动画可以让用户分心,让他们忽略加载的时间。
Animations can distract your visitors and make them ignore long loading times.

14动画可以让用户体验打动人心,刻骨铭心。
Animation can make your user experience truly delightful and memorable

总结
Conclusion

用心设计。app 的 UI 里面,每个微小的细节都值得密切注意,因为 UX 就是让所有细节协调的总和。所以,请从一而终,持之以恒的打磨你的 UI,创造真正无与伦比的用户体验。
Design with care. Each minor detail in your app’s UI deserves close attention, because UX is the sum of all details working harmoniously. Thus, polish your UI from A to Z in order to create really amazing user experience
Thank you!

让你移动APP脱颖而出的小细节

Pinterest的再设计

当我还是一个在瑞典成长的孩子时,我房间里堆满了一些设计得很有趣的木质玩具。我记得我为这些简单的设计所着迷,明亮的颜色,抽象几何形状和有机形式的结合。它们的样子和动作能吸引你去和他们玩。
木质的火车系统是非常棒的。你可以把轨道部分组装成圆形,条形,s型,只要你想得到。但是你必须要思考你要怎么样创造路径——关于如何把碎片组装起来是有逻辑的,你不能违背几何构成。

二十年过去了,我的孩子也玩着我童年的那些玩具。现在我能听到他们正在用力地敲打木地板。这个持久性的设计已经跨过了很多年,经历了一代又一代的变化。
去年春天,当我第一次开始专注在一个关于Pinterest设计的大问题上时,这个奇妙的、自我证明的、有趣的童年景象出现在我脑海。实际上,是3个大问题。

1、我们的UI风格不统一
2、我们的视觉系统是过时的
3、我们的市场和我们的产品脱节

过去的这些年,我们网站、APP和营销的设计风格都在游移,所以大家都觉得它们不再是同一个性。很多新的特征被加进来,而没有一个清晰的视觉是关于如何适应整个设计的。所以界面就开始变得杂乱并且很难理解。当你浏览呈现给你的页面,没有视觉层次或系统帮助你理解什么是重要的。这样造成的结果就是,所有有灵感的人在Pinterest都没有最大的发挥——到目前为止,我们体验最重要的一部分正在消失。
事实证明,在某种程度上来说,我们很难设计出风格统一又独特好看的东西。
原则问题

Pinterest的整体体验非常需要保持简洁和统一。如果我们打算开始做,我们就需要想清楚我们自己的一些关键设计原则。
我退到Pinterest地下室的一个黑暗的角落,花了好几个星期的时间去研究设计。我甚至不确定我一开始要做什么——基本上就像是我自己的统一模块的升级版本。我开始琢磨这样的问题:为什么人们喜欢用Pinterest?是什么让我们的产品变得独特?我的个性特点是什么?我们是什么?
我越思考这些,我就越意识到Pinterest有很多的本质,就像我的家人喜爱收藏的有趣玩具。两者都鼓励你和不同的选项玩耍,把碎片连接起来,创造属于你自己的世界。你能开始做你自己的目标和项目,你能从别人正在做的和构建的东西中获得灵感。你投入进去,然后立即开始玩,在你想要的任何时候停止,然后回来,从你离开的地方拿起正确的。

再往更远的方向想,Pinterest和BRIO本质上有共同的3 个基本原则。这些描述了Pinterest如今最好的特征,奠定了我们想要在未来把产品带到哪里的基础。
1、清晰易懂的
它很直观,不需要学习
你能理解它怎么操作而不㤇任何直接的解释。
它可以让用户变得更强大
没有让你觉得不舒服的东西或者让你不能信任这个系统的东西。系统为您提供了正确的组件,会问你下一步做什么。
它让内容的阅读起来变得更好
框架是完全无缝和隐藏的。你没有必要注意它,除非你要和它发生互动。你可以决定它的样子,而不是我们强加给你的。
2、活泼的
它是富有色彩的
它的个性突出而醒目。
它是视觉上的反馈
是以物理的方式进行互动的体验
它是不意想不到的
这个体验是有趣好玩的,但不是压倒性的。
3、不易破损的
它是基于探索建立的
就像一个小孩的玩具,你想尝试它,看会发生什么。你研究得越多,你学的就越快,你得到得也就越多。
错误的点击是不可能出现的
被设计的内容都是帮助你导航的,让你准确地做你想做的。
它是可逆的
如果你不小心做了某个操作,结果不是你想要的,很显然你也知道怎么更改。
一旦我们概况出这3个原则。下一步就是把它们转化成有形的东西,可能是我们建立的一切向前发展的基础。
基本要素
形状——我们使用基本的容易触控的形状,人们很自然能理解,并想要和这些形状交互。边角是圆形的,目的是让用户觉得更加容易亲近。

1

颜色——我非常喜欢近似的配色方案。感觉很自然,让人觉得平静。当你把一点点不同类的颜色组合使用,最初是基于一些给定的互补色,结果是非常有趣和意想不到的。
2 3
层次——每个元素都是相当有层级的。最重要的信息总是很清晰。因为我们设计的时候问过自己,让用户理解最重要的是什么?我们能怎么变化去让信息更加明显?
4

留白——在旧版的Pinterest设计里,我们总关注在包含用户需要内容的边框上,它的比重甚至超过了内容本身。如你看到的,有很多的线条、渐变和灰色的阴影。没有让人呼吸的地方。留白会在元素之间有个自然的分割,而不会添加视觉的干扰。结果是平衡和稳固,空格的数量增加了个性和影响。
5

早期的探索和想法
我们想要知道如果我们把所有的边框从UI中移走会发生什么?能将焦点返回到对象本身吗?或者这个体验会完全让人崩溃?
结果证明减少边框后编排的感觉是很好的。Pinterest的设计师们终于重新找回了重点。我们并不是完全去掉边框,因为它们确实使得某条信息对应某个图片变得清晰。我们等着展示边框,知道你对点击拥有足够的好奇。通过这种方式,界面会教你怎么把信息和我们的系统连接重组。一旦理解了Pin是怎么被建立的,你就只需要去体验这个交互。

6
设计一套新的标准

经过了几个月对设计和交互的探索,团队和我最终把内容放到了我们觉得符合我们说的3个产品原则(清晰易懂、活跃的、不易破损的)的地方。我们准备对我们新建立的原则和设计系统进行测试。
我们想以一个边框系统开始,所以我们决定先使用在我们的iOS的APP上。对于我们的第一次测试,我们把焦点放在视觉设计上——之后将会重构信息架构。你可以在WIRED阅读所有关于iOS的改版设计和协调后端重建。
伴随着APP的改版,我们也重建了我们Pinterest的产品设计标准,包括:
系统——图形,文字,颜色,网格
框架——组件的组织
环境——所有我们正在设计的小东西
78

接下来9个月的时间,我们和开发人员紧密协作去建立每个组件,并且做了很多次的修改和调整。这需要难以想象的共同努力以确保我们建议的东西不仅仅满足我们的设计目标,同时也能被所有其他Pinterest产品的开发团队重复使用。
从系统、框架到环境:Pinterest 的再设计过程

史诗级的团队实现了改版
Pinterest的整个产品设计团队都为卷入审查和执行新的设计系统。
我们也有一个小型的优秀设计师团队 (Annie Teng, Jay Marsh,Kimberly Fellman, Linus Wahlstedt, LongCheng, Patrik Goethe, Rick Chatas,Susan Kare, TomWatson, Woosung Kang),他们和我以及一起紧密配合,我们很棒的工程师也一起进行设计迭代,来找到最适合的转场和曲线,做不同的手势图原型等等。这真的是这个过程最好的部分。跨团队合作,从多个角度整合了反馈意见(一个在Pinterest大家都知道叫做“编织”的方法),使得结果成倍增强。而在这个过程里,我们也感受到了很多乐趣。

最后,我和Pinterest的品牌团队密切配合去做新的品牌指南,这个指南能反映出这些相同的设计原则,我们最新的营销已经开始让人觉得它与我们的产品有着同样的气质了。

接下来,我们将着手解决下一波的iOS APP改进,重新设计Pinterest网站和Android APP,而且我们正在寻找更多主力设计师来帮助我们实现这个计划。当这个最终实现后,我希望你和我们一样兴奋

从微交互看设计趋势

我会谈到以下5点:
1、微交互将会大量主导产品设计细节
2、平,却不再那么平了,颜色,字体和质感将成为设计师追捧的视觉利器
3、The internet of everything真正崛起,将增加设计的复杂度
4、人的距离将会无限被拉近
5、触觉声音3D,我的五感都可以有交互

 

微交互将会大量主导产品设计细节

微交互这个概念其实早在2013年底就被提出了。Dan Saffer作为对我影响很大的设计师,他的书一直是我推荐给学生的必读之一。这个概念被提出后,Don Norman亲自回信提出好评。于是微交互,一下子成了个挺那么火的buzz word,设计师们都要赶个潮流,没事提一句两句的。

uisdc-trend-201610187

原图来着自作者官网,为引用Don Norman点评文章的截图。

可是我们其实忽视了,在原书标题Microinteractions之后提到的一句话: Designing for details. 微交互,不是只在小范围收到空间时间概念限制的交互,而是细微的,细节的,有人性化的交互。

uisdc-trend-201610181

为什么这个概念被提出了四年之后,我还老生常谈的说它要火了呢。因为我们正在进入一个信息复杂度超越以往任何年代的纪元。人脑能处理的信息,是有一定维度的,从今往后我们设计师要做的,不仅仅是考虑用户的使用体验,更多的是使用设计为用户所接触到的信息进行“降围”。而做到这一点的方法,就是通过细节对于用户进行引导。至于具体怎么做,可能可以写好几篇连载专门说,本文还是着眼于“预测”这个点,如果大家都对这个话题感兴趣可以留言,我会回来再多写几篇~

uisdc-trend-2016101810

平,却不再那么平了
颜色,字体和质感将成为设计师追捧的视觉利器

其实这也不是这一两天的趋势了。你看看Gradients(渐变色),不是火了去年整整一年了么。但是仅仅是渐变,怎么能满足设计师挑剔的要求呢。这一年里,Medium上面,层出不穷更是各样的文章表示现在是终结纯扁平化的时候了。

uisdc-trend-201610186

去年著名的Asana Redesign,巧妙的大量使用了Gradients,谁说B2B软件不能设计的很有趣?

喊了一年了,我认为时机应该差不多了。现下很多视觉方案,已经在努力突破扁平的桎梏,向着更有意思的趋势发展起来了。比如大字体,强对比,新的iOS 10阴影等等。毕竟,审美会疲劳,而用户面对如此大的信息量,我们要在平中寻找一个突破口,帮助用户走出信息过载的挣扎。这是对于视觉设计,排版,字体研究等的真正考验。

The internet of everything
真正崛起,将增加设计的复杂度

有一句特别喜欢的话,翻译过来是说:现在的科技能管到你的茶壶么,连了网就行。(Is IT in charge of the coffee pot? If it has an IP address and connects to the network, it might be.)

uisdc-trend-201610189

BI Intelligence给出的IoE的发展趋势预测

物联网,O2O根本都不是新词汇了,中国说实话比美国做的还要好。可是实际上,所有一切都联网了么?并没有。但是看看现在的智能家居,各大平台都在叫嚷要做AI也要做VR。也许真正的IoE还不会在短时间之内真正做到普及,但是在这个概念先行设计紧随其后的时代,做交互的我们,应该快速的适应现在的技术将延伸到生活的方方面面,我们今后的设计不会再简单的是个登录页面,而是你连接实体和虚无的高复杂度抽象交互。

uisdc-trend-201610182

人的距离将会无限被拉近

三年前在带领GoToMeeting Web项目的设计时,尽管拥有百万用户的我们,在当时其实还是感觉真正的远程办公还离我们很远。虽然号称硅谷的会议都是这样的,大量的人都在家办公,但是硅谷的小伙伴们扪心自问,这些机器人真的解决了我们工作中的沟通问题了么?

uisdc-trend-201610184

作为设计师的我们,其实应该感谢无数工程师的努力,技术的革新,使得我们的很多设计理想都成为了现实,那么下一个即将实现的梦想,就是人和人之间的距离,将会越来越近。不是靠哆啦A梦的任意门,而是更稳定的沟通桥梁技术,和我们在设计中引入的情感和思考。新的iOS 10 iMessage,也许你还没有适应那些新功能,但是这其中注入的情感化设计元素,一定是今后我们打开距离这道门的利器。

uisdc-trend-201610188

触觉声音3D
我的五感都可以有交互

苹果发布了Haptics Feedback(触觉反馈,即3D touch),褒贬不一。其实haptics已经存在很久了,早先Bill Buxton 就提出了”hands on = finger on”的说法。只是触感的使用,很多时候还都存在于所谓的Direct Manipulation中,很少被用来直接给出Feedback。

uisdc-trend-201610185

其实鼠标就应用到了Haptics技术,说起来也没有那么玄幻。

但这个契机,也许真的能够成为触感交互的起点。毕竟,语音交互出来了这么久,很多时候我们还是停留在调戏Siri的高度,而美国很多家庭已经用上了Amazon的Echo机器人。新的技术,需要点时间来被接受。现在的很多研究热点,包括这些不同感官在VR中的应用,我觉得对于我们交互设计师来说,全面的能力和扎实的理论功底可能逐渐会变得越来越重要。

不难想象在不久的将来(也许是很久的将来,毕竟过了这么多年3D打印还没真做出当年号称那个名堂呢),我们的各个感官,都能有了具体刺激的交互,感觉无数行业会因此而大大受益。

至于这一切对我我们设计师来说,意味着什么。我觉得是更大的机遇和挑战,毕竟福布斯都说了(Forbes Welcome),2017年,UX的重要性将会大幅度上升。庆幸自己在这个行业,能每天做出那么些微薄的贡献,让很多互联网用户的生活,简单愉悦那么一点点。

——————————-
文 / Spell  源 / http://hangyu.me/
作者:Spell,高级产品设计@Salesforce。曾助力微软,亚马逊,HTC,Citrix及若干创业公司的产品设计。当下乐趣是将UX的知识传递给更多的人,并创立了UXOffer-专注于帮助中国学生获得最好的HCI/交互设计教育机会。

移动APP可用性测试:数据的量化处理(下)

用户研究从业者常常在做可用性测试的时候碰到这样的问题,可用性测试作为一种定性的研究方法,拿到完成率、完成时间以及满意度等结果时是简单做下描述性统计分析(毕竟我们称之为定性),还是可以进一步量化、标准化比较呢?

不是所有的数据都可以拿来量化,这取决于这是哪一种可用性测试。

美国教育家和心理学家Scriven(1967)曾将用来测试学习成果的考试分为两类,一类是Formative test即形成性测试,目的是通过及时的反馈来改进学习(例如随堂听写);另一类是Summative testF即总结性测试,目的是通过测试成绩来评估学习的效果(例如期末考试)。

那么,可用性测试如果也分为形成性测试和总结性测试的话,结果会有什么差异吗?

形成性测试

大部分的可用性测试都是形成性测试,以查找和修复可用性问题为目的,数据也是以问题描述和设计建议的形式来输出。这时候的量化一般仅以问题发生频率和严重等级为代表,任务完成率、完成时间因没有可对比性,所以只做描述性分析。

总结性测试

而总结性测试既然目的是用数据指标去度量一个应用程序的可用性,那么这个指标必然需要一个可以比较的对象,不然又如何去评价这个指标代表的可用性到底是好还是坏。如果以“比较的对象”来划分,总结性测试则又可以分为“基准测试”和“比较测试”。

(1)基准可用性测试

基准可用性测试的目标是描述一个应用程序相对于基准目标的可用性程度(如用你的每门期末考试的成绩去和之前预定的目标成绩进行比较),那么这也就提供了改善产品修复问题的着力点(哪门课没达到预期目标就重点复习),同时为比较改善后的效果提供了基线(重点复习后下次考试是否达到目标)。

(2)比较可用性测试

比较可用性测试,一般设计两个及以上的应用程序进行比较。可以是当前版本与前期旧版本的比较,或者是竞品之间的比较。如果去设计一场比较可用性测试你需要考虑清楚是“被试内测试”(相同的用户完成所有产品的任务)还是“被试间测试”(不同的用户分别完成不同产品的任务)。

  • 被试内测试:在用户数较少(或能够给予的酬金有限,无法邀请多人参与)时可以考虑让每个用户分别去完成各款产品的测试,但是必须要切记不能让所有用户在每个产品上的先后顺序保持一致(打破顺序效应)。
  • 被试间测试:在用户数充足时可以考虑每款产品分别找不同的用户进行测试,但是这里需要注意的则是必须保证每款产品间的用户个体差异不大(即有相似的年龄、性别、学习经历、竞品使用经历),如果需要在每组内划分为新手用户、中间用户、专家用户,则须保证各组中三类角色的人数占比一致。

数据统计

虽然对如何测量有效性、效率和满意度没有具体的指导方针,但Sauro and Lewis在一项针对近100个总结性可用性测试的调研揭示了从业者收集的典型数据。大多数的测试包含任务完成率(失败率)、任务时间、主观评价、寻求帮助的次数、可用性问题清单(通常包括问题频次和严重等级)。

本文主要就以上几个指标的量化处理进行介绍,更多可用性测试中收集测量指标的实操技巧,请参见《A Practical Guide to Measuring Usability》(Sauro,2010)和《Measuring the User Experience》(Tullis andAlbert,2008)。

任务完成率

(1)定义

也称为成功率,是最基础的可用性测量指标(Nielsen,2001)。

(2)计算

通常以二进制测量形式采集,以任务成功完成以编码1、失败为编码0。

注:二进制完成率即是基础可用性度量指标,也是应用到所有科学领域的度量指标。

图3

图4

(3)置信区间

虽然我们计算出A产品任务1的完成率为80%(10个人中有8人完成)但是我们却没有办法保证当样本数量为几百人、几千人,甚至当我们有上万用户在使用这个功能时,完成率还会是80%。

如果想要知道在未知的用户总数中能够完成该任务的比例范围,我们需要在这一样本范围上计算出一个二项式的置信区间。Wald校正区间二项式置信区间是最常用的方法,对于任何一种被编为二进制码的测试都适用。并且除完成率外,另一种衡量可用性的常用方法是统计遇到了同一问题的用户数。在使用Wald校正区间公式时,如果3/5的用户遇到了UI设计上的一个问题,那么我们可以95%的肯定,所有实际用户中23%-88%比例的人可能遇到了同样的问题。

任务完成时间

(1)定义

即用户花费在一个任务上的时间,通常为成功完成一个预先设置的任务场景的时间总和。测量和分析任务持续时间的方式一般有三种:

  1. 任务完成时间:用户成功完成任务的时间;
  2. 直到用户失败为止所用的时间:从开始直到用户放弃或者未正确完成任务的时间;
  3. 任务总时间:用户花费在一个任务上的总持续时间。

(2)测量单位

可以是毫秒、秒、分钟、小时、天或年,通常以均值(算术平均数或中位数,两者适用场景不同)。

(3)算术平均数 VS 中位数

到目前为止,我们最常用的是将算术平均数作为衡量集中趋势和等级量表的平均数代表,但是当样本分布呈现为左偏态和右偏态时,中位数明显要比算术平均数更加合适(当为正太分布时中位数与算术平均数相近)。这样说来,是否以后都用中位数来报告平均任务时长就万事大吉了?答案是NO,别忘记了中位数与生俱来的两大缺点:变异性与偏差。关于中位数的变异性与偏差有疑问的同学可查资料或者后台留言哦,篇幅关系这里就不拓展解释了。

图5

(4)几何均值的计算方法

对于小样本而言(小于25人),几何均值比中位数、算术平均数都更适用(Sauro and Lewis,2010)。对于样本量更大的可用性测试而言,中位数则是最合适的估算方法。计算几何均值,首先要将原始任务时长数据进行对数转换,然后计算所得到转化值的平均数,最后再将其转化回原尺度。工具上可以用Excel函数=LN( )进行对数转换运算,或者使用大多数计算器上都有的“ln”按钮。

满意度评分

(1)定义

即用户使用系统时感知到的主观评价,可在完成一项任务之后立即完成(任务评估问卷),也可以一系列可用性环节结束后完成(整体评估问卷),更可以独立于可用性测试使用。

图6

(2)测量工具

虽然可以自己编写感知易用性的问题,但采用当前可使用的标准化问卷,评估结果会更加可靠。对用研来说标准化问卷是最熟悉的工具与助手,这类可重复使用的问卷,一般由一组特定的问题+使用特定的格式+按照特定的顺序呈现,基于用户的答案产生度量值后也用特地的方法进行统计。基于不同的研究对象和目的,可选用的标准化问卷也不尽相同,所有的标准化问卷都有其优点和缺点,每种问卷都或许在你特定的情况下是最合适的。

常见标准化量表:

图7

(3)比较方法

如果要判断例如SUS可用性评分、NPS或者任务时长此类连续变量的均值之间是否存在显著差异,你首先需要明确的是这是场被试间测试还是被试内测试。并且对于不同的数据类型(连续变量or 分类变量)、用户小组数、样本数,均有不同的统计方法。

下图为连续型数据(满意度评分、任务时长)选择统计方法的决策图。离散型二进制数据(任务完成率)的统计决策图,后面有时间会补上。

图8

可用性问题清单

(1)定义

一般包括所属模块、问题编号、问题描述、问题层级(一到四级)、处理优先级以及跟进人。

严重等级判断与可用性准则这里就不重复介绍了,此前的上篇已介绍过。

(2)问题优先级的计算方式:

[(问题频数X4)/总参与人数]+严重等级

如一个UI问题被提到3次,总参与人数为10人,严重等级为三级(一级最高),那么相应的优先级则计算为四级(4.2四舍五入为4),即表示该UI问题的修复优先级为最低四级。

但是在实际工作中,可用性测试中发现的问题,当确定好严重等级后,修复的优先级除了问题频数,还需要综合考虑开发成本、业务成本,最后需要用研人员与产品经理共同确定修复问题的优先级。上方公式仅可作为用研根据问题频次与严重等级去判断修复优先级的算法之一。

总结

关于可用性测试中收集的指标如何量化,本篇中就介绍到这里。其实对于可探索、可深究的问题仍有许多,例如一个复合型的度量指标是否可以全权代表可用性测试中其他指标?小样本数据的量化是否真的可以达到一个可靠的置信区间?

带着问题希望大家可以继续深入探讨,本次抛砖引玉的介绍就到这里,欢迎交流。

文 / 媛媛大王  原文 / http://www.woshipm.com/user-research/424355.html

何为好的用户体验?

提出这个问题的目的,我希望能找出一种可以把用户体验可以量化的方法。例如好的用户体验可能是点击少,视觉位置漂亮醒目,功能的数量和使用次数的数量是否平衡。

我认为用户体验肯定是可以量化的,例如一种量化的方法就是用最少的点击数操作出最多的功能。

个人对用户体验的目标是,做到“自然”。

举几个例子,

1,我观察3岁的小孩用iphone很容易上手。比如,iphone的开锁,小孩甚至不用学就会用。因为触摸是人的天性,同时iphone通过箭头图标,向右滑动的文字条(小孩看不懂文字),来暗示手指触摸向右滑动来解锁。自然和人的天性是一致的。大人因为成年后受污染较多,反而不一定立即学会iphone解锁,可能需要看文字解释来理解。所以不识字的小孩可能比老年人更快学会使用iphone。需要用文字来解释的交互不是好交互。

2,Apple在“自然”体验上做了很多尝试。比如,通常PC下的“文件夹”(甚至“文件”)是不太自然的电脑概念,被从iOS里面取消(文件只有和能解释它的应用关联才有意义)。MacOS尝试改变触控板的传统滚动方向,将手指滑动改为和内容一致的方向,并称之为“自然”模式,即,以前的触控板的滑动方向是“不自然”的。这样的改变很需要勇气,但也许Apple觉得长远来看更自然的模式才更有生命力,哪怕暂时会改变用户习惯而让用户不适应。

3,自然往往和人的本性相关的。微信的摇一摇是个以“自然”为目标的设计。“抓握”,“摇晃”,是人在远古时代没有工具时必须具备的本能。手机提供了激发人类这项远古本能的条件。设计“摇一摇”时,目标是和人的“自然”或者说“本能”动作体验做到一致。摇一摇的体验包括:动作 – 摇动;视觉 – 屏幕裂开并合上来响应动作; 听觉:有吸引力(男性是来福枪,女性是铃铛)的声音来响应动作;结果 – 从屏幕中央滑下的一张名片。整个界面没有菜单和按钮。但几乎没有比它更简单的交互体验了。感谢手机,让远古时代人们通过投掷石头来“连接”到其他人,进化到摇动手机来虚拟地“连接”人。

摇一摇上线后,很快就达到每天一亿次以上的摇一摇使用次数。“简单而自然”的体验人人都会用,并且因为“自然”,而“自然而然”地去用它。它也没有高端和低端人群之分。摇一摇给我们的最大启示是,一种通过肢体而非鼠标(甚至触屏)来完成的交互,也许代表了未来移动设备的交互方向(bump在这方面做得更早)。(顺便说下,经常有人说微信摇一摇是学line的,事实上,我们做摇一摇的时候,还不知道有line这个软件。考据一个应用“抄袭”了谁,除了获得心理安慰之外,并不能提升自身的能力)

pony三年前曾经送给很多人一本书,《don’t make me think》,光从字面理解,也是这个意思。自然的体验是不需要用户去思考的。我个人也欣赏原研哉等设计师的设计理念,设计应当挖掘人的本原的体验倾向。

“自然”并不只是在交互等体验上体现,更是一种思维方式。程序员都知道面向对象的方法的核心是更“自然”的对复杂事物的建模方法,“分类”是其核心之一。同样地,产品经理在面对一个复杂问题时,需要有一种符合“自然”原则的建模方法,来通过产品结构模块以及模块之间的联系来映射和解决问题。没有开发训练的人同样可以建立“自然”思维方式,事实上,“分类”是人类模式化和识别外部世界的本能方式,如果有意识地对任何问题都从“分类是否合理”的角度来考察,时间长了,会建立起直觉式的分类感觉,而避免形成“大杂烩”式的结果。而对任何一个界面和交互,同样可以用“don’t make me think”或者“是否自然到人人都能自然而然地使用”来反复思考。

比如,我们会鼓励每个界面尽可能有且只有一个突出的按钮作为用户不用思考就默认去点的操作点。当思考过一千个界面的交互后,对哪些交互是自然的哪些是不自然的就会很容易判断到。即便对于司空见惯的体验点,加以反思也会发现改进余地,比如,对一个列表,需要显示总的条目数吗(比如通讯录有多少人,用户需要这个数字吗)?一个进度条,需要显示百分比吗?数字对用户是自然能接受的反馈吗?

“自然”可能容易导致玄学,因此这里想强调的是,“自然”的思维方式一般是需要长期的非常理性的训练才能获得,而不是突然幻想自己获得了一种使用“自然原则”的能力。记得知乎上有个问题问“乔布斯为什么能凭直觉知道该怎么做”。我认为没有任何人有天生的可重复的直觉来立即成为一个领域的专业人员。比如,对于复杂事物,如何“抽象”为一个简单模型,是需要大量案例锻炼的。但是,如果经过一万小时的有意识的朝某个方向的训练(比如对“自然”的反复思考和实际工作练习),并且是极为理性的思维和实践训练,是可以获得一些直觉的。大量的理性训练有助于形成一种对同类事物的识别模式,这种模式形成直觉。比如大部分中国人其实是没有经受过“简单是美”的训练的,表现在现实中,很多人其实是很难接受一套极简主义的装修风格的居室的。只有当对“极简”有反复体验和思考,才能将“简单是美”变成骨子里的审美观,并体现在设计中。

简单和自然是什么关系?简单为什么就美了?留给你去想。