首页

用户体验-运动设计原理指南

分享达人

运动对数字产品的用户体验产生了深远的影响,但是,如果界面元素没有表现出基本的运动设计原理,则可用性会受到损害。在用户界面的上下文中,动作不仅仅是视觉装饰。它是一种强大的力量,可增强产品参与度并扩展设计交流的范围。

我们的世界是运动之一。即使在静止的瞬间,叶子也会发抖,肺部也会扩张。在数字产品设计领域,运动似乎是第二自然,这是对日常工作的扩展,可以毫不费力地加以利用。

从理论上讲,使UI元素移动很容易。在预定路径上定义点,然后软件对间隙进行补间。实际上,它不是那样工作的。工具和技术是必不可少的,但它们是从原理中获取力量的。如果要提高数字产品的可用性,就必须以适用于无数用例的不变行为规则为基础。

运动设计的起源

运动设计与UX的结合相对较新,但其根源是迪士尼。迪斯尼原理是为了讲故事而提炼出身体运动的基本定律。它们使绘制的角色能够移动和表情,但不能充分满足现代用户界面对交互运动的需求。

当代设计师试图弥合这一差距。更具说明性的示例之一是动画设计的十项原则,这是迪士尼动画专家Jorge R. Canedo Estrada的改编作品。

在建立运动中用户体验的原则时,可以从以下几点入手

A. 从UI动画中区分运动设计

B. 阐明运动如何帮助可用性

C. 解开核心运动行为的内部运作方式

运动不仅仅是装饰

动作设计不是UI动画的代名词。这一点很关键,因为UI动画几乎总是被当作一种经过深思熟虑的外观,而与UX没有任何关系(除了增加魅力)。动作不是装饰,而是行为,行为只能帮助或阻碍用户体验。

两种互动类型:实时与非实时

运动设计涉及两个基本交互:实时和非实时。

当用户在屏幕上操作UI元素时,实时交互可提供即时反馈。换句话说,动作行为会立即响应用户输入。

用户输入后会发生非实时交互,这意味着用户必须短暂暂停并观察所产生的运动行为,然后才能继续。

实时交互:运动行为会立即响应用户输入。

非实时交互:交互后,用户必须短暂等待并观察动作行为。

运动支持可用性

运动设计必须以四种不同的方式支持可用性。

A. 期望:当用户与UI元素交互时,他们期望看到哪些运动行为?运动是否符合预期或引起混乱?

B. 连续性:交互是否在整个用户体验中产生一致的运动行为?

C. 叙述:交互及其触发的动作行为是否与满足用户意图的事件的逻辑进程相关联?

D. 关系: UI元素的空间,美学和层次属性如何相互关联并影响用户的决策?运动如何影响存在的各种元素关系?

数字产品的12种运动设计原理

1.缓和

缓和模仿现实对象随时间加速和减速的方式。它适用于所有显示运动的UI元素。

放松的反面是线性运动。显示线性运动的UI元素立即从固定速度变为全速,从全速变为固定。这种行为在物理世界中不存在,并且对于用户而言似乎停滞不前。

UI卡和相应的椅子移动很快,但是由于缓和,它们可以平稳且受控地停下来。

2.偏移和延迟

当多个UI元素同时且快速移动时,用户倾向于将它们组合在一起,而忽略了每个元素可能具有其自身功能的可能性。

偏移和延迟会在同时移动的UI元素之间创建层次结构,并传达它们是相关的但又不同的信息。元素的时序,速度和间距不是完全同步,而是交错排列,从而产生微妙的“一个接一个”的效果。

当用户在屏幕之间漫游时,偏移和延迟表明存在多个交互选项。

这个加密货币应用程序一次引入了多个UI元素。它们的到来有些交错,以通知用户这些元素是相关的,但又是截然不同的。

3.父子元素关联

父子元素关联将一个UI元素的属性链接到其他UI元素的属性。当父元素中的属性更改时,子元素的链接属性也会更改。所有元素属性可以相互链接。

例如,父元素的位置可以绑定到子元素的比例。当父元素移动时,子元素的大小会增加或减小。

父子元素关联会在UI元素之间创建关系,建立层次结构,并允许多个元素立即与用户进行通信。因此,关联在实时交互中使用时影响最大。

蓝色滑块的位置控制背景遮罩的不透明度,灯泡周围的发光效果的散布以及光强度标度的数值。

4.转型

当一个UI元素变成另一个UI元素时,将发生转换。例如,下载按钮将转换为进度条,该进度条将转换为完成图标。

从UX的角度来看,转换是一种向用户显示其相对于目标的状态(系统状态的可见性)的有效方法。当UI元素之间的进度链接到带有开始和结束的过程(例如,下载文件)时,这特别有用。

转换表示下载的开始,中间和完成。

5.数据变化

在数字界面中,数据表示(数字,基于文本或图形的表示)丰富,出现在从银行应用程序到个人日历到电子商务站点的产品中。由于这些表示形式与实际存在的数据集相关联,因此它们可能会发生变化。

值的变化传达了数据表示的动态性质,并告知用户数据是交互式的,并且可能会受到一定程度的影响。当没有动静地引入值时,用户参与数据的意愿降低。

动态引入值以向用户显示他们有能力影响数据。

6.遮罩

遮罩是UI元素各部分的战略性揭示和隐藏。通过更改元素外围的形状和比例,遮罩会发出信号,表示实用性发生了变化,同时允许元素本身保持可识别性。因此,理想的选择是诸如照片和插图之类的详细视觉效果。

从可用性的角度来看,设计人员可以实施屏蔽以向用户显示他们正在通过一系列交互进行中。

遮罩用于从图像捕获到上传到在线店面中的过渡。

7.叠加

