5款超实用 Stable Diffusion WebUI进阶插件｜兰亭妙微UI设计公司

导语：在现代WebUI设计中，插件扮演着至关重要的角色，能够提供更多功能和增强用户体验。本文将介绍5款超实用的Stable Diffusion WebUI进阶插件，这些插件具有稳定的性能和出色的扩展性，能够帮助设计师更好地创造出令人惊叹的Web界面。
一、插件名称：Flexbox Grid 简介：Flexbox Grid是一个基于Flexbox布局的响应式网格系统，它提供了简单易用的网格布局解决方案。设计师可以使用Flexbox Grid快速创建自适应的网格结构，轻松实现多种布局需求。该插件具有稳定的性能和出色的浏览器兼容性，能够帮助设计师更高效地进行页面布局。

来百度APP畅享高清图片
二、插件名称：ScrollMagic 简介：ScrollMagic是一个强大的滚动动画插件，它能够为网页添加各种视差效果和动画效果。设计师可以利用ScrollMagic创建吸引人的滚动交互效果，使用户在浏览页面时获得更好的体验。该插件支持多种触发方式和动画选项，具有良好的性能和可扩展性。

三、插件名称：Typed.js 简介：Typed.js是一个简单易用的文字打字效果插件，它能够模拟打字机的效果，为网页添加独特的动态文本效果。设计师可以使用Typed.js创建有趣的标题、标语或引言，吸引用户的注意力。该插件支持多种配置选项和回调函数，能够满足不同的设计需求。

四、插件名称：Slick 简介：Slick是一个功能强大的轮播插件，它提供了丰富的轮播效果和配置选项。设计师可以使用Slick创建各种精美的图片轮播、内容轮播或幻灯片展示。该插件支持响应式布局和触摸滑动，具有良好的性能和可定制性。
五、插件名称：Chart.js 简介：Chart.js是一个灵活易用的图表插件，它能够帮助设计师创建各种图表和数据可视化效果。设计师可以使用Chart.js绘制折线图、柱状图、饼图等多种图表类型，展示数据和统计信息。该插件支持响应式设计和动态更新，具有出色的性能和可访问性。

结语：以上就是5款超实用的Stable Diffusion WebUI进阶插件推荐。这些插件在稳定性、性能和扩展性方面表现出色，能够帮助设计师更好地创造出令人惊叹的Web界面。无论是页面布局、滚动动画、文字效果、轮播展示还是数据可视化，这些插件都能提供强大的支持和丰富的功能选项，为设计师带来更多可能性。

在B端视觉设计领域，注重用户体验和功能性是至关重要的。本教程将从整体设计原则到具体工具使用进行详细讲解，帮助您成为一位优秀的B端视觉设计师。
第一部分：设计准备

1. 理解B端设计的核心目标：B端设计主要关注解决问题、提升效率、提供准确和可靠的信息。
2. 剖析用户需求：通过详细调研和用户反馈，了解用户的需求和期望。
3. 制定设计策略：基于对用户需求的分析，制定设计策略，确定可行的设计方向。
   
   第二部分：设计原则
4. 一致性：保持整体设计风格的一致性，例如颜色、字体、图标等。
5. 易用性：设计要简单明了，用户能够快速上手，减少学习成本。
6. 可访问性：确保设计对残障用户友好，符合无障碍设计标准。
7. 简洁性：去除冗余信息，保持设计界面简洁，提高用户工作效率。
   
   第三部分：色彩与排版
8. 色彩选择：选择适合B端设计的专业色彩，注意搭配和对比度，避免色彩过于突兀。
9. 字体选择：选择易于阅读的字体，适配多个屏幕尺寸，确保在低分辨率情况下也能清晰显示。
10. 排版技巧：合理利用白色空间，使内容布局清晰，避免信息过载。
    
    第四部分：图像与图标
11. 图像选择：选择合适的图片，与产品或服务相关联，突出重点。
12. 图标设计：使用符合B端风格的简洁图标，以增强界面可读性和易用性。
13. 图像处理：合理使用图像编辑软件，调整大小、裁剪、优化，以确保加载速度和视觉效果。
    
    第五部分：交互与动效设计
14. 功能布局：根据用户需求和使用习惯，合理布局功能模块，提供直观的用户导航和操作路径。
15. 用户反馈：使用交互式设计元素，例如按钮状态的改变、鼠标悬停效果等，让用户获得实时反馈。
16. 动效应用：适量运用动效、过渡效果等，增强用户体验，并使界面呈现更生动的感觉。
    第六部分：工具推荐
17. 设计软件：推荐使用Adobe XD、Sketch等界面设计软件，便于原型制作和界面设计。
18. 图形编辑软件：Photoshop、Illustrator等软件可以协助处理图像和图标设计。
19. 原型分享工具：Framer、InVision等工具可用于原型共享和用户测试。
    总结：
    B端视觉设计注重用户体验和功能性，在设计准备阶段要充分理解用户需求，并制定相应的设计策略。设计过程中要遵循一致性、易用性、可访问性和简洁性等原则。色彩与排版、图像与图标的选择和处理需注意与产品或服务的关联性。交互与动效设计要符合用户习惯和期望，提供清晰的操作路径和实时的用户反馈。最后，合理运用设计软件
    蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

