132025-8

从零到上线：小程序开发全流程指南（含界面设计要点）

杰睿移动端UI设计文章及欣赏

小程序已经不是什么新鲜事物了，从微信到支付宝，从抖音到百度，几乎每个主流平台都有自己的小程序生态。对企业来说，它是低门槛触达用户的工具；对个人开发者来说，它是快速试水产品想法的方式。

如果你从没做过小程序，不知道从哪下手，这篇文章会帮你理一遍全流程，并从界面设计的角度给出一些实用建议，让你从“想做”到“上线”不再迷茫。

1.明确目标与平台选择

小程序不是只有微信这一种，常见的平台有：

微信小程序：用户量大，生态完善，适合大多数应用场景。

支付宝小程序：金融、生活缴费、电商支付等场景强。

抖音小程序：适合内容带货、短视频场景导流。

百度小程序：搜索入口强，适合工具型和信息型应用。

建议：先想清楚你的目标用户在哪个平台活跃，再决定优先开发哪个平台的小程序。

2.注册与认证

不同平台的小程序都需要先注册账号：

注册开发者账号（企业、个体工商户、个人都可以，功能权限会不同）。

进行实名认证（企业通常需要营业执照，个人只需身份证）。

获取 AppID（这是你的程序唯一标识）。

3.准备开发环境

以微信小程序为例，开发环境配置步骤：

下载微信开发者工具（Windows/Mac 都有）。

选择语言框架：

原生开发（WXML + WXSS + JS）

第三方框架（Taro、Uni-app、WePY 等，支持多端同时发布）

使用 AppID 创建项目（测试阶段可用“体验版”AppID）。

4. 设计与原型：从交互到视觉的桥梁

小程序虽然运行在移动端，但它并不是传统的 APP。它的页面切换、加载速度、交互逻辑都有一些特殊限制，所以 UI 设计需要有针对性。

设计要点：

界面结构简洁 小程序的核心优势是“轻量”，用户希望在 13 步内完成操作。UI 结构建议保持 23 层深度，不要做复杂的菜单树。

尺寸与单位

设计稿一般用 750px 宽（对应 rpx 单位，自适应不同屏幕）

可触控区域最小建议 88rpx × 88rpx，避免手指误触。

一致性

按钮样式、色彩体系、字体大小在全局保持一致。

使用平台提供的 UI 规范（微信有 WeUI），减少开发适配成本。

首屏体验

保证 2 秒内展示核心内容。

可以用骨架屏或渐进加载提升感知速度。

适配多端主题 微信等平台支持暗色模式，设计时要考虑浅色/深色的对比度。

5.核心开发步骤

小程序基本文件结构：

.json：页面配置（导航栏颜色、标题、是否下拉刷新等）

.wxml：结构（类似 HTML）

.wxss：样式（类似 CSS）

.js：逻辑与交互处理

开发流程：

搭建项目结构

编写页面模板与样式

绑定数据与事件（MVVM 思路）

调试 API（如登录、支付、获取位置等）

进行真机预览

6.接口与数据

小程序常用的数据来源：

平台 API（如微信支付、用户信息、位置等）

自有后端接口（需要部署在可访问的服务器上，支持 HTTPS）

第三方服务（如云开发、BaaS 平台）

如果不想自己搭服务器，可以用 微信云开发，直接在平台提供的云函数、云数据库上写逻辑。

7. 测试与优化：别忽视视觉细节

除了性能测试，还要做 UI 视觉与交互测试：

检查不同机型下字体是否过小或溢出。

确认交互反馈（点击高亮、按钮状态变化）是否及时。

检查色彩对比度，确保在户外光线下依然清晰可读。

8.提交审核与上线

流程：

上传代码到平台

填写版本信息与更新说明

提交审核（不同平台审核时间不同，一般 1~3 天）

审核通过后可发布上线

上线后，记得持续关注数据（访问量、留存率、转化率），不断迭代优化。

做小程序并不一定要是程序员，很多第三方平台和低代码工具（如 uni-app、Taro、HBuilderX、即速应用）也能帮助你快速上线。但理解基础流程和开发逻辑，可以让你在产品迭代中更高效、更有掌控感。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

评论(0) 浏览(313)

122025-8

实用仪表盘：2025 年初创企业分步指南

杰睿大数据可视化设计文章及欣赏

我们的团队为各种各样的企业构建了仪表板，并且在此过程中获得了一些关键见解。

如果您正在考虑创建仪表板，这里有一些建议可能会帮助您节省时间、金钱和理智。

如果你想要一个坚固的仪表盘，就要像对待飞机驾驶舱一样认真对待它的设计。在商务中——就像在飞行中一样——你需要清楚地了解你的方向和表现，以免为时已晚而无法及时纠正航向。

真正实用的仪表板始终是协作的成果。它汇聚了目标、数据、人员和逻辑。而它的最佳构建者，正是一支精通所有四要素（分析师、设计师和开发人员）的团队，他们能够理解您的业务语言。

模板和人工智能工具在某些方面确实能提供帮助，但它们无法感知你的背景，也无法洞察所有细微之处。如果使用不当，它们可能会把原本有用的工具变成有害的工具。你可能会追踪错误的事物，做出错误的判断。

因此，如果您的仪表板用于实际业务（而不仅仅是娱乐），请引入能够连接业务目标、数据和视觉语言的专家。

步骤 1. 设定精确目标

确定正确的目标和问题是成功的一半。另一半是选择能够回答这些问题的可视化效果。

首先为您自己、开发人员和设计师组织需求收集流程。使用您喜欢的任何工具（Miro、Trello、FigJam、Google Sheets、Notion、ClickUp、Google Forms）。

创建看板、卡片或列表；每个看板、卡片或列表都应包含您在交接任务前必须回答的问题。这些问题的答案将帮助您避免仪表盘的最大缺陷：杂乱的用户界面、毫无意义的指标以及未使用的数据。

仪表板应该适用于业务，而不仅仅是看起来漂亮。

第 2 步：组建一支负责任的团队

决定谁拥有仪表板、谁构建它以及谁将使用它。

不要试图制作一个“适合所有人”的仪表板。

人人适用的工具通常对任何人都没有帮助。

步骤 3. 定义用例和用户

明确业务任务，并绘制用户画像。问自己三个问题：

仪表板将解决哪些问题？
（例如，跟踪收入增长、聚焦渠道瓶颈、监控客户流失）
谁根据这些数据做决策？
创始人、营销人员还是产品经理？
每个人每天需要看到什么？
想想一个“晨间仪式”——他们必须在30秒内掌握什么？

这不仅仅与角色有关；习惯和便利也很重要。

步骤 4. 确定关键指标

选择3-5 个真正能推动业务发展的指标。按从顶层到底层的顺序排列它们。糟糕的仪表盘会显示所有内容，造成掌控全局的错觉。

指标越少但越有意义。

例子：

SaaS：活跃用户、CAC、LTV、流失率；
营销：点击到引导转化率、客户获取成本、ROMI；
财务：营业利润、平均订单价值、预测现金流。

步骤 5. 准备数据

没有好的数据，就没有好的仪表盘。问：

数据存储在哪里？
它的完整性和时效性如何？
它将如何刷新？
数据质量归谁所有？

无需手动输入。自动化让仪表板保持活跃。

步骤 6. 绘制粗略布局

任何东西都可以——从餐巾纸上的草图到 Figma 的线框图。仔细思考：

哪些块属于“顶部”？
视觉焦点在哪里？
什么应该首先跳出来？

丑陋也没关系——重点是测试结构和想法。

步骤 7. 获取用户反馈

把原型展示给真实用户。不要问：“它漂亮吗？” 而是问：

是不是一眼就看明白了？
它是否有足够的信息来做出决策？
感觉缺少了什么或者多了什么？

在草稿期间听到“我不明白”比在发布后听到要好。

步骤 8：为设计师撰写一份详尽的简介

设计师不会读心术。如果你不说重点，他们就会替你做决定。包括：

哪些指标适用于何处以及如何适用？
阻止优先级（最重要的）；
移动与大屏幕行为；
颜色强调、警报、数字格式。

第 9 步：找到合适的建筑商

我们很想说“雇佣我们”，但这是你的事业和愿景。在 Dribbble、Behance 甚至 LinkedIn 上查看作品集——人才无处不在。

评判前景：

商业理解

漂亮的图表并不比了解它们存在的原因更重要。

界面体验