在2D空间中,没有深度,UI元素只能沿X轴或Y轴移动。叠加会在UI的2D空间中产生前景色/背景色的错觉。通过模拟深度,覆盖可以根据用户需要隐藏和显示元素。

使用重叠时,信息层次结构是一个重要的考虑因素。例如,用户在做笔记应用程序中应该首先看到的是他们的笔记列表。然后,可以使用滑动来公开每个消息的辅助选项,例如删除或存档。

重叠式运动可让用户快速归档或删除此记事应用中的条目。

8.克隆

克隆是一种运动行为,其中一个UI元素拆分为其他元素。这是突出显示重要信息或交互选项的聪明方法。

当UI元素在界面中实现时,它们需要一个清晰的起点来链接到屏幕上已经存在的元素。如果元素只是无处不在而突然爆发或消失,则用户将缺乏进行自信交互所需要的上下文。

用户可以放心地单击彩色圆圈,因为它们显然源自“添加注释”图标。

9.模糊

想象磨砂玻璃门。它需要交互才能打开,但是可以(在某种程度上)辨别另一端正在等待什么。

它为用户提供了一个界面,该界面要求进行交互,同时显示要跟随的屏幕提示。导航菜单,密码屏幕和文件夹/文件窗口是常见的示例。

模糊处理为用户提供了重要的互动方式,同时让他们保持产品叙事的方向。

10.视差

当两个(或多个)UI元素同时移动但速度不同时,将显示视差。在此,目的是建立层次结构。

A. 交互式元素移动速度更快,并显示在前景中。

B. 非交互式元素的移动速度变慢并退回到背景。

视差引导用户使用交互式UI元素,同时允许非交互式元素保留在屏幕上并保持设计统一性。

使用视差时,最重要的交互式元素移动最快,而非交互式元素移动较慢并退回到背景。

11.维度

维度使UI元素似乎具有多个交互方面,就像物理世界中的对象一样。通过使元素看起来像是可折叠的,可翻转的,浮动的或具有逼真的深度属性而实现的。

作为一种叙事设备,维度意味着UI元素的不同侧面被链接在一起,并实现了无缝的屏幕过渡。

维度意味着2D UI元素具有多个交互方面,就像物理世界中的对象一样。

12.变焦

滚动和缩放允许用户在空间上“遍历” UI元素或增加其比例以显示更多细节。

A. 滚动:滚动视角发生在用户的角度更接近(或远离)UI元素时。想象一下,一个拿着照相机的人走到一朵花前要近距离拍摄。

B. 缩放:使用缩放时,用户的视点和UI元素保持固定,但是该元素在用户屏幕内的大小增加(或减小)。现在,假设该人保持姿势并使用相机的变焦功能使花朵显得更大。

滚动:用户的视点似乎越来越接近背景图像。

缩放:用户的视角不会更接近图像。而是图像的比例会增加。

运动就是沟通

互动体验的需求运动在其所有的轻快和微妙的形式。当坚持运动设计原则时,即使最基本的UI元素也成为人类交流的复杂媒介。当这些原理被忽略时,运动就体现了自然界所没有的特征。

运动设计与数字产品UX之间的关系正在迅速成熟。原则上的运动方法可以防止过度依赖趋势,工具和技术的短暂使用。更好的是,它跨越了2D屏幕上元素的抽象运动与3D世界中运动感知之间的鸿沟。


文章来源:站酷    作者:DuiaDesign

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

深度分析动效设计原理,提升产品可用性!

分享达人


动效对产品的可用性体验有多维度的影响。在界面中动效不仅仅是一种视觉装饰,它能够提升产品的参与度并扩展交流的范围。

本文追根溯源,先从动效的起源讲起,一步步推进与产品、体验之间的关系,最后通过案例分析动效设计的原理和应用。一起来看看吧~

一、动效设计的起源

动效与用户体验的结合相对较新,其根源是迪士尼动画设计的十二个条基本原理。迪士尼动画原理是为了讲故事而提炼出的基本的物理运动规律。这些原理能让绘制的卡通角色移动和表演,但不能充分满足现代UI界面的交互需求。

为了弥合这个差距,动效专家Canedo Estrada改编的《动效设计的10条原理》更适合应用到数字产品设计中。

在围绕界面元素建立用户体验时,重新定位动效原理的关键在于:

  • 将动效设计与UI动画区分开;
  • 阐明动效如何帮助可用性;
  • 解开核心动效的内部工作机制。


二、动效设计与用户体验

在讨论动效设计的原理之前,重要的是要强调动效不仅仅是装饰,而是一种用来帮助用户体验的行为。动效设计涉及两种基本的交互类型:实时和非实时。

 实时 

当用户在屏幕上点击UI元素时,实时交互提供即时反馈,会对用户的操作做出即时响应。

 非实时 

非实时交互发生在用户操作后,这意味着用户需要经过短暂的转场才能看到结果,然后再继续。

另外动效设计通过四种不同的方式来提升产品的可用性:

1.期望:当用户与界面交互时,他们期望看到哪些行为?动效是否符合预期或引起混乱?

2.连续性:交互在整个体验中是否发生一致的运动行为?

3.叙述:触发的动作是否与满足用户意图的事件的逻辑进程相关联?

4.关系:UI界面的空间、美学和层级结构如何相互关联并影响用户的决策?动效如何影响各种元素的关系?

三、产品动效设计原理

这里提供12种动效设计原理的解析,每一种对应不同的案例,从更直观的角度来解读抽象的原理。

1、缓动(Easing)

缓动效果模拟了现实世界中对象随时间加速或减速的方式。它适用于所有运动的UI元素。下图中的卡片和对应的椅子移动速度很快,但由于缓动效果它们可以平稳地受到控制。

2、偏移和延迟(Offset & Delay)

当多个UI元素同时快速移动时,用户倾向于将它们组合在一起,而忽略了每个元素自身的功能性。