本文介绍了利用超多经典游戏作为参考，学习和掌握三种引导设计方法的重要性。通过分析经典游戏中的引导设计，包括任务导向、逐步解锁和上下文教学，读者将学习到如何设计出引人入胜且用户友好的游戏引导，以提升用户的游戏体验和学习效果。
引言：
游戏引导是帮助玩家了解游戏规则、掌握操作技巧和深入了解游戏世界的关键环节。借鉴经典游戏的引导设计方法，可以帮助设计师在其他领域，如教育、应用程序等中，有效地引导用户逐步掌握操作和理解内容。以下将介绍三种常见且实用的引导设计方法，分别是任务导向、逐步解锁和上下文教学。

1. 任务导向：
   任务导向是一种通过为用户提供明确目标来引导他们完成任务的设计方法。类似于超多经典角色扮演游戏中的主线任务，用户会逐步解锁新的任务和挑战，同时通过任务的递进和难度上升，使用户能够逐步熟悉和掌握游戏机制。在应用程序中，设计师可以通过设置明确的目标和任务，帮助用户迅速了解应用的功能和操作方式，提高用户的学习效果和使用体验。
2. 逐步解锁：
   逐步解锁是一种逐步引导用户掌握内容和功能的设计方法。类似于超多经典解谜游戏中的关卡设计，用户需要逐渐解锁新的关卡和功能，通过解决一系列递增的难题来提升技能和理解。在应用程序中，设计师可以通过逐步引导用户掌握基础功能，然后慢慢引入更高级的功能和复杂的任务，帮助用户逐步掌握应用的各项功能，降低学习曲线，提高用户的使用体验。解应用的用途和操作。
   
3. 上下文教学：
   上下文教学是一种利用游戏中的情境和故事情节来引导用户学习的设计方法。类似于超多经典角色扮演游戏中的剧情和对话，用户可以通过游戏中的故事情节和角色对话，了解游戏世界的背景知识、任务目标和操作技巧。在应用程序中，设计师可以通过设置具有情境和故事性的引导内容，以吸引用户的注意力并帮助他们更好地理解应用的用途和操作
   结论：
   通过借鉴超多经典游戏中的引导设计方法，我们可以提高应用程序、教育工具等领域的用户体验和学习效果。设计师可以灵活运用任务导向、逐步解锁和上下文教学等设计方法，为用户创造引人入胜、易于理解和操作的引导体验。随着不断的尝试和改进，设计师可以提高引导设计的效果，使用户更轻松地掌握内容并以更高的效率使用应用。同时，这些引导设计方法也可以为其他设计领域，如网站导航、说明文档等，提供有价值的参考和启
   蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
   蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

随着 AI 技术的发展，很多的图像处理任务都可以交给 AI 自动处理了，比如修图、抠图、高清修复等。AI 图像工具不仅将我们从原本单调重复的工作中解放出来，它处理图像的效果和效率比也人工还要好。正好前段时间交流群有小伙伴在找好用 AI 抠图工具，今天就为大家推荐 7 款我觉得不错的网站，它们处理抠图速度快、效果精细，并且可以免费使用，一起来看看吧~
一、Pixan.AI
网站直达： https://pixian.ai/
Pixan 是好评率超高的一款 AI 抠图工具，目前处于 beta 测试阶段，完全免费使用。进入后无需登录注册，可以通过拖拽、粘贴、上传 3 种方式接收图像，5 秒左右就能完成抠图。支持批量处理图像，抠图完成后还可以在线为图像添加不同颜色的背景。

二、Toolkit
网址直达： https://toolkit.boolv.tech/background-remover
Toolkit 是一个多功能的图片处理网站，其中就包括一键人像抠图的功能。同样是免费使用，无需登录注册。进入网页后，上传本地图像网页就会开始自动处理，支持为抠图后的人像添加自定义背景。

三、PicWish/佐糖
网站直达： https://picwish.cn/remove-background
PicWish 是一个国产的图像处理网站，功能包括一键抠图、智能修图、模糊图像变清晰、压缩、裁剪、格式转换等。它的抠图功能是免费的，可以处理人像、商品、动物、图形等多个类型的图像，登录注册可以下载无水印的抠图结果。
四、Clipdrop
网站直达： https://clipdrop.co/remove-background
Clipdrop 一个专注于用 AI 技术处理图像的网站，无论是抠图还是文生图、图像外绘、放大、修图都它都可以处理，并且效果非常不错。其抠图功能是免费的，支持批量处理，建议登录注册后使用。最大支持上传 1024*1024 px 的图像，超过的话网站自动压缩至 1024 px。
五、Removebg
网站直达： https://www.remove.bg/zh
Removebg 也是一款非常便捷的免费 AI 抠图工具，抠图速度极快，效果也很精细。使用时无需注册登录，支持通过链接处理图像，非会员抠图完成后可以下载最大 600px 的图像。
六、BgEraser
网站直达： https://bgeraser.com/
一个专注于 AI 抠图网站，支持批量处理。上传图像后点击 start 开始处理图像，抠图时间在 30s 左右。新用户有 10 次的免费抠图额度，注册登录后额度可以上升至 50 次。

