这些小小的改变,能够让 UI 动效更上一层楼


UI 动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI 动效对于整个界面的提升是显著的。
动效呈现出状态切换的过程,展现了元素之间的逻辑关系,并且吸引用户的注意力,引导他们执行有效的交互。
在设计动效的过程中, Material Motion 的设计原则,IBM 动画设计规则和 UX 动效宣言都是不错的设计参考和指引。遵循这些现有的规范,能够很好地提升动效本身的体验和效果,从优秀走向卓越。今天的动效设计都是遵循着这些规范使用 InVision Studio 来进行制作的。

标签页切换动效


左侧标签切换的时候使用了淡入淡出,右侧标签页切换使用了滑动效果。

  • 内容切换的时候淡入淡出效果不错。
  • 通过滑动效果来展示内容,不仅呈现了变化的过程,还指明了两者的位置关系和逻辑关系,更为卓越。

当你在设计诸如标签页或者弹出菜单这样的控件的时候,尽量借助动效让内容的位置变化关系呈现出来,这样不仅确保了内容的可见性,而且能够让用户不迷惑。这个时候,滑动手势交互和位移动效是不错的搭配,非常符合此处内容切换的语境。

卡片的展开动效


卡片是最常见的 UI 元素,左侧的界面中,点击卡片之后,展开新的界面;右侧界面中,点击卡片之后,卡片扩展并填充整个屏幕。

  • 点击卡片之后,详情页向上滑出或者从左侧滑出的设计很不错。
  • 通过展开动效从卡片直接过渡到详情页是更卓越的设计。

最好的动效往往能够通过变化让人明白两种状态之间的内在关联。在制作不同状态之间变化的动效的时候,注意两个界面中共享的元素,并且将它作为桥梁,将两个界面状态连接到一起。在使用 InVision Studio 创建原型的时候,这种同时存在前后两屏中的控件会自动连接起来,构成动效。这一功能使得动效的构建更加便捷。

在列表中使用瀑布式展开动效


左边的列表使用了较为迅速的淡入淡出动效,而右边的列表当中,淡入淡出以延时的方式呈现,效果类似瀑布的展开方式。

  • 淡入淡出的动效让元素递次出现加上轻微的位移,比较自然,看起来不错。
  • 列表元素通过延时次第出现,位移更加明显,形同瀑布,在视觉和体验上更为卓越。

瀑布式的展开动效只需要通过明显的延时就能够实现,适当地控制节奏,让整个加载速度适当的减缓而不会太慢,让用户能够感知到这个过程即可。谷歌建议每个元素的延时不超过 20 毫秒。你可以在 Material Motion 中看到设计的原理和更多的实例。

展开时的扩展动效


左侧的动效是内容在顶层覆盖列表,而右侧的动效是从中间扩展将上下内容顶开。

  • 通过移动、覆盖、展开的方式来呈现详情页的动效,视觉上看起来不错。
  • 而点击之后展开顶掉周围的元素,和周围的其他的元素有所互动,这样的动效更加优秀。

界面中所有的元素都应该是有「重量」的,某个UI 控件随着动效变化的时候,和周围的元素发生互动,则能够强化这种实体感。

菜单的展开动效


左侧的动效中,菜单从底部淡入界面,而右侧的动效中,菜单是从被点击的按钮中扩展开的。

  • 菜单从按钮的位置淡入进入界面的方式展现了两者的关联,这样的设计还不错。
  • 通过扩展动效的方式来呈现菜单的展开,让按钮和菜单之间的关系得到了进一步的加强,这样的设计更加优秀。

使用按钮展现不同状态


左侧的按钮通过文本说明和色彩变化来指示状态改变,而右侧按钮则通过加载控件来展示不同的事件的发生。

  • 好的按钮会指示状态的改变,哪怕是通过文本来呈现。
  • 通过按钮本身,视觉化地呈现加载的状态变化,比起文本说明更加自然,也更加易于理解,这样的设计更加优秀。

尝试使用加载指示器来指示状态的变化和进度,类似的方式有很多,重点是在于视觉化的、自然的呈现状态的变化过程,如果搭配上色彩的变化,那么就更好了。

吸引用户注意的动效


左侧仅仅是通过色彩、符号和位置来吸引注意力,而右侧加入了微妙的动效来吸引用户注意。

  • 使用色彩、标识和位置来吸引用户注意力是颇为有效的手段。
  • 借助微妙自然的动效,不仅能够吸引用户注意力,而且不会造成干扰,这样的设计更优秀。

对于一些重要的组件、事件或者信息,使用类似呼吸式的动效来强化效果是自然且干扰性较低的,这样的动效设计让元素的重要性得到凸显,还不会让用户感到反感。

结语

我希望今天所提到的这些技巧能够让你在设计交互动画的时候,拿出更加自然、优秀的方案。从优秀到卓越,有的时候只需要进行微小的改变。值得一提的是,像 InVision Studio 这样的工具,对于动效本身的提升是很明显的,它能够提供更多自然而富有直觉性的动效。
总之,在设计动效的时候,注意状态变化的指示,元素之间关系的强化,适当地增加一些乐趣。遵循这样的原则,总能让动效更上一层楼。
[整理:CALONYE]

App 按钮的背后,这些学问你都不知道


按钮是交互设计中一个常见基本元素。尽管按钮看似一个非常简单的用户界面(UI)元素,在过去几十年,其设计也经历了不少发展和演变。但万变不离其宗,对于按钮的用户体验(UX)设计仍关乎于辨识度清晰度
本文简要概述了按钮设计的发展演变,并提出用户体验好的按钮设计应遵循的最佳实践。

一、按钮设计的发展演变

1. 3D 按钮

自初以来,操作系统按钮一直通过浮雕和阴影来区分外围背景。这种设计方案是基于一个简单原则——通过边框、斜度和阴影使按钮在背景内容衬托下显得醒目,这样就方便将其识别为一个可点击的元素。

▲▲注意按钮是如何凸显的

Windows 95 对话框使用了厚重阴影和高光来制造 3D 效果,以辅助用户识别视觉层次,并了解哪些元素是交互元素。

▲▲凸显的交互元素看似能(通过点击鼠标)按下去

2. 拟物按钮

就数字设计而言,拟物化是指 UI 元素的设计与现实物体相像的一种方式,它可以是对现实物体材质外观的复制,也可以是模拟真实按钮使其看似像实物按钮。拟物化设计借助用户对某物的先验知识使其理解如何去使用新的交互界面。
下图中对计算器的拟物设计即通过用户对计算器实物的先验知识,从而帮助用户在数字环境中更好地去认识和使用它。

▲▲图片来源:theultralinx

3. 扁平按钮

如今 UI 设计的一个重大转变是逐渐从拟物化设计向扁平化设计过渡,设计效果也不再有 3D 效果。
与拟物化设计不同的是,扁平化设计被视作探索数字媒体的一种方式,其不再试图去「还原」实物的材质外观。因此,其摈弃了起初用来告诉用户哪些元素可点击/可操作的厚重视觉线索。

▲▲整齐排列的扁平按钮

▲▲苹果 iOS 系统的计算器 App

当整个用户界面都是扁平化设计,用户如何知道按钮在哪里呢?

用户仍需要通过视觉指引(帮助用户理解如何使用界面的可感知线索)来知道页面上可点击/可操作的地方。因此,颜色在扁平化设计中相当重要,因为若使用扁平按钮,这些颜色将是帮助用户识别按钮的主要标识符之一

4. 近扁平化设计及浮动操作按钮(FAB)

近扁平化设计是在原扁平化设计(或超扁平化设计)基础上的一种演变。这种设计几乎是扁平化的,但又在设计中通过细薄阴影、高光和叠层在用户界面制造出立体效果
Google 的质感设计(Material Design)语言即是一个按正确次序使用这些立体效果的近扁平化设计案例,它创新出一种全新按钮:浮动操作按钮(Floating Action Button,简称 FAB)。
这些按钮置于用户界面顶层,并吸引用户进行进阶操作(Promoted Actions)或主要操作(Primary Actions)。它们作为行为号召按钮(用以促进进阶操作),是用户在某特定屏幕上最常用的单一操作。
Google Maps 是正确使用 FAB 的一个典例,用户在地图上最主要的操作行为是找到方向,所以Google FAB 的设计方式就能说得通。