偏移和延迟会在移动的UI元素之间创建层级结构,并传达它们相关但又不同的消息。元素的时间、速度和间距不是完全同步的,而是交错排列从而产生一种微妙的“一个接一个”的效果。

当用户在屏幕之间穿梭时,偏移和延迟表明存在多个交互选项。

3、父子关系(Parenting)

父子关系将一个元素的属性链接到其他元素中。当父元素中的属性更改时,子元素的链接属性也会更改,同时所有元素的属性都可以相互链接。

在下图中,将父元素(蓝色滑块)的位置与子元素(灯泡发光效果&光照强度)相关联。当父元素左右移动时,子元素的发光效果的范围和光照强度的数值会发生变化。

父子关系在元素间创建关系并建立层级结构,允许多个元素同时与用户交互。因此这种效果非常适用于实时交互中。

4、转换(Transformation)

当一种UI元素变成另一种形式时就会发生转换。例如,转换展示了下载的开始、中间和完成状态——下载按钮转换为进度条,进度条转换为完成图标。

从UX角度看,转换效果告知用户元素的状态发生了变化并将信息传递给用户,提高了用户的认知度。

5、数值变化(Value Change)

数值的变化(数字、文本或图形)在数字界面中非常丰富,从银行APP到日历到电商网站的各种产品中都会出现。

在某种程度上,数据的动态表达和交流可能会对数据的价值产生影响。例如下图中的数值被动态引入,向用户显示他们有能力影响数据,提升了参与活动的意愿。

6、遮罩(Masking)

遮罩是对界面上的部分内容进行战略性的显示和隐藏。通过改变元素的形状和比例,在改变元素效果的同时允许元素本身保持可识别性。因此,照片和插图等视觉形式是理想的选择。

从可用性的角度来看,设计师可以通过遮罩向用户展示产品正在进行一系列的交互。

7、覆盖(Overlay)

二维空间中没有深度,元素只能沿X或Y轴移动,叠加在界面中创造出前景/背景相区分的位置关系。通过模拟深度,覆盖可以根据用户的需要隐藏和显示元素。

在使用覆盖时,信息层级结构是重要的考虑因素。例如,用户在笔记应用中首先应该看到的是笔记列表,然后使用覆盖来显示每个笔记的辅助选项,如删除或归档。

8、克隆(Cloning)

克隆是将现有的对象拆分成新对象,这是一种突出显示重要信息或交互选项的方法。

通过克隆将元素与界面相链接,如果元素只是突然出现或消失没有关联性,那么用户将缺乏信心去交互。

9、模糊(Obscuration)

想象一扇磨砂玻璃门,虽然看不清门后的东西但是我们能察觉到门后事物的存在。

模糊的工作原理是一样的。它为用户提供提示,让用户意识到自己正在操作的界面之后还有其他的层级结构。导航菜单、密码屏幕和文件窗口是常见的示例。

10、视差(Parallax)

当两个(或更多)元素同时以不同的速度移动时会构成视差效果。

视差的主要目的是划分层级结构:

  • 可交互的元素移动速度更快,出现在前景中;
  • 非交互式元素移动速度较慢,退到背景中。

视差引导用户点击可交互的元素,同时允许非交互的元素保留在屏幕上并保持设计的统一性。

11、维度(Dimensionality)

维度使界面元素具备具多个方向的交互,这种行为是使元素看起来是可折叠、可翻转、浮动的或具有深度。

作为一种叙述性工具,维度意味着元素的不同侧面是相互联系的,并且可以实现无缝的屏幕过渡。

12、平移与缩放(Dolly & Zoom)

平移与缩放通过视角的变化能产生更多空间上的体验,逐级递进显示更高级别的细节。

平移:点击元素后发生距离远近的平移,用户的视点会越来越接近图像。(一个人拿着照相机走到一朵花前面近距离拍摄)

缩放:用户的视角与图像的距离保持不变,但图像在屏幕中的比例会增加。(这个人站在原地不动,只利用相机的变焦功能使花显得更大)

四、总结——动效即交流

互动体验要求动效具备敏捷和微妙的形式。坚持动效设计原理,即使最基本的界面元素也能成为交流的复杂媒介。

动效设计与产品用户体验之间的关系正在迅速成熟,而且动效跨越了二维屏幕上元素的抽象运动和3D世界中对运动的感知之间的鸿沟。



文章来源:UI中国   作者:Clip设计夹


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


设计源于生活——浅谈格式塔原理

分享达人


设计源于生活,本文通过生活视角溯源格式塔原理,从生活到界面设计感受格式塔原理应用在方方面面。


一、什么是格式塔原理

格式塔即Gestalt,是德语中“形状”和“图形”的意思。是基于心理学对人类视觉系统的研究,人类的视觉系统自动对视觉输入构建结构。

最重要的格式塔原理有:接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体/背景原理、共同命运体 原理。

下面将进行详细分述


视觉会把互相靠近的物体看成一组,反之则不是。

下方示意图中A被看作三排,B被看作三列


【 生活中】

无论是在看阅兵还是军训,我们都有所经历,左右间距为一拳,前后间距为一臂。

列与列之间的间距远大于每个人之间的间距,互相靠近的则被看作一列。

(图片来源于网络,仅供交流学习)


【界面设计中】

个人中心中,同一组信息之间的间距远小于不同组,下图中我们明显可以感知到7组由图标和文字组成的信息

(图片来源于网络,仅供交流学习)


建议

设计过程当中可以控制元素与元素之间的间距,从而对元素进行视觉分组,就像排队一样,有利于元素排列更有规律,主次分明,易于用户获取信息。



视觉会把相似的物体看成一组,反之则不是

下方示意图中颜色相似的被看成一组,颜色较深的两个圆被看作一组


【 生活中】