七、Tracejourney
加入 Tracejourney 的服务器： https://discord.com/invite/8ynJNQz3Sm
官方教程： https://www.tracejourney.com/docs/getstarted
Tracejourney 是一款基于 Discord 的图像处理工具，功能包括抠图、图像转 SVG、放大、提取描述词、格式转换以及亮度和对比度调节，将图片直接发送 Tracejourney bot，在弹出的工具栏内点击对应的按钮就可以了。
Tracejourney 还可以和 Midjourney 配合使试用。设置完成后，当我们放大 Midjourney 图像时，底部会自动弹出 Tracejourney 的工具栏，点击对应的按钮就能轻松对图片进行处理。点击链接查看具体设置教程： https://www.uisdc.com/5-ai-tools-2 。

以上就是今天为大家推荐的 7 款免费好用的在线 AI 抠图工具。喜欢本期推荐的话记得点赞收藏支持一波，之后会继续为大家推荐更多实用的 AI 绘画干货内容。
文章来源：优设网 作者：夏花生
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

来百度APP畅享高清图片
本文介绍了Figma官方团队如何设计和改进“查找和替换”功能，以提升用户的使用体验。通过深入了解用户需求、设计一个直观且易于使用的界面，并利用用户反馈不断优化功能，Figma成功地打造了一个功能强大且高效的“查找和替换”工具。
第一步：研究用户需求
设计一个出色的“查找和替换”功能的第一步是深入了解用户需求。Figma官方团队通过与用户之间的反馈收集、用户调研、用户行为分析等方式，全面了解用户的期望和问题。他们发现用户经常需要快速查找和替换设计文件中的特定元素，以提高工作效率。此外，用户还希望能够设置搜索范围、控制替换选项以及在大型设计文件中高效地进行操作。
第二步：设计界面
基于用户需求和反馈，Figma官方团队开始设计“查找和替换”功能的界面。他们追求简洁和直观的设计，以确保用户可以快速上手并高效地使用该功能。设计界面应包含以下关键元素：

1. 查找输入框和替换输入框：为用户提供输入搜索关键字和替换文本的区域。
2. 选项设置：允许用户设定搜索和替换的范围、区分大小写、全字匹配等选项，以满足不同场景的需求。
3. 高级选项：提供更多高级搜索和替换功能，如正则表达式、批量替换等，以满足用户更精细的要求。
4. 查找结果展示：以清晰、易读的方式展示搜索结果，例如在设计文件中高亮显示匹配项，并提供导航功能以方便用户快速定位。
5. 撤销和应用按钮：允许用户在查找和替换过程中撤销或应用更改。
   第三步：迭代和优化
   一旦设计界面完成，在功能发布之前，Figma官方团队会通过内部测试和用户测试不断优化功能。他们会收集用户的反馈，并根据反馈信息进行必要的调整和改进。同时，团队还会关注用户使用中的痛点和难点，并根据用户需求，快速提供有针对性的改进方案。
   通过这种循环的设计和优化过程，Figma官方团队不断改进“查找和替换”功能，以提供更好的用户体验。
   结论：
   Figma官方团队的设计流程始终以用户为中心。他们通过深入研究用户需求，设计优雅的界面，并持续迭代和优化功能来确保用户得到高效、强大的“查找和替换”工具。这个设计过程的关键是与用户保持沟通，持续收集反馈并及时做出改进，以满足用户不断变化的需求。
   蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
   蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

本文介绍了Figma官方团队如何设计和改进“查找和替换”功能，以提升用户的使用体验。通过深入了解用户需求、设计一个直观且易于使用的界面，并利用用户反馈不断优化功能，Figma成功地打造了一个功能强大且高效的“查找和替换”工具。
第一步：研究用户需求
设计一个出色的“查找和替换”功能的第一步是深入了解用户需求。Figma官方团队通过与用户之间的反馈收集、用户调研、用户行为分析等方式，全面了解用户的期望和问题。他们发现用户经常需要快速查找和替换设计文件中的特定元素，以提高工作效率。此外，用户还希望能够设置搜索范围、控制替换选项以及在大型设计文件中高效地进行操作。
第二步：设计界面
基于用户需求和反馈，Figma官方团队开始设计“查找和替换”功能的界面。他们追求简洁和直观的设计，以确保用户可以快速上手并高效地使用该功能。设计界面应包含以下关键元素：

1. 查找输入框和替换输入框：为用户提供输入搜索关键字和替换文本的区域。
2. 选项设置：允许用户设定搜索和替换的范围、区分大小写、全字匹配等选项，以满足不同场景的需求。
3. 高级选项：提供更多高级搜索和替换功能，如正则表达式、批量替换等，以满足用户更精细的要求。
4. 查找结果展示：以清晰、易读的方式展示搜索结果，例如在设计文件中高亮显示匹配项，并提供导航功能以方便用户快速定位。
5. 撤销和应用按钮：允许用户在查找和替换过程中撤销或应用更改。
   第三步：迭代和优化
   一旦设计界面完成，在功能发布之前，Figma官方团队会通过内部测试和用户测试不断优化功能。他们会收集用户的反馈，并根据反馈信息进行必要的调整和改进。同时，团队还会关注用户使用中的痛点和难点，并根据用户需求，快速提供有针对性的改进方案。
   通过这种循环的设计和优化过程，Figma官方团队不断改进“查找和替换”功能，以提供更好的用户体验。
   结论：
   Figma官方团队的设计流程始终以用户为中心。他们通过深入研究用户需求，设计优雅的界面，并持续迭代和优化功能来确保用户得到高效、强大的“查找和替换”工具。这个设计过程的关键是与用户保持沟通，持续收集反馈并及时做出改进，以满足用户不断变化的需求。
   蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
   蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

