app界面设计分析,app界面设计分析六个方面

动态交互对数字产品的用户体验有很大的影响，但是如果界面元素没有给出基本的动态交互设计原理，可用性就会受到损害。在用户界面的上下文中，动作不仅仅是视觉装饰。这是增强产品参与度、拓展设计沟通范围的强大力量。

我们的世界是动态交互之一。即使在静止的瞬间，叶子也会颤抖，肺也会扩张。在数字产品设计领域，动态交互似乎是第二自然，这是日常工作的扩展，可以合理使用。如果那是真的。

请询问第一次使用动画UI元素的人。几个小时的努力产生了业余成绩。像卡在屏幕上滑动这样简单的事情好像很不好意思。这是为什么？

理论上，每天提高ui会使这个句子的行为变得容易。在预定路径上定义点，软件将补间间隙。其实，它并不是那样工作的。道具和技术是必不可少的，但它们是从原理中得到力量的。要提高数字产品的可用性，必须基于应用于无数用例的不变行为规则

动态交互设计的起源

动态设计和紫外线的结合比较新，但其根源在于迪士尼。 zrDDMFrankThomas )和SDP kq ollie Johnston )是迪士尼) Walt Disney )最重视的动画制片人，Pinnochio、Bambi、Fantasia等经典作品他们的12个动画的基本原理对电影、电视和数字内容的动态图形有影响力。

迪士尼的原理是提取身体动态相互作用的基本规律来讲故事。它们允许绘制的角色移动和表情，但不能充分满足现代用户界面对交互式动态交互操作的需求。

现代设计师试图弥合这一鸿沟。一个更为说明性的例子是动画设计的十大原则，这是迪士尼动画专家Jorge R. Canedo Estrada的原作。但是，要整体应用于数字产品的设计，就必须翻译这些要点。

Jorge R. Canedo Estrada的动态交互设计10的原理。

围绕交互式UI元素及其UX的含义)重新定位动态交互原理的最具雄心的尝试是Issara Willenskomer的《动态交互宣言》。它的深度令人震惊，但不容易阅读。

在建立动态交互的12项用户体验原则时，Willenskomer将：

从UI动画中区分动态交互设计

阐明动态交互如何帮助可用性

阐明核心动态相互作用的内部机制

动态交互设计与用户体验：重要区别

在说明动态交互设计的原理之前，强调Willenskomer声明中出现的主要区别很重要。

动态交互不仅仅是装饰

动态交互设计与UI动画不同义。这是很重要的。因为除了增加吸引力之外，UI动画几乎总是被视为精心设计的装饰，而与UX无关。动作不是装饰而是行为，行为只能帮助和阻碍用户的体验。

实时和非实时两种交互

动态交互设计包括两个基本的交互：实时和非实时。

当用户在屏幕上操作UI元素时，实时交互提供实时反馈。这意味着行为将立即响应用户输入。

用户输入后发生了非实时交互。这意味着用户在继续之前，必须暂停和观察发生的动态交互的行为。

实时交互：动态交互可以立即响应用户输入。斯坦雅库维奇) ) ) )。

非实时交互：交互后，用户需要临时等待并查看动态交互。只是电脑)

动态交互式支持可用性

动态交互设计需要四种不同的方法来支持可用性。

期待：用户与UI元素交互时，想看到什么样的动态交互行为？动态交互是否像预期的那样或引起混乱？

连续性：交互是否在整个用户体验中具有一致的动态交互行为？

描述：交互及其触发的行为是否与符合用户意图的事件的逻辑过程相关联？

关系： UI元素的空间、美学和层次结构属性如何相互关联，影响用户的决策？动态交互如何影响存在的各种因素关系？

数字产品的十二种动态设计原理

1 .模拟现实对象的时间加速和减缓减速的方式。适用于动态显示的所有UI元素。

放松的相反是直线的动作。表示线性动态的UI元素立即从固定速度变为全速，从全速变为固定速度。这种行为在现实世界中不存在，对用户来说似乎停滞不前。

UI卡和相应的椅子移动迅速，但有松动，可以顺利且控制地停止。 Saptarshi Prakash )

2 .如果偏移和延迟多个UI元素同时快速移动，则用户倾向于将它们组合起来，而忽略每个元素可能具有自己的功能。

偏移和延迟在同时移动的UI元素之间创建层次，并传递相关但不同的信息。的时间序列，速度和间隔并不完全同步，而是交替排列，产生微妙的“一个接一个”效果。

偏移和延迟表示用户在屏幕之间漫游时有多个交互选项。

此加密货币APP应用程序一次引入了多个UI元素。它们的到达有些交错，告知用户元素相关，但又不是。 Gapsy Studio )

3 .育儿将一个UI元素的属性链接到其他UI元素的属性。如果父元素的属性发生变化，子元素的链接属性也会发生变化。所有元素属性都可以相互链接。

例如，父元素的位置如下