▲▲Android 系统上的 Google Maps

另一个在 UI 设计中使用 FAB 的范例是 Evernote 。尽管 Evernote 的 UI 几乎近扁平化,其在导航栏添加了细薄阴影,同时也使用了 FAB (新建笔记)。

▲▲安卓系统上的 Evernote 应用

5. 虚拟按钮

2014年,UI 设计领域的主导性演变趋势之一就是虚拟按钮的应用。虚拟按钮是有基本形状的透明或中空按钮,按钮形状通常是矩形或正方形
虚拟按钮也被称为「中空(empty)按钮」、「裸露(naked)按钮」或「镂空(hollow)按钮」。虚拟按钮的边框通常是一条非常细的线条,框内即纯文本。

▲▲普通设计(左)和聚焦设计(右)

虚拟按钮最初始于扁平化设计的发展演变,当苹果发布 iOS 7 后就变得非常流行。苹果 iOS 界面有很多虚拟按钮的应用。

简约的矩形方框加上框内整洁的字体,使得扁平化界面看起来非常完美。

▲▲「Name」、「Release Data」以及「Featured」类似虚拟按钮。「GET」是虚拟按钮。

虚拟按钮通常看似行为号召(Call to Action, 简称 CTA)按钮,同时展示其清爽外观。Specular 网站是应用此类按钮的一个很好的范例。

Specular 网站上使用了扁平化按钮「立即购买(PURCHASE NOW)」作为主要操作按钮,同时使用虚拟按钮「浏览(TAKE TOUR)」作为次要操作按钮。

二、按钮设计的基本最佳实践

在开始设计按钮之前,要考虑你的设计如何向用户传达出可供性(Affordance,可供性就设计而言,其着重于物体与用户之前的关系,以及其达到的效果和提示作用)。那用户如何将交互界面元素理解为按钮呢?鉴于此,在设计中你更应该:

  • 使按钮看起来像按钮(详见「外形」部分)
  • 使用户易于与按钮交互(详见「尺寸和内边距」部分)
  • 按钮的标签体现其功能(详见「标签」部分)
  • 使用颜色对比来指引用户行为(详见「颜色」部分)

此外,还要确保在所有界面交互控制中保持一致性,这样用户就能在 app 或网站的每个页面上从 UI 元素中识别出按钮

1. 外形

稳妥的方式就是根据网站或 app 的风格来设计方形按钮或圆角方形按钮。矩形状按钮很久之前就应用于数字世界的设计,用户对此也非常熟悉了。
据研究显示,圆角能促进信息处理,并吸引用户聚焦到元素正中央

▲▲圆角矩形按钮

当然,你还可以加入更多创意元素,使用如圆形,三角形甚至自定义形状的其它形状,但要注意,使用这些形状可能会更加冒险。

▲▲FAB 示例

2. 尺寸和内边距

在帮助用户识别按钮元素时,按钮的尺寸大小也非常重要。你需要考虑按钮元素的尺寸大小,同时还要考虑可点击元素间的内边距。
尺寸。当你使用轻击(tap)作为 app 或网站的主要输入交互方式时,你可以参考麻省理工大学触击实验室(MIT Touch Lab)的研究,从而为你的按钮设计选择合适的尺寸。
根据 MIT 的研究发现,指垫的平均宽度在10-14毫米之间,指尖的平均宽度在8-10毫米之间。因此,10×10毫米是触屏按钮最小尺寸的一个好选择。

▲▲图片来源: uxmag

这个建议本意不是让那些易按错的按钮更加完美,而是尽可能将按错次数最小化到实用水平,同时,还要平衡其他重要特性(比如屏幕信息密度)。

▲▲图片来源:ux.stackexchange.com

当鼠标和键盘作为主要的输入交互方式时,对按钮尺寸的要求则可以稍微降低,以便于适应密集型的用户界面。
内边距。按钮间内边距是为更好地区分各交互控制按钮而设计,同时给用户界面足够多的空间。

▲▲Google 的 Material Design 对话框中扁平化按钮间的内边距

3. 标签

你应该为按钮选择一个合适的标签。选择标签的方法应该基于最小惊讶原则(principle of least astonishment):如果某必要按钮有个高惊讶因素的标签,那就要考虑更换这个标签了。
经验法则——按钮的标签要体现其功能。添加一条清晰信息来告知用户在点击/轻击后会发生什么,或者通过行为动词提示用户某界面元素的功能。
下图示例是在 Dropbox 网页版上传文件的一个对话框,该对话框中有一个带有「棒极了!(Awesome!)」标签的单独按钮。这个标签对普通用户来说可能有困惑性,因为它并没有说明点击该按钮后有什么用。

▲▲图片来源:uxmatters

4. 颜色

调色板上选择颜色时,要思考颜色可以怎样帮助用户导航和理解该行为的。
使用颜色和对比来帮助用户查看和了解 app 的内容,与正确的元素进行交互,并理解相关行为。
下图示例中,我们使用了红色按钮来标识一个潜在的毁灭性行为(该按钮标签「UNINSTALL」意为「卸载」)。

▲▲注意「卸载(Uninstall)」动作按钮是如果通过颜色和对比更吸人注意的。图片来源:Material Design

使最为重要的按钮(特别是行为号召按钮)看似最重要的。例如,亚马逊使用了对比性较强的黄色按钮来吸引用户采取正确的行为。

▲▲亚马逊的CTA按钮「加入购物车(Add to Cart)」使用了对比颜色

结束语

所有按钮(比如经典按钮或者像虚拟按钮或浮动操作按钮等现代按钮)的作用都是指导用户实施你想让他们去采取的行为。
把网页或者 app 当做一个繁忙的用户发起的对话,那么按钮对这段对话就非常重要——流畅的交互能保证对话正常进行,而小故障(比如找不到正确的按钮)就会引起中断,更甚是故障。

谢谢!
作者 | Nick Babich
软件工程师,关注UI和UX。
译者 | Jorri
本文译自Buttons in UI Design: The Evolution of Style and Best Practices,已获原作者授权翻译。
题图来自站酷海洛创意

[整理:CALONYE]

在交互稿中,应重视「键盘类型」的标注

在交互稿的标注中,我们经常会忽略键盘的说明,这是不对的。键盘在用户的交互过程中起到了非常重要的作用,尤其在多个输入框的场景下。

为什么需要标注键盘类型?


大家都知道,一款虚拟键盘(比如iOS系统键盘)有很多种布局类型。在交互稿中,很多人是不标注键盘类型的,我原先也是不标注的。但近来发现键盘对于用户操作的影响其实很大,不标注键盘类型是不对的。一方面,如果键盘调用不当,用户则需要手动切换输入法,这是影响操作效率的(如上图);另一方面,对于多输入框的表单来说,输入框之间的切换、提交表单,这些操作其实都可以通过键盘实现(如上图左),而无需用户手动点击原界面中的元素。最后还有比较重要的一点是:如果设计师不标注,开发同学一般都写成默认键盘,而不会根据场景写成不同类型的键盘。
那么,到底有哪几种键盘?每种键盘有哪些地方是可以控制的呢?

iOS原生应用中的键盘



iOS 中提供了多达12种键盘可以选择(如上图,不讨论中文键盘,中文键盘只有一种布局)。我们可以根据用户当前的需要,提供不同类型键盘。在交互稿中,我们可以将相应的键盘类型名称(英文名)写在界面下方,或者直接使用相应的键盘截图放在交互稿中。对于同一个界面中有不同类型输入框的情况,需要标注出键盘切换的说明。虽然12种键盘类型已经很多,但它们仍然不能覆盖所有场景,这时我们可以进行自定义键盘。当然,开发成本你懂的,开发同学的表情你也懂的。

除了选用不同类型的键盘,部分键盘中还有多种“按键命令”(上图中的蓝色按钮)可以选择,如“完成”、“搜索”、”发送”等。iOS中提供了11种类型的命令,你可以将所需要的命令用文字描述的形式标注在交互稿中,也可以使用截图的方式。值得注意的是,iOS的键盘具有上一项和下一项的功能( <  > ,如上图左上方),这对于表单的交互设计起到了非常重要的作用,一定要好好利用。

Android原生应用中的键盘


如上图所示,Android中提供了9种类型的键盘(同样不讨论中文键盘)。与iOS的键盘调用类似,需要注意多输入框场景下的键盘类型切换。Android场景中的键盘也可以自定义,自定义的成本同样是比较高的,值得斟酌。