使用轮播图对于在有限空间来提升用户阅读效率是很有用的，但现有大部分情况轮播图设计得并不好用。
遵守本文中提到的 10 条轮播图设计原则，可以提使用高轮播图的用户体验，在这篇文章中，作者首先会通过实例来过一遍 10 条轮播图设计原则，然后说明为什么以及怎样区别对待桌面端和移动端的轮播图，在文章最后，列举出一种相比于轮播图更好更易用的展示方式。
一、实际运用中的轮播图
在美国一份针对 50 家顶级零售电商网站的统计中，发现轮播图被广泛运用于电商网站：PC 端 52%的电商网站使用轮播图，而与此同时移动端 56%的电商网站使用轮播图。(以下图表是译者个人为方便大家理解制作的)

来百度APP畅享高清图片
这篇文章的重点旨在讲如何通过设计和交互细节，使首页轮播图更易用，而不是关注于轮播图本身应该放那些内容。此时，我们轮播图的内容应该注意以下几点：
如果轮播图的内容与网站本身不相关，且没有经过精心设计和使用高质量的图片，那么用户体验会很糟糕 —— 轮播内容应与网站主题相关
如果轮播图的内容看起来太像广告，那么用户会直接忽视它，即使轮播图的内容与用户所需相关 —— 轮播图内容不能过于商业化
轮播图的一个主要优势就是可以放专门设计过的图片，那些经过设计的图片会降低首页的退出率并且会对网站和品牌产生积极效果，因为那些经过设计的高清大图能在首页给用户留下一个好印象，在用户快速决定停留或者离开之前增加用户在首页的驻足时间 —— 轮播图片要精心设计
二、轮播图设计十原则
那么，怎样在实际运用中做好轮播图设计呢，作者将 10 原则分成了四个部分来进行阐述：

1. 滑动（轮播）顺序和点击后的落地页
   大部分用户不会看完所有的首页轮播图，即使是一个自动切换的轮播图。他们常常会在所有轮播图内容循环一遍以前就早早的跳到另一个页面或者向下滑动页面，换句话说就是没有人可以预测用户下一步到底会看哪一帧轮播图。
   因此，只要轮播图不是展示网站特点和展示网站产品的唯一方式，那么用户即使不看完所有轮播图问题也不大。
   我们之前做的轮播图可用性研究，发现大部分用户会在轮播图自动轮播完一个轮回前就跳到另一个页面了，而在手动轮播图网站里轮播图只会停留在第一帧，除非用户主动去找不然他们不会注意到那些有用的信息。所以，即使完善轮播图的细节设计是一个很好的想法，但这并不能成为用户获取网站信息的唯一方式。
   两条原则：
   原则 1： 轮播图的展示顺序特别是第一帧非常重要；
   原则 2：把轮播图当成展示网站重要信息和特点的一种补充手段而非唯一方式。
2. PC 端自动轮播逻辑
   自动轮播形式能够保证轮播图的每一帧都有一定的曝光量，并且实际上自动轮播的点击率(8%~10%)要比手动轮播的点击率高(1%~2%)，这是因为：像动态图片一样，自动轮播图很容易把用户的注意力从页面的其他静态图片上吸引过来，因此轮播图的内容和设计质量都需要很高的要求才能保证用户产生有效的阅读，此时要注意三个极其重要的自动轮播图设计原则：
   原则 1：自动轮播不要太快
   如果轮播得太快那么用户就没有足够的时间看完感兴趣的轮播图内容；如果轮播太快那么用户就会因为不感兴趣的轮播内容而被骚扰。
   轮播图的展示时间应该根据轮播图的文案内容来决定，尼尔森诺曼集团推荐自动轮播图的单帧时长按照1秒展示3个文案来播放，这就意味着每个轮播图的展示时长都是独立的。
   
   其实也可以学学苹果将轮播时间外显来让用户有一个心理预期。
   原则 2：用户 hover 内容时应该暂停自动轮播
   用户鼠标的位置与他们在当前页面关注的内容有内在联系 ：
   当用户鼠标悬停在某一帧轮播图时说明他们对它的内容感兴趣；
   当用户悬停时轮播图暂停的第二个理由是防止用户在点击想看的那一帧轮播图时自动轮播到下一帧 ；
   如果用户意识到他们点击后跳转到一个无关的页面那么用户会感觉很气恼和失落，并且会不得不重新回到主页，然后再次点击原来想要的那一部帧轮播图。
   原则 3：用户有任何主动交互行为时应该停止自动轮播
   当用户主动点击轮播图按钮来看前一帧或者下一帧内容时，这种行为是有意进行的并且 (当前轮播内容)不应该被改变，即使用户决定去查看主页的其他内容。
   点击行为是用户的主动响应行为，它是反应用户意图和兴趣的一个强烈的信号。因此，当用户主动对轮播图进行交互时轮播图应该停止自动轮播，因为用户极有可能是有意要查看某一帧的内容。