以绑定到子元素的比例。当父元素移动时，子元素的大小会增加或减小。
育儿会在UI元素之间创建关系，建立层次结构，并允许多个元素立即与用户通信。因此，育儿在实时交互中使用时影响最大。

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

4.转型

当一个UI元素变成另一个UI元素时，将发生转换。例如，下载按钮转换为进度条，转换为完成图标。
从UX的角度来看，转换是一种向用户显示其相对于目标的状态（系统状态的可见性）的有效方法。当UI元素之间的进度链接到带有开头和结尾的过程（例如，下载文件）时，这特别有用。

转换表示下载的开始，中间和完成。（kfdwn）

5.价值变化

在数字界面中，价值表示（数字，基于文本或图形的表示）丰富，出现在从银行应用程序到个人日历到电子商务站点的产品中。由于这些表示与实际存在的数据集相关，因此它们可能会发生变化。
值的变化传达了数据表示的动态性质，并告知用户数据是交互式的，并且可能会受到一定程度的影响。当没有动静地引入值时，用户参与数据的意愿降低。

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

6.遮罩

遮罩是UI元素各部分的战略性揭示和隐藏。通过更改元素外围的形状和比例，遮罩会发出信号，指示效用发生变化，同时允许元素本身保持可识别性。因此，理想的选择是像照片和插图这样的详细视觉效果。
从可用性的角度来看，设计人员可以实施屏蔽以向用户显示他们正在通过一系列交互进行中。

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

7.叠加

在2D空间中，没有深度，UI元素只能沿X或Y轴移动。叠加会在UI的2D空间中产生前景/背景区别的错觉。通过模拟深度，覆盖可以根据用户需要隐藏和显示元素。
使用重叠时，信息层次结构是重要的考虑因素。例如，用户在做笔记应用程序中应该首先看到的是他们的笔记列表。然后，覆盖可用于为每个消息（如Delete或Archive）显示辅助选项。

叠加允许用户快速归档或删除此笔记应用程序中的条目。（xqdsh）

8.克隆

克隆是一种动态交互行为，其中一个UI元素拆分为其他元素。这是突出显示重要信息或交互选项的明智方法。
当UI元素在界面中实现时，它们需要一个清晰的起点来链接到屏幕上已经存在的元素。如果元素只是无处不在而突然爆发或消失，则用户将缺乏进行自信交互所需的上下文。

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

9.晦涩

想象磨砂玻璃门。它需要交互才能打开，但是可以（在某种程度上）辨别另一端正在等待什么。
模糊处理的方式相同。它为用户提供了一个界面，该界面要求进行交互，同时显示要跟随的屏幕提示。导航菜单，密码屏幕和文件夹/文件窗口是常见的示例。

遮蔽为用户提供了重要的互动方式，同时使他们保持产品叙事的方向。（dct）

10.视差

当两个（或多个）UI元素同时移动但速度不同时，将显示视差。再次在此，目的是建立层次结构。
• 交互式元素移动速度更快，并显示在前景中。
• 非交互式元素移动速度变慢并退回到背景。
视差引导用户使用交互式UI元素，同时允许非交互式元素保留在屏幕上并保持app界面设计的设计统一性。

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

11.维度

维度使UI元素似乎具有多个交互方面，就像物理世界中的对象一样。通过使元素看起来像是可折叠的，可翻转的，浮动的或具有逼真的深度属性而实现的。
作为一种叙事设备，尺寸暗示着UI元素的不同面被链接在一起并实现了无缝的屏幕过渡。

维度意味着2D UI元素具有多个交互方面，就像物理世界中的对象一样。（精明的钢铁侠）

12.lldsl和变焦

滚动和缩放允许用户在空间上“遍历” UI元素或增加其比例以显示更多细节。
• lldsl（Dolly）：lldsl发生在用户的角度更接近（或远离）UI元素时。想象一下，一个拿着照相机走到一朵花的人近距离拍摄。
• 缩放：使用缩放时，用户的视点和UI元素保持固定，但是该元素在用户屏幕内的大小增加（或减小）。现在，假设该人保持姿势并使用相机的变焦功能使花朵显得更大。

lldsl：用户的视点似乎越来越接近背景图像。（亚诺什）

缩放：用户的视角不会更接近图像。而是图像的比例会增加。（Victor Aldabalde）

动态交互就是沟通

互动体验的需求动态交互在其所有的轻快和微妙的形式。当坚持动态交互设计原则时，即使最基本的UI元素也成为人类交流的复杂媒介。当这些原理被忽略时，动态交互就体现了自然界所没有的特征。没有任何美学上的辉煌可以克服由此带来的笨拙。
动态交互设计与数字产品UX之间的关系正在迅速成熟。原则上的动态交互方法可以防止过度依赖趋势，工具和技术的短暂使用。更好的是，它跨越了2D屏幕上元素的抽象动态交互与3D世界中动态交互感知之间的鸿沟。