同iOS一样,Android的部分键盘也具有多种“按键命令”可以选择:回车、搜索、前往、下一项、完成、发送(未找到案例)。在交互稿中,可以标注出想要的“按键命令”类型。大家应该有注意到,Android中多了一个“下一项”的按键命令,用来替代iOS键盘左上方的“ < >”按键。在多输入框表单的场景下,切记标注出键盘的“按键命令”何时变为“下一项”,何时变为“完成”。

H5下的键盘


在H5环境中,键盘的类型仍然可以自由选择。“按键命令”的类型大部分可以选择,但“完成”和“下一项”不可以选择。也就是说,程序可以控制调出的是“数字键盘”还是“字母键盘”或其他任意类型的键盘。但在“按键命令”类型调用方面,只能调用“搜索”、“回车”、“前往”,而不能调用“下一项”和“完成”。所以在标注交互稿时,需要注意这一点。这个缺陷对于iOS环境中的H5影响并不是太大,因为iOS的键盘具有“< >”和“完成”按钮。但对于Android环境中H5的影响则很大,因为当用户填写完一个输入框想要跳转下一个输入框时,只能手动点击。如果用户下意识地点击“前往”按钮,则可能会出现表单警报(如上图所示)。
这里有一个例外情况,就是当输入框的字符类型是“数字”时,“按键命令”会自动变成“下一项”。Android环境中的这些问题对于用户成本本身就很高的“表单填写”交互来说,其实是很要命的,也是让人无能为力。
PS:上图中键盘上方的白色工具栏(上一项、下一项……)是浏览器提供的插件,不属于系统键盘。

总结

交互稿的标注中,我们经常会忽略键盘的说明,这是不对的。键盘在用户的交互过程中起到了非常重要的作用,尤其在多个输入框的场景下。合理地切换“键盘类型”和“按键命令类型”可以提高用户填写表单的效率,同时也可以让表单填写过程更加顺畅,降低页面的流失率,我相信所有人都知道这点很重要。
交互稿中,除了忽略“键盘的标注”,我们还会忽略很多其他细节的标注,比如过场、加载、热区范围等。对于开发同学来说,不标注一般就意味着不用考虑,指定默认值即可。但对于整个产品来说,每一个细节的忽略都会导致相应的体验问题。所以,如果你还没有和开发同学形成非常良好的默契,还是尽量标注出这些细节吧。
对了,上文中提到的技术上的“可以”和“不可以”都是基于一般的开发投入而言啦。因为对开发同学来说:没有实现不了的功能,只有给不了的时间。
最后抛一个问题: 为什么键盘右下角的“命令按键”有时是“完成”,有时是“前往”?到底应该选哪个呢?欢迎留言讨论……
[整理:CALONYE]

宝马Titan概念摩托 好似蝙蝠侠战车

提到 BMW 这三个字母,大部分人的脑海中浮现的都是他们杰出的汽车产品。其实,这家公司制造的两轮产品的水平也属一流。有时在概念阶段就会让人眼前一亮,比如,最新的 Titan 概念摩托车。

Titan 概念摩托车由设计师 Mehmet Doruk Erdem 操刀,似乎布鲁斯·韦恩的蝙蝠洞才是它最好的归处。Erdem 表示 Titan 并非为日常使用准备,如果宝马会把它制造出来的话,那也是奔着陆上速度世界记录去的。
谈到设计理念,这位设计师表示 Titan 的造型受到了鲨鱼的启发。后轮像是尾鳍,两边好似鳍片,而进气口的位置则如同鱼鳃。至于为什么要这样设计,Erdem 解释道:全封闭的前端在减小阻力的同时能把气流汇集到进气口和“鱼鳃”中,起到给引擎降温的作用;巨大的后轮也含有空气动力学方面的考虑,犀利的外观既能带来视觉冲击感,又能增加下压力。
概念图中,Erdem 为 Titan 设计了精致的坐垫,其下方是超级涡轮引擎,前方是科技感十足的仪表盘。要是再加上热导飞弹和激光炮,韦恩少爷一定会投资把它造出来。

[整理:CALONYE]

毁童年!暗黑系《精灵宝可梦 go》出炉

说到汤山邦彦执导的日本超人气动漫《精灵宝可梦》,相信小伙伴们应该都不会陌生。剧中无论是皮卡丘还是火精灵,都以十分可爱的造型戳中了无数少女的萌点。而近日,国外艺术家David Szilagyi,创作的一组暗黑系《精灵宝可梦》的海报,却戳瞎了不少漫迷们的双眼。整组海报的画面风格阴森诡异,成功加入毁童年系列。
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
在这组海报中出现的动漫形象有妙蛙种子,妙蛙草,妙蛙花等。画面的调子以黑白为主,带着一种哥特式风格的奇幻诡异。乍一看,不明就里的人还以为来到了伊藤润二的恐怖世界。海报中,包括杰尼龟在内的动漫形象造型都非常夸张,眼神突兀,表情狰狞。但是好在作者的画技精湛。对黑化后动漫形象的各个方面刻画的相当细腻,整体造型比例也较精准。
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
毁童年!暗黑系《精灵宝可梦》出炉
看到这组黑化海报的网友们纷纷评论说:“除了喷火龙,其他都看不出来谁是谁。”那么,小伙伴们是如何看待这组海报的呢?欢迎在评论区交流和讨论哦。
[整理:CALONYE]

2016 用户体验行业调查报告


2016年4月起, CDC通过腾讯问卷调查平台对1580名从事用户体验行业的从业人员进行在线调查,系统全面地分析了用户体验行业的整体情况,发布《2016年用户体验行业调查报告》。本次调查对象包括视觉设计、交互设计、用户研究、产品经理、团队管理、项目管理等岗位,通过对用户体验行业的从业者画像、核心竞争力挖掘揭示了行业现状与能力需求,通过对用户体验行业的公司团队、收入、跳槽、兼职、满意度5大方面的分析深入剖析了行业趋势与行为特点。
这是一份用户体验行业最全面的调查报告,是腾讯CDC继2015年发布用户体验行业报告后,再次用数据为你深度解析用户体验行业发展情况,通过本报告你可以了解到:

从业者都是谁?有什么特点?
用户体验团队在不同企业中的规模和作用如何?
行业的收入水平是什么样?影响因素是什么?
从业者跳槽的比例有多大?为什么跳槽?
什么样的岗位更喜欢兼职?只为赚外快?
从业者对行业满意度和信心趋势有没有变化?
从业者认为用户体验行业的核心竞争力是什么?

如果你已经是用户体验行业从业人员,你可以阅读报告与行业对标,
如果你有志从事用户体验工作,你可以阅读报告了解行业详情,
如果你还不确定职业方向,你可以阅读报告作为有力的参考。

一、从业者画像

本次调查显示,用户体验行业从业者主要集中在25-30 岁之间,男女比例较为均衡;高学历人群较多,93.8% 有大专及本科以上学历;在行业内工作时间不长,1-2 年的比例最高;62% 的从业者表示有过跳槽经历;主要分布在民营企业中;工作领域集中在互联网行业。从业者10大维度的属性画像如下:

注:各维度详细占比数据可下载原始报告查看。

调查结果显示,用户体验行业从业者主要的职业类别有“管理类”,“视觉设计类”,“交互设计类”,“用户研究类”,“品牌设计类”,“产品类”,通过聚类画像不同职业类别都有鲜明的特点。

二、公司用户体验团队分析

参与本次调查的从业者在大中小型公司的占比基本一致,在1000人以上大企业的37.9%,100-999人的中型企业30.9%,100人以下的小型企业31.1%。而公司类别方面从业者超过七成在民营或者私营企业,工作领域主要集中在“互联网公司”,“硬件设备厂商”,“金融行业”等,其中“互联网公司”占比超过六成,对比去年没有明显变化。

调查结果显示,36.2% 的从业者表示所在公司拥有独立用户体验部门,主要分布在1000 人以上的大公司,而通过岗位兼职来做用户体验相关工作的从业者比例为33.1%,主要分布在规模较小的企业。当前用户体验行业的团队规模基本在50 人以内(80%)。