3. 轮播图控件应该具备两项功能
   原则 1：轮播图控件提示当前图片所在帧数位置
   提示用户有更多帧数的图片，让用户有更多探索的可能；
   提示用户轮播图到底有多少帧图片；
   当轮播图自动播放到最后一帧时提示用户将循环到第一帧。
   比较常用的设计是在一张五彩斑斓的图片上设置一组小点，但这通常会很难识别，把这些点放置在图片外面会好一点。原则 2：轮播图控件允许用户进行前后帧内容的切换
   这是使用箭头是比较好的方法，然而我们发现由于底图与箭头的对比不够以及箭头本身大小有限，会导致用户容易忽视这些控件，那怎样避免进行前后切换的箭头被用户忽视呢：
   展示部分下一帧或前一帧图片；
   根据所识别的背景图片的颜色和明度进行相应的颜色改变。
   通过展示前后一帧内容的部分内容，用户很容易感知到可以进行切换。

除了传统的设计样式像是用来感知位置的小点和前后切换的箭头，“table of contents”这种设计样式同样也能起到一样的效果 。
首先，它结合了位置感知和手动切换的控件为一个整体的 UI 组件；
其次，它能为用户提供了一定的轮播信息线索，让用户知道接下来会看到什么，因而可以让用户更有效的进行跨帧的切换。

4. 在移动端一切都如此不同
   触屏设备上的轮播图与 PC 端有着很大的不同，之前列举的PC端上的交互逻辑在移动设备上是无效的，并且有很多新的规则：
   原则 1：移动端没有 hover 状态因此尽量避免自动轮播
   hover 状态是用户对某一特定帧内容感兴趣并有可能在阅读完文案后产生点击的一种信号，这意味着如果没有 hover 状态来激活自动轮播暂停，那么自动轮播在移动设备上的使用就不那么合适了，自动轮播会使图片在用户要点击轮播图几毫秒之前就突然切换，这会使用户跳转到错误的页面。
   原则 2：移动端支持滑动操作
   用户在触屏设备上的操作预期就是滑动来进行导航切换
   传统的轮播图操作控件同样重要（如进行前后切换的箭头和让用户感知位置的小点）
   原则 3：移动端屏幕的图片需要特别优化
   许多在 PC 端上使用的轮播图设计稿是直接缩放后在移动端上重复使用，这造成在移动端屏幕上许多文案的阅读性较差；
   移动端用户对加载较慢的轮播图更没有耐心，用户在 PC 端可以边花费 1 到 5 秒钟来等待轮播图刷新边浏览网页的导航栏和其他信息，而在移动端有限的屏幕大小下用户只能看到轮播图
   现在我们来总结一下：
   
   三、轮播图的替代方案
   单纯展示静态内容作为在主页的独立部分是替代轮播图的一种好方式：
   它没有轮播图的那些用来控制切换图片的控件，因而尤其适合在移动端使用；
   它高度符合用户与首页的交互方式，70%的移动端用户会下意识的拖动并浏览首页的内容，来获知他们来到了什么类型的网站；
   相比于使用轮播图要遵守的那 10 条原则，它使用起来更加便捷，那些商家和公司会越来越认识到布局设计上的紧凑会有多重要。

文章来源：优设网 作者：LHJ
分享此文一切功德，皆悉回向给文章原作者及众读者
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

用一个实战案例，帮你了解交互与UI思维差异｜兰亭妙微UI设计公司

来百度APP畅享高清图片
大家是否有关注到，在过往的面试过程中，经常被问到的一类问题就是岗位间的区别，比如产品与交互、交互与 UI、UI 与视觉等等。笔者在之前帮团队面试交互设计师的时候，也喜欢给出一个需求背景，让求职的小伙伴聊聊不同岗位是如何思考的，因为大多数交互设计师都是由上下游岗位转岗而来，思维可能还停留在原有的岗位中，所以就希望通过这类问题，来初步的判断下对方是否匹配当前岗位的要求与工作。
一、项目背景
本次项目是一个“购买返虚拟币”的功能，类似于京东的返京豆，返还的虚拟币可以在购买的时候按照对应的比例换算成抵扣金额，而此次改版的功能是在原有单件返币的基础上调整为阶梯返币，单件返币的数量随着用户单次下单的商品件数递增，从而促进用户能多件下单，提升商品的销量。
乍一看该功能都不需要设计师参与，只需要根据商品的返虚拟币规则，将之前的单件反币标识改成多个就行，如“1 件返 XX、3 件返 XX…”，虽然看起来好像也解决了业务诉求，但是如果仅仅考虑标识展示，而不结合需求背后的业务逻辑去思考，后续也会随着规则的变化而带来对应的问题，那对于交互与UI设计师而言，针对这个需求，又该如何考虑的呢？我将分为“交互篇”与“UI篇”来分别阐述。
二、交互篇
对于交互设计师而言，其中一个核心能力就是将业务诉求转变成用户可理解、可操作的交互流程。那么我将从业务规则、用户场景以及操作流程三个方面来拆解交互设计师是如何思考这个业务需求的。