大家都玩过跳棋,在全部棋子形状相同的情况下,通过颜色进行阵营区分。相同颜色的棋子很容易区分被分为一个阵营。

(图片来源于网络,仅供交流学习)


【界面设计中】

下图中01、02、03三个图标区域呈现不同的图标样式,通过样式的相似性进行了合理分组,体现了个人中心图标的强弱层级


建议

设计过程当中可以通过制造相似性,包括:颜色、形状、格式、质感等,使某些对象在视觉上成组。



视觉倾向于感知连续性,而不是零散的事物

下图中我们更倾向于把图形看作为两条不同颜色的线交叠,甚至是一个X。而不是一条浅色线段,两条深色线段


【 生活中】

被切开的水果我们依然可以感受到完整的样子,一看便知这是一个完整的橙子被切开之后的样子

(图片来源于网络,仅供交流学习)


【界面设计中】

利用连续性原理,我们将上图中的会员等级曲线看成是完整的曲线,而不是两段不同颜色的曲线

利用连续性,下图中依然可以感受到完整的一盘食物

(图片来源于网络,仅供交流学习)


建议

设计中可以利用连续性原理,只露出部分元素暗示完整元素,或用连续性来暗示走向趋势等。



视觉会将敞开的图形封闭起来,从而感知完整的物体

下图中我们不会将其看作三段曲线,而是很容易感知到是一个圆


【 生活中】

划分停车位的时候,即使不画出四面封闭的四边形,我们依然可以感知到完整的四边形车位

(图片来源于网络,仅供交流学习)


【界面设计中】

下图中的断点式icon设计,即使图形没有完全连续,我们依然可以感受到完整的图形

(图片来源于网络,仅供交流学习)


建议

设计中可以利用封闭性原理合理删减、断点等方式增加设计感、丰富度,强化页面趣味感、精细度



视觉会将复杂物体解析为符合对称规律的更简单的物体,从而降低复杂性

我们可以很快感知到下图是两个圆交叠,而不是其他更复杂的图形,因为一对圆的复杂度远小于其他


【 生活中】

河对岸的房子倒影在水面上,我们通常会最快地自动解析出水平的对称线,将其视为上下对称的两组房子

(图片来源于网络,仅供交流学习)


【界面设计中】

下图的网页排版,我们的视觉自动梳理出了左右对称的规律,即使左右的颜色并不一样,也有其他小字信息干扰。但对称的解析方式极大地降低了页面的复杂性

(图片来源于网络,仅供交流学习)


建议

设计中复杂图形可以通过简单图形复用得出,降低视觉理解难度。复杂的排版中可以制造对称性,从而降低页面的理解成本。



视觉将聚焦部分解析为主体其余解析为背景,或改变焦点时呈现不同的主体

大的矩形和圆形交叠时,我们倾向于把小的看作主体,矩形则视为背景。


【 生活中】

下图中将深色区域视为主体时我们看到了建筑,把浅色视为主体时我们看到了五角星,在五角星中我们把美队看作主体,天空看作背景

(图片来源于网络,仅供交流学习)


【界面设计中】

下图中弹窗的出现转移了页面的主体

(图片来源于网络,仅供交流学习)


建议

可以通过控制主体与背景,改变用户视线焦点,从而起到引导用户视觉的目的。



一起运动的物体被感知成一组或彼此关联

下图中三个运动的小球被看作一组


【 生活中】

舞蹈表演中,通向运动的舞蹈演员被我们归位同一组

(资料来源于网络,仅供交流学习)


【界面设计中】

背景的文字拥有一致的运动速度,因此原本零散的文字在动效过程中被我们视为同一层元素

(资料来源于网络,仅供交流学习)


建议

设计中不仅可以通过接近性、相似性,还可以通过同样的动态特征将物体成组,减少视觉凌乱感。



文章来源:UI中国   作者:JuneW

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

做设计能用到的三条设计曲线,学起来准没错!

雪涛

作为人类,我们无法总是理性地看到事物的本质。社会心理学告知我们,人类的感知与决策,在一定程度上,会带有偏差。而作为设计师,我们可以主动利用这些偏差,设计更好的产品。

做设计能用到的三条设计曲线,学起来准没错!

本文介绍了三条曲线,它们都将认知偏差做了可视化的表达,前两个来自日常收集整理,后面一个由笔者总结工作经验得出,下面开始吧。

双曲贴现

1984 年,经济学家 Mazur 提出模型:我们的大脑难以处理冗长的信息,因为不确定性随着信息的增加而增加。随着时间推移,我们对收益的感知下降。

做设计能用到的三条设计曲线,学起来准没错!

决策中,我们倾向于把长期的权重调低:无论是收益还是成本,只要时间够长,我们都倾向认为它不够重要。

举例来看:各大银行如何吸引潜在用户办理信用卡?可以承诺在后期,提供专业的优质服务与购物优惠,也可以信用卡办理完成的当下,让用户领取诸如行李箱、厨具套装之类的礼品。虽然两种方式都有可能吸引来用户,但原本办卡意愿相对低的用户,大部分是被当下的礼品所吸引。换言之,这部分用户是「额外的」。

做设计能用到的三条设计曲线,学起来准没错!

各大互联网产品都深谙此道,比如购买会员的页面,首月打折/首月免费/一年后付费都是惯用的手法,就在当下,给用户利益,促进转化。

做设计能用到的三条设计曲线,学起来准没错!

技巧总结:比起稍后的利益,我们更倾向当下给用户一些甜头,哪怕甜头很小。

峰终定律

峰终定律由诺贝尔奖得主 DanielKahneman 提出:人们对于一段体验的评价,取决于这段时间内最好的体验,与结尾的体验。我们的大脑最擅长「以偏概全」,它不会无差别收录所有内容,只会去记录离自己最近、让自己印象最深的点。