仪表板不是登录页面；可用性是第一位的。

清晰的沟通

如果他们的流程现在听起来很模糊，那么以后就不会变得清晰。

简化能力

真正的技巧是让复杂变得简单。

克制感

作品集可以帮助您评估设计师的风格、潮流感、是否适合您的业务类型以及整体技能和独创性。

最重要的是，选择一支能够深入实现你的目标的团队。

这就是真正的“哇”的由来。

第十步：启动。观察。改进。

仪表盘是一个动态系统，而非一次性的落地页。发布后，请关注：

人们多久打开一次它？
会议中是否体现了指标；
什么让用户犯了错误，或者他们接下来会请求什么。

没有哪个仪表板是第一天就完美的。不断迭代——改进终将带来回报。

结论

优秀的仪表盘不仅仅是一堆图表。它能够塑造团队的思维。它能够引导注意力、培养习惯、加快决策速度，并节省时间，而不是浪费时间。

当出现以下情况时，您的仪表板将变得无价：

其目的非常明确；
每个角色都有自己的衡量标准；
噪音最小，意义最大；
您可以快速深入研究；
该团队确实使用了它。

如果这就是您想要的仪表板类型，我们希望这可以帮助您入门。

另外，以下是创建业务仪表板时可能有用的AI 工具列表：

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

评论(0) 浏览(137)

122025-8

设计师应该从 Gmail 收件箱中学习的 5 个智能 UI 经验

杰睿设计管理与成长

当我们谈论优秀的产品设计时，我们常常会被 Dribbble 上那些炫酷的新事物、设计趋势、微交互和概念图所吸引。但关键在于：一些最好的经验教训来自于每天被数百万人使用的真实产品。

Gmail 的移动收件箱就是其中之一。

它并不浮夸，也不刻意赢得设计奖项。但它抓住了基本要素——清晰的视觉效果、高效的交互以及以用户为先的决策，让电子邮件收发变得轻松便捷。无论你是设计师、创始人还是产品人员，研究 Gmail 如何处理收件箱都能让你受益匪浅。

让我们来分析一下。

1. 从主页预览附件

Gmail 不会强迫你打开邮件查看对方发送的文件。如果有附件，它会立即显示在收件箱预览中，方便你即时查看和点击。

重要性：在移动设备上，每一次点击都至关重要。为用户提供访问重要内容的快捷方式，可以节省时间并减少用户挫败感。这小小的改进，却带来了巨大的可用性提升。

要点：思考用户最想从列表视图中的项目中获得什么，并将其直接呈现。不要埋没好东西。

2. 清晰区分已读和未读

这是最简洁、精妙且有效的用户体验示例之一：Gmail 会用加粗的主题行和更高的对比度来显示未读邮件。就是这样。没有彩色圆点，没有图标。只是巧妙地运用了字体排印。

工作原理：它可以立即扫描。你甚至不需要思考就能看到未读邮件。

设计洞察：视觉重量 > 视觉混乱。如果简单的对比度和字体样式就能达到效果，就不要添加新元素。

3. 自动整理收件箱标签

主要功能、社交功能、推广功能。Gmail 会将您收到的大量邮件自动分类，方便您管理。这不仅自动化，还能帮您减轻压力。

为什么这样做很明智：收件箱超载是真实存在的。Gmail 通过无需用户输入即可对内容进行分类，为用户提供了喘息的空间，并帮助他们确定优先级。

产品团队的经验：不要只展示内容，还要精心策划。智能默认设置和自动化可以减少决策疲劳。

4. 内联关键信息提取

以截图中的 Under Armour 邮件为例。Gmail 会提取预计送达日期，并直接显示在收件箱预览中。无需点击、滚动或搜索。

巧妙之处：它甚至在用户打开邮件之前就解答了他们的疑问。这才是效率，这才是信任。

学习要点：如果你的产品能够检测日期、状态、摘要等关键信息，就不要隐藏它。把它拿出来，在最有用的地方展示。

5. 简洁且内容丰富的层次结构

Gmail 的收件箱界面功能丰富：头像、发件人、主题、时间戳、预览、标签、图标。但丝毫不会让人感觉杂乱。

怎么做到的？巧妙地使用间距、字体大小、对齐方式和填充，创造出赏心悦目的视觉节奏。

设计要点：你可以展示大量内容，但又不会让人感到不知所措。关键在于层次和空间的留白。

从现实世界的用户界面中学习，而不仅仅是概念

这个 Gmail 细分只是UXSnaps上的众多专题之一——UXSnaps 是一个免费网站，可以对成功产品背后的 UI 模式进行逆向工程。

每一个细分都直接取材于真实的产品屏幕，并附有快速实用的课程，助您轻松应用。没有专业术语，没有空谈，只有敏锐的洞察力。

如果您真的想提高自己的设计技能，那就从这里开始吧。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

评论(0) 浏览(180)

122025-8

AI辅助设计 | 我如何使用人工智能来简化人物角色和旅程地图的创建

杰睿行业趋势

虽然人工智能能够增强我们的工作，但它无法取代从实际用户体验研究和分析中获得的重要见解。

人工智能是一种帮助我们更高效地完成工作的工具；它不会取代我们。

凭借 20 多年的用户体验研究经验，我最初对将人工智能融入研究实践持怀疑态度。然而，我发现诸如 ChatGPT、Google Gemini、Microsoft CoPilot、Claude.ai 等生成式人工智能 (GenAI) 工具非常有用。它们不仅能协助分析数据以发现洞察，还能将这些洞察转化为有效的可交付成果，例如用户体验人物角色和旅程地图。

一张模因图片上写着：“阻止人工智能抢走你的工作的唯一方法就是让它更好地完成你的工作。”

编写 AI 提示来创建用户体验人物角色和旅程地图的方法有很多。只需在 Google 上搜索“如何使用 AI 创建用户体验人物角色？”，你就能找到大量资源（其中一些我曾经使用过，并在文末引用过）。既然已经有很多资源了，我为什么还要写这篇文章呢？经过一年的研究和实验，尝试了多种变体，我发现了一种成功的方法：混合使用各种提示，并赋予它们独特的细微差别，而这些细微差别似乎在我读过的任何文献中都没有涉及。因此，我想分享我的发现，希望它们也能帮助其他用户体验研究人员。随着我们领域的不断发展，分享我们的发现并促进合作对于充分释放 AI 在用户体验中的潜力至关重要。因此，如果您尝试过这些提示中的任何一个或其他方法并取得了良好的效果，我诚邀您在评论区分享您的经验。

人物角色

用户体验人物角色主要分为两类：基于实际用户研究的人物角色和基于假设的人物角色。无论您创建的是基于数据的人物角色，还是基于假设的人物角色（又称“原型人物角色”、“临时人物角色”、“一致性人物角色”等），GenAI 都能提供巨大帮助。

✴️关于原型用户画像的补充说明：根据我的经验，产品团队以外的许多人并不理解用户画像和原型用户画像之间的区别。因此，在创建原型用户画像时，我更喜欢使用“基于假设的用户画像”这个术语，这样就能清楚地看出，仍然需要进行研究。没有什么比展示一个原型用户画像，而利益相关者却认为他们已经勾选了“用户画像框”，可以不进行实际用户研究就继续前进更糟糕的了！

如果您有兴趣了解有关如何创建原型人物角色的更多信息，我强烈建议您查看 Tamara Adlin 关于对齐人物角色的出色作品。

即使用户画像是基于用户研究构建的，提炼出的信息也会以虚构的方式呈现，同时仍然能够准确地描述产品的普通用户。无论是姓名、背景故事、标语等等，这些虚构的元素都能赋予用户画像生命力，使其真实可信、令人难忘，同时增强其与受众的共鸣。我不知道你的情况如何，但我总是在创作这些虚构的用户画像时遇到困难，而这正是 GenAI 给予我最多帮助的地方。

经过研究和分析后，我知道了哪些数据应该包含在用户画像中，以及如何对其进行细分，但我苦苦挣扎于如何以最佳方式传达这些数据。有些人可能认为这是用户画像创作的乐趣所在，但就我个人而言，我可能要花上几个小时才能想出合适的标语。我是个数据迷，热爱定性分析，但我并不认为自己是最有创造力的作家，而创造力有时能让用户画像真正有意义。这并不是说我无法独自完成，而是我比拥有这种天赋的人花费的时间要长得多。人工智能来了！

