ui设计4大原则(ui和交互设计的概念)

编辑导读：动态效果是一种功能元素，而不仅仅是一种装饰。本文介绍了五种交互效果，水平视差滚动效果、动画搜索栏交互、提交按钮激活信息、页面间分页动画、带粘性元素的铺贴卡片。希望对你有帮助。
设计一个具有动态效果和过渡效果的用户界面是为另一个手机应用程序规划更好的用户体验的好方法。在一个注意力跨度很短的世界里，动漫-微互动是激发用户参与的好方法。
这就是为什么Airbnb最近推出了Lottie——这是一个“新的开源工具，可以轻松地为本地应用程序添加动态效果。”正如Lottie项目所显示的，添加动画作为新元素对于提高应用程序和网站的用户体验变得越来越重要。
就像所有放置在界面中并与之交互的元素一样，动态效果是一种功能性元素，而不仅仅是一种装饰。动态效果要在用户界面处理得当，而后台设置总是需要一个明确的目的。当动态效果是锦上添花而不是美中不足时，用户体验会更流畅。
下面是介绍的交互效果：
水平视差滚动效果；动漫吧互动；提交按钮启动信息；页面之间的分页动画；用粘性元素展开卡片；
一、水平视差滚动效果视差效果在数字系统设计中，垂直平面和水平平面都可以使用。视差效果最早应用于电子游戏。几十年后，它进入网页设计应用，然后逐渐进入移动应用，利用静止或缓慢移动的背景图像和快速移动的前景图像来创建多层次的3D滚动效果。这使得用户体验更具沉浸感，并以其细微之处吸引用户。为什么这会让人眼前一亮-
数字屏幕是一个二维空间，但设计师可以在他们的平面像素屏幕上创建具有深度和广度的想法，这就是微妙的视差效果可以发挥作用的地方。视差效果在界面设计中使用不同的视觉元素，并以不同的速度移动它们，以增加运动和深度的错觉。我们来看看《设计原理》中两个视差滚动效果的例子。
手机游戏武器卡：
哈桑马哈茂德的武器卡
视差效果最好的一个位置是在手机应用或网站上水平或垂直滚动卡片，体验最流畅链接的感觉，这是最后一部分的卡片。类似于当你滚动到特定列表的末尾时，iphone引入的橡皮筋效果。
耐克促销卡：
贾德森阿尔梅达的耐克促销卡
这个例子是Nike应用程序概念创建的视差滚动效果，用于宣传即将发布的产品。
这种设计通过突出前景元素——鞋子，将其提升到一个更高的层次，从而超越背景卡片的边缘。这种效果补偿了滚动时发生的背景颜色变化。从例子中可以看出，精心制作的视差互动效果可以轻松帮助你从产品群中脱颖而出，给访客留下好印象。不要以为视差是纯装饰。像你使用的其他技术一样，它应该为你的用户添加真正有价值的体验方式。
但需要注意的是，视差效应范围内的过度运动，可能会对患有前庭疾病的人造成伤害。运动错觉和深度错觉可能会导致头晕或定向障碍。请记住这些设计准则：
将视差效果的数量保持在最小；限制屏幕小区域的过度移动效果；不要让你的效果分散用户对重要信息的注意力；
二、动画搜索栏交互式搜索栏是移动应用或网页设计中最常见的图形元素之一。在这种类型的动画中，界面通常只有一个搜索图标，当你点击它搜索输入栏时，会显示一个弹性动画。通过向搜索元素添加微妙的动画，设计者可以实现两个基本目标：
而搜索数据是数码产品中最常见的交互方式之一，为其增添了乐趣。当只有用户需要搜索输入时，可以通过扩展搜索栏来有效利用空白空间。让我们来看看这个交互的例子：
Alex Pronsky的搜索转换
这个设计将一个放大镜(搜索栏)显示为一个圆形图标，点击后会动画显示，变成一个药丸形状的搜索框。这是一个非常轻量级的交互设计，原则上不到5页就可以实现，在开发应用或者网站的时候也一样简单。
第三，提交按钮启动消息。这个动画将在用户填写表单或在应用程序中做出一些选择并按下submit按钮后出现。当第一次启动一个应用程序并且提取所有有序的缓存和数据时，也将使用Splash动画。启动动画通常包括应用程序的徽标和名称，并且通常在应用程序打开之前出现在屏幕上一会儿。为什么这会让人眼前一亮-
当应用进入加载阶段获取或上传数据时，启动动画是非常合适的，提供一个锚点让用户参与其中；然而，理想情况下，用户可以通过提供强烈影响用户体验的交互体验走得更远。让我们看一个交互式启动屏幕的例子：
由Khai提交闪屏
这个设计是用户在应用中完成提交交互后的演示动画。当数据被发送到数据库时，弹跳球会产生一种有趣的体验。下一个tick向用户提供反馈，告诉用户操作成功，这是一个重要的体验实现。以下是启动屏幕时应遵循的一些最佳方法：
持续时间控制在2秒以内；将用户在应用中可能的交互的时间减少到1秒或更少(如多次提交)；在评价设计创意时，要追求简单大胆的创意，而不是晦涩复杂的；过于复杂的序列动画只会显得华而不实，可能会让用户觉得自己的时间被浪费了；强烈的背景色和背景图片都是不错的选择。如果闪屏有动画效果，在相对固定或渐变的背景上添加动画可能效果更好。
四。页面之间的分页动画分页是一系列内容相似的相互连接的页面。需要注意的是，即使一个页面的某个部分的内容可以被分成不同的页面，我们还是把这个概念定义为分页。它的优势包括三个方面：导航更容易，用户体验更好，购买过程更流畅。通常用于电子商务网站。
虽然大多数传统网站和应用使用单独的页面划分内容，由于页面加载时间长，用户体验不连贯，但新设计的系统已经开始使用更流畅的分页交互，从而降低客户流失率，提高客户留存率；在过去，一个流畅的分页动画需要在几个页面之间导航。现在，我们可以创建一个单页的内容交互效果。让我们来看一个分页组件的例子，它可以在部件之间滑动，并通过动画创建愉快的用户体验：
安德烈贡萨尔维斯编页
当用户在不同部分之间切换时，它会创建流畅的用户体验。它可以在应用程序中使用，用户可以在各部分之间快速滑动。例如，在电子商务网站中浏览产品图片，在教育应用程序中阅读不同部分的信息，或者按照步骤创建食品应用程序的食谱。
动词（verb的缩写）在用户界面设计中，卡片列表是一种简单快捷的显示信息的方式。学习现实世界中使用实体卡片来记忆和组织信息的方法，如抽屉卡或便笺条。卡片列表显示一系列卡片，每张卡片包含少量信息。所以设计的真正难点在于平衡信息传递的方式，而不是让用户无所适从。
用户应该获得清晰的图片，并准确地传达信息。如果用户选择深度浏览，可以选择扩展信息，更深入的展示。保持卡片展开流畅的连续性和流动性，感觉像是一种连接的感觉。
像上面所有的交互一样，看一个交互设计的例子：
卢卡斯古施鲍尔的MVMT概念
此设计用于一个电子商务应用程序购买手表显示卡项目。每张卡上都需要显示价格、等级等主要信息。扩展卡可以显示附加信息，例如使用功能和建议。这款手表的粘性扩展视图在消费者做出购买决定时创造了更好的体验。直观的使用和正确的操作通常是审美愉悦的。扩展卡片列表可以构建响应式布局设计，也是提高可用性的绝佳方案。目的是改善浏览内容或具有大量信息的应用程序。
Original: 3359 www .星期三. is/writing-articles/5-easy-ui-interactions-in-principle
作者：萨马尔特萨尔特
本文由@牧之翻译发表。每个人都是产品经理。未经许可，禁止复制。
题目来自Unsplash，基于CC0协议。