做设计能用到的三条设计曲线,学起来准没错!

宜家是峰终定律最好的践行者。顾客的购物流程中,差强人意的体验不在少数。比如店员很少,难以及时获得帮助,比如购物路线很长,对于有明确购物目的的顾客不太友好,比如永远要排的结账长队等等。

做设计能用到的三条设计曲线,学起来准没错!

但是宜家把握了它的「峰&终」。「峰」是过程中的小惊喜,比如随时可以坐下体验的沙发躺椅,比如偶尔出现的极便宜的家居用品,比如贴心的铅笔与尺子;「终」就是结账出口外,抚平顾客排队焦躁的冰淇淋与热狗。

做设计能用到的三条设计曲线,学起来准没错!

而这些产品宜家本可以提高售价,但却没有。因为用一个美味便宜的冰激淋结束购物之旅,糟糕体验被抛到脑后,人们回想起宜家时,会选择性地认为整个流程都非常棒。

做设计能用到的三条设计曲线,学起来准没错!

游戏产品也非常善于遵循峰终定律让玩家玩得更尽兴。比如疫情之后大热的 Switch 健身环大冒险。

做设计能用到的三条设计曲线,学起来准没错!

运动时,系统会一直强力夸夸为玩家打气,完成动作都会有及时的鼓励给到,创造一个接一个的体验「峰」值。每一次通过关卡,还会让玩家站直并高抬双手,将健身环举过头顶坚持几秒,画面里的「终」是非常有仪式感的 ending 动作,让玩家成就感满满。

做设计能用到的三条设计曲线,学起来准没错!

技巧总结:在满足了用户的常规体验之后,用心打造一些带有巧思的设计,安排在流程的中间与结尾处,给用户创造峰值体验。这不仅有可能让普通用户转化转化成忠诚用户,还能极大提高产品满意度还能带来口碑效应。

徒劳曲线

租房产品中,用户在 APP 内挑选几套心仪的房源,再约房东/经纪人去实地看房,是很典型租房用户场景。我们发起「看房路线」这一功能的设计。使用看房路线,用户能够在选好x套房源后,根据智能规划的看房顺序与路线,辅以时间提示与导航,有条不紊地去实地看房,妥妥贴心功能。

做设计能用到的三条设计曲线,学起来准没错!

我们大费周章产出了设计方案,上线后的效果,无论是使用频率与使用深度,都不理想。调研后发现,实地看房的场景,其实存在极大的不确定性。用户在看房中途,可能做出决策租赁某一套,也可能被经纪人带领去看别的房源,从而中断原本的计划。

做设计能用到的三条设计曲线,学起来准没错!

用户是完全自由的,他们会寻求最熟悉、最好用、最稳妥的途径去解决自己的非娱乐性问题。至于导航,用户平时使用什么同类产品呢?高德地图、百度地图这类很成熟的地图类应用。

用户不会因为场景不在专业的地图APP内,就原谅打折扣的导航体验。用户预期远高于实际产品开发程度,这种认知偏差,需要产品人来买单。

做设计能用到的三条设计曲线,学起来准没错!

总结这个功能的问题出现在哪里?其一,设计缺失,没有将线下流程的旁枝侧节考虑全面;其二,设计过度,但没有成本去满足用户的高阶需求。如何调整用户的预期到合理的区间,我们做设计时的「度」怎样把握,徒劳曲线应运而生。

做设计能用到的三条设计曲线,学起来准没错!

横轴是设计投入程度,纵轴是用户满意度,随着设计投入程度的加大,用户的满意度呈递增态势,但到了一定程度,满意度会断崖式下跌至谷底,这个阶段的设计投入便是徒劳。当设计投入快到达极限时,满意度又陡然到了一个新的高度。

我们要将自己的设计置于一个合理的区间,并将用户的期望调整同步。当有足够成本支持(无论可观支持抑或主观争取)时,把握机会,为用户创造体验。

做设计能用到的三条设计曲线,学起来准没错!

技巧总结:要引导用户在使用产品的时候,对功能有合理的预期——如果不能提供完善的服务,就用朴素的设计方案满足用户的基本诉求,而非好高骛远。在用户有更加合理选择的时候,给与用户便利,尊重用户的自由。这样不太功利的思考与设计,很可能带给你的产品带来更快的迭代,与更多的用户。

双曲贴现、峰终定理、徒劳曲线,三条曲线尝试将人们的思维偏差暴露出来,利用得当,事半功倍。希望能带给你一点启发。


文章来源:优设    作者:58UXD


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何有理有据做设计,而不是凭感觉?

雪涛

很多时候,当你的设计遇到了挑战,你无法客观地回答为什么,甚至在和业务方沟通的过程中表现得很被动。

为什么行为召唤按钮的位置在右侧

通常根据人们的习惯,我们将核心行动操作都放置在右侧,例如下图核心的行为召唤按钮都放置在右侧,那为什么都要放在右侧呢?

我们可以用古腾堡图表来解释一下。古腾堡——西方活字印刷术的发明人,顺便看一下他发明的图表,啥意思呢?就是当我们在浏览一个不熟悉页面的时候,我们通常浏览的路径是一个对称的,从左上到右下的一个路径,最终的视觉落点通常就会在这条线上。

所以我们很多的信息和操作按钮,都是在右侧。然而我们发现有些对话框却把行动按钮放在左侧,我们来分析一下原因,像下方的对话框:

左侧的是我们常规看到的一个模态弹框,弹框内右侧的行动按钮可以是确定,也是可以删除,但是右侧的弹框基于我们的猜测是希望用户在高风险操作下,再次确认要进行的操作,所以当用户视线移动到右边的行动按钮时发现它并不是想要的操作,这时用户会对左侧信息进行一次再浏览,确认后再选择,很多时候用户在进行操作的时候会下意识地进行右侧点击,所以这样的处理方法可以避免用户对高风险行为的误操作。