最近，我一直在尝试使用 HeyMarvin、ChatGPT Team 和其他 GenAI 工具来帮助我填补创作人物角色时常常遇到的创意写作空白。要以这种方式使用 AI，我发现最有效的方法是先自己完成最繁重的工作。

步骤 1：收集所有研究数据和见解

如果你做过用户研究，请收集所有访谈记录和/或研究报告。如果你正在构建原型用户画像，最好有大量二手研究文件可供分析（例如品牌战略和行业报告、年度报告、之前的研究报告——例如调查结果、市场研究报告、客户服务报告等），或者一些能够记录团队对目标受众假设的文件。

第 2 步：确定你的角色部分和行为提示

没有两个人物角色是完全相同的。选择符合你研究需求的人物角色部分至关重要。正如史蒂夫·穆德 (Steve Mulder) 在其著作《用户永远是对的》中所述，人物角色的每个元素都应该有其目的，这意味着它应该帮助团队更好地理解和体谅该用户群体。始终确保背景与你的产品或服务环境相关。包含过多与人物角色如何使用产品或其功能无关的个人背景信息毫无意义。

如果您想了解更多有关决定包含哪些信息的信息，请观看我的免费 1 小时课程“如何创建和使用 UX 角色”。

步骤 3：将文档上传到 GenAI 工具（即您的数据集）

不同的工具允许您上传不同的文件格式。目前，您可以在 ChatGPT Plus 或 Team 中上传 PDF、TXT、JPEG、PNG、DOCX、CSV 和 XLS 文件格式。

数据隐私：您上传到 ChatGPT Plus 的任何文件“都会无限期地保留在服务中，OpenAI 也可能使用这些文件来训练其模型，因此最好不要上传包含任何重要个人信息的文件……”。如果您需要更安全的选项，例如不使用聊天记录进行训练且数据已加密，则需要使用 ChatGPT Team 帐户或投资安全的用户体验研究分析工具，例如 HeyMarvin 或 Dovetail。我还想指出，ChatGPT Team 目前存在一个安全问题，即无法限制团队成员邀请新成员加入工作区，因此您必须定期检查工作区的“成员”页面。ChatGPT Enterprise 没有此安全漏洞。在将任何 GenAI 工具用于处理客户和/或公司数据之前，请咨询您的 IT 团队，以确保您遵守他们的数据安全规定。

步骤4：提供AI提示

您可以调整下面的提示以满足您的个人需求……

AI 提示：

 [公司] 正在重新设计其 [产品]，以便更好地与目标
受众沟通。[产品] 的主要受众是 [X]。根据
营销团队的定义，目标受众被定义为 [简短定义]。
主要受众使用 [产品] 来实现 [用户目标]。

根据提供的定义
以及所附的背景材料和研究记录，为 [主要受众] 撰写一个用户画像。该用户画像
需要包含以下部分：价值观、动机、亲和力
（即拥有相似目标受众和
共同兴趣或价值观的品牌或组织）、目标、挑战、需求、人口统计、
行为以及与公司（线上和线下）的首选接触点。

步骤 5：审查并完善结果

如果您发现第一个回复不够深入，或者您希望它包含具体信息，您可以要求 GenAI 通过多种方式对其进行完善。对于用户画像，我喜欢提供行为提示。例如，您可以使用下面的提示要求 GenAI 重写用户画像的某些部分。顺便说一句，这些提示与我在跨职能团队主持用户画像研讨会以开发原型用户画像时使用的提示相同……

AI 后续提示： 

使用以下行为提示重新编写
此角色的“动机”和“亲和力”部分：

动机

1. 个人目标：
    a. 你的人物角色的短期和长期个人目标是什么？
    b. 是什么促使你的人物角色实现这些目标？

2. 职业抱负：
    a. 你的人物角色的职业抱负和野心是什么？
    b. 是什么驱使你的人物角色在职业生涯中取得成功？

3. 激励和奖励：
    a. 什么类型的激励或奖励对你的
       人物角色最有吸引力（例如

这个后续提示应该会产生更丰富的结果。您可以选择在初始 GenAI 提示中提供行为提示，但我注意到，如果我逐步提供数据并进行迭代改进，结果会更好。在一个提示中提出太多要求会使模型混乱。《面向用户体验设计师和产品经理的 AI 助手》一书的作者 Patrick Neeman建议在提示中加入用户研究问题，以“确保其准确反映真实用户”。他建议在提示中添加“生成能够验证此用户角色是否正确的用户研究问题”。

使用大型语言模型 (LLM) 根据行为模式、偏好、人口统计数据等将用户群划分为不同的角色，非常有帮助。然而，务必记住，如果用于训练模型的数据中存在偏见，你可能会无意中延续甚至放大偏见。

关于准确性：请记住，所有 GenAI 工具都可能存在错误，并可能提供错误的答案。最终，您必须尽职尽责，确保所提供的信息准确反映您收集的数据。如果您使用的数据集包含历史偏差或不平衡（例如，在性别、种族或社会经济地位方面），则模型的输出很可能会反映这些偏差。

提示：正如 Bill Bulman 在他的文章《利用 AI 增强研究构建人物角色（分步指南）》中提到的，你也可以编写一个提示，为你的人物角色获取“日常生活叙述”。Bill 提供了一个示例提示：“请以以下用户访谈数据为基准，为我提供一个人物角色的日常生活叙述。”使用以下用户访谈数据作为基准，为我提供人物日常生活的故事。”

无论是基于数据还是基于假设，创建用户体验人物角色都是一个细致入微的过程，GenAI 的支持将使其受益匪浅。这些工具可以帮助我们打造复杂的细节，使人物角色更具关联性和价值，尤其对于那些不擅长创意写作的人来说更是如此。通过细致地收集和分析用户数据，定义真正反映用户需求的人物角色元素，并策略性地运用人工智能来增强人物角色创建的创造性，我们可以开发出更精准、更引人入胜的用户角色。

旅程地图

您将遵循创建角色中概述的相同步骤来创建旅程地图，但与步骤 2 和步骤 4 有一些明显的差异。

第二步是确定你的旅程地图元素。你需要花费大量时间来定义旅程的各个阶段以及每个阶段想要呈现的用户数据（例如，行动、想法、待办事项等）。我认为 GenAI 不应该承担这项繁重的工作。相反，你应该将其与数据集（即你在步骤 3 中上传的文档以及最终确定的人物模型）一起包含在你的 AI 提示中。

对于步骤 4（AI 提示），我喜欢使用详细说明的提示：

谁在旅途中（即你的角色）
他们正在进行什么旅程
旅程的各个阶段
我们希望在每个阶段包含的信息（例如行动、想法、待办事项等）

AI 提示（通用示例）：

为 [x] 角色撰写旅程地图。该地图应重点关注
[x] 的旅程。阶段如下：1) [x]、2) [x]、3) [x]、4) [x] 和 5) [x]。

请针对每个阶段提供：
1) 待完成任务（例如，目标 - 客户想要实现什么？）
2) 行动（客户会做什么？他们寻找哪些信息？
   他们的背景是什么？）
3) 挫折/挑战（客户想要实现或
   避免什么？） 4) 线上接触点（他们   与
[x] 服务的哪些线上部分互动？） 5) 线下接触点（他们与服务的哪些线下部分互动   ？）6) 关键时刻（客户互动可能会对   品牌、产品或服务产生正面或负面的印象，从而影响他们的   购买决策。）

例如，如果我正在创建通过移动应用程序订购食物的旅程地图，我的提示可能看起来像......

AI PROMPT（以使用手机应用订餐为例）：

使用提供的数据集（包含详细的人物角色、用户
研究报告、调查结果、市场调研报告和客服互动），为一款外卖手机应用
创建全面的用户体验旅程地图。该地图的人物角色是“Chris”，一位忙碌的软件开发人员，喜欢各种美食。旅程地图应整合来自每个阶段和各个维度的数据集数据驱动洞察，以准确呈现 Chris 的体验。阶段：1. 认知：Chris 如何通过广告、社交媒体或   好友发现这款应用。2 . 考虑：Chris 评估应用的功能、优势和用户   评论。3 . 注册/入门：Chris 下载、注册并   学习使用应用的步骤。4 . 探索：Chris 浏览各种餐厅选项和   菜单。5 . 决策：Chris 选择餐厅和餐点的那一刻，包括   任何定制。6 . 交易：完成订单并填写付款和外卖详情。7. 履行：监控订单进度并接收更新   直至送达。8 . 送达后：收到订单后的操作，包括用餐、   解决问题和评价。对于每个阶段，请提供：* 操作：详细说明 Chris 在每个阶段在应用程序内采取的每个操作。* 想法：捕捉 Chris 在每个阶段中的想法  。* 情绪：描述 Chris 在旅程关键点的情绪状态  。* 接触点：确定 Chris 与应用程序和任何其他  服务元素交互的位置。* 挫折：记录 Chris  遇到的任何具体挫折或挑战。* 待办事项 (JTBD)：概述 Chris  在每个阶段想要满足的基本需求或任务。确保旅程地图在视觉上结构化并区分这些方面，提供用户体验的整体视图。