1. 业务规则
   虽说本次业务需求很简单，只是将单件返币改成多件，但是我们也不能仅仅被表象所蒙蔽，需要进一步挖掘相关业务规则。
   返币并不是适用于所有商品，那不管是单件还是多件都会有对应的配置返币规则的地方，我们需要知道在配置规则的时候有没有做限制，比如支持几个阶梯，这将决定我们在前台该如何展示该规则。
   如果最多两个，那我们就可以考虑将每个阶梯对应的返币规则都展示出来，但是如果不做限制，那是不是可以考虑将规则收起，仅展示“单件最多返币”引导用户下单购买。
   

2. 用户场景
   用户在产品中的下单流程不仅仅是通过首页产品瀑布流开启，可以通过各个途径，比如搜索、营销板块等等，所以我们需要考虑多件返币规则都适用于哪些场景。
   除此以外，我们可以结合该需求的目的出发，设置阶梯意味着希望用户能单笔下单多件，那我们可以聚焦用户加购数量的场景，当用户选择的数量在两个阶梯之间时，可以给与相应的提示，告诉下一个阶梯的奖励，引导用户增加购买数量。
   

3. 操作流程
   前面在业务规则的分析中，确定了返利的阶梯是没有数量限制的，为了后续的延展性，我们选择将对应的阶梯收起，改成“单件最多返 XX”的标识展示。
   那如果用户想要了解具体的返利规则时，该如何操作呢？
   所以此时的返币标识不仅仅是一个标签，同时还是一个用户了解规则的入口为了与其他标签区分开，我们在返币标识上加上了可点击引导来辅助用户理解。
   
   三、UI 篇
   对于 UI 设计师而言，其主要的工作是界面的视觉效果设计，并且需要配合前端工程师完成视觉效果的实现。所以主要通过视觉风格、平台规范、以及技术实现三个方面去拆解。

4. 视觉风格
   UI 设计师每天会在各大设计网站中穿梭来收集灵感，但是并不是所有的视觉风格都符合当前的产品与功能，面对的人群不同，行业不同都会对最终的风格选择产生影响。同时该采取什么视觉表现手法，也需要根据具体的需求而定。
   比如本次改版需求，UI 设计师主要是针对阶梯返币的标识做设计。由于该标识属于强营销标识，所以需要有比较强的视觉引导，此时对于 UI 设计师而言，就需要考虑该用什么视觉形式来表现，从而增强用户的感知。
   

5. 平台规范
   UI 设计师其中一个能力要求就是制定平台规范，规范的建立能统一产品的视觉呈现以及提升设计与开发的效率。所以在设计返币标识的时候，除了思考视觉表现手法以外，还要结合当前的平台规范去设计。设计完成以后，可以放在最终的产品卡上，与其他的标识做对比，最终达到“突出而不突兀”的设计目标。
   

6. 技术实现
   这里说的技术实现并不是说要让 UI 设计师去写代码。当然设计师是可以了解一些简单的前端代码，这样就可以站在技术实现的角度来权衡设计，减少后续的沟通与优化的时间成本。
   在本次的需求中，标识的设计如果采用了微动效，那就需要确定是技术实现还是将动效切图给前端，而动效又有不同的文件形式承载且各有优缺点，需要设计师提前去了解并最终与技术达成一致。
   
   四、共性
   其实随着整个互联网行业越来越成熟，对于岗位的界定也变得越来越模糊，所以市面上出现了很多如体验设计师、产品设计师、产品交互设计师等“新兴”的岗位，网上对于这些岗位的定义也各有不同，其实总结下来就是如何发挥岗位的优势帮助产品提升收益。所以不管是 UI 设计师还是交互设计师，都需要对产品、对业务、对目标用户有足够的了解，这样才能产出符合用户预期的体验与设计。
   比如这次多件返币的升级功能，当我们在完成了这个需求本身的工作后，是不是可以进一步的去挖掘需求。我们可以在功能上线后，结合后台的埋点数据，来观察这个功能带来的变化，如果用户热衷寻找或者下单多件返币的商品，那我们是否可以尝试将所有的返币商品集合在一个页面，这样不仅可以提升用户查找返币商品的效率，同时平台也便于管理与跟踪这些商品，并且可以通过该板块的营销提升产品的日活与最终的转化。

五、总结
以上，就是笔者根据工作中案例，分享的一篇关于交互与 UI 思维差异的文章，经验有限，欢迎大家批评指正与交流。
文章来源：优设网 作者：一个青橙子
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

深度解读VisionOS设计原则，掌握设计趋势｜兰亭妙微UI设计公司

引言：
VisionOS是一个全新的操作系统，设计初衷是提供更智能、更简洁、更人性化的用户体验。为了实现这一目标，VisionOS拥有一套独特的设计原则，本文将深度解读这些原则，并探讨其如何引领下一代设计趋势。
一、简约与纯粹（Simplicity and Purity）
VisionOS强调简约与纯粹的设计风格。界面布局流畅简洁，清晰明了，消除了多余的视觉噪音。不仅如此，VisionOS还追求纯粹的用户体验，通过减少不必要的元素和干扰，让用户专注于核心操作，提升操作效率。这种简约与纯粹的设计风格将成为未来设计的主流趋势之一。