但是话又说回来,这样的设计其实违背了用户的习惯和预期,所以还是要慎重考虑。

我们再来看一下高德地图的案例, 点击「退出」后展开两个选项,「退出导航」在左侧高亮,取消放在了右侧。

那这算不算违反用户的习惯和预期呢?我们换一种解释,这里运用到的是「菲兹定律」,目标按钮的大小、和手指间的距离影响用户操作的效率

如果退出导航放在右侧可以吗?在别的场景下没问题,但是在行车驾驶的场景中,任何的操作都需要快速。可以再想一下场景,什么时候会退出导航:1.目的地已到 2.开到一半认识路了 3.导错目的地了 4.要换交通工具了…..所以高德作为一个工具型产品,是一个核心的准则。

菲兹定律深入解读:

为什么用户要被「区别对待」

现在随着大数据和人工智能的科技进步,人们日常生活也变得越来越便利,或者说人也变得越来越懒。我们不用再费尽心机寻找我们想要的,所有的内容都会跟我们的习惯、行为被智能推送,产品也越来越人性化。所以我们今天的十万个为什么就来聊一聊个性化设计!

1. 内容个性化

个性化内容需要通过发现偏好-帮助过滤-使用 3 个步骤来看。首先内容个性化可以分为用户偏好个性化以及用户设置个性化,比如抖音、淘宝等应用,会根据用户对内容的搜索、浏览等行为习惯的偏好进行不同的算法推送,比如抖音我最近看鉴宝和篮球比较多,所以针对这些视频,我的完播率、播放数、点赞评论数据有变化之后,推送给我视频内容的权重就发生了变化。

其实很多用户不太理解,在电商应用,我已经购买过一件商品后,却依然还是给我推送同样类型的商品。

而用户设置个性化比如在使用 bilibili、漫画等应用时会在正式浏览前让用户设置自己的偏好和基础信息帮助用户进行更精准的推荐。

但这里有一个问题是,我们给用户设置的选项和用户实际本身不符,比如让用户选择他的年龄,很多用户可能觉得自己会更年轻,所以选择年龄和实际不符,那么推送的内容是他需要的吗?所以这里就需要根据用户真实行为数据来进行再次的过滤。

但是如果我们就这样把用户所选的内容都推送给他,那效率一定很低下,所以我们会从时间、热度和用户自身行为权重进行排序计算,当然这些内容也并不是都用 feed 流来承载,形式可以多样化,也包括进行分类,就像微信阅读会推荐 3 本书,你也可以选择点击换一换,甚至还把推荐来源给写出来了。

2. 场景个性化

最近看到两个不同的界面,实属有趣。某天我下了地铁用支付宝扫码出站后,页面提示我是否要进行打车,我觉得还是挺贴心的,虽然我不需要打车但是这个场景让我有了更加方便的选择。

同时发现在群里有另一个小伙伴也截了这个页面,他的界面却是提醒他是否要租一辆共享单车!这简直是赤裸裸的「歧视」呀。当然这个也就是和下面要讲的用户行为有关了,如果你经常骑车,他就会在这里给你推荐共享单车。

还比如高德地图在导航的时候如果即将进入收费站,在页面明显的位置也会出现支付宝入口的图标。(图片找不到了)

3. 行为个性化

这个应该正确的说是行为导致的功能个性化,比如知乎,从之前的上下切换话题到左右切换,再演变成上下切换话题。大家用过知乎的同学知道,现在上下切换话题其实还是有些不方便的,但是知乎为了让更多金主爸爸的广告能露出,不得已出此「下策」。

我们在设计的过程中也有一个原则「避免功能即按钮」的设计,在业务的背景下也被选择性忽略,所以他做了一个悬浮可动的切换按钮,其实在可动之前,他是固定的,是由于用户频繁误操作的行为,让知乎的设计师将它变成了可动吸附的按钮了。这个就是行为导致的功能个性化。

再比如腾讯视频、爱奇艺里的「只看 TA」这个功能。通过数据和用户行为路径的分析,发现很多用户会在一个视频里频繁观看某一个演员的片段,可能是自己喜欢的演员,可能是被其他平台吸引过来看某个片段的用户,这样大量的行为让我们发现用户的这个高频需求。

4. 目标个性化

最近也在体验了一款游戏,完美世界的笑傲江湖。其实现在很多的手游都会有这样的功能,就是会让用户选择如何体验游戏,由于玩游戏用户时间、职业的不同,所需要体验游戏的内容也是有区别的。

时间多的用户更想要体验所有内容,快速提高战力。而女性用户可能更想边看风景边玩,看唯美的画面。如果是时间少的上班族,那么更希望能做一些性价比高的任务,不至于脱离大部队的节奏。所以当用户有不同目标时,产品也有相应的策略让用户更好地体验产品。

为什么你设计的信息用户看不见

很多设计师在进行信息设计的时候,通常靠着感觉和曾经尝试过的经验进行信息美化。但是当我们遇到需要对信息设计进行解释的时候,理由通常很苍白。

你无法说出为什么用户能够快速地浏览信息,只是觉得又大、又粗、又鲜艳的信息能够被识别。所以今天我们就要来聊一聊,为什么。

首先给大家介绍一些经过研究之后的数据结论:

人类视野的空间分辨率从中央向边缘减少。我们人类每只眼睛具有 700 万左右的视锥细胞,它们在人眼中的分布是越靠近中央凹的区域越密集。而另外一个研究表明,边界视觉的信息在被传递到大脑之前是经过压缩的,而中央凹的视觉则不会。大概就是下 2 图这个意思。