在审查您的结果时，如果旅程图不能准确反映您的数据集，GenAI 可能会做出假设！

LLM 非常擅长预测分析和预测用户行为，当他们进行猜测时，除非你特别指示他们这样做，否则不会在结果中指出。

因此，我更愿意完善提示，以了解研究中的差距在哪里……

AI 精炼提示（清晰标记假设的示例）：使用提供的数据集（包含用户研究报告、调查结果和客户反馈）

为外卖应用创建更新的用户体验旅程图。如果数据集不完整或缺少全面理解用户旅程所需的具体信息，您可以做出合理的假设。请在旅程图中清晰地标记这些假设，以将其与数据驱动的洞察区分开来。具体说明：1. 数据整合：对于旅程图的每个阶段，请使用来自数据集的直接洞察。清晰引用   支持这些洞察的   数据源（例如，特定的调查问题、报告页面） 。2. 识别假设：如果数据集中缺少必要的信息，请提出并清晰标记假设。    根据可用数据的上下文，   为每个假设提供理由。3 . 假设标签：在旅程图中任何   未直接受数据集支持，而是由 AI 进行有根据的猜测   的内容旁边，使用独特的视觉或文本标签（例如“假设”或特殊符号）   。4. 澄清与合理化：对于每个假设，请简要   解释为什么基于   数据集中观察到的相关趋势或模式做出此假设。5 . 细节与准确性：确保旅程地图的每个阶段都包含   详细的描述和可视化效果，清晰区分   数据得出的见解和假设。这将增强地图的   整体清晰度和决策实用性。预期结果：旅程地图应将事实数据与必要的假设无缝集成，提供全面且实用的用户体验视图。每个假设都应清晰标记并论证其合理性，使利益相关者能够理解和评估所提供见解的基础。这将有助于战略规划和设计改进，确保它们既基于数据，又能适应不确定的领域。

提示：正如 Nate Jones 在其优秀的时事通讯《快速工程袖珍指南：如何从 AI 模型中获得最大收益》中提到的那样，如果您希望响应采用特定格式，则应确保在提示中指定这一点（例如“将响应放在表格中。”）

包含机会和解决方案：对于旅程地图的每个阶段，我通常喜欢为机会（基于已确定的接触点、情绪和挫折提出的改进建议）和解决方案（基于收集到的见解，提出可以改善用户体验的设计或功能增强）提供额外的“泳道”。对我来说，这是旅程地图中的研究数据最具可操作性的最佳点。我发现最好不要使用 GenAI 来帮助编写这些泳道。通常，数据集不包含集体团队解决每个阶段出现的用户体验问题的广泛知识。

我发现，将人工智能与这些提示结合使用可以显著简化旅程地图的创建，使流程更快、更高效。通过利用人工智能，我们可以更轻松地将复杂数据集的发现整合到用户旅程的每个阶段，确保从行动和想法到挑战和互动的每个环节都被准确捕捉。人工智能能够预测用户行为并生成详细的可视化效果，从而提升旅程地图的有效性。然而，手动审查和调整这些人工智能生成的地图至关重要，以确保它们融入人类洞察并准确反映真实的用户体验，从而提供更具可操作性和更全面的用户旅程视图。虽然人工智能可以协助预测和可视化用户行为，但战略性地融入人类洞察对于制作真正反映和改善用户旅程的旅程地图仍然至关重要。

展望未来：平衡人工智能效率与人类洞察力

随着我们不断将 GenAI 融入用户体验设计流程，在充分利用其计算能力与保持人性化体验之间找到平衡至关重要，这对于创建真实且富有影响力的用户画像和旅程地图至关重要。通过将 AI 的效率与我们的专业知识和创造力相结合，我们可以改进工作流程，从而交付与用户实际需求和体验紧密相关的交付成果。我鼓励我的用户体验专业人士同仁们尝试这些工具，分享他们的经验，并继续在这个激动人心的科技与设计交汇的领域中，共同突破所能取得的成就。

如果您有兴趣了解更多信息，欢迎加入Patrick Neeman 创建的AI for UX Slack 小组。我们会深入探讨如何将 AI 用于用户体验，以便更好地理解如何正确利用它来推动行业发展。期待与您相见！

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

评论(0) 浏览(112)

122025-8

我不再想利用工作以外的时间去提高 UI UX 设计水平？

杰睿设计思维

这不仅仅是关于人工智能的崛起或就业市场不断变化的需求——它关乎更深层次的东西。它关乎他们意识到自己曾经相信的职业道路不再令人满意，以及担心自己可能被困在一份与自己真正愿望不符的工作中。

问题始于不断学习新技能的压力。

在大多数行业中，员工可以依靠在学校或初始培训中获得的知识来支撑自己的职业生涯。但在平面设计领域，行业格局瞬息万变，想要保持与时俱进，往往需要投入大量的个人时间。

无论是学习最新的用户体验/用户界面 (UX/UI) 趋势、掌握新软件，还是适应新兴技术，持续学习的负担都可能令人感到压力重重。对许多人来说，一想到要把宝贵的空闲时间花在另一项技能上，就觉得难以承受。

许多设计师感到自己的工作越来越商品化，这进一步加剧了他们不断提升技能的压力。

随着自动化设计工具的兴起，人们越来越担心他们花费多年掌握的技能可能会过时。

但这不仅仅与人工智能有关。

真正的问题在于该行业的结构方式。

人们通常期望设计师成为万事通，兼顾多重角色和职责，同时保持领先地位。而对于那些对这份工作不再充满热情的人来说，继续走这条路可能会让人感到窒息。

Reddit 讨论中最有见地的观察之一是，我们的身份不应该围绕我们的工作而转。

对于许多艺术家来说，工作已经成为他们生活中如此重要的一部分，以至于很难想象他们在办公室之外是什么样子。但这种一心一意的专注可能会导致倦怠和不满。

正如一位评论者指出的那样，设计只是一种赚钱的方式——它不必定义你的全部存在。将身份认同与工作分离后，设计师可以开始探索其他能带来成就感的兴趣和激情。

讨论中出现的另一个关键主题是找到符合您的价值观和生活方式的职业道路的重要性。

对一些人来说，这可能意味着转行到用户体验/产品设计等相关领域，这些领域仍然高度重视创造力和解决问题等软技能。对另一些人来说，这可能意味着彻底离开设计界，去一个完全不同的行业寻求职业发展。

重要的是花时间思考对你来说真正重要的事情，并探索更可持续、更充实的选择。

当然，做出重大的职业改变从来都不是一件容易的事。

这需要勇气和决心，尤其是在你三四十岁，肩负着依赖收入的责任的时候。但如果继续从事一份不再让你兴奋的工作，眼睁睁地看着自己的创造力和动力逐渐消磨殆尽，长远来看，代价可能更大。

正如一位评论者所说的那样，关键在于关注真正能给你带来快乐和满足感的事物，即使这意味着冒险并踏入未知领域。

那么，设计师可以做些什么来摆脱这种倦怠循环呢？

第一步是承认有这种感觉是正常的。

承认自己对设计的热情已不如从前，这很正常。想要从事业和生活中获得更多，这也很正常。允许自己感受这些情绪，这样你就能迈出创造更充实未来的第一步。

下一步是开始探索新的兴趣和激情。

由于没有时间或精力，您一直推迟哪些爱好或活动？

现在正是重拾这些想法的绝佳机会，看看它们能带来什么。无论是学习一项新技能，发展一项爱好，还是创办一份副业，目标都是找到一些能重新点燃你的热情，并在工作之外赋予你目标感的东西。

最后，重要的是要记住，在这段旅程中你并不孤单。

还有无数其他设计师有着同样的感受——精疲力竭、迷茫，正在寻找新的前进道路。