二、智能与个性化（Intelligence and Personalization）
VisionOS具备强大的人工智能能力，能够根据用户的喜好、习惯和行为智能化地提供个性化的体验。系统能够自动学习用户的偏好，为其呈现符合其兴趣和需求的内容和功能。这种智能与个性化的设计趋势将成为下一代设计的关键。

三、自然与无缝（Natural and Seamless）
VisionOS注重自然与无缝的交互体验。系统借助先进的技术，如语音识别、手势控制等，使用户能够以更自然的方式与设备进行交互。同时，系统还能够实现多设备之间的无缝切换和互联，让用户的使用体验更加流畅和高效。
四、安全与信任（Security and Trust）
在数字化时代，数据安全和用户信任成为设计的重要考量。VisionOS将安全性和信任度置于首要位置，采用先进的加密技术和隐私保护措施，确保用户数据的安全和隐私。同时，系统提供透明的数据使用和共享机制，建立用户与系统之间的信任关系。

五、可持续与生态（Sustainability and Ecosystem）
VisionOS致力于建立一个可持续的生态系统，与不同厂商和应用开发者合作，共同打造丰富多样的应用和服务。系统通过开放的API接口和生态伙伴计划，促进创新和合作。此外，VisionOS还积极推动绿色环保理念，降低能源消耗和环境影响。
总结：
VisionOS的设计原则包括简约与纯粹、智能与个性化、自然与无缝、安全与信任，以及可持续与生态。这些原则不仅仅是VisionOS的设计理念，更是未来设计趋势的重要方向。尽管VisionOS是一个操作系统，但其中所蕴含的设计思想和理念对于各行各业的设计师和从业者都具有启示意义。掌握这些设计原则，并将其运用于实际设计中，将有助于推动下一代设计的发展和创新。
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会上传中...100%为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

教育产品如何做好游戏化设计：理论篇｜兰亭妙微UI设计公司

随着双减政策的落实，教育类应用市场的“斗争”悄悄拉开序幕，在线教育行业保持稳定增长，市场规模在 2023 年预计达到 5901.9 亿元，用户规模达到 3.52 亿人。
教育行业的竞争性强，但国内教育类产品的游戏化设计集中在低龄化的群体中，面向少年、青少年群体的游戏化应用市场仍有很多空白值得探索。
本专题将分上下期，分别阐述笔者近期针对学习动机及流程的调研成果，以及在教育产品游戏化中的实战经验，分析教育产品在游戏化设计下的切入点和机会点。
一、关于学习
为教育类产品做设计前，需要先解构学习及其本质，从学习行为动机的拆解，更好地找到在整体流程中设计的切入点。

1. 学习的本质是什么？
   学习本质的理论基础经过了 4 个时期的发展，从行为主义、人本主义、认知主义再到建构主义，对于教育者/方的要求越来越高。
   在前 3 个阶段，教育的核心分别是简单的行为训练教学（驯兽师）、提供知识让学生自主学习（服务师），提供加工后的信息提升用户学习效果（讲解员）。
   在最高层级的建构主义中，教育者需要承担起设计师的角色，因材施教，考虑不同的学生的学习进度/学情提供定制化的学习内容。
   

2. 教育产品的顺应变化
   从层级演变中，我们也能看到教育产品的发展史。教育产品从一开始只提供教育资源/书册的教育资源平台（学科网），再到提供知识学习的平台的兴起（慕课网），最后到现在提供学情定制化的学习内容（多邻国）。
   利用大数据算法，以及最新的 Chatgpt，教育产品的可能性越来越多。身处教育行业的设计师，也要从建构主义考量自己产品的核心价值是否要顺应变化，在产品/设计侧能够为学习者提供什么样的学习帮助。
   二、如何触发学习行为？
   在明确教育本质后，再来看学习行为。从经典的动机理论模型（福格模型）来看，学习行为的构成需要 3 个要素，动机（Motivation）、能力（Ability）和触发（Trigger），三者缺一不可。
   如何提高设计转化？先学会经典的「福格模型」
   日常工作中我们经常要考虑如何吸引用户转化。
   

3. 动机
   （1）动机的强弱
   “教育是有滞后性的”作为老师或是家长，应该对这句话很有感触。学生在心智尚不成熟的阶段，对于学习的动机多来自外在。北京大学，中国最高学府之一的教授就在访谈中表示：
   
   同时，社会的环境浮躁，“钱”至上的社会，让学生看不清学习这件事本身的意义，学生的学习动机更多来自外部环境。常见的几种说法有：
   “大家都说学习很重要，我要好好学习”
   “学习好了，长大才能赚大钱”
   回归到自我决定理论来看，大部分学生都处在非自我决定的阶段，以无动机或外在动机的外部调节和内投调节为主，他们对学习没有动机，很难坚持。从动机侧来看，我们要做的是把学生的动机内化/强化，去提升学习效率和学习效果的提升。