然后有同学会问,既然我们的边界视觉那么差,当用户在浏览界面信息的时候,为什么给用户 3 秒钟时间看界面他还是能够记住页面中的一些信息呢,或者会说为什么我们在浏览的时候,它不像下图那样只有一小圈是高清,而边上的文字是模糊的呢。

这其实是因为大脑通过一个比较粗犷的方式,基于我们的预期,给视野进行填充,大脑也会命令你的眼睛对边上的信息进行细节采样。所以这是一个很快速的过程。

为什么有的人能够一目十行就是,他的大脑能帮他补充得更多,或者说他的中央凹面积大。

但是有一个实验是,我们通过眼动测试,当用户的中央凹停留在一篇文章中的一个地方时,这个文字显示的是正确的,但是随着中央凹的移动,他周围的文字会进行随机的变化,他虽然能够成功地完成阅读,但是速度大幅下降。

比如大家看一下这个页面的区域:

当我们扫完这个页面也就 2-3 秒,但是如果你没有把中央凹停留在一个信息上的时候,其实都是靠大脑对我们的预期进行的补充。而真实的情况是,你们并没有发现页面中错误的地方。

言归正传,为什么你的信息用户总是看不见呢。我们又要讲到边界视觉。我们的设计如果不考虑边界视觉,那么就会影响到能够被识别的信息。那么边界视觉到底有什么用呢?

1. 引导中央凹

我们刚才说了中央凹的重要性,那么我们在什么时候会把中央凹放到我们要看的信息上呢?其实就是依靠我们的边界视觉。

边界视觉引导中央凹,它帮助中央凹捕捉关键信息。我举个例子,大家在查看一个食品包装的生产日期的时候是怎么寻找的呢,大家的眼睛不断地在搜索,而边界视觉是提供了低分辨率的线索,帮助大脑,控制眼睛以线索的发现顺序进行移动。

2. 捕捉运动元素

边界视觉可以非常快速的捕捉到运动的物体,所以在界面设计中,无法放置在核心位置的元素但又需要用户去注意到的时候,通常就会使用动效。

那么我们要怎么做才能让用户关注到关键信息呢?

1. 将信息尽量放在中央凹或者中央凹边上能够被预期的位置

在小红书很早的一个版本中,当用户进行点赞操作后,反馈消息在顶部显示,让用户无法察觉和关注到。因为边界视觉都无法捕捉。所以当用户在进行操作时,如果需要将状态、文字告知用户,就需要显示在用户能预期以及能被边界视觉捕捉到的位置。

2. 使用图标、图片的形式标记出关键信息

比如在一大段的文本中,用户无法快速的查看内容标题,我们就可以在标题前使用图标、图片的形式进行标记,让边界视觉获取到信息之后在大脑中产生预期模型。

3. 使用动态效果吸引用户注意

动态效果能够快速被捕捉,甚至引导用户的视线。比如马蜂窝在底部进行点赞后通过动效引导用户,告知用户该点赞是为用户而赞,同时让用户的视线又回到了顶部,可能增加用户的停留时间。

4. 使用高亮的颜色来吸引用户的边界视觉进行捕捉

由于边界视觉的搜索是线性的,所以我们必须将重点的信息进行高亮显示,比如警告的红色,可点击的蓝色等。

在这里再补充一个我总结出来的规律,不一定对。

大家可以看到,下方的知乎话题界面,一进入界面我们的边界视觉立马给我们进行信息捕捉,所以首先被关注到的是呈现蓝色的文字、图片、图标等。

这里大家发现一个问题没有

为什么在这个界面中上方的两个按钮不用色块的形式做呢?

例如右边这样,很多同学在这里第一反应是这个按钮太重了!很突兀!为什么很突兀?

既然要引导用户为什么不做得重一点呢?那有同学又会说这样设计会干扰用户对其他信息的浏览,那么为什么会干扰对其他信息的浏览呢?

我猜测人眼的中央凹视锥细胞会根据界面中信息的重要程度进行调整,也就是说不同程度的强化会让边界视觉的捕捉能力下降。

像右侧的色块按钮让中央凹的视觉细胞更加聚集,而导致边界视觉的范围也大幅缩小,所以你们看左边界面觉得信息优先级很清晰,但是右侧的就会觉得我只看到了两个大按钮,而其他的信息都没有被捕捉到。

那继续思考一下,什么时候能用大色块的按钮呢?很多电商平台的购物都是大按钮,这个难道不会让用户的边界视觉受影响吗?

大家发现一个规律没有,有大按钮的页面基本上图片、图标都很多,而一般都是文字的页面,通常都不会出现大按钮,因为出现了就会被喷太突兀了!!

这就是因为大按钮在没有其他更高层级信息的配合下让边界视觉捕捉范围降低了,如果都是高层级的信息,那么边界视觉的捕捉范围就会「一视同仁」。

所以,为了让一个界面的按钮不突兀,一种方法是用和它相似级别的元素进行辅助展示,另一种方法就是降低该按钮的视觉引导层级。

为什么用户心流那么难设计

不知道大家是否曾经或者现在使用过某个产品,当我们在完成某一个任务或者在某个场景中时,自己的操作行为特别自然流畅,注意力也非常集中,这种感觉让你非常的愉悦、舒适。

所以契克森米哈提出了心流的概念:个体完全投入某种活动的整体感觉,当个体处于心流体验的过程中,会对周边干扰视而不见,过程非常愉快且会觉得时间过得很快。

所以当我们在做交互设计时,我们追求的就是一种自然、能让用户进入心流的交互体验。但是大家不要误会了心流的概念,有些同学觉得我们在刷抖音、微博、微信就是一种心流的状态,那就错了。

心流并不是一种简单的沉浸的状态,当我们在娱乐时不过是被内容吸引了,让你觉得沉浸只不过是你的行为操作形成了习惯,不是心流状态。

今天我就来和大家分享一下如何通过一些方法,作出让用户进入心流状态的设计,这些都是有迹可循的。