通过与理解你正在经历的人建立联系，你可以获得支持、灵感和前进的新思路。无论是通过在线社区、本地聚会，还是与同事的一对一对话，与他人建立联系都是获得新视角和找到改变勇气的有效途径。

最终，是继续沿着原来的职业道路走下去还是开辟一条新的职业道路，是一个非常个人化的决定。

没有正确或错误的答案，只有适合您感觉的答案。

最重要的是花时间反思你的价值观、你的激情和你的长期目标，并做出符合你真正想要的生活的选择。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

评论(0) 浏览(179)

122025-8

大数据可视化设计 | 智能家居 UI 设计：从落地方法到案例拆解

杰睿大数据可视化设计文章及欣赏

智能家居已经从单品智能走向全屋联动，而 UI 设计正处于“功能越来越多、用户时间越来越少”的挑战中。
如何让复杂系统在家中变得自然好用？本文从落地方法论出发，结合实际案例，拆解智能家居 UI 设计的核心要点。

一、智能家居 UI 设计的落地方法论

智能家居 UI 并不是在屏幕上堆功能，而是一个跨硬件、跨场景、跨人群的系统设计工程。这里有一个可落地的三层方法论：

1. 信息架构层（IA）

设备分组：按照空间（客厅、卧室）、功能（照明、安防）、场景（回家、观影）分类。
优先级排序：高频控制放在第一屏，低频控制收进次级菜单。
多入口设计：同一功能允许从不同入口触发（面板、App、小程序、语音）。

落地要点：在信息架构阶段就考虑老人、小孩、访客的使用差异，避免后期 UI 大改。

2. 交互模式层（IX）

场景化卡片：用卡片将多设备操作组合为“一键执行”。
多模态触发：UI 设计兼容触屏、语音、传感器自动触发等多种方式。
实时反馈：用户需要在 0.3 秒内看到操作结果，否则会怀疑系统无响应。

落地要点：在交互模式设计时就和前端、硬件工程师沟通，确保状态同步延迟可控。

3. 视觉语言层（VL）

状态可读性：颜色、图标、文字三重区分设备状态。
适配环境光：在强光与暗光模式下，都保持足够对比度。
品牌一致性：全屋不同设备的 UI 元素（按钮、开关、滑杆）保持统一视觉规范。

落地要点：设计规范提前固化成 UI Kit，减少跨团队沟通成本。

二、智能家居 UI 的设计原则（5 条）

少即是多
在智能家居中，用户关注的是结果，而不是过程。UI 应该优先显示关键状态，而非所有数据。
预判而非响应
通过 AI 学习用户习惯，让系统提前提供选项（比如傍晚自动弹出“开灯+拉窗帘”场景卡片）。
跨端一致性
手机 App、墙面触控、平板控制中心要保持一致的视觉与交互逻辑。
留出人工控制权
再智能的系统也要让用户可以一键接管，防止“自作主张”带来反感。
情绪化体验
在 UI 动效、配色、微交互中加入温度，让科技更有人情味。

三、案例拆解

案例 1：Google Nest Hub Max

亮点：
- 大面积卡片布局，场景卡片与单设备卡片并存。
- 动画过渡自然，减少“操作跳跃感”。
可借鉴点：
- 使用图标+标签双保险提高识别率。
- 场景卡片采用温暖色调，提升亲和度。

案例 2：Aqara Home App（国内）

亮点：
- 按空间分组的首页结构，减少用户寻找时间。
- 支持“自动化”卡片，满足高阶用户需求。
可借鉴点：
- 提供“快速操作栏”，减少点击层级。
- 高对比度的状态色（开=亮色，关=灰色）适合老人使用。

案例 3：三星 SmartThings

亮点：
- 跨品牌设备接入能力强，UI 对多种设备类型有统一样式。
- 分屏模式支持同时查看多个设备状态。
可借鉴点：
- 用统一的“设备卡片模板”降低学习成本。
- 为第三方设备预留定制化 UI 区域。

四、设计落地建议

前期用 Figma/Pixso 建立 UI 组件库，统一按钮、开关、滑杆等基础组件样式。
与硬件/前端团队共创交互原型，在低保真阶段就验证操作路径与响应速度。
分阶段上线：先覆盖高频设备与场景，再逐步扩展到低频功能，避免一次性开发周期过长。
收集使用数据：上线后通过埋点分析用户点击路径，优化 IA 和场景卡片顺序。

结语

智能家居 UI 设计的挑战不只是视觉，而是让不同设备、不同人群、不同场景融为一个顺畅的体验。
一个优秀的 UI，不是让用户觉得“科技很厉害”，而是让他们感觉——

生活变得更轻松，而这份轻松几乎是无感的。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

评论(0) 浏览(127)

112025-8

如何将神经科学应用于用户体验设计中的负责任的游戏化

杰睿设计思维

九个人脑的3D图像：八个为蓝色，一个为亮粉色，背景为黄色。蓝色大脑排列成菱形，粉色大脑位于中心。 — Freepik

游戏化是应用行为设计。就是这样。

它的有效性取决于了解大脑、行为和人类动机如何运作。

通过借鉴认知心理学、神经科学和行为科学，我们可以探索使游戏化成为如此强大且敏感的工具的原理。

毕竟，只要游戏化尊重道德、可访问性和真正的价值传递等关键原则，它就可以战略性地融入用户旅程中。道德、可及性和真正的价值传递等关键原则。

当我们考虑八角分析框架（Chou，2015）等成熟模型以及关于奖励和参与的神经科学研究——强调多巴胺、催产素和大脑奖励系统的作用（Knutson，2001；Lieberman，2013）——我们开始提出更细致入微的问题：我们何时以及为何应该将体验游戏化？

在一个经常追求参与度指标而没有明确策略的行业中，游戏化脱颖而出——但只有当它被用作同理心、行为理解和健康积极强化的工具时。

游戏化不仅仅是一种策略，更是设计师和用户之间的一种语言。和任何语言一样，它需要清晰、有意图且有责任感。

卡通风格的插图，以粉红色的大脑角色为特色，有侧臂和大眼睛，表现出各种情绪：睡觉、生气、从后面、快乐、流口水和困惑。 — 插图由@upklyak , Freepik 提供

什么是游戏化？

游戏化是在非游戏环境中使用类似游戏的元素（例如积分、级别、奖励和挑战）。

其中包括生产力应用程序、电子学习平台、医疗保健系统、数字银行和工作场所环境等。

Deterding（2011）的经典定义是“游戏化”，即“在非游戏情境中使用游戏设计元素”。虽然这个定义很有道理，但在用户体验领域，它显得有些肤浅。

这是因为用户体验专业人士必须明白，游戏化不仅仅是将游戏机制简单地复制粘贴到数字界面中。它是一个精心设计的激励系统，能够激活那些让游戏引人入胜、富有挑战性和回报性的认知和情感回路。

因此，在设计游戏化体验时，您基本上是在处理心理变量，例如预期奖励、渐进式进步、自主性、归属感和掌握度（Ryan & Deci，2000）。

从这个意义上讲，游戏化应该被视为基于人类行为的激励框架，而不是华而不实的“参与功能”。

但这需要一种更系统的体验设计方法——从入职到持续使用，包括反馈循环、参与触发器和积极强化机制。

在这种背景下，设计师必须提出并清晰地回答这样的问题：是什么激发了用户的动机？这种体验如何创造期待、进步和意义？

游戏化在用户体验中的真正作用

“游戏化”一词常常会让人联想到视觉效果和典型的游戏机制：积分、徽章、排行榜、进度条、“任务完成”弹窗。这些确实是游戏化工具包的一部分。

但将游戏化简化为这些“数字贴纸”是一种肤浅的理解——尤其是从用户体验的角度来看（Werbach & Hunter，2012）。

对于体验设计师来说，游戏化首先是一种基于科学的行为和动机方法。

它试图通过与人类大脑工作方式相一致的机制来鼓励期望的行为：追求奖励、能力感、克服挑战并预期成就。

如果有意识地应用游戏化，它可以将数字互动转变为有意义的旅程，增加参与度，促进学习，并支持长期保留（Deterding，2011）。

从这个角度来看，游戏化并非一种装饰——它成为了用户体验策略的核心部分。它并非为了美化用户界面，而是为了塑造交互的结构。

触发心理捷径、减少摩擦、提供实时反馈、强化内在动机——这些原则都植根于自我决定理论（Deci & Ryan，1985）和行为设计（Fogg，2009）。