（2）如何强化动机？
用学术角度回答，普雷马克原理（Premack Principle）指出：即用高频的活动作为低频活动的强化物，或者说用学生喜爱的活动去强化学生参与不喜爱的活动。如“你可以出去玩，如果你吃完这些青菜。”如果一个儿童喜爱做航空模型而不喜欢阅读，可以让学生完成一定的阅读之后去做模型等等。
从这个理论来看，我们的第一个转化是“外壳”。用游戏化的包装，让学生去学习，外壳形式的改变。让学生的无动机/外部动机学习，转化为偏向内部的动机，动机强化的过程，让学生更主动/高效的学习。
面向低年龄层的教育游戏化软件有恐龙数学、悟空识字、洪恩数学等，都是成系列的学习软件，核心是包装了游戏化的形式，让小朋友能以比较轻松的方式学习；面向较高年龄层的应用中，多邻国也是采取了游戏机制的包装，让用户能更轻松的学习。
恐龙数学-选中正确选项可以转化为一次攻击

多邻国-提供游戏化的勋章、奖励养成系统
因此，这里能够得到第一个设计转化：

2. 能力
   学生的学习能力是正态分布的，有的人能力好，有的差一些。但现在的“排名”机制，分数机制，家长分数至上的思路，让学生对自己的能力的认可越来越少，自信心大大减少。常见的家长话术是：
   “隔壁家的小孩这次排名...”
   “排名怎么样？你这次怎么又退步了”
   外部的评价会持续性地影响学生的能力评价和认知，心理学上有个模型，自我效能模型，核心思想是：人对自己是否能够成功地进行某一成就行为的主观判断，它与自我能力感是同义的。成功经验会增强自我效能，反复的失败会降低自我效能。自我效能感是个人对自己完成某方面工作能力的主观评估。评估的结果如何，将直接影响到一个人的行为动机。
   在自我能力评价较低的情况下，用户会去采取行为的可能性就越低。
   
   因此，高自我效能的正向循环对于学生用户来说很重要，从产品/设计层，能够考虑的是：
   1）增加个体对成功的体验（适当的挑战）
   当挑战程度适中时，用户可以更容易获得成功+正向反馈，结合自我效能，就能实现正向循环。
   
   在海外的教育软件 Quizizz 中，老师可以关联知识点，并设置难易程度，帮助用户根据自己的学习水平选择合适的题目：
   

Quizizz 增加知识点绑定

Quizlize 看到各个学生的学习进度和掌握情况，方便因材施教
2）语言说服（强化反馈的证明感受）
指通过他人的指导、建议、解释及鼓励等来改变人们的自我效能感。当个体总能获得外界的关心和支持时，他的自我效能感就会增强。人们对自身能力的知觉在很大程度上受周围人评价的影响。

Classcraft-关卡+知识点让用户学习

3. 触发
   在触发方式上，考虑用户进入产品前、后的流程，找到用户进入产品的触点，让用户更容易触达学习的内容。
   这点和常规做产品的触点很类似，虽然是做教育产品，但其本质还是产品。因此用产品的思路，在用户未进入产品时，用 APP 推送等方式提醒用户上线；而在进入产品内，在主线上，以任务的方式督促用户学习，同时增加一些随机触发的学习任务，提升学习行为触发的触点。

三、如何提升学习过程中的学习状态
从心流模型来看，基于用户的能力，合理设置任务、适当引导注意力，并且给予即时反馈，从而去引导用户长时间去做一件事情。在心流体验中，注意力得到集中，学习效率得到提升，对外干扰事物的感知降低，甚至达到忘我的境界。

达成心流需要满足 3 个条件，
1）目标 -有明确的目标设定。
在美国的学习体系与学习目标相关性极高，教师教学时会围绕当前学科的 Standard（教纲）要求，为学生提供目标强关联的教育，这样的学习教育方式效率更高。
这点转化到教育产品侧，为学生提供教学内容的学习目标就尤为重要，有方向的学习更有效率。

2）平衡-任务的难度和挑战性之间有平衡
与自我效能理论类似，我们要为学生提供难度适中的题目，让学生不会陷入负反馈中。但同时，要有一定的难度，让学生不会觉得太没有挑战及学习意义。

3）反馈-有清晰、及时的反馈
常规的教学应用一般是把核心反馈放在结果页面，但好的教育产品会侧重在任务过程中就根据用户的表现给予对应的递进式的反馈，导向正确的结果。
在恐龙数学中，把反馈的差异化重点放在音效上，在单次操作正确与多次连续操作正确时提供不同的语音反馈，比如常规的是“Yeah”多次正确时说“你真棒”等。下图是竞品的 gif，具体的音效大家可以去网上找视频听听看。

四、总结
回顾上述内容，从教育软件层面，游戏化设计的切入点可以归纳为如下内容。

切入点到实际应用时，要根据产品阶段、功能的业务目标、设计目的，有取舍的使用，具体的实践将在下篇《教育产品-游戏化设计实践》中分享。
以上就是本期分享的内容～欢迎大家在评论区说出自己都疑问或想法，一起讨论，共同进步！
文章来源：优设网 作者：番茄
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司