让我们看看一些 UI 动画从优秀到卓越的示例。只需稍加调整，您就可以通过动画提升您的 UI 模式。列出的交互显示了状态之间的连续性，指示了共享元素之间的关系，并提醒用户注意他们应该注意并采取行动的内容。
为了创建这些动画，我遵循了Material Motion、IBM 的动画原则和运动宣言中的 UX 的指导方针。
所有交互均使用InVision Studio的早期版本完成。您可以在此处下载源文件。
在设计类似标签页或弹出菜单的交互时，请尝试将内容的位置与打开它的操作关联起来。这样，您不仅可以为内容的可见性添加动画，还可以为位置添加动画。对了，还可以添加一个滑动手势，方便您在内容之间切换。
在不同状态之间创建动画时，请检查它们之间是否存在共享元素并将它们连接起来。使用 InVision Studio，创建Motion过渡时，两个链接屏幕之间重复出现的组件会自动连接。这使得动画原型设计变得轻而易举。
请参阅“运动宣言”，了解您可以应用的动画类型。上面的示例结合使用了“蒙版”、“变换”、“父级”和“缓和”原则。
要实现瀑布效果，请尝试对每个内容片段或内容组应用延迟。保持相同的缓动和时长，以保持一致的效果。但不要将每个小元素都层叠起来，而是要为每组内容添加动画效果。动画要保持快速流畅。Google 建议每个元素的起始间隔不超过 20 毫秒。查看Material Motion 中的编排原理，查看更多示例。
让内容中的元素感知周围环境。这意味着让内容吸引或排斥周围的元素。更多示例，请查看Material Design的感知动效原则。
尝试使用按钮容器来提供状态的视觉反馈。例如，您可以用旋转动画或加载动画替换 CTA；或者在背景中添加动画来显示进度。解决方案由您决定，其核心在于充分利用用户正在交互的空间。如果您使用按钮颜色和文案来确认成功状态，则可以获得加分。
当用户需要执行重要操作时，尝试使用动画来吸引他们的注意力。先从细微的动画开始，然后根据操作的重要性逐渐增加强度（例如大小、颜色和速度的变化）。只在关键操作中使用这种效果——这种效果用得越多，效果就越差……用户也会越烦躁。
我希望这些示例能帮助您在为交互添加动画时做出更好的决策。借助 InVision Studio 等新的动画和原型设计工具，我预测我们很快就会看到创意交互的复兴。我们只需记住要负责任地使用这项新的超能力。
让我们运用动画来解释状态的变化，吸引用户对必要操作的注意力，明确元素之间的关系，并为产品增添趣味和个性。遵循这些原则，我们将使动画从优秀走向卓越。
每个人都在争相打造 AI 体验，但产品真的能达到预期效果吗？作为用户体验领导者，掌控产品方向是我们的荣幸。这意味着我们要思考 AI 如何在用户体验中呈现，以及它对用户的实际意义。
仅仅拥有AI功能已经远远不够了。AI成本高昂，如果执行不力，还会给用户带来更多不便。其他设计师和技术人员之前也曾抱怨过这个问题，所以我就不再赘述了。那么，作为一名用户体验领导者，你该如何才能更好地定位你的公司和团队，从而有效地推出AI技术呢？
不要仅仅为了 AI 而构建。要识别用户最紧迫、最普遍的问题。需要注意的危险信号：
与产品负责人、业务利益相关者和客户拥护者进行交流，探讨如何推动变革。与客户沟通，了解他们的工作方式，并提供可靠的数据来验证你的假设。
好了，你确定了主要问题，但人工智能真的是正确的方法吗？数字公共服务中心的评估报告《人工智能是否是正确解决方案》提供了一些指导，可以帮助你入门：
如果人工智能很合适，答案不应该总是聊天机器人，但很多公司却这么认为。如果你的公司也这么认为，那么你还有很多工作要做。首要考虑因素应该是价值，而秘诀在于组织对价值的认同。
定义贵组织的AI 愿景和目标——参考 Thrive 文章《如何创建 AI 愿景声明》中的建议，共同制定愿景和目标。运用 AI 技术，增强用户体验 (UX) 或产品团队的目标声明。
确定可以支持您的团队及其 AI 计划的联系人。
虽然您可能没有能力动员这些同事或工作伙伴，但建立联系并寻求建议仍然有助于进一步推动您的计划。
在整个组织内培养关系对于让你被看到并建立信任非常重要。
在这个部分，您需要进行认真的、有时可能令人不快的对话，以通知、协作、获得批准或召集 AI A 团队的各个成员。
引导您和您的团队更好地了解您正在建设的环境。
您的组织或产品在智能化道路上处于什么阶段？您是从零开始，还是只实现了少量自动化，还是已经拥有许多 AI 功能？这里需要考虑的重点是当前状态，而不是路线图或理想的未来。
通过大致了解您的组织所处的状况，您可以确定您的组织为了实现愿景必须达到的成熟度级别。
UI 的底层隐藏着什么？它是否采用了合适的技术架构来支持 AI 开发？在真正投入 AI 工作之前，你需要解决多少技术债务？
在架构师和开发人员的帮助下，您的团队可以全面评估您的平台的定位。虽然我不推荐 Domo，但他们有一篇很棒的文章《AI 就绪性：评估您的业务的完整指南和免费清单》，您可以参考。
了解这一点可以告诉你，你的努力是否会实现、是否会被推迟，或者是否会徒劳无功。
定义AI 设计原则，打造富有影响力的用户体验。您可以从 VUX 的AI 设计原则中找到灵感。通过补充和完善概念的原则，强化既定的 AI 愿景和目标。
不断提升您的 UX 实践以提供完善的 AI非常重要。
与工作伙伴保持定期沟通并遵循最佳实践。
您的团队是否渴望开始深入研究数据？对于注重工程设计的组织，或者为了实现并行方法，您的团队也可以专注于数据准备。您可以先清理和准备一些基础数据集，以及一些您认为能够带来价值的专业数据集：
通过清理信息并将数据输入 AI 模型，您仍然可以在现有路线图上开展工作，同时为 AI 计划取得一些进展。这样，您就可以在对现有数据集执行深度学习关联时让数据为您提供指导，从而进一步研究特定经验用例。
要利用 AI 解决客户问题，团队必须仔细思考 AI 如何在系统中运行，以及它将如何影响用户体验。请使用下方矩阵来指导讨论和决策。
真正的用户倡导者提出的问题
确保不错过任何机会，分享在探索过程中、通过用户反馈或分析所获得的经验。及时向业务和产品利益相关者汇报研究结果，确保路线图的优先事项得到数据支持。
用户体验团队还可以通过有效的可视化，在帮助利益相关者更好地确定工作优先级方面发挥关键作用。与产品经理合作，模拟代表最终愿景、第一步以及最终实现之前的几个中间阶段的英雄体验，这些体验可以映射到交付时间表和阶段。
确保你能定量和定性地衡量结果。包括领导层的投资回报率 (ROI) 和产品团队的关键绩效指标 (KPI)。虽然我不推荐这些方法，但Arounda 的《人工智能用户体验：完善人工智能产品指标的 10 个技巧》提供了很好的例子：
如果您已经为客户提供了良好的服务，那么打造高影响力的 AI 体验应该轻而易举。但陷阱在于，组织对 AI 愿景或目标的看法不一致，以及您的产品技术能力尚未为 AI 做好准备。作为一名设计领导者，您拥有独特的优势，只需稍加挖掘、拓展人脉，并打破常规思维，就能引领变革。
在数字产品设计中，响应式设计早已成为连接功能与体验的关键路径。智能手表的表盘，作为最核心的信息承载区，正在向“可感知、可适配、可延展”的方向不断演进。而我们将其类比为“数字卡片”，正是因为二者在设计逻辑上的高度契合：都追求信息层级的清晰展现、内容与场景的灵活适配，以及操作的直观反馈。
卡片设计以模块化、结构清晰、响应灵活著称，能在不同屏幕与使用场景中自如调度内容展示方式。而智能手表的表盘设计同样需要在极小的显示空间内，精准传递时间、健康、通知等多维度信息。通过响应式设计的引入，表盘可以根据环境光线、使用者习惯、交互状态等动态变化，自动调整元素的排布与表现形式，实现“信息即所需，界面即交互”。
例如，在运动状态下表盘可自动突出心率与步数；而在夜间，它又能切换为更具护眼性的低亮模式。这种“感知上下文”的能力，让表盘从一个静态的界面，变为一个贴近用户、主动适应的智能卡片。
响应式的表盘设计，不仅提高了使用效率，更拓展了产品体验的边界。它像一张随时变化的数字卡片，安静却聪明地陪伴在你腕间，把复杂的系统逻辑转化为可感知的温柔细节。
ChatGPT 是否有可能生成 UI？
我之前测试过几次，但结果却令人失望。
下面是我两个月前在一份时事通讯中分享的一个例子。
它看上去太卡通了，不太实用。
然而，上周，OpenAI 推出了一个重大更新，所以我决定再次尝试。
根据我的提示，我能够生成更好的UI模型。我甚至可以根据自己的需求创建多个设计选项：
今天，我将向你们展示我进行的实验、我使用的提示以及过程中的一些惊喜和收获。
让我们开始吧。
OpenAI 宣布，现在可以使用 GPT-4o 在 ChatGPT 中生成高质量图像，而不是使用较旧的 DALL·E 模型。
它更擅长遵循指令，并且可以更好地呈现图像中的文本。
上周，许多人尝试将照片转换成人工智能艺术作品——这就是吉卜力风格艺术潮流流行的原因。
我也尝试过：
但在网上看到很多有趣的艺术作品后，我想：
如果我可以使用 ChatGPT 生成对产品设计师真正有用的 UI 会怎么样？
实验就是从这里开始的。
我使用 ChatGPT 来帮助我生成我想要的 UI 的详细提示。
# 为名为“SkillVerse - 热门微课程”的应用设计一个简洁、现代的移动 UI 界面（iOS 风格）。布局应遵循以下结构化部分。## 1. 状态栏（顶部）- **样式**：标准 iOS 布局（顶部安全区域）---## 2. 标题部分- **居中标志**：“SkillVerse” - **字体**：中等粗细，小尺寸 - **颜色**：蓝色文本 ---## 3. 特色课程轮播（水平滚动）- **风格**：具有圆角和柔和阴影的可滑动卡片 - **卡片**: -**卡 1** - 标题：**动态设计简介** - 字幕：*4 月 2 日开始* - 视觉：动画缩略图 -**卡 2** - 标题：《自由职业者精通 Excel》 - 字幕：*3 月 31 日开始* - 视觉：生产力图标 ---## 4. 导航标签-**标签**： - **趋势**（活跃，**粗体标签**带有**蓝色下划线**） - 受到推崇的 - 已注册 - 已保存 ---## 5. 过滤行- **过滤器（下拉菜单）**： - **过去 7 天**（基于时间） - **所有主题**（类别） - **所有级别**（难度） ---## 6. 热门课程列表- **布局**：可重复课程项目的垂直堆叠： - **左**：圆形缩略图 - **中心**： - 课程名称 - 级别（例如，初学者、中级等） - **右**：保存图标 - **底部**：入学人数 + 趋势（例如，入学人数 2.4k，+12%） ---## 7. 底部导航栏-**标签**： - **主页**（活动，突出显示颜色） - 搜索 - 活动 - 轮廓 - **风格**： - 下方有标签
然后我将其粘贴到 ChatGPT 中的新聊天窗口中，然后单击“生成”图标。
令人惊讶的是，ChatGPT 在右侧打开了一个额外的面板，触发了它的 Canvas 功能。然后它开始生成代码。
这立刻让我想起了克劳德的神器功能。
然后我点击了右上角的“预览”按钮。
生成了响应式、代码支持的 UI。
看起来很有趣，但似乎不如克劳德那么精确/精致。
由于我的目的只是生成一个图像（一个可视化模型）而不是一个代码支持的 UI，因此我请求后续提示来纠正它：
创建一个可视化模型。而是一个视觉模型。
结果如下：
结果出乎意料地好，尤其是与 ChatGPT (DALL·E) 之前生成的版本相比。这是一个巨大的提升。
测验：你能在上述 AI 生成的 UI 中找到多少个拼写错误？:)
尽管用户界面看起来不错，但我仍然对图像截断感到有点困扰，所以我问了：
顶部和底部看起来有点截断。您能将 UI 缩小 20% 左右，让它整体更小一些吗？顶部和底部看起来有点截断。您能将 UI 缩小20%左右， 让它整体更小一些吗？
结果如下：
看起来不错！
然后我开始更有创意了……我想，如果我让它生成多个设计方案供我参考会怎么样？那会更有帮助！
所以我写了这个：
创建三个设计选项。使用相同的核心内容，但根据以下描述改变布局、UI 元素和视觉重点：选项 1. 大胆且引人入胜- 优先考虑视觉冲击力和品牌表达选项 2. 功能强大且快速- 优先考虑速度、清晰度和生产力- 紧凑的用户界面，卡片更小，信息层次更密集选项3.个性化和温暖- 优先考虑联系、信任和个性化- “为你推荐”轮播，包含人工智能策划的课程建议- 社会证明（头像、徽章、朋友活动）- 添加“社区”选项卡，用于同行共享内容
结果如下：
再次，我对 GPT-4o 图像生成能力的提升感到震惊。
虽然这三个选项看起来仍然非常相似，但如果仔细观察，就会发现一些小细节 - 例如“搜索”图标、社交证明和副本 - 试图使每个版本都与其他版本区分开来。
不过，结果肯定还有改进的空间。例如，由于一张图片中包含了大量信息，ChatGPT 的精度开始下降。你可能会注意到，部分文本变得无法识别/扭曲。
接下来，作为一个有趣的测试，我使用Codia AI 的插件根据 ChatGPT 生成的视觉模型生成 Figma 设计。
所有组件（包括文本）都可以在 Figma 中编辑。
它使用的字体系列是 Intel。
好得可怕。
如果我想进行更改，这使我能够自定义 UI 模型。
ChatGPT 生成 UI 视觉模型的能力是一个巨大的提升。与之前版本相比，它提供了更高的精度和对提示的遵循性。
话虽如此，速度还是有点慢，准确率还有待提高。有时图像生成到一半就停止了；有时结果很随机，而且与指令不完全一致。
当我要求 ChatGPT 根据设计选项创建 3D 模型时，事情变得有点扭曲和奇怪——但还不算太糟。
不管怎样，这已经是一次很棒的升级了。我现在能生成以前无法生成的东西了。
这一切都在 ChatGPT 聊天窗口内完成。多么方便啊？
我非常兴奋并希望未来会有更好的升级。
大脑在处理和组织看到的信息时会使用一套快捷方法，了解这些方法是设计成功的关键要素。本文介绍了十一条有效的设计准则，用形象的图解帮助读者更好地理解设计准则在设计工作中的运用，帮助你利用这些方法更快捷地开展设计。适合关注产品设计的小伙伴阅读。
感知力是大脑将不同的信息连接和组织成一个连贯整体的机制。例如我们将相似的对象分组并连接起来，能够轻松地区分出不属于该组的对象。
大脑在处理和组织看到的信息时会使用一套快捷方法，了解这些方法是设计成功的关键要素。
在UI设计时，我们应该有意识地运用感知力，用足够的事实来验证设计，有依有据地解释为什么这个图形元素要这样设计？背后的原因是什么？
提升感知力有助于清晰地解释设计方案，避免常见的设计错误，引导我们将设计做得更好、更容易理解！
彼此靠近的元素会被自动理解为一组。把它们的位置放得更远，会给人一种这些元素是完全独立的个体的印象。
在UI设计中，可以利用邻近原则将相似的界面元素组合在一起，把控总体布局。
邻近规则适用于主导航、卡片、按钮、内容和图标等。我们还可以使用适当的留白将不同的元素进一步分开，创建一个层级更清晰的界面结构，以此来帮助用户浏览和理解不同类型的信息。
邻近原则是直接影响界面可用性的基本规则之一。如果随意控制元素的位置和间距，有可能会让整个产品变得混乱和难以理解。
视觉上相似的元素会被视为同一组，视觉上不同的元素，大脑会下意识将其视为单独的元素。
利用相似性可以来定义界面的特征，例如颜色、形状、尺寸、纹理或空间位置等。最容易区分的是颜色相似，其次是尺寸和形状相似。
如果一个元素和界面中其他的元素都不同，无法融入到其他元素组中，那么这个元素就会变得非常显眼。
我们可以利用这种差异化的效果来突出一些具有引导性或者功能性的元素，例如登录按钮或者加入购物车按钮等。
一组不相连的元素组合在一起，我们会下意识地自动补充这些元素之间的空白，得到一个完整的、可识别的形状。
闭合原则有多种不同的用法。例如一个虚线箭头，我们会填补空白并把这些点连接在一起，得到一条完整的线段。
闭合原则还有助于识别抽象的图标形状并赋予更多的含义。在图标设计中，为了避免信息过载，大多数图标的设计都很简洁，更方便用户理解。
运用闭合原则的经典案例包括用不同虚线构成的IBM标志、利用正负形空间组合而成的WWF熊猫标志。
UI界面中的元素一旦有对称性，就会产生秩序感，我们很快就能看到并理解这种形式。
我们天生喜欢对称的物体。对称排列的元素在视觉上更令人舒服，也更美观。
可能有人觉得对称设计过于呆板，这种想法在平面广告或视觉设计中可能正确，但在UI设计中对称布局是相当重要且实用的界面排版形式。
对称布局让设计更容易理解，也更友好，缺乏对称会导致界面混乱，不知道该关注哪个元素。当然，如果想让某个模块突出展示，也可以尝试打破对称性，这样不对称的元素就能在界面中脱颖而出。
界面中沿着同一条线对齐的元素会被认为属于同一组。
在浏览界面时，视线会第一时间寻找最顺畅的视觉动线。这也解释了为什么在使用连续性原则时，需要确保直线(或曲线)是均匀和可预测的。
线条越均匀，生成的形状越容易被用户正确识别。
连续性有助于界面保持上下垂直滚动时的节奏，相似的内容应始终保持对齐。如果某个元素打破了这种连续性，我们的浏览节奏会被打乱，浏览速度也会变慢。
当下的UI设计中，流行带有圆角的卡片和按钮效果。其中的一个原因是我们对于直角的处理速度稍慢，视线需要停顿并旋转90度，而更圆滑的导角效果能帮助我们的视线更快地转换。
按相同方向、以相同速度运动的元素被认为是一组。
在设计轮播、下拉列表、过渡动画等场景时，共同命运原则会很有帮助。例如我们的视线既跟随轮播图水平移动，还跟随下拉列表向下展开。
根据希克定律，可供的选择数量应该有限制。有太多东西可供选择可能会导致用户迷失方向，做出判断的时间加长，甚至会感到压力。
米勒定律提到，大脑处理信息的能力与认知负荷有直接的关系。我们大脑一次能处理的信息量大约是7个对象。对象数量越多，处理它们所需的时间就越长。
在设计时，尽量不要超过七个选项，为了获得最好的体验，应尽量将选项保持在4-5个。这意味着需要控制主导航数量、按钮数量、下拉选项和轮播图数量等。
当需要用户做选择时，最好能突出显示最受欢迎或最推荐的选项，帮助用户更快做出决策。
我们能够本能地区分界面中的图形元素和背景。
界面由不同类型和样式的图层组成，每个图层都有不同的层次结构。
为了避免层次结构混淆，我们需要清楚地定义界面的所有元素。背景不需要设计设计的太花哨，有可能会抢夺用户对主要内容的注意力。
辅助内容和功能不需要太明显，并且需要与主要内容在设计上做出区分。
可以使用对比关系、位置关系和阴影等方法帮助用户区分内容和背景。
用户通常认为具有视觉吸引力(美观)的产品更实用。
根据这个原则，流行、对称、美观的界面会对用户产生更积极的影响。如果视觉效果给人足够好的第一印象，用户可能会忽略一些可用性问题。
审美可用性的基础在于具有一定的可用性，之后才会起作用。如果产品本身的功能就很糟糕，那么再美观的界面也无济于事。
高质量、美观的界面有助于建立用户信任。相反一个看起来混乱的设计会让用户感到不靠谱。即使用户不能确切说出界面视觉的问题，但他们也会觉得这个产品有风险或者不正规。
高质量的UI设计对于银行类、金融类和医疗类产品来说尤为重要，尤其是在需要用户提供个人信息或涉及交易的使用场景中。
我们最容易记住一组当中的第一个和最后一个元素。
将最重要的内容或元素放在每组的第一个或最后一个，吸引用户注意力，方便高频操作。而次要的内容操作频率相对较低，则放到中间位置。
例如在构建导航、下拉列表等场景中，将重要的操作放到首位。
在一组看起来相似的元素中，我们总是会记住与其余元素不匹配的那个元素。
在UI设计中，隔离效应意味着将界面中重要的内容或关键的操作在视觉上与众不同。
最典型案例是界面中的CTA(号召性用语)按钮。通过改变CTA按钮的颜色、尺寸等，与界面中的其他按钮区分开来，第一时间引起用户的注意。
专栏作家
作者：Clippp，每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。
本文原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
蓝蓝设计的小编 http://www.lanlanwork.com