情感、目的和参与

著名研究员和游戏设计师Jane McGonigal对游戏化提出了更广阔的视角。

对她来说，游戏化的本质在于“用游戏思维解决现实世界的问题”（McGonigal，2011）。

这意味着将游戏背后的思维方式（而不仅仅是视觉效果或互动性）应用到需要用户参与、努力、决策和学习的现实生活中的用户体验流程中。

视频、演讲：“现实破碎：游戏为何让我们变得更好”，Interactive 2011，SXSW

麦格尼格尔认为，游戏之所以成功，不仅仅是因为它们有趣，还因为它们能提供丰富的情感体验，具有明确的目标、持续的反馈、适合玩家技能的挑战以及强烈的目的感。

在游戏设计文献中，成功游戏的四个核心特质如下：

明确的目标→用户知道他们需要做什么
限制行动的规则→存在使任务具有挑战性的限制
反馈系统→进展可见、可理解且即时
自愿参与→用户选择参与，激发内在动力

这些品质与UX 最佳实践直接相关。

例如，强大的新手引导流程就像游戏教程一样：它通过互动进行教学，不会惩罚错误，并逐渐培养玩家的掌控感。持续反馈的微任务流程就像一个任务分解成几个步骤，每个步骤都有小的奖励。

通过嵌入这些结构，用户体验设计师可以构建更具激励性、更少摩擦、更情感化的体验。

这就是为什么 McGonigal 坚持认为，成功的游戏化并不是将游戏添加到现实世界中，而是让现实世界感觉像游戏一样引人入胜。

大脑示意图，箭头指向催产素、多巴胺和中脑边缘奖励系统的形成。 — 由人工智能 ChatGPT 生成的图像

游戏化背后的神经科学

游戏化的真正力量并不在于视觉效果或表面的“乐趣”。
它的有效性源于它与大脑神经生物学的互动方式——特别是与动机、决策、奖励、情感和学习相关的系统。

多巴胺：期待、动力和奖励

这一过程中的一个关键因素是多巴胺，一种通常与愉悦感相关的神经递质。

但与普遍的看法相反，多巴胺与即时满足无关，而是与对奖励的期待有关。

根据 Knutson (2001) 的研究，即使只是预期一个积极的结果也足以触发伏隔核的活动，伏隔核是大脑奖励系统的中心部分。

这就解释了为什么完成一个步骤、升级或保持连续性可以增强继续下去的动力——无论是完成《最后生还者》中的任务还是完成注册以获得奖励。

从用户体验 (UX) 角度来看，产品使用过程中频繁且可见的奖励会以类似游戏的方式刺激多巴胺系统。

当这些奖励达到良好的平衡时，它们会形成自我维持的参与循环，在游戏设计中称为强迫循环（Sweetser & Wyeth，2005）。

这使得用户保持互动不是出于义务，而是因为大脑预期下一次小胜利。

催产素：结合、同理心和合作

游戏化中的另一种重要化学物质是催产素，俗称“信任激素”。

它会在积极的社会环境中释放——当我们合作、获得认可或感受到归属感时。

在游戏化体验中，团队排名、小组挑战、应用内聊天和协作任务等社交机制可以提高催产素水平，鼓励亲社会行为。

Zak (2005) 的研究表明，即使在虚拟环境中，具有积极反馈和社会联系的数字互动也能触发催产素的释放。

对于用户体验设计师来说，这意味着游戏化可以增强个人积极性以及用户与社区或品牌的联系。

中脑边缘奖励系统：人类动机的核心

所有这些影响都是中脑边缘奖励系统的一部分，该系统是一个大脑回路，包括腹侧被盖区 (VTA)、伏隔核和前额叶皮质等区域。

该系统由大脑认为有价值的刺激物触发，例如食物、社交互动或实现目标。精心设计的游戏中也会激活同样的系统。

这就是为什么渐进式进步、即时反馈、平衡难度和成就感等策略如此有效的原因——它们激发了人类大脑的核心动机引擎。

当这些游戏设计原则以合乎道德的方式融入数字产品中时，它们可以强化自愿行为并维持长期参与。

奖励而不上瘾

有了这样的神经科学基础，事情就变得清晰起来：精心设计的游戏化并不需要强制互动。它构建了一个系统，让使用本身就是一种奖励——由多巴胺、催产素以及我们内心对进步和意义的渴望驱动。

然而，必须记住的是，使游戏化引人入胜的系统也可能被滥用——导致上瘾、焦虑或强迫行为。

这就是为什么用户体验设计师必须负责任地运用这些知识，为用户创造健康、激励和真正有价值的体验。

参考

“现实是破碎的：为什么游戏让我们变得更好以及它们如何改变世界”，简·麦格尼格尔（2011 年）。
“对增加金钱奖励的预期会选择性地招募伏隔核”，《神经科学杂志》，Brian Knutson、Charles M. Adams、Grace W. Fong 和 Daniel Hommer（2001 年）。
“目标追求的‘是什么’和‘为什么’：人类的需求和行为的自我决定”，《心理学探究》，Edward L. Deci 和 Richard M. Ryan（2000 年）。
“可操作的游戏化：超越积分、徽章和排行榜”，Yu-kai Chou（2015 年）。
“社交：为什么我们的大脑需要连接”，马修·D·利伯曼（2013）。
“从游戏设计元素到游戏性：定义游戏化”，Sebastian Deterding、Dan Dixon 和 Lennart Nacke（2011）。
“为了胜利：游戏思维如何彻底改变你的业务”，Kevin Werbach 和 Dan Hunter（2012 年）。
“通过事件相关 fMRI 分离奖励预期和结果”，Brian Knutson、Grace W. Fong、Charles M. Adams、Jerald L. Varner 和 Daniel Hommer（2001 年）。
“GameFlow：评估玩家游戏乐趣的模型”，Penelope Sweetser 和 Peta Wyeth（2005）。
“信任：催产素促进的暂时人类依恋”， Paul J. Zak（2005）。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

评论(0) 浏览(122)

112025-8

2025 年值得关注的 9 大 SaaS 设计趋势

杰睿行业趋势

SaaS（Software as a Service）行业在 2025 年迎来了新的拐点：
AI 正在重塑交互体验，移动端和低代码工具推动产品快速迭代，用户对于情感化、环保、包容性的期待也在不断提高。

结合近期的行业研究与实际产品观察，我整理了 9 大值得关注的设计趋势，供大家参考。

1. AI 驱动 + 超个性化体验

人工智能已从“附加功能”变成核心驱动力。
生成式 AI 和自主智能体（Agent）能够根据场景自动生成内容、优化仪表盘、推送异常提醒。例如：

Salesforce Einstein 可实时分析业务数据
Microsoft 365 会自动调整界面主题（白天/夜间模式）
这种 情境感知型界面 将在未来成为 SaaS 产品标配。

2. 情感化、人本设计（Human-Centric Design）

用户已经不满足于“能用”，他们希望 SaaS 像消费级应用一样好用、好看、好感度高。
常见做法包括：

插画、拟人化表情元素
语气友好的文案
柔和的配色方案
它们可以提升产品亲和力，让用户对品牌更有好感。

3. 极简化 + 环保友好

极简设计不仅让界面更清爽，还能减少不必要的动画、压缩图片资源、提升加载速度，降低服务器和终端的能耗。
这是一种既改善体验又承担社会责任的设计方向。

4. 包容性与无障碍优先

设计不只是为多数人服务。
色彩对比度、键盘导航、屏幕阅读器适配等无障碍特性，将会成为 SaaS 产品的 合规要求 和 品牌加分项。

5. 微交互 & 渐进揭示

细微的动效反馈、按钮状态变化、分步展示复杂信息（Progressive Disclosure），可以：

降低用户的学习成本
让交互过程更有参与感
保持界面的简洁

6. 低代码 / 无代码与 Micro-SaaS

低代码平台（如 Airtable、Webflow、Typeform）让非技术团队也能快速构建业务工具。
与此同时，Micro-SaaS（面向细分行业的小型 SaaS 产品）在海外已经很火：

成本低
目标明确
上线周期短

7. 移动优先 + 手势优化

移动端流量持续攀升，响应式布局、触控优化、手势导航正在成为基础要求。
未来，AR/VR 等沉浸式交互可能在部分 SaaS 场景中落地（如设计协作、培训）。

8. 定价配置自动化