1. 用户自信的控制感

开过车的同学都知道,左侧刹车右侧油门,档在右手边,在国内所有车都是这样,所以我们不会搞错。在经过一段时间的驾驶后我们更能够清楚的了解汽车的动力、刹车等性能,所以我们会觉得这辆车的操控感觉很好。原因是他的设计符合了用户的预期。直觉的预期、位置的预期、功能的预期以及结果的预期。举个例子,当我给你一个任务,希望你能够快速的进入 xxapp 进行个人头像的设置,在这个前提条件下我们来看一下刚才说的几个预期:

直觉预期

每个人的直觉都不同,这来源于他生活中的环境影响和习惯影响所以对于我个人的直觉来说,要完成这个任务首先必须找到最初的入口,我的直觉告诉我这个功能大概率可能出现的位置会在底部标签中的个人中心板块中。

位置预期

个人中心板块的位置可能会根据信息架构而出现变动,比如抽屉导航中会出现个人中心的入口,例如滴滴。当我们进入之后会看到头像、名字、箭头等信息,特别是箭头,这个图标给人的预期是你可以继续进入进行下一步操作,那么用户对下一步操作的预期基本上就是会点击箭头或者头像,这个也是比较明确的。或者直接来一个编辑的按钮也是可行的,这样就不需要用户去猜了,但编辑的功能比较垂直了,所以到底用哪种形式,要根据内容来。

如果没有这个箭头,用户一定会产生试探性的行为操作,此时内心已经有疑惑且不自信了。所以在心流交互中,明确的功能引导非常重要。

功能预期

用户预期通过他的操作能够达成目的,那么最基本的就是在这条路径上的功能不能缺失以及减少其他的干扰。可以发现微信的个人中心最底部板块有两个热区,并不是一块直接进入个人中心的热区,如果点击名字这一整行,则会下拉引导你拍摄一段视频。所以有时候想替换头像以为点击这一块都可以进入二级,却发现这并不是我要的功能。

结果的预期

最后当用户进入编辑头像页面之后,需要关注其场景,这边微信做的就挺好:

  • 直接拍摄
  • 之前拍摄或保存的图
  • 上一张头像
  • 当下我要保存这张头像

2. 减少阻断式的干扰

很多时候交互流程已经做的非常自然了,但是当用户正在他的心流体验中,突然一个模态弹框跳出打断了用户,令人啼笑皆非的是这个弹窗只是告诉你一个不痛不痒的信息,这就比较难受了。

而我们来看马蜂窝当用户在 app 中完成某些特定任务后,不会出现模态弹窗的强制干扰,而是在顶部出现一个通知 bar,这样原本在进行任务中间阶段的用户不会受太大的干扰,可以继续任务行为。

再例如美团外卖和饿了么,用户在点餐时对优惠优惠的关注是特别强烈的,而是否能够让用户认真的挑选菜品,我们也尽可能做到影响的打扰,就像满减去凑单的交互形式,点击后不跳转,仅在当前页面以文字形式让用户明白并行动,但这里去凑单很容易和去结算有误操作。

3. 并减少不必要的操作

例如马蜂窝自定义旅程,进行多标签选项,当用户在当前页面选择完该页面的选项后自动帮助用户定位到选择日期的功能模块中。这样减少了用户不必要的下滑操作,像这样单一场景中对用户的行为预期是比较好判断的。

4. 闭合路径

之前玩过很多款手游,即便是一些常用的套路,每家都能玩的不一样,例如宝石合成、英雄装备获取,有些游戏能够做到让用户在一个场景中不脱离。

比如宝石合成这个功能。宝石从哪里来?是否能在合成合成路径中穿插购买的分支并再链接回合成场景?在包裹中进行合成和在装备界面进行合成是否流程一样;然而有些游戏当用户购买完宝石后需要重新自己再打开合成界面,非常繁琐,同时也导致了用户消费路径的断裂。

再比如装备副本获取这个功能,这里我们看一下权利的游戏这款游戏,当我一件装备的零部件不足需要进行扫荡获取,这里有两种场景,一种是我刚好只需要这 4 个件合成 1 件,另一个是我需要更多的零部件,不仅仅这一个,所以对前者来说我达成了目的就可以返回去合成界面,而后者我可能需要更多数量的零件,但不管如何我一定还是需要返回合成界面的,然而不管是哪个场景,都必须点击两下关闭按钮才能返回合成界面,所以在这个地方缺少了一个快速拉回用户状态的按钮,叫做「去合成」。

当我已经完成了我的需求后,能够让我快速的返回合成界面,因为合成装备才是我的最终目的,而不是刷更多的碎片。

下方的案例再解释一下第 3  点,当用户点击合成之后,不要提示告知用户数量不够,因为你已经显示了数量未达标,用户想点击的目的是让你告诉他未达标改怎么办,所以这里最好的处理方式就是把获取该装备的方法告诉用户。

5. 恰到好处且不易发现的微交互

我们希望一个产品使用起来很自然,除了操作成习惯之后流畅外,一些帮助用户潜意识的连贯的微交互也显得非常重要。不需要有华丽的动画,有时候仅仅只是一个晃动,一个速度曲线就足以合理的表达功能的语言。

文章来源:优设

设计理念比美感更重要

用心设计

                  设计理念比美感更重要。通过7大设计理念,来展示其重要性。

Image title

25条超实用的简约原则第一趴

蓝蓝

25-minimalism-design-principles-1-1

 

极简主义可谓去芜存菁,聚焦重点。也就是说,极简主义披荆斩棘,直达目标。

既然是极简主义,那么最终呈现的外观自然是简洁二字,精心思考、屡次尝试以及大量时间均融合包含在这简约中。下面,我们就来分解极简主义,从中学习。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档