兰亭妙微ui设计公司分享：还在埋头画按钮、调间距？当 AI、Copilot、Agent 席卷设计行业，不少 B 端设计师陷入焦虑：难道 AI 要取代设计师了？

其实大可不必恐慌。AI 不是来替代设计师的，而是高效的协作助手，帮我们承接大量重复繁琐的基础工作，让设计师把精力聚焦在真正具备核心价值的体验决策上。本文抛开晦涩理论，拆解 B 端产品里 AI 的四类交互模式、三大落地业务场景，聊聊 B 端设计师该如何拥抱 AI、完成能力升级。

一、B 端产品中 AI 的 4 类交互模式

AI 在 B 端产品里并非千篇一律，根据嵌入形态与交互逻辑，可以划分为对话式助手、伴随式副驾驶、嵌入式副驾驶、智能增强界面、自主代理五大形态，每一类都有对应的设计原则与业务案例。

1. 对话式助手：拟人化聊天交互

这是大众最熟悉的 AI 形态，以独立聊天窗口承载问答交互，同时支持文字、语音输入。

案例：阿里云、百度云平台内置智能助手；企业内部员工智能客服，员工可直接查询年假、报销制度，无需咨询 HR。

设计要点

1. 输出语言尽量拟人化，避免机械生硬回复；
2. 完善交互状态：思考加载动画、文字 / 语音输入态；
3. 提供纠错反馈入口，当 AI 回答出错，允许用户快速修正结果。

2. 伴随式副驾驶：常驻的专家侧边栏

不开启独立弹窗应用，以常驻侧边栏、工具栏形式深度嵌入现有业务界面，随时响应用户复杂、多样的任务诉求，不割裂用户原有工作流。

案例：Microsoft 365 Copilot 深度集成 Word/PPT/Teams；阿里云通义灵码编码辅助；企业微信聊天侧栏智能服务总结。

设计要点

1. 布局位置合理，不遮挡主业务操作区域，优先选用侧边栏、工具栏；
2. 时机精准：在用户产生潜在需求时主动输出建议，避免无意义打扰；
3. 操作轻量化，建议内容直观易懂，支持一键采纳 AI 方案。

3. 嵌入式副驾驶：即用即走的浮动工具

没有固定常驻位置，依附当前业务上下文，依靠快捷键、选中文本、触发符号唤起浮动工具栏，用来完成单一原子化任务，任务结束自动消失。

案例：Notion AI 输入/唤起能力菜单；WPS AI 快捷键唤起续写、改写；通义灵码快捷键生成代码片段。

设计要点

1. 按需触发，非必要时保持静默，不干扰主流程；
2. UI 轻量，浮动面板、行内提示，优先级始终低于用户主内容；
3. 功能意图直白，用户无需理解成本，点击即可执行；
4. 把控制权交还用户，支持撤销、拒绝、修改 AI 生成的全部内容。

4. 智能增强界面：无感赋能原有组件

最隐蔽的 AI 形态，没有独立 AI 入口，传统 UI 组件被 AI 能力增强，用户几乎感知不到 AI 存在，但产品使用效率大幅提升。

案例：企业微信模糊语义智能搜索；发票拍照识别自动填充报销表单；智齿科技对话全量智能质检。

设计要点

1. 降低学习成本，做到能力无感融入，符合用户固有操作直觉；
2. 状态反馈清晰，明确告知识别、处理成功或失败结果；
3. 保留人工修改入口，AI 输出内容允许用户二次编辑。

5. 自主代理：给定目标，自动完成任务

高阶 AI 形态，用户仅输入最终业务目标，AI 自主拆解多步流程、自动执行任务，输出最终结果。

案例：网易云商对话 SOP 流程智能引导；阿里商旅 AI 自动规划差旅行程。

设计要点

1. 提供任务进度面板，可视化展示执行过程；
2. 规避黑盒风险，关键节点交给用户确认；
3. 最终结果结构化展示，信息清晰易懂。

二、三大核心业务场景：AI 解决 B 端企业真实痛点

理解 AI 交互模式之后，再看 B 端高频业务场景，AI 如何破解企业现存痛点。

场景 1｜流程自动化：智能审批与智能数据录入

业务痛点：报销审批流程冗长、合同审阅工作量巨大，手动录入数据枯燥且容易出错。

AI 解决方案