企业不再依赖人工去调整套餐、价格、功能权限。
定价驱动的 DevOps 思路正在兴起，通过自动化系统（如 iPricing）来实时调整策略，提高运营效率。

9. AI 编码工具冲击传统模式

Bolt、Replit、Cursor 等 AI 编程工具让非技术人员也能直接用自然语言开发内部工具。
这对传统的“按座位收费”的 SaaS 商业模式是一个冲击，也催生了成果导向型定价（Outcome-Based Pricing）的探索。

趋势速览表

趋势	核心价值
AI + 超个性化	提高效率，预测需求，减少操作成本
情感化设计	提升好感与留存率
极简 + 环保	提速、降耗、增强品牌责任感
包容性设计	扩大用户覆盖面
微交互	降低学习成本，增强体验
低/无代码 + Micro-SaaS	快速上线，专注细分市场
移动优先	满足使用习惯，拓展新场景
定价自动化	灵活应对市场变化
AI 编码	重塑开发与商业模式

结语
2025 年的 SaaS 设计趋势核心关键词是：智能化、情感化、简约环保、极致灵活。
对于设计师、产品经理和开发者来说，这些趋势不仅是参考，更是下一步产品规划的重要依据。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

评论(0) 浏览(142)

112025-8

2026 年值得关注的顶级 UI/UX 趋势

杰睿行业趋势

说实话：如果你正在读这篇文章，那么有93%的可能性，你刚刚完成的一个设计项目到明年7月就会感觉过时了。欢迎来到2026年的UI/UX时代——微交互强势回归，突然之间，大家又开始痴迷了。

这不是那种典型的柔和渐变和新拟物化按钮的概括。而且，这也不是伪装成博客文章的情绪板。你将要阅读的是一篇关于 UI/UX 变革的严肃探讨，这些变革将真正影响我们在 2026 年构建数字体验的方式。

1. AI优先设计

关于人工智能设计的热潮我们已经听了很久了。回想2024年，当时的设计成果看起来就像一个睡眠不足的实习生拼凑起来的。到了2025年，情况有所改善，但使用人工智能仍然感觉有点像偷工减料。

快进到2026年，游戏规则已经改变。人工智能不再只是跟风——它变成了你全程参与的设计协作者，从不抱怨修改。像Galileo、Uizard以及本月被Figma收购的初创公司这样的工具，正在打造不仅功能齐全，而且精美绝伦的UI。设计师现在会花时间进行宏观思考和精细调整，而不是沉迷于拖拽自动布局框架。

趋势：

诸如“让这个流程对 alpha 版本更加友好 20%”之类的设计提示现在已经成为一种流行趋势。
UX文案由AI撰写一半稿子，然后由人类进行润色。
评判设计师的标准是他们提示得有多好，而不是他们推动像素得有多好。

设计提示：开始像对待初级设计师一样对待 AI 工具。引导它们，纠正它们。不要让它们肆意妄为，否则它们会为计算器设计一套 6 步入门指南。

2.“零 UI”的兴起

从一张白纸开始？那太2025年了。我们正在进入一个理想的界面可能是……完全没有界面，或者至少不是我们习惯的那种。

想想语音命令、手势、存在感知以及基于情境响应的界面。你的设备甚至在你开口说话之前就能预测你的需求。

有点令人不安？确实如此。
但也极其方便。

在野外：

你的冰箱会在你还没注意到牛奶快喝完之前就自动补充牛奶。你的汽车可以识别你的脸，自动调整座椅，无需你主动询问。
还有那些能让你“想象”出布局的VR头显？好吧，这还只是实验性质，但比你想象的更接近现实。

趋势：

为“隐形”交互而设计。
优先考虑音频、触觉或行为的反馈循环。
彻底重新思考屏幕的作用，尤其是在消费技术领域。

设计提示：从体验开始设计原型，而不是屏幕。并在现实世界中测试它。

3. 高度个性化，但有界限

到了2026年，人们已经不再对千篇一律的东西感兴趣了。用户希望应用程序能够了解他们的睡眠周期、喜欢的绿色，甚至他们中学时期未解决的琐事，但又不希望显得突兀。

个性化正变得高度精准，但数据隐私问题也日益凸显。最佳平衡点是什么？界面应该能够根据用户行为进行细微调整，提供贴心的默认设置，并提供量身定制的仪表盘，同时又不会涉足监控领域。

趋势：

根据上下文进行调整的界面：夜间使用黑暗模式，大脑疲劳时使用简化的用户界面等。
高度集中的入职流程根据您的氛围量身定制：为专业人士提供简约服务，为新手提供指导。
为高级用户提供“选择您自己的 UX 冒险”设置。

设计提示：让用户自主决定个性化程度。让个性化变得有趣。不要将功能锁定在数据共享墙后面。

4. 滚动已死。滚动万岁。

我们与无限滚动、横向滚动，甚至那些奇特的视差效果有着长期的合作关系。

但到了2026年，滚动体验已经成熟。它不再仅仅关乎运动，而是关乎叙事。想象一下，滚动驱动的叙事、流畅的过渡、智能的捕捉点，以及流畅的交互，引导你，而不会让你感觉像是刚喝了一杯能量饮料。

趋势：

滚动被用作一种叙事手段，而不仅仅是一种转储内容的方式。
配对的动画和微交互创造了一种旅程，而不仅仅是滚动到页脚的情况。
基于滚动的 UI，根据速度或意图而变化。

设计提示：在所有设备上测试滚动行为。在 MacBook Pro 上看起来流畅的滚动效果，在售价 99 美元的 Android 平板电脑上可能感觉像做梦一样。

5.语音界面成为主流

还记得以前为了关灯不得不像对着故障机器人说话一样跟 Alexa 说话吗？那种日子（基本上）已经过去了。2026 年，语音界面终于成熟了。

随着自然语言处理技术的飞速发展，语音如今已成为与应用交互的主流方式，尤其是在可穿戴设备、车载设备和智能家居领域。设计师面临的真正挑战是什么？是放弃基于屏幕的思维模式，拥抱一个可以用言语而非视觉呈现的用户界面世界。

趋势：

语音和视觉反馈接口同步工作。
适用于多任务场景（例如烹饪、驾驶、育儿）的纯语音用户流程。
个性丰富的语音助手让生活变得轻松。

设计提示：不要让每个应用都显得吵闹。有意识地设计安静的语音交互。并且，务必为用户提供“关闭”按钮。

6. 设计要考虑神经多样性，而不仅仅是可及性

2026 年的无障碍设计不再只是纸上谈兵，更是一场思维的转变。如今，我们在设计时将认知包容性纳入考量，致力于打造支持多动症、自闭症、阅读障碍等用户的体验。

它远远超出了屏幕阅读器支持或色彩对比度的范畴。它涉及清晰地组织信息、管理通知时间，以及构建减少而非增加心理摩擦的界面。

趋势：

可选的极简模式，可消除噪音。
带有“运动灵敏度”切换的动画。
尊重焦点的界面；是的，我们正在谈论您的 7 个弹出窗口。

设计提示：开始用真正的神经多样性用户测试你的设计。不要只是“添加一个模式”。要将包容性设计融入核心用户体验。

7.反设计2.0

向反设计2.0问好！它杂乱无章，喧闹不堪，奇特而美丽。到了2026年，它将会随处可见，尤其是在那些不想被当成Webflow克隆版的作品集上。

这不是为了随意而随意，而是有目的地打破规则。想想看，撞色的色彩、巨大的按钮、像设计实习生失控一样重叠的文字，但这一切却以某种方式保持了整体性。它看似混乱，却经过精心设计。

趋势：

设计师将不完美视为一种风格。
用户界面接近“糟糕”，但在千篇一律的界面中却脱颖而出。
更注重真实性而非完美性。

设计提示：谨慎使用此趋势。如果你正在设计银行应用程序，最好不要使用 Comic Sans 字体和摇摆按钮。

8. 具有幽默感

到 2026 年，甚至你的银行应用程序也会开玩笑，而且不知何故，它还能正常工作。

界面正通过诙谐幽默的微文案、流畅的动画和让用户微笑的小惊喜，不断提升个性化。它不再仅仅关乎直观，而是关乎愉悦。那些能带来愉悦的产品才能让人们记住（并持续使用）。

趋势：

用个性化的祝酒词。“哎呀。这招不行。不过，嘿，你上一段感情也没用。”
错误屏幕会让你笑，而不是哭。