在过去的一年里,约六成从业者表示所在团队人数规模有所增长,用户体验行业团队规模仍在快速增长中。在公司重点产品研发过程中,用户体验设计是被包含最多的工作,其次是用户研究和市场研究。

从业者表示,公司提供的用户体验资源主要有数据分析平台、专业培训、专家或顾问、专项经费和相关软件等。用户体验在融入产品核心问题决策时,当公司重点产品的KPI 指标(不包括用户体验相关指标)与用户体验相冲突,选择KPI 优先比例高于选择用户体验优先。

但不同行业在以上场景的选择中存在一定差异性,“专业设计公司”,“服务行业”,“咨询公司”,“教育/ 科研”等行业通常选择用户体验优先;“旅游”,“电信运营商”,“硬件设备厂商”,“金融”等行业则以KPI 为优先。

调查结果显示,在监测公司重点产品时,常用的KPI 指标有产品行为数据、态度数据、迭代数据。

三、收入分析

通过从业者税前薪资年收入分析,当前用户体验行业年收入主要集中在5 ~ 15 万(53.6%)。管理类薪资较高,约五成从业者收入在20 万以上;视觉设计、交互设计、品牌设计类约六成从业者薪资在15 万以下;用户研究,产品类的薪资相对居中。

从业者薪资与工作年限、公司规模、学历、工作经验、工作地点、行业领域有一定联系,其中从业年限、公司规模、学历是影响因素最为显著的。从业八年以上的人群年薪大多在50 万以上;1000人以上大型企业5-15万收入的人数占比明显低于中小企业;大专及以下学历,收入在10 万以下人群占比超过60%,76.8%的硕士学历从业者收入在10 万以上。

从业者工资年涨幅主要集中在5%~10%,团队管理、项目管理类涨幅相对较大,5% ~ 15% 的占比较高,非管理岗位“没有涨”的比例明显高于管理类。

四、跳槽行为分析

调查结果显示,70.4% 的从业者有过跳槽经历,最近一次跳槽的主要原因是产品项目前景不好、公司团队状况糟糕、薪酬福利待遇差。未来的一年内更换工作意愿的调查中,仅33.7% 从业者 “不打算换工作”,其余从业者都有思考换工作或者岗位,其中思考换工作但是没有明确方向的比例较去年有一定提升,而念书、创业的比例有一定下降。

调查结果显示,从业者表示跳槽最大收获是“专业能力提升”(56.8%),“薪水增长”(52.5%),“做的事情更有价值”(50.4%) 。而“薪酬福利”是影响从业者跳槽及工作满意度重要因素,跳槽后薪资普遍有所增长,增长幅度集中在10%-30%。

五、兼职行为分析

调查结果显示,34% 从业者有过兼职经历,其中视觉设计,品牌设计比例相对较高,用户研究兼职比例较低不足三成。

从业者选择兼职的主要原因是“提高专业能力”(50.5%),“增加收入”(49.5%)。国家机关/ 事业单位人士兼职工作的比例更大,民营企业/ 私营企业兼职比例最小。与总体相比男性用户选择兼职的比例更高。

六、从业者满意度分析

调查结果显示,2016 年用户体验行业从业者满意度为65.5(总分100),行业信心指数为82.7(总分100);与2015 年满意度(64.4)、行业信心(83.1)相比,满意略有提升,信心指数稍有下降。

调查结果显示,与工作满意度有紧密联系的因素主要有公司规模、工资收入、薪资涨幅。500人以上公司工作的从业者满意度高达67.1,而50 人以下小公司从业者满意度最低仅59.1;年收入在5 万以下人群满意度最低,随着薪资的增长,从业者满意度逐渐升高,年薪在50 万以上的人群,工作满意度最高。

此外,用户体验各职业间满意度也存在一定差异性。团队管理者满意度最高68.9;项目管理,用户研究,产品,品牌设计类满意度略低于团队管理者;交互设计和视觉分析满意度最低。

调查结果显示,工作中不满意的原因主要是没有话语权、薪酬太低、个人能力无法发挥、工作内容繁琐等。

七、核心竞争力

调查结果显示,从业者认为在用户体验行业中为了保证核心竞争力,需要具备的核心能力主要有“沟通能力”,“需求理解能力”,“团队合作能力”,“逻辑分析能力”,“用研能力”等。
团队管理倾向于“行业分析能力”;视觉设计、品牌设计、交互设计则更重视“创造力”,“设计表达”;用户研究与产品类模型较为类似,更加看重“数据分析”,“行业分析能力”,“逻辑分析能力”。