1. 智能报销：拍照识别发票信息，自动填单、校验合规，合规单据自动流转，异常单据再交由财务人工复核，代表产品：钉钉 AI 报销、阿里商旅。
2. 智能合同审核：AI 对比标准合同模板，自动标记高、中、低风险条款、识别内容增删修改，法务只需要聚焦风险项，代表产品：法大大、e 签宝。

设计思维转变：设计重心不再是引导用户完整填写表单，而是聚焦异常场景的处理体验。

场景 2｜数据洞察化：智能问答与辅助业务决策

业务痛点：报表数量庞大，有效信息淹没在海量数据中；提取指标需要技术人员协助，响应周期长。

AI 解决方案

1. 自然语言 BI 分析：用户直接用口语提问业务数据，AI 自动解析数据集，生成图表和分析结论，例如阿里云 Quick BI。
2. 数据主动预警：系统实时监控业务指标，一旦识别数据异动，主动推送风险提醒。

设计思维转变：从完整展示全部原始数据，升级为帮助用户快速抓取业务洞察。

场景 3｜知识协同化：搭建企业知识大脑

业务痛点：企业文档沉淀海量，查找资料效率低下；新员工上手慢，过度依赖老员工答疑。

AI 解决方案：企业智能知识库，用户通过对话、搜索提问，AI 跨聊天记录、会议纪要、项目文档，聚合信息并且整理总结答案，如企业微信 5.0 智能搜索。

设计思维转变：放弃复杂文件目录、多层筛选器，打造类似与人对话的自然知识获取入口。

三、B 端 UI 设计师 AI 落地行动清单

AI 时代，B 端设计师不用急于追求复杂 AI 开发，先完成心态与基础能力的迭代。

1. 心态转型：从「画师」切换为「导演」

• 过去：作为画师，核心工作打磨像素细节，纠结按钮位置、样式。
• 现在 & 未来：化身导演，编排用户与 AI 之间的协作流程。思考重点变成：这个任务交给 AI 自动执行？还是需要用户确认之后再执行？

AI 不会取代设计师，但会取代固守旧模式的设计师。

2. 三项新基本功，立刻上手练习

1. Prompt 提示词设计：掌握和 AI 沟通的语言，指令描述需要明确：风格、尺寸、业务场景、约束条件，拒绝模糊指令。 差示例：生成一个图标 好示例：为金融 APP 设计代表安全的线性蓝色钥匙图标，尺寸 64×64px。
2. AI 状态反馈设计：AI 输出具备不确定性，需要完整设计全套状态：思考加载、执行成功、报错、结果存疑等反馈界面。
3. 优秀产品案例拆解：日常体验 WPS AI、通义灵码、钉钉智能助手。不只使用功能，主动复盘交互：这个流程好在哪里？存在什么问题？如果由我设计，如何优化。

写在最后

AI 的本质是解放设计师，把我们从重复画图的角色，进化成智能体验策略设计师。面对 AI 浪潮不必焦虑，保持好奇心，发挥设计师体验洞察的优势，把 AI 变成自己最强的设计工具。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

把每一次训练，转译成角色成长的可见进度。

兰亭妙微专注 UI 与用户体验设计，持续关注国内外优秀作品，分享界面设计与交互思路，进行设计审美积累。今天分享 Ready Player Fit，一组把健身计划、角色自定义和朋友组队结合起来的 App 设计。训练记录在这里拥有了接近游戏大厅的呈现方式。

一、项目背景：让持续投入拥有更具体的反馈
等级、经验、连续训练与装备把行为积累转成可见状态。设计围绕训练与成长建立联系，让用户既能看见计划，也能在个人角色上找到持续参与的线索。

图 1  训练信息的分步采集

步骤提示、训练选项与身体部位示意共同构成入门流程，底部动作保持清楚。深色与青蓝延续游戏气质，填写结构则十分明确，让个性视觉与基础操作共存。

图 2  角色自定义与即时预览

中央角色提供即时的外观预览，下方参数按组展开，保存按钮收住整个选择过程。这组角色配置图把“我正在修改什么”直接呈现在画面中心，选择与结果之间距离很近。

二、设计策略：用统一的游戏语言组织健身内容
①信息架构：训练信息、角色设置、成长资料与邀请队友各有明确页面。②视觉语言：深蓝黑基底衬托青蓝发光元素，3D 角色形成焦点；进度条、能力指标与装备卡片延续同一世界观。