喜悦与无聊的东西（比如空状态和确认消息）融合在一起。

设计提示：不要过度。并非所有内容都需要单口相声。只需营造一种让你的产品感觉不那么机械、更具亲和力的氛围即可。

9. VR之外的3D和空间设计

随着 Apple Vision Pro、Meta Quest 以及三星正在研发的神秘头显，空间设计已正式成为主流。但问题在于——你无需为 VR 构建建筑，也能参与 3D 体验。

2026年，扁平化UI正在进化。它不再是俗气的阴影，而是拥有真实、触感十足的深度。即使在传统屏幕上，界面也开始变得层次丰富、响应迅速、充满活力。

趋势：

响应光标移动的 3D 卡。
电子商务和设计工具中的 AR 预览。
界面感觉更像是物理空间而不是平面布局。

设计提示：像建筑师一样思考。关注用户如何在空间中移动，而不仅仅是屏幕。但不要让性能受到影响。流畅的 2D 流程总比混乱不堪的 3D 流程好。

10. 设计时考虑地球

可持续设计已不再只是一句流行语。到了2026年，用户会真正关心你的应用是否环保，没错，数字可持续性如今已成为一个真正的话题。

产品越高效越好。轻量级的用户界面、低带宽选项和智能缓存不再仅仅是技术优化，而是合乎道德的设计选择。节能不再只是数据中心的专利，而是用户体验的一部分。

趋势：

应用程序中的生态模式设置可降低数据/功耗。
碳中和设计实践。
应用程序加载速度快、操作轻便，并且不会在三次滑动中耗尽电池电量。

设计提示：别粉饰太平。务必打造高效的 UI。额外福利：用户本来就喜欢快速的应用，所以这是双赢的。

最后的想法：2026 年的设计不再注重炫酷，而更注重感觉

2026年的设计不仅仅关乎美学，更关乎智能、同理心和实用性。最具影响力的界面不仅美观，还兼具适应性、包容性、愉悦感……在某些情况下，甚至几乎隐形。

所以，如果你还在纠结圆角半径到底是 8px 还是 12px，或许是时候缩小一下了。超越像素的局限，专注于用户体验。设计要以人为本，而非仅仅为了追求完美。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

评论(0) 浏览(117)

112025-8

【原创案例分享】智慧大屏可视化设计

杰睿大数据可视化设计文章及欣赏

项目背景:

为进一步加强沿江沿海岸堤安全防范和综合治理工作，根据市委市政府部署牵头打造江海堤防综合治理智慧工程。按照坚持“立足预防、综合施策”总原则，运用互联网、大数据、云计算、人工智能等技术手段，围绕沿江沿海生态保护、禁渔禁采、船舶管理、防汛防台、打击走私、旅游安全管理、滩涂管理、日常风险防控等重点工作，切实提升综合治理水平与应急处置能力。

堤防综合治理的实际需求，包括防洪、排涝、水资源管理等方面的需求，设计时主要考虑实时数据、监测信息应准确、及时地展示在界面上，方便用户了解堤防状况。利用图表、地图等可视化手段，将复杂的数据和信息以直观的方式呈现给用户。注意信息的层级和优先级，确保重要信息能够突出显示，预警信息要突出显示以便操作人员快速解决。

项目概述

产品定位

建设“全域覆盖”技防体系，建立专职巡防队伍，推行网格化服务管理模式，努力打造“一键联动、一图展示、一屏指挥”现代化江海堤防综合治理模式，实现沿江沿海“全天候、全时段、全过程”巡防监控，及时发现、处置各类违法违规行为和风险隐患，构建职责清晰、分级负责、上下贯通、部门联动、运行高效的江海堤防综合治理体系。

目标用户

工程管理人员：负责监督和管理整个堤防治理工程，需要实时监控各项指标和数据；

政府监管部门：相关环保、水利或城建等部门的监管人员，需要监控工程进度和效果，确保符合标准；

紧急应急人员：负责处理突发事件和紧急情况的人员，需要快速获取现场信息做出相应反应；

研究人员：从事相关领域研究的学者或科研人员，可能需要获取实时数据进行分析和研究。

设计风格

蓝色科技感设计风格以蓝色为主导色调，突出冷静、专业和现代感。运用深浅不同的蓝色调配合白色字体，呈现出科技感强烈的视觉效果。高对比度的设计风格使关键信息更突出，GIS动态效果和互动元素增加用户体验。蓝色科技感设计常见于科技产品、数字平台，传达着稳健、创新与可靠性的形象，吸引注重技术与现代感的受众，展现出科技与未来的融合之美。

设计亮点

数据信息整合，增加关键数据，助力用户风险管理

左侧信息之前有“风格不统一、图表样式不美观、环形图颜色搭配不协调、有些文字在深色界面上显示不清晰”等痛点。

在设计过程中增加了「气象要素」模块，因为提防发生灾害多半可以和天气相挂钩的，增加气象要素可以很好的预测未来的天气现象，在有极端天气的时候可以提前做预防工作，最大程度减少损失。同时将巡更、巡检和视频的统计整合在一起轮播显示，可以增加显示数据的区域。

清晰化数据展示提高可读性

右侧主要是原型主要是平台视频的统计，主要有显示数据比较单一，模块排版不清晰，数据展示不清晰等痛点。

调整后增加了「物资情况」「巡查打卡明细」「人员职责表」等模块，在减少操作的技术上展示更多的信息量。最上边的视频区域分成「视频监控」「PPT展示」和「无人机」展示三个部分。整个右侧模块排版清晰，便于用户查找信息，从而提高工作效率。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

评论(0) 浏览(110)

首页

1.明确目标与平台选择

2.注册与认证

3.准备开发环境

4. 设计与原型：从交互到视觉的桥梁

5.核心开发步骤

6.接口与数据

7. 测试与优化：别忽视视觉细节

8.提交审核与上线

步骤 1. 设定精确目标

第 2 步：组建一支负责任的团队

步骤 3. 定义用例和用户

步骤 4. 确定关键指标

步骤 5. 准备数据

步骤 6. 绘制粗略布局

步骤 7. 获取用户反馈

步骤 8：为设计师撰写一份详尽的简介

第 9 步：找到合适的建筑商

第十步：启动。观察。改进。

结论

1. 从主页预览附件

2. 清晰区分已读和未读

3. 自动整理收件箱标签

4. 内联关键信息提取

5. 简洁且内容丰富的层次结构

从现实世界的用户界面中学习，而不仅仅是概念

人物角色

步骤 1：收集所有研究数据和见解

第 2 步：确定你的角色部分和行为提示

步骤 3：将文档上传到 GenAI 工具（即您的数据集）

步骤4：提供AI提示

步骤 5：审查并完善结果

旅程地图

在审查您的结果时，如果旅程图不能准确反映您的数据集，GenAI 可能会做出假设！

展望未来：平衡人工智能效率与人类洞察力

一、智能家居 UI 设计的落地方法论

1. 信息架构层（IA）

2. 交互模式层（IX）

3. 视觉语言层（VL）

二、智能家居 UI 的设计原则（5 条）

三、案例拆解

案例 1：Google Nest Hub Max

案例 2：Aqara Home App（国内）

案例 3：三星 SmartThings

四、设计落地建议

结语

什么是游戏化？

游戏化在用户体验中的真正作用

情感、目的和参与

游戏化背后的神经科学

多巴胺：期待、动力和奖励

催产素：结合、同理心和合作

中脑边缘奖励系统：人类动机的核心

奖励而不上瘾

参考

1. AI 驱动 + 超个性化体验

2. 情感化、人本设计（Human-Centric Design）

3. 极简化 + 环保友好

4. 包容性与无障碍优先

5. 微交互 & 渐进揭示

6. 低代码 / 无代码 与 Micro-SaaS

7. 移动优先 + 手势优化

8. 定价配置自动化

9. AI 编码工具冲击传统模式

趋势速览表

1. AI优先设计

2.“零 UI”的兴起

3. 高度个性化，但有界限

4. 滚动已死。滚动万岁。

5.语音界面成为主流

6. 设计要考虑神经多样性，而不仅仅是可及性

7.反设计2.0

8. 具有幽默感

9. VR之外的3D和空间设计

10. 设计时考虑地球

最后的想法：2026 年的设计不再注重炫酷，而更注重感觉

项目背景:

项目概述

产品定位

目标用户

6. 低代码 / 无代码与 Micro-SaaS