调查平台:腾讯问卷(http://wj.qq.com)
调查时间:2016.04.11 至 2016.04.27
合作单位:IXDC
投放渠道:IXDC官网、微信公众号、新浪微博、邮箱,图翼网,秀设计,学UI网,设计癖,腾讯CDC、腾讯问卷微信公众号,腾讯体验中心等
调查目标:从事用户体验行业的视觉设计、交互设计、用户研究、产品、团队管理、项目管理等
数据处理:本次调查共回收问卷4226 份,经过数据清理有效问卷1580 份,其中在职者问卷1365 份(不包括离职人员及学生群体)
完整报告下载:2016用户体验行业调查报告.pdf
[整理:CALONYE]

中文版来了!新版MATERIAL DESIGN 官方动效指南(三)

新版Material Design 官方动效指南已经翻译到第三章了!这部分,从动效的运动和材料形变入手,让你的动效自然真实,贴近现实状态。再系统的干货都比不上官方的动效指南,西瓜就在这,赶紧来捡。

运动
Material design 的动效会被类似真实世界中的力的影响,类似重力。
物体在屏幕内的运动
屏幕内物体在两点之间的运动,是沿着一条自然、凹陷的弧线。屏幕上所有的运动都可以使用标准曲线。
弧线向上运动
在现实世界中,物体向上运动需要克服重力。元素在屏幕中向上运动,同样也是需要克服一个加速度,较慢的向上运动。

↑↑正确:当物体向上对角运动时,平缓开始上升,急剧停止在终点。

↑↑错误:不要违反物理定律:当物体向上运动时无视重力,这样会显得不自然。

弧线向下运动
在现实世界中,物体下降会受到重力的加速度。在屏幕中,物体向下移动速度应该会更快一点。

↑↑正确:当物体向下对角运动时,下降开始急剧,然后平缓停止。

↑↑错误:不要违反物理定律:向下运动的时候别忘记了向下的重力。

非弧线运动
当物体沿着水平轴线或者垂直轴线运动时,请不要让让物体沿着弧线运动。这些运动时最简单的,物体可以以一个比较快的速度运动。

↑↑正确:保持单轴的直线运动。

↑↑错误:在水平或垂直方向上,不要让物体沿着不自然的弧线运动。

物体进入或退出屏幕时,也应该沿着单轴运动。

↑↑正确:物体沿着直线路径进入屏幕,可以很明确的看见进入点。

↑↑错误:进入和离开屏幕时不要沿着弧线,这样会让人搞不清楚进入点到底在哪里。

物体进入和退出屏幕的运动
独立运动
物体做为一个独立的元素,进入退出屏幕不影响到屏幕上其他元素的位置。
进入屏幕
物体是以减速曲线(具体参见持续时间与缓动篇)进入屏幕,以最大速度进入,然后再慢慢减速。
永久离开屏幕
物体以加速曲线(具体参见持续时间与缓动篇)永久离开屏幕,在很短时间内快速离开屏幕,因为他们不会再重返屏幕,所以应该减少用户对它的关注。

↑↑正确:物体以减速曲线进入屏幕应该不要影响到屏幕上其他物体的位置。在移动设备上,这种运动通畅持续225ms左右。同样的物体使用加速曲线永久离开屏幕,在移动设备上,大概持续195ms。

↑↑错误:这两种情况都不要使用标准曲线(具体参见持续时间与缓动篇)。物体进入屏幕时,缓慢加速的过程会吸引用户不必要的注意力(用户的注意力应该放在最后停留的点上)。物体离开屏幕时,缓慢的减速同样是不必要的,因为物体运动的终点在屏幕外,是不可见的。

暂时离开屏幕
物体暂时离开屏幕应该使用急转曲线(具体参见持续时间与缓动篇),出现点和消失点距离应该很近,这样他们可以随时回到屏幕。

↑↑离开屏幕的物体从原路返回,离开时物体的运动应该使用急转曲线,返回时使用减速曲线。在移动设备上,这个动画通常会持续300ms左右。

↑↑离开屏幕的物体从其他路径返回或者永久离开屏幕时,离开时物体的运动应该使用加速曲线,如有返回,则使用减速曲线。

关联运动
和屏幕上其他元素有联动的进入或退出动画,应该使用平滑的缓动曲线,这样他们可以尽量减少干扰,避免太过抢眼,剧烈的运动。
标准曲线适用于关联的多个物体进入退出屏幕。多个物体运动的标准曲线会比独立物体的时间稍稍长一些。

↑↑正确:浮动按钮的运动会受到从下方进入的卡片的影响,浮动按钮和卡片都应该使用标准曲线运动,保持平滑的开始和停止动画。在移动设备上,这个动画大概持续300ms。

↑↑错误:浮动按钮向上和向下的运动使用加速或减速曲线,会给人感觉非常突然的向上或者向下移动。这样的动效让人难以接受,体验受到破坏。

材料的形变
材料设计下的物体可以很生动的展现:叠加、分割、改变形状和大小。
矩形的形变
物体改形状和大小时,宽和高的运动曲线是非对称的。这种变化是根据物体附近的内在或外在元素来进行改变的。
所有的变化都是在屏幕上可见的,例如下面的几个例子,使用了标准曲线(具体参见持续时间与缓动篇)。
宽和高的变化
当物体扩大或缩小时,使用对称或非对成的宽高变化。
非对称变化
是指宽度和高度以不同的速率变化。对于多个物体或位置的变化,使用非对称变化再合适不过了。

非对称变化
物体的扩大:先改变宽,再改变高。物体的缩小:先改变高,再改变宽。
对称变化是指宽度和高度以同样的速率变化。适合用于单个元素沿着单一的轴线的运动。
10dx20160520
对称变化
这种同时改变宽高,减少动画细节的方式非常适合简单的形状变化。这种变化的持续时间会比非对称变化稍短一些。
当一组物体的扩大不同步时,含有内容(如文字或图像)的部分改变大小,是以恒定的比率来进行的,这样可以防止不自然的拉伸。有关内容请查阅《动效的组合》部分内容。

有些特殊内容(例如含有全屏宽度图像)的变化是以恒定的比率进行的,承载它的容器(例如一个更大的卡片)的变化是不同步地沿着运动曲线进行的。

↑↑含有出血内容(例如超过出血线的图像)的容器是可以同步扩大的。

径向形变
径向变化是从用户的触摸点产生的对称的、环形可视化的效果。通常用在圆形的物体上,让圆形变成其他形状。

↑↑正确:径向变化应该用在圆形的物体上,让圆形物体变成方形,或者在触摸点创建一个新的物体出来。

↑↑错误:不要在两个方形物体间的变化使用径向变化。

↑↑错误:高宽的扩展不要不同步(中间会变成一个椭圆)。

↑↑错误:不要径向变化复杂的形状。

形变的变化中心点可以在物体改变前的位置,也可以在物体改变后的位置。

↑↑在扩张的过程中,浮动按钮的运动是沿着一个向下的弧线,最终变成一张卡片。

↑↑变换的中心点保持在浮动按钮的中心点,幅度不大的扩张。

合并 & 分割

合并
在材料设计中,物体可以和其他物体合并,也可以分割成很多块。两个物体相互接近时,边缘相遇然后重叠,最后合二为一。
分割
物体分割成多个碎片,然后碎片开始分离运动。
阴影
分割开的物体的阴影不会被其他被分割物体所影响。

往期回顾:

  1. 《中文版来了!新版Material Design 官方动效指南》
  2. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(二)》

原文地址:google.com
译者:@平行煎餅
[整理:CALONYE]

中文版来了!新版MATERIAL DESIGN 官方动效指南(二)

Material Design动效设计是响应式的,自然的。使用缓动曲线和持续时间模式可以创建平滑、一致的动效。

速度

某个元素移动或者改变状态的时候,运动速度应该足够快,使用户不用等待。出现频率高的转场动画应该短一点,而有些转场动画要慢一点,来保证用户能理解它。

↑↑正确:动效应该足够快,让用户不用等待动画完成。

↑↑错误:不要做无意义的拖延。

动态持续时间

应该调整每个持续时间,来适应不同的移动距离、每个元素的速度、和表面的变化。而不是所有动画都用同样的持续时间。物体离开屏幕应该是一个很短的持续时间,这样用户就会减少对他的注意力。

↑↑当物体需要移动较大位移,或有很巨大的变化时,应该占用更长的持续时间。

↑↑当物体移动较小距离,或者有很微小的变化时,应该减少持续时间,这样就不会使动效看起来很慢很迟钝。

通用持续时间

移动设备
移动设备上,动画通常会持续300ms左右:
大而复杂的全屏移动设备上,通常需要更长的持续时间,375ms左右。
物体进入屏幕的持续时间大概是225ms。
物体离开屏幕的持续时间大概是195ms。
动画超过400ms会显得慢而拖沓。
大屏幕移动设备
在大屏幕移动设备上,同一时间段内,物体移动较长的距离速度比移动较短的距离更快。越大的屏幕物体移动的持续时间应该更长,这样动效不会显得太快。
平板设备
平板设备上动效的持续时间应该比移动设备长30%左右。移动设备上300ms的持续时间,在平板设备上应该是390ms左右。
可穿戴设备
可穿戴设备上的动效时间应该比移动设备上短30%左右。移动设备上300ms的持续时间,在可穿戴设备上应该是210ms左右。

↑↑动效元素在大屏幕设备上会移动很大的距离,动画可能会比小屏幕设备上看起来略为放缓。

桌面
桌面动画应该比移动设备上的动画更快、更简单。通常只会持续150ms到200ms。
由于桌面动画可能不太引人注目,他们的响应应该更敏捷、更迅速。
复杂的网页动画肯能会导致掉帧(除非他们专门为GPU加速)。更短的持续时间可以让动效快速完成,减少注意。

↑↑桌面动效明显看起来更快。

自然的缓动曲线
缓动曲线可以对物体的速度、透明度、大小产生效果。

↑↑加速和减速变化应该是应该是平滑的贯穿于动画的持续时间之中的,使动效看起来不会那么机械化。(红色无缓动,蓝色有缓动)

↑↑当加速和减速不对称时,动效会看起来更自然,更令人愉悦。(红色对称,蓝色不对称)

缓动曲线
缓动曲线可能会在不同的平台或者软件上有所不同。不同平台上的缓动曲线准则会涉及到普通缓动曲线、减速缓动曲线、加速缓动曲线,和急转缓动曲线。
标准缓动曲线
这是最常见的缓动曲线。物体可以根据在屏幕上的位置迅速加速或缓慢减速。这个曲线适用于增加或减少元素,和其他属性的变化。

减速曲线(“缓出”)
物体全速进入进入屏幕时,然后慢慢减速静止在屏幕上的某个点。
在减速过程中,物体可能从很小变到正常大小,也可能从透明变到不透明。有时候,当物体透明进入屏幕,可能从稍大的大小缩小到正常的大小。

加速曲线(“缓进”)
物体离开屏幕是以全速离开,他们离开屏幕时不会减速。

急转曲线
急转曲线被用于随时离开屏幕随时回到屏幕的情况。
物体可能会在屏幕上某一点迅速加速,然后以一个对称的曲线快速减速运动到屏幕外的某一点。减速会稍快于标准曲线,因为他们不会尊循于一个准确的路径到屏幕外的某一点。物体可能会随时回到原点。

本章到此结束,如果想提前阅读可到:https://www.google.com/design/spec/motion 查看。
原文地址:google.com
译者:@平行煎餅
往期回顾:

  1. 《中文版来了!新版Material Design 官方动效指南》

[整理:CALONYE]

中文版来了!新版MATERIAL DESIGN 官方动效指南

在Material design的世界中,动效用一种优雅、流动的方式来描述空间关系、功能、和意向。

为什么说动效很重要?

动效可以向我们展示一个App 是如何构成和用途。

动效可以做到:

  1. 不同视图之间的焦点引导。
  2. 当用户完成了一个手势后,提示用户将会发生什么
  3. 明确元素之间的层级和空间关系
  4. 当程序在后台运行时,分散用户的注意力(例如获取内容或载入下一个视图)
  5. 润色整个app:个性化、令人愉悦

如何制作材料设计的动效?
材料设计的运动吸取了一些真实世界的力学元素,例如重力和摩擦力。这些力反应的是,用户对屏幕操作的影响,以及这些元素是如何相互反馈的。
材料设计的运动具有以下几个特征:
1. 响应式的
材料设计的动效是充满活力的。它能迅速精确响应用户用户所触发的内容。

↑↑在移动设备上的长动画大约是300-400ms,短动画大概是150-200ms。过长的动画让人感觉迟钝,过短的动画让人觉得难以看明白。

↑↑用户触摸屏幕时,通过漪涟动画能使用户确认输入。卡片上升表示该卡片处于激活状态。

↑↑显示触发元件或动作和创建出的新的卡片之间的联系。

2. 自然的
材料设计的动效通过模仿真实世界的力,而展现了自然的运动过程。

↑↑在真实的世界中,一个物体可以被重量、表面摩擦力影响很快的加速或减速。同样的,材料设计的动效也是不会发生突然停止,或者突然启动,都是会有一个加速度或者减速度。(红色没缓动,蓝色有缓动)

↑↑真实世界中的力,例如重力,能使一个元素沿曲线运动而非直线运动。

↑↑材料设计的动效转场是沿着一个弧线的。

3. 可察觉的
材料设计的动效是可以被周围环境察觉的,包括用户和周围其他的元素。它可以被物体吸引,并且恰当的回应用户的意图。

↑↑作为过渡元素,他们和他们周围元素的运动是精心安排的,可以通过这个过程看出他们之间的关系。

↑↑卡片可以推动其他卡片,让他们给自己让开路。

↑↑元素可能会吸引其他元素加入,当他们相互接近时合为一体。

4. 有引导意向的
材料设计的动效能使焦点在对的时间聚焦在对的点。

↑↑转场动画有助于引导用户进行下一步的交互。

9dx20160512

↑↑运动可以传递不同的信号,例如,一个操作是否不可用。

8dx20160512

↑↑动画能使用户关注特定对象。

如何设计一个好的转场动画?

好的动效设计应该遵从以下几点:
1. 动效是很快的
一个交互动作不应该让用户做不必要的等待。

↑↑正确:动画一定要快,用户无须等待动画完成。

↑↑错误:很多元素磨磨蹭蹭很慢的运动,令动画时长延长。

2. 动效是明确的
转场动画应该明确,简单,一致。应该避免一次有太多的元素动效。
由于动图太大,上传到网盘,麻烦大家查看:http://pan.baidu.com/s/1dE6Izw1
正确:保持清晰的路径进入下一个视图,最好元件都编排成一个组。
由于动图太大已传,单击可见:http://calonye.com
错误:多个元素移动到不同的方向或者交叉路径,会造成转场动画的混乱。
3. 动效是统一的
材料设计的动效是由速度、响应性、和意向所统一的。在App 中的任何自定义动效体验都应该贯穿整一个App。

↑↑即使这些app有着不同的功能,但是他们相似的动画体验让人感觉他们是有关联的。

动效的意义

动效的好处可以从以下两个例子中明显看出:其中一个app遵从这些模式,而另一个没有遵从。

↑↑正确:在转场的过程总,用户被引导到了下一个视图。表层的转场清晰的传达出层级关系。loading的过程在后台进行,以减少延迟时间。

↑↑错误:转场的发生点没有一个清晰的焦点,所以看不出来新的页面和旧的页面之间的联系。没有感觉到有任何层级的关系,loading用一个转圈的半圆表现太明显了,令人感到延迟感。

原文地址:google.com
译者:@平行煎餅
[整理:CALONYE]

回答这3个问题,完善你的交互设计


大多数时候,交互的工作是和内容设计一起完成的,但是为了让你能够了解这两者之间的差别,我特地把材料分成两个阶段,也可以让自己梳理一下细节。

交互是什么?

“我躺在沙滩上,感觉到细碎的沙子在后背陷入;我踩在小溪里,感觉到脚底的乱石和流过脚面的溪水。我和沙子,我和溪水,产生了交互。”

在讲交互的过程中,我必须排除体验(感觉)的干扰。这是极容易被混淆的两个概念。交互仅止于人与产品之间的互动,它会给与用户“感觉”的结果,但他们不是一回事。
交互是人的行为与事物之间产生互动联系的过程。
用动态表达逻辑关系:
人类行为不是定格画面,而是连锁反应。
动态视频比静止的画面传达更大的信息量并且被记住。你可能还记得《哈利波特》中的“预言家日报”的经典画面,你看到一段完整的视频:罪犯“小天狼星”被警察“傲罗”抓住,并且愤怒地嘶吼。

如果是静态的画面,我们恐怕不能确定画面中人是先吼叫被抓住,还是先被抓住再吼叫:
“疯狂罪犯终于落网!”
“魔法界警察暴力执法!”
——这两者之间的差别可大了。

这就是动态画面中连贯地逻辑线,先后顺序、因果关系。
如果内容设计就像一帧帧现场照片,那么交互就是用户触发的蝴蝶效应。你知道做了这个选择,会导致不同的结果。或者按下这个按钮,后面会发生什么。
塑造立体空间感:
Hi-Fi毁一生,如果你不巧是个高保真音乐的爱好者,并且运气糟糕还和我一样是个古典乐的爱好者,那么你应该有这样的经验:“优秀的耳机给你音乐厅一般身临其境的感受”。
这个形容有它背后的原因:如果你身处于一个交响乐团或者摇滚乐队中间,当他们开始演奏的时候,你会感觉到小提琴就在你右手边,或者那把电吉他就在你前方5米处。越优秀的耳机,越会加深这种感觉,这就是为什么你会觉得“身临其境”。
声音恐怕是传达信息效率最低的一种方法,但是即便如此,耳机也能够给你传达如此巨量的信息,最大程度激发人脑的空间想象力。
那么,这件事情和我们的设计有什么关系?

“大页面的设计是焦点的设计,小页面的设计是空间的设计”

如果我们在web页上做设计,让用户快速找到内容是设计的重点。但是在小页面,移动设备的设计中,我却认为空间感才是设计的重点。比如小户型的设计重点是 “让你觉得大”。
以Apple  Watch为例(图5-1)。

【图5-1    Apple  Watch】

Apple  Watch继承了iphone的设计基调,它的交互设计有个显著的优点,这在表面的小屏幕上体现的尤其明显(我认为那不能简单地概括为“扁平化”)。
Apple  Watch的初始页面是表盘,按home键表盘缩小到home页面的中间,成为“手表小图标”。再次按下home键,则图标放大成表盘(图5-2),这会给用户透视的错觉。

【图5-2    Apple  Watch的初始页与home页】
背景(home页)到前景(表盘)的过渡给我们纵深感,背景没有边界就好像一个无限扩展的空间,可以在里面放上任何东西。

“扁平化其实为了让你觉得地方足够大。你信吗?反正我信。”——“李白”

怎么做交互?

交互为人类行为而设计,人类的行为依赖经验和本能。
经验
经验是我们记忆中曾经发生过的事情,经验告诉我们能做什么或者不能做什么。
比如公寓楼的门牌号,看到1003,我不用太费心就知道找个位置是10楼3号房间。这是社会通用的沟通语言。
比如给我一个乐谱,我能快速地区分高低音谱号,或者升降音符。这是行业通用的沟通语言。
我们喜欢遵循经验办事,因为那代表了安全和可控。一个成熟的行业为经验设计了规则,这些规则培养了用户习惯,如果没有足够的理由,我们不会轻易打破它们:
平台官方制定的规则

“使用APP,你不需要别人告知左箭头是什么意思。”

平台(ios和Android)的官方设计规范事无巨细地规定了所有的细节,并且培养了用户的使用习惯以及前端开发的工作习惯。遵守官方设计规范,你和开发的沟通会非常轻松,以及不至于在用户面前“出错”
规则除了告诉你用户习惯之外,还有技术可行性。
我要向你强调规则的重要性,它们并不是限制你发挥的枷锁,而是你挥洒创意的舞台。

你应该熟读Android和ios的官方设计规范、人机交互指南文档,只要遵循这些规范,用户不会因此犯错。
Ps:规范可以帮我们“不出错”,但要达成“绝妙的设计”还需更多创造力。

本能
我们在规则的基础上,为本能设计交互。想象一下:

突然!你被人打晕了!
醒来的时候你发现自己到了一个陌生的地方。
现在你在想啥?——
“我在哪?”
“我是谁?”
“我该怎么办?”

我们通过回答这三个问题,来完成接下来的交互工作:
“我在哪?”
如果用户在使用产品的过程中迷失了自己,就会觉得很挫败。所以,让用户时刻自己在哪里,并且知道自己从哪来,到哪去。
“我是谁?”
用户认知自己的身份或者状态,并且采取相应的行动,人物的身份和状态是探索用户行为的重要依据。
“我该怎么办?”
接下来会发生什么,用户会采取什么样的行动。我们应该提前预期到用户会遭遇哪些事情并作出什么样的反应。

我在哪

为了让用户定位自己,我们需要为他们设计导航系统。
表面上用户看到的仅仅是一个页面(图5-3):

【图5-3    眼睛看到的页面】

用户应该可以感觉到的页面位置(图5-4):

【图5-4    用户能够感觉到的页面位置】

用户想知道的路线(图5-5):
image005

【图5-5    用户想知道的路线】

用户在这个页面停留时,知道自己是从哪个页面过来的,也知道应该如何回去。我们通过各种方式(菜单、返回键、标题等信息)让用户知道自己可以到达哪些页面,完成哪些任务——这就是导航系统的意义。
地图和道路,共同构成导航系统。
地图告诉我们每个物体的位置:我在这里,它在那里
道路告诉我们物体之间如何连接:我要从这里,去那里
我们在用户潜意识中,植入产品导航系统。这就要先完成地图和道路规划。

“我在18层1806,我要去3层0303。出门左拐坐电梯,出了电梯再右拐“

地图——页面方位

我们需要一个足够简单便于记忆的地图。
如果你有一栋两层小楼,面朝大海,春暖花开。第一层是客厅和厨房,第二层是卧室和书房。你从一层爬楼梯上到二楼,不会因此迷路。
如果你住在公寓,高层楼的格局都是差不多的,18楼和28楼的楼梯间都在同一个位置,唯一能让你分辨自己在第几层的方法就是简单粗暴的门牌号。
所以地图设计应该做到:层级扁平排列规则统一。
检查页面关系并排列(图5-6)

【图5-6    页面关系】

把所有页面按模块放在平面上:
流程的一系列页面通常是从左到右排列,并列内容的页面从上往下,同样内容的页面从前往后。还有一些与其他都没有关联的页面放在单独的位置。
比如“预约会议”与“临时会议”是并列关系;记录的“列表”与“日程”是用不同方式展示了一样的内容,属于同样内容的页面等。

道路——菜单

菜单是到达页面的主干道,菜单设置的原则,是符合逻辑,有时候符合逻辑,意味着不太方便快捷。如果这两者有冲突,我们取逻辑,舍快捷。
菜单是产品的核心安全区,如果用户迷路,他们就会返回菜单页,如果用户不知道该做什么,也会返回菜单页。而一条符合逻辑的道路,比如原路返回,远比快捷的道路来得更加安全。
以下是移动端APP常见的几个菜单结构:
下部菜单:
操作以点击为主,页面切换。大部分的APP使用的菜单布局
淘宝APP的菜单结构就是这种形式(图5-7)。

【图5-7   淘宝APP的下部菜单】
上部菜单:
操作以划动为主,页面平移。Airbnb的Android版本菜单就是这样设计的(图5-8)。
image008

【图5-8    Airbnb(Android)的上部菜单】

左侧菜单:
适用于功能单一但是比较复杂的产品,左侧栏不影响主页面的操作,并且扩展性好,可以随时添加快捷入口。
只使用左侧菜单的形式,通常用在早期还不确定的产品形态中,成熟的产品通常都会改为上下部菜单的导航形式。
另外像UBER这种功能单一,主界面(地图)承载较多信息的产品,使用上下导航都太占用空间,所以也使用了左侧菜单(图5-9)。

【图5-9    UBER的左侧菜单】

左侧菜单还要注意空间的前后关系。
空间位置在前面的侧边栏好像在说:“我随时都会被用到!”(图5-9)。
空间位置在后面的侧边栏好像在说:“我先睡会,有事叫我…”,后面的侧边栏比较少见,用于比较复杂的产品。图5-10中,QQ的主菜单是下部菜单,左侧菜单作为辅助菜单,使用了暗色,与主页面的浅色对比,会让用户有种左侧菜单在后面的感觉。

【图5-10    QQ的左侧菜单】

右侧菜单:
左重右轻,因此右侧菜单通常适用于内容和功能都比较复杂的产品,常作为次要菜单或者辅助菜单,很少作为独立菜单使用(图5-11)。

【图5-11   Airbnb(iOS)的右侧的辅助菜单】

融合菜单:
复杂产品会融合多个菜单,注意主次分明,并且逻辑关系清晰。
这是比较常见的菜单形式,QQ就使用了双菜单架构。主页面下部菜单是三个主要内容模块,左侧放置扩展功能菜单(图5-12)。

【图5-12   QQ的主菜单和左侧菜单】

增加快捷操作:增加一些快捷入口,让结构更加扁平。距离菜单越远的页面,重要性也就越小。
比如通常我们把反馈建议整理到设置中心中,但是在新产品刚上线的时候,我希望能够多收集一些用户反馈,这个页面就变得很重要。于是我们在菜单增加了“反馈建议”的快捷入口(图5-13)。

【图5-13   菜单中的“反馈建议”】

离菜单越近的页面地位越高。注意微信的朋友圈,它离菜单很远,无声地说着:“就算朋友圈再火热,微信也还是一个聊天软件。”
导航系统让用户知道他在哪个位置,知道如何去另外一个陌生的位置,并且能够原路返回。设计完导航系统之后,我们得让用户知道它的存在。

空间暗示——页面动态

把导航系统告知用户,需要各种空间暗示。我之前提到Apple Watch的空间设计就是其中一种。在APP中,空间感主要来自页面的进入与退出。
按照左重右轻(左侧的内容重要于右侧的内容)的原理,我把第二张页面放在右边,然后根据导航关系制作页面动态。移动方式可以是覆盖移动,或者平移。
总结一下页面动态的种类:
覆盖移入(图5-14)

【图5-14   下一页从右往左覆盖进入】

案例中,“会议记录”是首页,点击记录中的某项可以查看“会议日志”页面,我们让“会议日志”从右侧移入屏幕,盖住了“会议记录”。用户会感觉“会议记录”还在原地。
覆盖移动用户觉得这两个页面是叠加在一起的(图5-15)。

【图5-15   前后关系的页面】

覆盖移出
覆盖移出,是上一张页面(比如“会议记录”)往左移出了屏幕,“会议日志”在原地(图5-16)。

【图5-16   上一页从右往左覆盖移出】

但是图5-16这个方式不太适合我们的案例,因为这样显得“会议记录”不太重要,“它”已经移出了屏幕。
左右平移
平移是下一页平移进入,上一页平移离开。这样的页面关系比较紧密,页面是平等并且高度连贯的。可以用在任务流中,也可以用在相同内容的页面移动中。比如从文章的上一篇平移到下一篇,或者上一张图片平移到下一张图片(图5-17)。

【图5-17   下一页平移进入】

上下平移
上下距离比左右距离要远的多,也不确定的多,上下跳转页面会给用户失去x轴的错觉,所以上下平移被使用得比较少,即便有,也让用户感觉是个长页面,而不是跳转了新的页面。
知乎APP的答案翻页就采取了这样的方式。看完一个答案之后,往上拉动可以继续阅读下一个答案,当然前提是知乎有大量优质答案,并且知乎的用户也有足够的耐心看完这一个答案之后继续往下(图5-18)。

【图5-18   知乎的上下平移】

额外的
有些页面和其他页面没有明确的因果关系,就好像翻书翻到一半,突然来了个电话,我接完电话接着看书。它和我正在进行的事情没什么太大的关系。所以它是凭空出现的,而不是书页中的其中一张。它的出现和退出需要特殊处理。
模态视图,常见的是提示框。它和我正在进行的任务有巨大关联,它不得不出现,又想快点消失。它们有平台默认的样式和退出进入的方法,我们也可以额外为它设计(图5-19)。

【图5-19   特别设计的弹窗动效】

我是谁

身份还是状态?

我们常在不同产品上看到不同的身份标签,比如普通用户和VIP用户啦,乘客和司机啦,女人和男人啦……
大家都很喜欢树立敌人,这样不太好。你不能做一些不符合身份的事情,当你是一个老师的时候,你成为了一个教导者或者回答问题的人,但是有些问题你也很想请教别人。这个时候就一切就变得复杂起来:“毕竟是个有身份的人,万一问了个蠢问题怎么办,还是继续高深莫测下去吧。”
我被拉进了不少交流群里,如果是以被访问者的身份邀请进去的,一定三缄其口,讲话慎之又慎,能不说就不说;如果我以菜鸟的身份进了一个大牛的群,就会满世界的喊“老师”;如果有人称呼我女神,我就不得不告诉他“我得去洗澡了”。你看,我自然而然地做着符合我身份的事情。这些都是别人眼中的我。
而状态就不同了,我可以处于回答问题的状态,同时也可以处于问问题的状态,多么轻松自如。这是真实的我。
如果限定一批用户是老师,另外一批用户是学生。那么我们就放弃了他们各自另外一半的时间和精力,另外一半的活力,另外一半的内容提供。因为某位“老师”不可能一直持续地在“教学”,即便他以此为工作。而如果我靠回答问题赚钱,那么我也同样愿意为别人的回答花钱。
除非能得到足够数量匹配的供应者和消费者,否则就让用户上一秒收入,下一秒就卖出吧!

身份标签

当用户年龄平均在20岁或者更小的时候,这些未走入社会的年轻人急需认可,这种认可在现实中很难得到,身份头衔是有用的激励方法。
对于年龄更长的用户来说就情况就相反了。我花钱买电影看理所当然,可是为什么好像是买了个VIP的头衔呢。天哪,连上个视频网站都在攀比,还能不能好好聊天了。如果一定要这样做,收集成就的方法比身份头衔有用多了。

同时拥有不同的状态

我最好的学习状态就是立刻把学到的东西分享出去。如果你是一个优秀的读者,或许应该尝试开始写点什么?(我一直建议阅读软件增加写作功能)
在产品设计中,时刻把这种逻辑推送给用户,就像一颗思想的种子,它会自己成长和蔓延。
这种方式用在状态可以灵活转变的用户群中更有效,比如零时的租客可以成为零时的房东,或者乘客有时候可以成为司机。
这并不是通用的方法,如果用户之间的关系很少模糊地带,或者有极多的信息不能共用等,明确地区分身份也是可行方案,请视具体的产品情况考虑。比如出租车司机与乘客,双方身份与状态不能灵活转换,互相有较多不重叠的信息。

我做什么

为人设计就要理解人的行为模式。结果可控的情况下,完成任务的唯一条件,就是不要犯错。因此,我们尽量确保用户不会犯错,这就是“为错误设计”这条规则的由来。
另外,人类会收到情绪的影响,这是不可避免要被考虑到的。我将为你介绍一下“为人为错误设计”与“为情绪设计”的交互理念。

为人为错误设计

灾难是一系列错误的连锁反应——《重返危机现场》
人类不是机器,行为不可控,所以只要涉及人类活动,我们甚至都无法真正意义上地杜绝错误的发生,只能尽力把它发生的概率减少。
为错误设计的步骤:
习惯
违背习惯就像违背自然规律或者用户经验,这会及容易导致用户犯错。所以在设计先后顺序、左右位置的时候不必要特立独行(图5-20)。

【图5-20   返回键违背习惯】

提示
重要紧急的行为、一旦开始无法反悔、或者如果犯错就会遭遇巨大损失的行为,需要向用户预警,甚至可以强势一点。这都比让我犯错更好(图5-21)。
“这是你的选择吗?你要不要再确认一下?”

【图5-21   预警】

反馈
我需要知道那件事情是不是成功了,否则我就不知道哪里出错了。
“为什么没有反应?是因为我没有按到按钮吗?”(图5-22)
“我按到按钮了,为什么没有反应?是我的网络有问题吗?”

【图5-22   反馈】

当我们有所举动的时候,周围的事物都会因此而被影响,并且有所反应。如果用户的每一个操作行为都能得到直接的反馈,对用户更加友好。
反悔
最后我依然犯了错误,请让我有机会反悔。现在大多数的文字输入都有自动存储的功能了啦,如果不小心意外关闭了页面也不用担心重来一遍。

为情绪设计

团队由人构成,产品为人而作。人,必然存在情绪,它非常容易被调动与刺激。因此,为人的设计,必然要顾及人的情绪,纯以理性做决策,是最不理智的做法。
人们容易记住那些与情感密切相关的事物,或者任何加剧情绪的事物。我们可以利用情感化元素让用户与产品产生互动,为产品赋予人格 。
成就感
建立用户克服困难,解决问题的成就感
经历
似曾相识的的难忘的回忆可以给用户“会心一击”
放松
放松状态我们能更好地处理信息,生成记忆。让用户进入积极正面的状态、轻松完成操作,享受过程。
选择恐惧症
选择恐惧症是担心选择的结果不是最好的,给用户较少的选择意味着用户可以轻松抉择、完成任务

特殊情况的处理

第一次与不是第一次
有些行为不需要反复提醒,这样会让人产生“你觉得我智商低”的错觉。所以很多产品只在用户第一次使用的时候做引导设计(图5-23)。

【图5-23   第一次引导】

“哦!讨厌。”
网络突然断了,手机突然没电了。我们知道你不愿意它发生,但是它总会发生的。为了应对这些突发情况,我们在正常流程之外还要为它们设计流程或页面。

手指行为(移动产品)

人类与硬件接触,通过行为与产品建立沟通交互的桥梁,有一门学科专门研究这些——“人体工程学”。
以下以移动产品为例。
对于手机用户来说,行为主要包含手指的活动,其次是眼睛接受信息,特定情况下用到嘴巴和耳朵。我猜暂时很少用到舌头和鼻子什么的。

手指与屏幕的关系

手指是最为高效、灵活并且使用最为频繁的器官。移动产品大部分都是手持设备,你会看到所有人都用手抓着手机戳来戳去,所以我们当然应该先说说手指的事情。
单手点击舒适度(图5-24):

【图5-24   单手操作】

【图5-25   重要按钮放在右边】

我们默认右手操作手机的人更多,当然这个观点至今都有争议,因为现在移动设备的操作都非常简单,即便是不太好使的左手一样可以轻松使用。
假设你使用右手,图中红色部分是更容易点击的区域,其他区域次之。顶部是最难点击的地方。
为了让左右手都可以轻松操作,很多产品使用了居中的长按钮。

【图5-26   居中的按钮双手都可以点】

双手点击舒适度(图5-27):
image027

【图5-27   双手操作】

玩游戏时用户通常都是双手操作,游戏界面的内容设计因此有很大不同。
手指动作
用户常用单机和滑动操作,这两种操作可以满足大部分交互行为,双指拉伸抓取的操作也很常见(图5-28)。我们没有必要使用冷门的操作方式,如果使用了少见的手势,记得在用户第一次使用的时候引导他。

【图5-28   手势】

手指操作区域
用手指戳的时候如果戳不到地方实在是太让人糟心了,由于手指与鼠标不同,灵活但是不够精确,因此移动产品规定了最小操作范围。比如iOS最小操作区是44dp,Android则是48dp(请查阅官方人机交互文档)。

眼睛与屏幕的关系

使用移动产品时,用户经常处于噪杂的环境或者活动的状态。比如一边走路坐车一边看手机。这对眼睛的压力很大,同时也要求产品设计中为眼睛考虑更多。
下图是眼动热力的示意图,用户习惯于从左到右的阅读方式,左上是关注的焦点。我们在设计产品时毫无疑问会把最重要的内容放置在左上角(图5-29)。

【图5-29   眼动的焦点】

用户在运动过程中实际看到的页面,很大一部分是糊的。所以视觉焦点应该清晰可见,这样用户可以快速捕捉到我们设计的“焦点”,对其他信息没什么耐心(图5-30)。

【图5-30   清晰的焦点】

必须承认,大多数情况下,交互设计是个繁琐的活,既要关注人类的活动,还要照顾技术实现的逻辑。在大型团队中,这个工作会由交互设计师来完成。在我们的团队中,产品、设计、研发拆分了这个任务。
[整理:CALONYE]