Ready Player Fit | 界面细节与设计启发

图 3  个人资料与成长记录

这张个人资料局部将等级、经验、金币、连续训练与装备解锁集中起来。进度与角色状态共同构成成长面板，数据也因此带有清楚的积累感和目标感。

图 4  邀请队友与发送反馈

成员等级与状态为组队提供背景，邀请发送后的提示补上动作反馈。开始与取消等入口继续保留，角色成长的个人体验由此延伸到与朋友一起训练的场景。

③场景化交互：训练信息分步填写，角色参数与预览放在相近区域，资料页集中展示积累，邀请流程补充队友状态。强烈视觉之下，选择、保存与发送等动作仍保持熟悉的操作逻辑。

三、设计启发：游戏化的完整感，来自行为与反馈的对应
角色、经验和装备让训练拥有可见回声，分组与主按钮则维持使用秩序。做运动、学习或习惯产品时，可以先思考哪些真实行为值得被看见，再为它们设计连贯的成长表达。

如有运动健身、训练管理类 App的 UI/UX 设计需求，欢迎联系兰亭妙微，交流产品场景与设计需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

本文面向交互设计新人，完整梳理交互设计师的能力构成、工作流程、核心理论模型以及自我提升路径，把常用理论、模型搭配案例通俗讲解，适合搭建基础知识框架。

文章梳理用户体验行业三位里程碑人物：唐・诺曼（Don Norman）、雅各布・尼尔森（Jakob Nielsen）、阿兰・库珀（Alan Cooper），从行业影响力、著作、核心贡献出发，同时给出设计师的职业启发。

一套新的B端界面设计拿到评审会上，大家可能都觉得更清爽，却仍然不知道是否值得安排开发。Alex Williams 的文章通过一个明确标注为虚构的产品案例，讨论设计投入如何与业务目标和验证方法连接。我们不搬用其中的收益数字，而是从设计交付的角度聊聊：怎样把页面变化讲成一件可以观察、可以验证的事。以下均为假设场景和AI概念界面，不是兰亭妙微客户成果。

昨天已经改好的品牌名称，今天生成的内容又回到旧版本；一个项目的配色，被带进另一个完全不同的页面。遇到这些情况时，继续加长提示词未必最有效。Tanner Kohler 对AI重度用户的观察提到，资料的更新、查找与使用范围同样影响结果。借此，兰亭妙微分享一套面向设计协作的资料整理思路。下面的工作区与审核界面是概念示意，具体做法需要结合团队工具和项目约定调整。

一份研究材料写得流畅，人物背景也很完整，就能帮助我们理解真实用户吗？Rachel Banawa 分享了一次比较：在特定的开放问题上，AI模拟受访者与真人的主要结论相近，但回答的差异更小。它提醒用户体验设计公司，判断研究价值时，还要留意那些不常见却可能影响设计的情况。以下只简述这一观察，并结合假设的产品任务，分享我们对研究准备与证据使用的思考；不把单次比较推广成所有AI工具的结论。

从打开筛选器到填写条件，再到对比结果，许多数字产品要求用户先学会界面，才能说清自己想做什么。Carrie Webster 的文章用几个产品画面讨论了另一种方向：让用户先表达目标，再由系统帮助组织结果。这给交互设计公司和产品团队提出了很实际的问题：省掉操作以后，用户还能否理解结果、调整选择并控制接下来发生的事？本篇保留少量原文案例画面，其余围绕这一问题展开独立的设计观察。

一张在首页很舒展的项目卡片，放进侧栏后却挤成几行；电脑屏幕明明足够宽，打开详情面板以后，中间的内容反而不好读了。这类问题值得在高端网站设计阶段就考虑。Victor Ayomipo 在近期文章中区分了面向视口与面向容器的适配思路。借这个话题，兰亭妙微想分享一些组件排版的观察：设计稿除了画出几个屏幕尺寸，还应交代组件获得不同空间时，内容如何重新组织。以下界面均为帮助说明的概念示意。

兰亭妙微ui设计公司分享：在 UI 交互落地过程中，点击跳转、控件响应经常出现各类兼容性问题，这些问题大多具备共性规律。本文整理一套简洁可落地的点击热区设计规范，打通设计到开发的协作流程，下面完整拆解思考逻辑与实操方案。

一、现存热区常见问题

从实际项目还原复盘来看，热区故障主要分为三类典型问题：

1. 热区尺寸过小 可点击范围小于手指操作的舒适区域，极易造成点击失效、误触，直接损伤用户体验与业务转化。实际反馈中就出现过用户反馈按钮十次点击仅两三次生效的真实案例。

   

2. 同一入口被拆分为多段热区 同一个交互入口被切割成多个独立热区，模块中间产生无响应的失效空白地带。

   

3. 多端热区标准不一致 不同研发同学对可点击范围理解存在偏差，造成同个组件在 App、小程序、H5 表现不一样，例如 App 内图片可点击跳转，小程序中同位置点击却无反馈，反复产生线上 bug 与重复沟通成本。

   

二、热区设计三大核心原则

结合研发侧的落地诉求，同时参考大量竞品实践，热区规范不能复杂晦涩，要兼顾用户体验、落地成本与复用能力，确立三大原则：化繁为简、简单复用、标准统一

• 化繁为简：梳理混乱割裂的点击逻辑，简化热区规则；
• 简单复用：规则定义轻量化，一套规则适配绝大多数业务场景；
• 标准统一：iOS、Android、H5、小程序遵循同一套热区判定标准。

三、落地实现方法

3.1 模块化拆分法

按照页面层级拆解热区范围，三步完成判定：

1. 将整个页面拆解成若干主业务模块；
2. 把主模块继续切分为多个子功能模块；
3. 基于子模块，匹配对应热区规范定义点击范围。

按照统一属性、操作密度完成功能模块划分；再依据内容一致性、操作密度划定最终热区边界。

3.2 模块化安全边距

用视觉上 “物理不对齐”，实现感知上的视觉对齐。 针对评论区等场景，引入IconButton组件，按 Section 分区配置安全边距，规避边距设置混乱的问题，贴合化繁为简、标准统一的原则。

3.3 依托组件库实现复用

如果页面 80% 内容来自通用组件库，直接在组件内部内置可开关的热区配置，是最高效的方案。 不用每个页面重复标注热区，组件自带热区能力，极大减少设计与开发的反复对齐。

3.4 布局会限制热区上限

做设计时需要横向、纵向布局综合考量，Feed 流点赞、评论区交互按钮，布局排布直接决定热区能否最大化，设计阶段就要预判点击范围。

四、五大业务场景热区规范

从页面级模块到原子组件，归纳 5 类高频场景，下划线标记的无交互组件，无需配置热区。

场景一：整体模块作为单一热区 → 整个模块全部可点击

适用：帖子列表、订单条目等整行点击跳转的业务卡片。

整个卡片模块范围内，全部归属同一个点击响应区域。

场景二：单行 / 单列作为独立热区 → 整行整列可触发点击

适用：表单类全部选择器、输入控件，表单项点击整行即可激活交互。

场景三：同一行分布多个独立功能 → 热区均分处理

适用：导航栏、标签栏、底部 Tab 栏等 Bar 类组件； 同行多个按钮，在容器内平均分配各自的点击热区，避免热区互相侵占、出现空白死区。

场景四：独立元素热区（独立图标、独立文本、图标 + 文本组合）

适用：全部具备点击能力的原子组件，给出最小与推荐热区尺寸：

1. 纯图标 Icon：推荐热区40×40dp；最小不可低于28×28dp；
2. 纯可点击文本：推荐热区40×(40+)dp；最小不可低于24×(24+)dp；
3. Icon + 文本组合：推荐热区40×(40+)dp；最小不可低于24×(24+)dp；

重点提醒：图标与文案代表同一个交互行为时，二者合并为同一个完整热区。

场景五：一个主模块包含多个独立热区 → 拆分模块，明确标注

卡片内同时存在多种操作，例如商品卡片：卡片跳转、复选勾选、数量加减，同一块容器内存在多套交互。 这类场景业务多样性高，组件无法全部覆盖，设计稿必须手动标注每个子模块的热区边界。

写在最后

以上覆盖产品绝大多数交互场景，通过 5 类场景 + 3 项设计原则，能够减少设计反复标注、开发反复改 bug 的内耗，同时提升用户点击操作的手感与反馈。 设计深浅之间，在混沌与清醒之中，始终保有对设计的热忱。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。