北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套车辆安全数据分析仪表盘的 UI 设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
────────────────────────────────────────
手机端 iPhone Mockup 中的 AI 智能洞察弹窗卡片，白色卡片浮层覆盖在主界面之上。
手机端的这张 Smart AI Insight Card，展示了 B 端弹窗设计的一个重要原则：层级的建立靠光影，不靠线条。
• 主界面采用浅灰背景（约 #F5F6FA），弹窗卡片是纯白浮层 + 微投影（Y-offset 4px, blur 8px），层次关系干净利落，无需额外边框来界定卡片范围
• 卡片内部包含车辆碰撞示意图、型号信息（Ford Model 2017）、事件类型标签、CTA 链接共四类信息层，通过纵向网格对齐排布，视觉密度控制在舒适区间
• 左上角的蓝色警示标签（高饱和蓝，类似 #0047FF）是整个卡片唯一的色彩重心——它同时承担了"信息类型标识"和"视觉激活点"两个职能，让用户 0.3 秒内锁定核心信息
设计启示：弹窗卡片中，单一高饱和色点 + 大量灰白留白 = 最高效的注意力引导策略。不要用多个颜色"争抢"用户视线——在 B 端场景下，克制即高级。
────────────────────────────────────────
iPad 宽屏 Mockup 展示的 Advanced Visual Data Graph 界面，左侧浅灰数据区 + 右侧高饱和蓝详情面板形成强烈对比。
全系界面仅使用蓝 + 灰白两个色系，却呈现出强烈的科技感和专业感。这种配色策略的背后是一套严格的色彩分工：
|
层级 |
颜色 |
用途 |
|
主内容区 |
#F5F6FA / 浅灰底 |
降低视觉疲劳，承载长期查阅的大量数据 |
|
强调面板 |
高饱和蓝 #0028FF |
聚焦关键信息，建立信息的视觉优先级 |
|
交互元素 |
蓝色渐变 |
按钮、选中态、CTA 链接 |
|
数据图表 |
蓝白渐变 + 灰色辅助线 |
保证数据可读性为第一优先级 |
其中右侧蓝色详情面板的处理尤为出色：纯蓝底色上使用白色线稿风格的车辆技术插画，融合了"工程图纸"的美学质感与"数字大屏"的现代感。这种「工程蓝图 × 数字大屏」的混搭风格，是近两年 B 端设计中逐渐成熟的视觉语言，特别适合汽车、工业、安防等领域的产品界面。
iPad Mockup 的展示意义：宽屏设备框让仪表盘的宽屏布局优势一目了然——选对展示载体，本身就是最好的设计说明。
────────────────────────────────────────
Collision Analytics 完整看板，在笔记本设备 Mockup 中的实际效果展示，包含主数据区 + 底部卡片列表 + 右侧蓝色抽屉面板。
在完整的 Collision Analytics 看板中，信息被严格划分为三个优先级层级，每一层对应不同深度的阅读需求：
第一层：核心指标（0.5s 锁定）
• 「48.2%」以超大字号占据左上角视觉重心区
• 这是用户在任何场景下都能瞬间锁定的"那个数字"
• 时间维度切片（Year/Quarter/Week）以 Tab 形式置于指标上方，提供灵活切换的同时不侵占核心数字的空间
第二层：趋势与异常标注（5s 理解）
• 折线图上用蓝色竖线直接标出风险突增的时间节点
• 箭头线从竖线引出，连接到文字说明"Collision severity increased by 64.2%"
• 这种标注式数据可视化让用户不必在图表和说明文字之间来回跳转——上下文信息被直接嵌入图表内部
第三层：可对比的详情卡片（30s+ 深入）
• 底部三张卡片（Collision Reconstruction / Firestorm Viper / King Cobra）以等宽网格并列排布
• 每张卡片结构完全一致：左侧标签 + 中间标题 + 右侧关键百分比，支持快速横向对比
• 右侧蓝色抽屉面板作为"按需展开"的详情层，随时可召唤、不抢占主内容区域
核心方法论：B 端仪表盘的信息架构不是"把数据放上去"，而是精心设计一条「用户先看什么 → 再看什么 → 如何深入」的视线引导路径。
────────────────────────────────────────
手机端两张卡片并排展示，左侧为蓝色聚焦卡片（Collision Reconstruction），右侧为白色常规卡片，两张卡片形成对比。
移动端的 B 端设计面临的核心挑战是：在极有限的屏幕空间内，把复杂数据讲清楚。这组移动端卡片展示了三个可复用的设计原则：
原则一：一卡一事 每张卡片承载一个分析命题，不做多任务混合。蓝色卡片 = 需要用户关注的条目，白色卡片 = 常规信息条目。颜色在此承担了优先级语义，而非装饰功能。
原则二：图文合一 车辆技术插画与百分比数据（如 35% severity）在同一卡片内左右排布。插图不是装饰——它用视觉化的方式解释了"碰撞严重程度"这个抽象概念，大幅降低了用户的理解成本。右侧的折线小图同时提供时间维度的趋势感知。
原则三：时间轴极简化 折线图上方的时间维度切换（Year/Quarter/Week/Month/Day）只用一排文字 Tab 完成，整个交互区域高度不超过 40px——零控件感，零视觉冗余，却承载了五个时间维度的切换入口。
────────────────────────────────────────
Focused Analytics 界面，左侧大量留白区域居中展示 +64.2% 大数字，右侧为折线趋势图 + 蓝色聚焦行动卡片。
最后一张 Focused Analytics 画面，是全套设计中最值得细品的一个单页。+64.2% 的增长数据被单独放在整个左半屏，周围是大量留白。这种处理方式背后有一条被反复验证的设计法则：
数字的"说服力" = 字号 × 留白面积
具体执行层面：
• 巨大的无衬线字体 + 极简居中排版，让数字本身成为页面唯一的视觉锤，用户不需要阅读任何辅助文字，就能"感受"到这个数字的分量
• 右侧折线图从 0 开始缓慢爬升、斜率逐渐增大，用图形曲线的"加速感"还原了"问题在恶化"的紧迫性——这是叙事型数据可视化的经典手法，图形本身在讲一个"从平稳到恶化"的故事
• 左灰右蓝的分屏策略将界面分为"客观数据区"和"行动聚焦区"，完整闭环了「信息获取 → 风险感知 → 行动指引」的用户旅程
• 蓝色聚焦卡片内部包含标签、标题、技术插画、百分比数值、进度条、说明文字共 6 个信息层级，全部通过字号、字重、间距做出清晰区分，密而不乱
────────────────────────────────────────
这套作品给我们提供了以下可直接应用到实际项目中的设计准则：
1. 配色做减法：2 个主色 + 灰白体系，足够构建完整的科技感 UI。颜色越多，信息噪音越大
2. 信息分三层：核心数字 → 趋势标注 → 对比详情，为用户建立有节奏的阅读路径
3. 弹窗靠光影：偏移投影 + 留白比边框分割更优雅，更符合现代 UI 的视觉趋势
4. 颜色即信息：界面上唯一的高饱和色，必须指向用户当前最该关注的区域
5. 移动端一卡一事：小屏不做多任务混合，一张卡片讲清一个命题，宁可多滑一屏
6. 数字要能被"感受"：超大字号 + 充足留白 + 叙事型曲线，比干巴巴的百分比数字更有冲击力
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蚂蚁阿福 APP 以 AI 医生朋友的身份重新定义健康管理，从对话式医疗入口到智能体驱动的全流程服务，这款应用正在颠覆传统医疗产品的交互逻辑。它不仅通过人格化设计降低医疗决策压力，更借助阿里生态实现从咨询到就诊的完整闭环。本文将深度解析其创新设计如何重构用户与医疗服务的连接方式。
今天向大家分享一款最近刚推出的蚂蚁旗下的 AI 健康助手——蚂蚁阿福 APP ，希望你能从这篇产品体验分析中有所收获。如果你觉得我们的文章有价值，欢迎分享给你的朋友！
蚂蚁阿福是蚂蚁集团推出的 AI 健康管理应用，由原 AI 健康工具 AQ 升级而来。产品愿景是成为用户的 AI 医生朋友，提供健康咨询、图片解读（支持报告、病例、处方、药盒）、个人和家庭健康档案管理，以及预约挂号、云陪诊等医疗健康服务。
当你打开蚂蚁阿福 APP的第一刻，你会发现它像 ChatGPT、DeepSeek 一样，只有一个对话框。这正是 AI-UX 的典型表现形式——把「对话」作为核心入口，弱化传统的多层级导航，让用户用一句话就能触达预约、解读报告、症状咨询等多种服务。交互形式就像与医生聊天，而不是过去在 App 里找入口、找功能。
对话式AI交互和传统的菜单栏相比，用户的心智需要改变什么？
最近我对用“用户心智”这个知识点有了全新的理解。这得益于刚好在尝试全新交互的设计，而体验到阿福时，我尤其感同身受，因此重新思考了这个问题。
从交互方式上看，传统菜单栏要求用户预先了解功能位置和层级结构，通过”点击—浏览—选择”的路径完成任务。而对话式 AI 交互让用户从”寻找功能”转向”表达需求”，用自然语言直接描述问题，对话即交互、对话即操作。
这种转变对应着心智模型的两个层面：
另外，你会发现阿福的头部有点拥挤（包含用户中心、智能体、任务中心等入口）。这是因为过去在菜单栏或金刚区的高频功能都被上移了。也许这就是未来的设计趋势——”菜单栏”从下往上，把最宝贵的黄金位置留给 AI。
心智模型（Mental Model）
心智模型是用户基于过去经验形成的认知框架，决定了他们如何理解产品的运作方式。它影响用户如何理解界面、预测交互结果并做出操作决策。当产品的实际运作方式与用户的心智模型一致时，体验会更流畅；反之则会增加学习成本和认知负担。
与传统 AI 对话式交互不同，阿福将医疗场景中的高频应用设计成独立智能体。用户可以在底部对话框上方和头部直接触发，比如接下来介绍的 AI 诊室。使用其他 AI 工具问诊时，体验往往缺乏仪式感。但在阿福中，点击 AI 问诊后，系统会明确提示”你已进入 AI 诊室问诊中”。接下来的流程会聚焦于你的症状，进行梳理分析，最终推荐适合的医院和医生。
另外，阿福受益于阿里健康和支付宝的强大生态，可以在 APP 内完成预约和问诊的闭环。用户只需一个 APP，就能完成从诊前咨询到在线就诊的全流程。
如果你觉得 ChatGPT、DeepSeek 这类对话式 AI 产品的交互过于简单，融入智能体设计的阿福会给你更多惊喜。智能体像一个封装了特定功能的应用，具有明确的目标导向，用 AI 服务于这个目标，而不是让用户在自然语言中”摸索路径”。换句话说，智能体就像传统的二级功能模块——用户触发后，系统会在当前场景中围绕这个需求进行交互。
正是这个流程的设计，让我发现了它的独特之处。无论是之前体验过的阿里旗下安诊儿和讯飞晓医，还是我 7 月份构思的北京协和互联网医院 AI 版本方案，都未曾想过可以通过智能体来丰富交互设计形式。
AI 智能体是什么？
AI 智能体（AI Agent）是一种能够自主感知环境、做出决策并执行任务的 AI 系统。与传统的对话式 AI 不同，智能体具有明确的目标导向，能够调用多种工具、API 和服务来完成复杂任务。
AI 找医生这个智能体同样带给我很大的惊喜和启发。它成功地将传统医疗 APP 中用户已经熟悉的交互模式融入产品，同时巧妙地结合了 AI 智能对话方式，形成了一种既保留用户认知习惯又具有创新性的混合交互体验。
体验完这个智能体的交互流程后，我意识到过去对对话式 AI 产品的交互和 UI 理解过于浅显。它们确实主要依靠对话交互，但随着智能体的发展，每个智能体都代表一个独立的流程、内容甚至风格。
以 AI 找医生为例：它融合了传统的 TAB 框架，让用户按科室或疾病查找；当 AI 推荐的数据不满意时，还提供”查看全部”按钮，引导用户进入二级页面进行个性化筛选。这个设计让我发现，AI 产品远比想象中丰富——它不只是简单的对话框和侧边栏。
写到这里，我突然想起另一款对话式医疗 APP——讯飞晓医。当我输入”预约挂号”时，系统只能提示我跳转至其他医疗网站完成挂号。相比之下，阿里的生态能力令人赞叹：阿福直接连接好大夫等平台，用户可以在 App 内完成从 AI 推荐、查看医生到付费问诊的全流程，无需跳出即可实现就诊闭环。
早在 2023 年参与钉钉智能体测评时，我就有过类似构思：如果将专家过往的就诊经验和知识喂养给 AI 并进行专门训练，这个智能体能否解决 80% 的诊前基础咨询？当我体验这个智能体并查询相关资料后，发现阿福的医生 AI 分身确实做得非常出色。
该模型（官方名称叫蚂蚁·安诊儿医疗大模型 AntAngelMed）基于海量医学文献和去隐私化的真实病例数据构建，具备”深度思考”能力。它可对复杂、信息不全的临床场景进行多轮推理、逻辑验证与自我纠错，助力精准诊疗。
在产品层面，AI 医生整合了语音对话、挂号、补号申请等多种功能和场景。患者可以像与真人交流一样咨询，医生则能 24 小时服务多位患者。
医生 AI 智能体这一创新模式对多个行业领域具有重要的参考价值。它的核心在于：将一位拥有数十年临床经验的医疗专家所积累的专业知识、诊疗经验和实践智慧进行系统化的数据处理和标准化转换，再借助人工智能技术，使这些专业知识能够同时为成千上万的用户提供高质量的服务。
我甚至有一个大胆的设想：在未来，即便一个专家寿终正寝，只要他能把自己的知识库和经验传送给 AI，这个专家是不是就并未真正离去，而是可以继续造福我们的子孙后代？
「健康小目标」是一个围绕具体健康意图（如改善睡眠）展开的目标型智能体。它通过 AI 引导式问答拆解目标，自动生成可执行的日常任务，并将”制定计划—每日打卡—正向反馈”完整串联，形成持续的行为干预闭环。
体验这个功能时，我特意下载了几款健身打卡 APP，对比阿福的打卡流程与专业健身应用的差异。整体体验下来，阿福的用户体验更流畅。由于首页更聚焦、更简洁，我可以一目了然地看到所有打卡任务。
这个智能体给了我两点启发。
第一，表单类操作（如添加就诊人、填写问卷等）可以直接在对话框中完成，无需跳转到新页面。实际体验下来，这种设计不仅高效，还能保持用户的使用连贯性。
第二，健康小目标就像常见的用户签到打卡功能，通过持续打卡增强用户活跃度。但我认为最大的亮点在于：你可以在对话框中输入想实现的目标，系统就会为你自动规划。这正是自我决定理论（Self-Determination Theory）的绝佳体现，当用户具备自主性和胜任感时，他们会感觉是在主动使用产品，而非被产品操控。
这还是我第一次如此细致地了解我的皮肤，因为阿福的 AI拍皮肤智能体更像一个一体化的皮肤管理工具。不仅可以拍患处、看舌苔，还可以测肤质、测毛发。很幸运，工作了这么多年，我还没有秃头的迹象，AI 给我的测评是要注意休息、少熬夜，目前毛发良好。
我不得不感叹当今 AI 技术的飞速发展。当我完整体验了看舌苔、测肤质和测毛发这些功能时，虽然或许是我之前未曾留意，但还是给了我很大的震撼。AI 仅通过不同视角和角度的拍照，就能在短时间内快速评估出用户皮肤的健康状况——这本身就是科技的巨大进步。我没有去找 ChatGPT 探讨背后的技术原理，只想从一个普通用户的角度，表达我体验这些技术时的真实感受。
「药管家」围绕患者真实的用药场景，将药品识别、用药管理、用药指导、价格查询与购买行为整合为连续流程。用户从”我手上有什么药/我需要吃什么药”出发，可以自然完成从查询、添加到用药提醒，乃至购买的全链路操作。AI 在其中承担持续辅助与决策支持角色。
这个环节让我深刻感受到一个完整生态的价值——你在阿福就能实时查询药品价格、多维度对比，以及直接通过外卖配送或邮寄下单。
C 端产品的页面空间寸土寸金。当我添加了用药提醒后，我突然意识到阿福的首页其实是一个任务中心，而非传统的科普资讯推荐区。特别是与安诊儿 APP 相比，阿福的首页虽然看起来千人千面,但它能够感知、读取并提醒用户——无论是健康打卡、健康数据还是用药提醒,这个卡片区的场景拓展与应用都关联着整个产品的功能体系。
体验到这里时，恰好我刚带小孩去医院做了个小检查。拿到抽血报告后，我尝试将报告拍给阿福，亲身体验了 AI 报告功能。与医生相比，阿福的 AI 报告能帮助患者更系统、更完整地了解细节。医生工作繁忙，虽然经验丰富、能快速判断病情，但往往没有足够时间为患者详细解释。
AI 报告不仅为患者提供多轮对话追问，最后还会自然衔接 AI 诊室、医生解读与医院推荐，形成从”看不懂报告”到”下一步怎么做”的完整闭环。
我们也许真的要认真思考如何利用 AI 来帮助我们更好地生活了，比如 AI 报告这样的功能，它至少可以解决大部分患者对于专业报告的疑惑，了解 50%-70% 的基础情况。过去的互联网医院可以解决全国城市医疗资源不对等的痛点，而随着 AI 的加持，我觉得这种痛点会逐渐降低，就像 我在 AI 医生分身那个环节提到的一样，如果AI 可以把一个医生过去几十年的知识和就诊经验复刻，那么无论我们在哪个城市，都能同时享受到这个医生带给社会的价值。
总结与思考
第一，传统菜单栏会逐渐消失吗？
正如我在第一部分讨论的，阿福的对话式入口给了我很多启发。看着阿福拥挤的头部，我真切地感觉到——传统菜单栏可能会在越来越多的产品场景中彻底消失。甚至连搜索栏这样的功能，都会被 AI 输入框替代。对话即交互，对话即搜索，对话即触发，让我们拭目以待。
第二，智能体驱动 AI 产品设计创新
我每天都在使用 ChatGPT，长久以来形成了一种刻板印象：对话式 AI 产品的设计平淡无聊，传统的交互和界面设计似乎不再重要，取而代之的是功能逻辑和提示词设计。但阿福的设计给了我新的启发，打破了我对对话式 AI 产品的固有认知——未来的 AI 产品可以结合智能体做出更多创新，交互界面设计依然重要。
第三，对话式 AI 产品的应用场景将越来越广
我想到了许多应用场景，特别是与医疗高度相似的政务领域，比如税务、教育等。如果这些传统行业引入对话式 AI 交互，将极大提升工作效率。试想一下，当你只需在税务 APP 中输入几个字或说一段语音就能开始办理业务，能为前台工作人员节省多少时间？在这里给自己定个小目标：2026 年设计一款政企对话式 AI 产品，探索这个领域的设计趋势。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
飞书的聊天窗口设计正重新定义企业协作的边界。通过标签页集成、多模态通讯、结构化搜索等创新功能，它将传统IM工具升级为沉浸式工作台。本文深度拆解了这款产品如何将碎片化沟通转化为高效生产力，其设计哲学值得每一位关注协作效率的产品人思考。
今天我想向大家分享我近期对飞书聊天窗口设计的体验洞察 ，希望你能从这篇产品体验分析中有所收获。如果你觉得我们的文章有价值，欢迎分享给你的朋友！
飞书是字节跳动旗下的新一代一体化协作平台，诞生于 2016 年。它将即时通讯、日历、文档、云盘、OKR、审批等功能深度整合，试图通过”All-in-One”的产品哲学重新定义企业办公的协作方式。相比传统 IM 工具，飞书更像是一个以沟通为中心的工作操作系统，致力于消除信息孤岛，让团队协作变得更加高效与流畅。
飞书的聊天窗口设计彻底打破了”即时通讯工具”的传统边界。通过在会话界面顶端嵌入可自定义的标签页（Tabs），飞书将对话框重构为一个微型协作工作台。用户无需跳转页面，即可在聊天上下文中快速切换文档、云表格、网页链接或关键任务，实现从”信息流”到”任务流”的无缝融合。
设计亮点
体验思考
从接触飞书到此次深度拆解，中间大概有 3 年多时间。我算不上飞书的重度用户，但过去 1 年多，飞书已成为我负责的在线教育项目中的主要沟通工具。如果不是这次深度体验，我从未发现聊天窗口竟然支持 tab 切换查找内容，甚至可以自定义。
当我开始深度体验时，从上至下的第一个功能就给了我惊喜——它突破了我对聊天窗口的固有认知。传统的 IM 软件将沟通（聊天）与结果（文档/任务）剥离，导致用户频繁在应用间跳转。而飞书通过”标签页”将生产力资产直接”拎”到会话层。这种设计策略证明了在 B 端产品中，沟通往往基于具体目标，这就是协作的本质——减少操作跨度就是提升生产力。
体验到这里，我甚至特意打开企业微信进行对比。毕竟在国内，这两个工具是企业办公的二选一。相比飞书,企业微信的聊天窗口采用传统模式，和微信的聊天模式相差无几。
另外，这一功能设计充分体现了渐进式披露和自我决定理论这两个设计策略——不强迫普通用户接受复杂的工作台逻辑，而是将深度协作工具隐藏在轻量级的标签切换中，并充分给予用户自主性和掌控感。
知识卡片：
渐进披露（Progressive Disclosure）：一种信息呈现策略，只在用户需要时才展示更复杂或高级的功能，而非一次性呈现所有信息。这种方法防止用户被过多信息淹没，减轻认知负荷，让用户能逐步学习和适应界面。
自我决定理论（SDT）：人有三个基本心理需求——自主性（想自己做决定）、胜任感（觉得自己做得到）和关系感（感到被认可和接纳）。如果产品设计能满足这些需求,用户就会更愿意使用。
飞书在聊天窗口顶端集成了覆盖全场景的通讯矩阵，将语音通话、视频会议以及运营商电话拨打深度整合在统一的交互入口下。除了文字，还支持语音、视频和电话拨打。更让人爱不释手的是，飞书的语音/视频不仅可以自由切换，还可以随时邀请其他伙伴发起多人会议，并提供屏幕共享、录制、倒计时、直播等工具——沟通体验真的非比寻常。
设计亮点
体验思考
在深度使用飞书协作的这一年里（此前三年我都是独立工作），我才真正理解为什么会诞生飞书、企业微信这类协作软件。例如，飞书的语音通话可以直接转化为会议，完美解决了传统聊天软件如微信的痛点：第三个人加入时必须挂断并重建群聊；分享屏幕时不得不切换到腾讯会议。这种”沟通即协作”的逻辑大幅提升了工作效率，无需频繁切换沟通方式。
相比传统聊天软件，这种聊天既协作、语音既会议的模式是从”沟通媒介”到”协作场景”的跃迁。它不仅深度集成了聊天和协作场景，更通过屏幕共享、倒计时和录制功能，将稍纵即逝的语音信息转化为可搜索、可引用的数字资产。
飞书聊天窗口的搜索功能不仅是一个关键词入口，更是一个强大的结构化过滤器。它通过将混乱的聊天记录原子化地拆解为消息、云文档、文件、图片/视频、链接等五大维度，配合“来自用户”与“时间范围”的多重嵌套过滤，让用户在海量碎片化信息中实现秒级定位。这种设计将搜索从一种“试错行为”转变为了一种高度确定的“资产调取”过程。
设计亮点
体验思考
在飞书的聊天窗口中，搜索并不是一个独立、泛化的全局能力，而是深度绑定在“会话”这一上下文之中。我觉得它的更像是一种从“文本检索”向“资产管理”的心智迁移。比如传统的 IM 搜索往往只针对文本，而飞书把对话中产生的每一个文档、每一条链接都定位成数字资产，于是我们可以通过不同的类型、时间、以及发送人去进行筛选。
回到产品设计层面，我觉得飞书的设计，解决了过往我们在传统 IM 搜索中的三个痛点：
如果要推荐此次产品分析中最惊喜的功能，实时翻译无疑是我的首选。飞书的实时翻译功能彻底抹平了国际化协作中的语言鸿沟。通过在聊天设置中深度集成翻译助手，飞书不仅实现了接收消息的”自动翻译”，更创新性地推出了”边写边译”模式。这一设计将翻译从”被动查阅”升维为”主动表达”的即时增强，让跨国团队无需第三方工具，就能在 IM 窗口内完成流畅且地道的原生对话。
设计亮点
体验思考
体验这个功能时，我不禁思考：飞书的实时翻译能否替代 HelloTalk 这类专业语言学习软件，让我在真实工作场景中自然地学习外语？它不仅支持自动翻译和边写边译，更重要的是能消除语言障碍，提升工作效率。而且，这还是一个完全免费的功能。
发现这个功能后，假如未来我能服务国际客户，我也觉得不必胆怯。它不仅打破了”表达焦虑”，更能实际解决跨语言协作沟通的难题。
你是否遇到过这样的情况：用传统 IM 软件发送长文字时，需要添加格式，比如加粗、增加项目序号？事实上，我一直忽略了飞书的这个功能。虽然我坚持聊天应言简意赅，但在工作场景中，确实常需要编辑长段落文字。
飞书聊天窗口通过一键转化功能，将传统的单行文本输入框升维为专业的富文本编辑器。这一创新设计打破了即时通讯”碎片化表达”的局限，让用户无需跳转文档页面，就能在会话流中直接产出结构清晰、排版精美的深度内容，实现”沟通”与”创作”的无缝对接。
设计亮点
体验思考
当我拆解得越细致，我发现我对飞书的印象就在一步步的改变。聊天对话框一键转化为富文本编辑器的设计，不仅规避了”长文表达必须跳转文档”的痛点，更解决了碎片化聊天导致信息混乱的问题。富文本编辑框本质上是一个”强制信息结构化”的引导工具——通过引导用户使用项目序号、加粗重点，设计师无形中帮助团队提升了信息分发效率，确保核心指令不被社交闲聊淹没。
飞书聊天窗口底部的工具栏是一个集成了多元化办公能力的原子化矩阵。它不仅涵盖了基础的社交元素（如表情、图片、语音），更深度嵌入了生产力组件（如任务、云文档、红包、定位等）。这一设计确保了用户在沟通的任一环节，都能即时调取对应的工具来推进工作，真正实现了“所聊即所得”的协作闭环。
设计亮点
体验思考
请点击“
”按钮，然后仔细看看飞书底部工具栏藏着多少功能。如果说传统 IM 软件的工具栏是社交驱动的，而飞书则是任务驱动的。也许在 B 端的工作场景中，聊天框不应仅仅是字符的传输带，而应成为各业务模块（如 OA、CRM、任务管理）的统一分发器。
不过虽然工具栏功能繁多，但飞书通过“常用置前、深度收纳”的排版逻辑，避免了信息过载。这种设计确保了用户在基础聊天时处于“社交心流”中，而在需要专业协作时，又能通过二级菜单快速唤起“协作心流”。
我强烈推荐大家一定要注意飞书聊天窗口底部菜单栏的日程和任务这两个功能。因为你可以在和同事的聊天中随时发起会议和任务分配。你甚至不需退出聊天窗口去会议和任务面板，就能把工作的事儿在聊天窗口完成。
飞书通过在 IM 界面深度嵌入这样的快捷功能入口，消除了传统办公软件中切换应用、同步上下文的繁琐过程，让用户在沟通的任一瞬间都能一键将“想法”转化为“行动”，构建了一个从实时对话到确定性执行的闭环。
设计亮点
体验思考
我觉得飞书的聊天窗口实在太能理解用户的需求了，也许这正是飞书是字节跳动内部延伸出来的产品，它的诞生就是为了帮助字节跳动提升效率，所以它能深刻洞察到如何在几秒钟内防止办公效率的流失，从而将会议与任务视为 IM 的内生能力，而不是外部插件。
体验到这里，我真正改变了自己对飞书的产品认知，它并不是社交工具，而是数字办公室。即便只是一个聊天窗口，飞书也构建了全能的任务分发器。这种系统功能之间连接的颗粒度，让人叹为观止。
飞书在聊天窗口外围构建了一套极细颗粒度的消息过滤体系。通过将混合在一起的消息流原子化地拆解为未读、标记、单聊、群组、云文档、任务等多个 Tab 标签，飞书将“阅读消息”这一行为从无序的翻找升维为精准的任务处理。这种设计极大地提升了信息检索与处理效率，确保了核心任务在海量沟通中始终处于视觉中心。
设计亮点
体验思考
当我退出聊天窗口，准备结束这次产品体验的时候，我又突然发现飞书的消息列表页也藏着不少细节。如果习惯了传统 IM 软件按时间顺序堆叠消息的模式，飞书则通过 Tab 标签来标注消息的状态，甚至点击左侧筛选，还可以查看标记、@我、标签、单聊、话题等等更细的分类。
这是一种“信息熵增”的减法交互技巧和策略。随着工作时间增长，群组与好友数量会不可控地增加（即熵增），Tab 标签本质上是一套“动态降噪系统”。它允许用户通过点击特定的 Tab（如“未读”），瞬间将复杂的界面简化为仅剩待办事项的极简模式，从而缓解用户的信息焦虑、提升专注力。
过去几年我一直在用飞书，但坦白说，在没有刻意拆解之前，我从未意识到一个聊天窗口里竟然藏着这么多“为效率而生”的设计细节，虽然它是使用频率最高、却也最容易被忽略的核心界面。
我们日常使用协作软件时，常常会沿用其他 IM 的习惯，把它当作一个“像聊天一样聊天”的地方：发消息、回消息、刷对话就结束了。直到我开始更细致地体验与对比，才发现飞书把聊天窗口做成了更接近“协作工作台”的中枢入口。沟通不再只是信息往返，而是能在对话上下文里直接完成。
无论是结构化搜索在海量消息中精准定位关键资产，还是一键发起会议、随时分配任务让“讨论”立刻落到“行动”，又或者是实时翻译让跨语言协作更顺滑，这些能力都尽可能被收拢到同一个聊天窗口里完成。也因此我相信，你在看完这次拆解后，会对飞书的使用场景与产品认知产生新的变化：原来一个聊天窗口不仅能承载沟通，还能承载协作与生产力的闭环。
我认为，飞书把“以场景为中心”的策略发挥到了极致：和 C 端产品不同，它真正聚焦于 B 端协作沟通场景，将用户最高频、最真实的工作场景——沟通——作为承载协作的主舞台。
于是，文档、任务、会议、搜索、翻译等能力都能在同一上下文中被自然调用，让用户沿着“正在讨论什么”这条主线，持续推进到“接下来要做什么”。这种将信息流与任务流紧密耦合的设计，显著降低了切换成本与认知负担，也让团队的协作轨迹更容易沉淀、回溯与复用。
正因如此，这个聊天窗口几乎浓缩了飞书的设计精华：既承载其“沟通即协作”的价值主张，也映射出对真实工作场景与用户需求的深刻洞察。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
一般用户在登录后台管理系统后，后台首页就成为了用户与产品交互的第一个页面，这某种程度上也凸显了这一页面的重要性。那么，后台管理系统的首页设计可以遵循哪些策略？本文作者结合实战项目发表了他的想法，一起来看看吧。
很久没有更新文章了，一方面文章选题困难，公众号的阅读量真是有点惨不忍睹，写作的动力有所下降。另一方面工作确实比较忙，时间精力有限，最近参加了多个工作项目一直在加班。
今天总结下项目过程中，关于后台管理系统首页设计引发的一些思考。
主要的内容包括：
后台首页是用户登录后，与产品交互的第一个页面，信息内容非常重要，作用也非常明显。一方面可以帮助用户宏观了解系统的整体运行状态，洞察业务问题。另一方面可以帮助用户快速处理业务问题，不需要到专门的功能页面操作，缩短用户的操作路径。
后台首页需要依托整个产品的功能体系，根据用户角色的职能、权限、业务范围，提取关键的用户关心的业务功能点搭建页面内容。所以一般是在业务功能完成之后再进行首页设计。这就要求产品经理能够从全局视角理解用户和场景，才能做出有效的设计方案。
另外首页不属于具体的业务领域，所以一般不会安排固定的产品经理，而是由产品经理兼任。如果产品设计没有整体规划，首页就容易被忽略，成为「三不管」地带。
根据以往的设计经验，我总结了以下四点：
首页设计要求产品经理对用户角色的分类、业务职能有比较深入的了解，否则产品设计就可能变成内容堆砌。
通常后台系统需要面向管理层和执行层两类用户，他们对于信息需求存在比较大的差异。管理层更关注宏观层面的统计信息，方便了解业务动态，从而制定工作决策等，所以各类可视化图表就成为首页重要的内容组成。
对于执行层用户，主要是完成具体的工作任务，所以更加关注明细数据。除此之外，适当地增加一些统计数据，可以更全面了解系统状态，也便于对上汇报，减少人工统计的工作量。
B 端产品了解用户和场景并不容易，如果只靠“猜测”做设计，就会发现首页设计有很多种可能，怎么做似乎都对，怎么做似乎都不对。而且参与的人越多，想法也会越多。
所以在项目中，需要尽可能地收集用户场景信息加以分析完成设计，即使存在一部分“猜测”信息，也需要能够自圆其说，才能更好的推进产品设计落地。
对于小的业务系统，单独的一个页面就可以涵盖所有的业务信息，内容也会比较清晰简单。
对于比较大的业务系统，首页包含的消息会比较多，例如阿里云、腾讯云等产品，一个页面内容无法承载所有的信息。因此需要根据场景/主题拆分首页内容，便于用户有目标地快速查看信息。比如阿里云采用的是资源管理、安全管理、成本管理等主题去划分首页内容。
1）串联内容，缩短路径
某些场景下，首页要满足用户快速处理业务工作的需求，例如待办事项，审批操作等，通过明细列表的展示，结合抽屉等详情信息展示，用户可以在首页直接处理工作任务，无需进入到功能页面。
「常用功能」也是首页的常见组件，类似操作系统桌面的快捷方式一样。可以将一些二级甚至三级功能作为常用功能放在首页中，用户不需要通过菜单逐级点击，即可进入功能页面，对缩短用户操作路径也有很大帮助。
2）高频常用功能信息聚合
首页的价值在于帮助用户简单、高效的认知系统，是高频常用功能的信息聚合。因此需要尽量减少花哨、不实用、看似高大上的功能，或者改变展示形式，保证重要信息的优先展示。
有些 B 端产品的门槛比较高，为了降低认知成本，于是有人希望在首页中增加系统介绍、系统架构图的形式来展示产品的功能流程，在产品演示是可以更好的让用户理解产品功能。
这些本来应该是在 PPT 中展示的信息，却要放到首页中展示。看似酷炫的一张图，实际上在应用阶段对用户的工作没有任何帮助。因为用户根本不关心你的系统架构是什么，需要的是产品帮助他解决工作中的问题，带来的效率提升。
即使用户需要了解这些信息，也不是每天打开首页就要一眼看到，可以采用其他的呈现方式。比如用户引导，或者与业务信息关联，既可以呈现出业务流程，也可以展示业务信息，又或者首页增加入口、引导在帮助中心查看。
B 端产品业务功能是面向用户角色的，同一角色的用户具有相同的工作任务。但是首页则有所不同，同一类角色的不同用户，关注点也不完全相同。尤其是业务系统内容较多时，首页内容可定制就成为了满足不同用户信息需求的方式。
当然系统的定制化并不是让用户从零定制，而是在系统初始内容基础上，重新组织页面内容、调整页面布局等。否则定制化反而会带给用户更差的体验。
在项目设计中，就碰到了这个问题。有同事认为首页应该简单点，避免过多的信息量增加用户的学习成本。
当然这个问题需要根据产品定位具体分析。不过总的来说，我个人认为首页应该丰富一些。
首页是信息聚合页面，天然就会有较多的信息内容，用户需要通过信息传递了解系统的状态和变化，人为的过滤掉内容后会影响信息的全面性。
其次用户有信息选择权，通过一定时间的摸索，可以形成自己的信息查看轨迹，或者个性化定制首页内容过滤掉工作中冗余的信息。
而且B 端产品经过多年的发展，单从布局和表现形式上看，首页已经有比较成熟的设计模式了，大多数企业用户也形成了统一的认知和习惯。卡片风格是首页最常见的展现形式，卡片可以让页面分割更加清晰，方便信息读取，有助于弱化信息量带来的复杂感。即使不采用卡片分割， 可以通过间距、标题等引导用户视线，划分页面内容。
简单总结下：
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
vivo小游戏的改版揭示了轻量化产品的设计本质——从点击量到用户时长的指标跃迁。本文深度拆解其首页分发逻辑重构与去低幼化视觉升级，揭秘如何通过动态专题矩阵、情感化设计和品牌色系统，同时实现商业价值提升与品牌心智进化。
小游戏业务的核心特点是“轻量化启动，依赖时长变现”。
在产品形态方面，“点击即玩”是重要特征，其试错成本极低，用户可快速、反复尝试多款游戏，使用时长比点击更能代表深入程度。在营收方面，对于依赖广告变现的游戏，时长直接影响广告曝光次数；对于内购游戏，时长则意味着付费窗口期的延长。“停留”比“点击”更能创造商业价值。
依据以上两个原因，小游戏业务成功的关键指标并非传统的分发效率（点击量），而是用户游戏总时长。这是小游戏设计改版的第一个核心目标。
<图：业务目标>
除此之外，在存量竞争时代，设计不仅仅是“做得好用”，更需要“做得准确”——准确理解业务，准确洞察用户，准确传递品牌心智。
“小游戏”，在很多用户的印象中，往往是“休闲、轻松、可爱，甚至样式上带点低幼感”的存在，这造就了其固有的用户心智。
实际上，【vivo小游戏】希望服务的用户是丰富、全面的，所以矛盾便浮出水面——亟待扭转“低幼感知”，这就是小游戏设计改版的第二个主要目标。
在以上两个背景之下，本次改版目标如下：
目标一（来自业务目标）：提升游戏时长，让分发更精准，帮助用户“玩进去，愿意留下”。
目标二（来自用户心智）：去除低幼感知，重塑“年轻、放松、品质”的产品形象。
<图：本次设计改版的两个目标>
这不仅仅是一次界面优化，更是一次以设计驱动产品品牌升级的系统性设计。下文将从三个维度，分享我们的设计推导与落地过程。
重构首页分发逻辑，使其服务于“提升时长”的目标。对首页三大核心模块——“用户爱玩”、“平台推荐”、“随机游戏”——进行了数据洞察和体验重塑。
<图：首页改版的三个重要模块>
数据显示，“最近爱玩”模块贡献了极高的总游戏时长。这证明，用户主动沉淀的偏好列表，是游戏启动的最强驱动力。
新的洞察随之而来：绝大多数的用户，其“最近爱玩”的游戏只有1-2款。旧版首页将4款游戏“平铺”外显，反而稀释了用户的注意力，导致分发的目标不清晰。
针对这一现象，我们的A/B Test结论是：满足需求，比增加曝光更重要。新版设计强化了“用户爱玩”的模块心智，使其成为用户返回时的“第一眼”核心，让用户能最快回到那个“TA真正想玩的游戏”，而不是在多个似是而非的选择中犹豫，从而直接锁定并延长核心游戏时长。
<图：左图为老方案，右图为新方案>
“平台推荐”是发现新游戏的主阵地。我们放弃了“一招鲜”的模式，转而构建了一套专题矩阵，针对不同游戏和用户意图，设计差异化的推荐理由：小编推荐专题：从“系统”到“有温度的个体”建立了“安利官”角色，把真实的小编推向用户。用真人头像、亲切口吻和官方认证，打造“有温度、有信任感”的真人推荐。情感化与专业性的结合，极大地拉近了与用户的距离。
<图：小编推荐>
<图：小编推荐>
场景化专题：从“游戏是什么”到“我此刻需要什么”将游戏分发融入用户生活场景。例如，“早上好：提神醒脑”、“下午好：坚强摸鱼人”、“晚上好：放松一下”。通过时间、情绪、状态的匹配，让游戏推荐更具说服力和即时价值。
<图：场景化推荐>
高品质专题：从“文字说”到“视觉证明”针对精品或内购游戏，我们用更大尺寸的卡片、更具沉浸感的图文或视频预览，来直观呈现游戏的“品质感”，将“高质量”这一抽象概念具体化。
<图：左图为老方案，右图为新方案>
玩法专题：用IP强化“类别识别”在“男生爱玩”、“挂机轻松玩”等玩法标签下，将专题内最具代表性的头部游戏IP（如“太空行动”、“一波超人”）进行视觉放大，强化用户对专题游戏类型的“一眼识别”。
<图：玩法专题>
魅力信息前置：从“默默无名”到“热度可见”将“XX万人在玩”这类强吸引力信息，从传统的文字区剥离，设计为高识别度的半透明标签，与游戏Icon强绑定。通过调整色彩、字重，使其在不遮挡Icon主视觉的同时，成为辅助用户决策的“魅力因子”，有效提升了点击意愿。
我们注意到，有相当一部分用户是在首页“逛了好几屏”后仍未找到目标，此时我们猜想“随机一下”可能是他们留下的最后机会。
强化了其“提供一次惊喜、一种可能性”的心智，为探索型用户保留了一个“轻量级出口”，这背后是对用户分层和场景的细致体察。
<图：随机玩>
设计思考：分发设计的精髓在于“对症下药”。我们不再追求统一的曝光策略，而是将首页视为一个动态的、有层次的决策场。“用户爱玩”是确定性满足，“平台推荐”是引导性探索，“随机游戏”是可能性兜底。
设计的价值在于，为每一种用户路径，都铺就了最合适的体验轨道，最终合力指向“停留与探索”的核心目标。
“去低幼化”不仅是风格的转换，更是品牌心智的重塑。为此，我们建立了一套完整的研究与执行方法。
“低幼”是一个感性评价。为了找到解法，我们首先要将其“可视化”。
对比了市面上的儿童教育产品，并结合对自身旧版设计的审视，提炼出三个维度的“低幼”视觉特征：
这三点，共同构成了我们需要打破的旧有特征。
<图：关于低幼感知来源的研究>
有了要规避的视觉特征，同时，要确立新方向。结合产品特性和目标用户，我们定义了vivo秒玩小游戏应有的产品调性：
<图：从情绪板到色彩定义>
色彩体系重构
定义品牌色：我们摒弃了“大杂烩”式的色彩，定义了“活力黄”与“轻松绿”作为品牌主色，分别承载“生命力、有趣”与“放松、自然”的情绪。并严格设定了60%背景色、30%白色卡片、10%品牌色的色彩使用比例，建立清晰的视觉层次。
<图：品牌色>
分层处理原则：
<图：分层处理原则>
注入“情绪价值”：
<图：“海岛”微动效>
<图：随机玩>
传承品牌基因：我们没有割裂历史，而是巧妙延续了品牌核心符号“闪电”。
新版设计中，“闪电”图形以“斜切线”的形式，融入魅力信息标签、专题卡片头图等细节，在去低幼的同时，保留了用户对品牌的核心认知，完成了视觉语言的平滑演进。
<图：老版本页面示例>
<图：新版本页面示例>
设计思考：去低幼化不等于“高冷化”或“同质化”。我们的解法是建立系统性的设计语言。它不是对某个元素的修修补补，而是从底层色彩逻辑、视觉层次、情感传达、品牌符号多个维度进行的一体化重构，最终在视觉上完成了从“儿童乐园”到“年轻人休闲客厅”的转变。
回顾整个项目，这不仅仅是一次界面优化。我们将其视作一个通过设计系统性地解决商业和品牌问题的范本。复盘整个过程，我们有几点深刻的心得，这几条心得从我们刚刚入行到目前都适用，感受愈发深刻：
1、理解产品是在做什么：设计必须服务于商业本质。深刻理解“小游戏靠时长盈利”这一核心，才让我们敢于将“提升分发效率”的惯性思维，转向“提升用户停留与沉浸”的差异路径，这是所有设计决策的“北极星”。
2、抓住重点：资源永远是有限的。通过数据分析，我们精准地识别出“最近爱玩”模块是提升大盘时长的关键。集中优势资源，在关键模块上做深做透，才能带来数据层面的最大回报。
3、以用户需求为导向：用户的核心需求是“找到我想玩/可能爱玩的游戏”，而不是“看到更多游戏”。设计要做的，是提供“理由”和“路径”，帮助用户高效决策，而不是制造“信息过载”。对“最近爱玩”模块的聚焦，正是这一思维的体现。
4、任何时候都不要忘记有趣。在追求“去低幼化”的过程中，我们并没有走向另一个极端——“严肃与无趣”。相反，我们将“放松”、“惊喜”、“有趣”这些属于游戏产品的核心情感价值，通过动态效果、场景化文案、情感化设计重新注入体验。
我们交付的不仅是一个“更好看、更好用”的首页，更是一个“更清晰、更高级、更具吸引力”的vivo小游戏品牌。
注：插图中全部实例均为设计稿，非线上截图。游戏icon、名称、在玩人数等基础信息非线上信息。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
作为一个 B 端设计师，我们究竟要如何理解组件？
当接触到一个新组件时，通常会陷入到迷茫。一方面是组件过于的熟悉，我们在日常的工作当中会频繁接触到大量的组件内容（毕竟是组件设计师...）另一方面则是新的组件不断涌入，我们作为设计师一时之间不知道如何进行分析，今天我们就来聊聊 B 端设计师与组件之间的“爱恨情仇”。
先来简单说说什么是组件？
我认为组件就是组成用户界面的基本元素，也是前端在开发过程当中，抽象出来可以复用的模块。对于定义大家不必过于纠结，最主要还是要了解其使用，比如在下方页面当中，会包含有哪一些组件？
A. 输入框 开关 上传 按钮 文本提示
B. 输入框 开关 上传 按钮 气泡卡片
C. 输入框 开关 图片预览 按钮 文本提示
这就是我们要了解关于一个组件的判断流程，我认为会有三步：形式、交互、场景。
其实我们在去辨别新一个组件的时候，会优先关注组件的「样子」，进而来进行辨别。
比如下方的两个组件，我们其实很快速就能判断出一个是 单选框，一个是多选框。因为在我们潜意识当中单选为圆形、多选则为方形，因此对于一个组件的第一印象则会和它的形式相关。
但很多时候，随着业务的变化，我们也会给组件更多含义。比如在下方三个新建按钮当中，因为他们的形式不同，所对应的含义也并不相同。
通过形式上，我们可以理解为：
再举一个例子，比如在这三个选择组件当中，正是由于其组件形式的变化，导致它们在使用上也会存在较大差别~
当然，正是因为它们样子的改变，组件的使用含义也会产生变化。
知道它的样子还不够，我们还要了解它究竟应该如何操作，因此就需要明确对应的交互状态。
比如同样给到大家两个组件，请你去辨别这两个组件分别是什么？
其实我们很难进行细致的辨认，因为这两个组件在形式上基本相同。但我们一旦将其动起来，你就会发现不同，左侧的是一个按钮，而右侧则为链接。
其实我们在辨别交互状态时，通常会存在两种辨别维度：常规交互与业务交互。
常规交互是指在网页端当中的基础交互，比如 Hover、点击，这种情况大多数设计师经常接触，因此我们就不花太多时间放在这上面。
第二种交互类型是业务交互，它主要出现在特定的页面上。比如在图表中的下钻、过滤、联动、缩放等等；在表格就会有 冻结、拖拽、选中 等交互，这些内容都是我们在涉及特定页面时需要关注的。
所以我们再去理解一个组件的时候，也需要去考虑这个组件所关联的交互状态，这样才能够对于这个组件有个更为全面的认识。
作用对比则是去思考这个组件与其他作用类似的组件之间究竟会存在什么差别？
因为每一个组件都会有它存在的意义，我们可以通过横向单维度的对比，了解到这个组件它所对应的特点。
这个我们来举一个完整的例子，带大家感受一下~
举一个例子
比如最近在行业当中，出现一种新的组件叫做：蚂蚁线
刚开始在腾讯云的官网看到了蚂蚁线，但其实我对他真的一无所知。于是乎，我开始了组件调研。
从形式开始，你会发现“蚂蚁线”是位于文本下方，通过虚线的方式呈现。
通过这种形式，我们能够拓展一些其他的类似样式。
比如在飞书当中，当你写一个错别字的时候，飞书会提供默认的下划线提示你修改错误。但这个下划线是一个实线，并且会以黄色作为标注，这就是形式上的差异。
其次，在交互上，在整个页面中，当你将鼠标悬停在虚线上时，这个提示会告诉你这里有信息可以进行预览。通过这样，我们就能大致明白“蚂蚁线”的含义：它出现在文本下方，使用虚线的方式提示用户这里有更多的信息。用户通过将鼠标悬停在虚线区域的文本上，便可以查看更多内容。
最后，在对组件进行对比时，思考与“蚂蚁线”具有相同作用的组件，我想到有两个：Tooltips和Popover。并简单整理它们在日常页面的使用，一共会包含三种相同的情况下的交互形式。同时，明确分析纬度以信息凸显程度进行对比，进而能够将这三个组件进行区分。
并且在页面中，交互的形式也会有所不同。因此我们简单整理，会有三种相对应的对比方式。并明确它们，以信息干扰程度作为标准，来进行单维度的划分。进而就能得到“蚂蚁线”组件的一个整体的用途。
关于组件，确实由于时间有限，给大家分享到这里。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
设计组件库是提升设计效率和一致性的重要工具，但如何在频繁迭代和动态调整中高效赋能业务设计交付，一直是行业面临的挑战。兰亭妙微UI设计公司，分享了他们在设计组件库建设中的新思考和实践，供大家参考学习。
本文将分享我们对于“什么是好的设计组件”的看法，并给出一种搭建复杂组件的实用思路。我们还会从资产消费的角度，提供一些优化建议。虽然过程中会涉及不少基于Figma软件的操作细节，但核心思路就像一把“万能钥匙”，无论在哪个设计平台都行之有效，希望这些内容能给广大设计师们带来一些新的启发。
从网上搜索设计组件，我们能找到各种对外公开的设计组件库，同样还有不少或概括或详细的文章，手把手教你“如何搭建一个好的设计组件库”，但这些方法论很少探讨面对C端组件频繁增改、设计规范动态调整，如何高效赋能业务设计交付的相关内容，但这恰恰是搜索业务面临的关键问题。
搜索是一个“牵一发而动全身”的业务，每一个微小的设计细节都有可能影响各个业务的数据指标，一个“好的设计组件库”需要以一种潜移默化的方式让设计师掌握设计规范，完成合规的设计，从这个角度而言它应该比较「好懂」。
而作为服务于整个设计团队的公用设计组件库，面对每月数以万计的调用次数，它必须保障最基本的易用性，应该非常「好用」。
同时，面对频繁迭代，“好的设计组件”还需要保持最快的更新速度，为各个横向团队提供正确的样式，从这个角度来说它还要「好维护」。
因此，「好懂、好用、好维护」是搜索设计语境下，对一个“好的设计组件”的定义。
接下来，我们将从这三个「好」入手，分享搜索设计组件库在升级过程中的一些思考，希望能和大家共同探讨。
“万丈高楼平地起”，我们先来说说如何从零开始构建一个既符合设计规范又易于理解的设计组件。
首先，在搭建组件时，我们可以考虑采用多层嵌套的方式，即组件(Component)内部嵌套变体(Instance)。这种方式不仅能省去组件搭建和修改过程中的重复操作，甚至还能在解绑组件时，通过选中内部的子组件图层进行解绑，大大简化了搭建和使用双方的操作流程。
在多层嵌套的思路下，我们可以进一步用“底层灵活、上层收敛”来指导组件的搭建。这意味着底层变体的形式足够多样，能够支持大部分的状态切换，而在上层组件搭建的过程中显性地加强规范的指引(如规范中不允许使用的样式不对外展示)，以降低超出规范设计的可能。
具体的搭建流程可以大致分为三步：场景收集和分析、搭建基本变体组、拓展高阶变体组。
我们将通过视频组件搭建的生动案例，具体介绍如何依据“底层灵活、上层收敛”原则来搭建组件库，使得组件本身既足够灵活，又能起到足够的约束作用。
在着手搭建某类组件时，我们首先通过规范确认和场景遍历，广泛收集各类变体。
随后，从我们能想到的所有维度出发，对这些变体进行细致定义。
这样，我们就能得到一张详尽描述组件变体性质的表格。表格的第一列依次列出变体1、变体2、变体3等，而第一行则罗列出各种维度，如宽度、比例等。
通过这种方法，我们可以将原本零散、杂乱的组件变体描述，系统地归纳整理成一张清晰明了的表格。
表格通过不同维度来唯一确定一个变体，这些维度可大致分为两个特性和一个共性。共性指的是所有变体在这一维度上均保持一致，常见特性则涵盖了最常见的分类性质，如宽度、高度、数量和优先级等，而业务特性则与具体业务紧密相关。
在搭建组件时，我们可以遵循「共性-常见特性-业务特性」顺序，这样的顺序有助于降低理解成本，因为最符合心智的分类被置于外层，同时底层的组件又保持了足够的灵活性，便于切换各种变量。对于业务特性，我们可以根据实际情况灵活处理，既可以将其作为基本组件的延展，也可以不将其纳入组件范畴。
以视频组件为例，我们从表格中获取的信息如下：
据此，我们可以轻松梳理出视频组件搭建流程的优先级：
值得注意的是，“封面槽位”是“播放状态”中的一个图层。根据“底层灵活、上层收敛”的原则，我们将其插入到搭建播放状态之前。
因此，视频组件的最终搭建流程为：
完成对视频组件搭建的分析，我们就可以有条不紊地开始搭建组件了。
先搭建基本组件视频组件，再用基本组件搭建高阶组件。
这一步骤虽然为大家所熟知，但仍需格外注意，如配置项的设置要力求合理，也可以融入设计规范和使用规范，同时还应将一些搭建过程中的零散组件集中收纳避免被调用。
关于这些具体的注意事项，我们将在后续部分进行详细阐述。
至此我们完成了组件搭建的基本流程，一个达到及格线的视频组件就诞生了。
据统计，优化后每次调用视频组件将节省至少10步的点击操作！
完成了一个基本组件的搭建后，我们可以转换视角，从使用的角度来审视并检查这个组件。
我们期望，从插入组件变体、切换组件配置，再到最后的解绑组件，整个流程都能纵享丝滑且稳定可靠，确保业务设计师在使用过程中获得最佳体验。
我们可以一步步来审视组件的使用过程。
首先是插入组件，据观察，通常有三种方式：
①在左侧的资产面板(Assets)中直接找到对应组件并插入；
②通过查阅设计规范，锁定所需的变体后复制粘贴；
③选中一个不需要的组件，通过右侧的“切换变体”面板(Swap instance)切换成所需的变体。
很明显，在这个过程中依赖的是组件的精准搜索和快速定位。
为了提升搜索精度，我们可以从组件命名入手，采用中、英、数字结合的方式，实现模糊匹配；也可以在发布时隐藏不希望被调用的组件，以减少无用的搜索结果。
如果组件是采用前文提到的“多层嵌套”方式搭建的，我们可以添加“Preferred”子组件，这样在切换时会优先展示这些子组件，这个功能在切换图标时尤为实用。
对于习惯边查阅设计规范边使用组件的设计师，我们增加了更多实际使用的正误案例，这些案例直观展示了组件变体的正确选择和使用方式，进一步降低了规范的理解成本，有效辅助设计决策。同时，我们专门维护了一个固定区域，用于平铺展示所有组件变体。
为了确保能够轻松点选，我们将变体放在最外层展示(即不在任何Frame、Group或Section中)。这样能让设计师一目了然地看到所有变体，从而快速选择所需的组件。
在组件配置阶段，有三项注意点能让组件更加易用，即“重视组件的可视化效果、设置高效易用的配置项、贴心地保存修改”。
考虑到C端组件的多样性和用户的使用习惯，我们应避免使用过于复杂的分组方式。相反，应更注重组件的样式展示，并尽量简化组件的层级结构。这样，设计师在使用时能够更直观地看到组件的外观，而无需深入复杂的层级去查找。
另外值得注意的是，Figma会默认用组件集合中最左上角的组件生成预览样式，因此应当把视觉上最有代表性的变体放在左上角，这个效果在切换变体(Swap instance)时很重要，因为目前在该面板中没法查看组件细节，只能靠缩略图和名称来推测是哪个组件。
其次对于配置项的设置也大有讲究，业界有组件库为了实现C2D2C，从源头上将设计组件和前端组件的配置项打平，这是不错的思路，但有可能会提升设计侧的理解成本。
针对搜索业务的特殊语境，我们还是选择了从「规范理解」角度去设置组件的配置项，将所有允许自定义的配置尽可能外露，并清晰地说明修改限制，如字数限定、选项个数等，这样能够在使用的过程中强化业务设计师对规范的掌握。
另一个常常被忽视的关键点是选项和配置的排序问题。为了提高浏览和选择的效率，建议对选项和选项之间，以及外层的不同配置项，都按照一定的逻辑顺序进行排序。
最后一点，我们称之为“贴心地保存修改”机制，这个针对的是文字修改的场景。
在实际操作中，使用一个组件可能需要对多个配置项进行修改。有时在修改完文字内容后再去调整其他配置时，已修改的文字会被重置。这时文本属性(text property)的设置就显得尤为重要，它能够记忆并保存修改过的文字内容，从而免于重复输入。
还有一些情况是，某个组件变体实际上并没有与某个值相对应的组件(尽管Figma机制允许选择该值)，用户切换后就会发现组件完全变了，只能撤回。
为了避免这类情况，建议使用另外的标记来表明组件某个设置项是不可切换的。
完成了组件的搭建和检查，接下来让我们聚焦于组件的日常维护。
这一环节可以从两个维度展开，一是依托中台的日常数据监控进行维护，二是通过团队内部的紧密协同机制来保障。后者更多侧重协作流程和机制上的建设，在本文中我们不做更多展开，重点讨论前者。
数据监控的方式主要依托Figma中的组件数据看板(查看路径：View libraries-Analytics)，看板中展示了各个组件的调用数和解绑数数据，这些数据不直接反映组件的优劣，但如果我们观测到某个组件解绑率偏高，我们会考虑直接把它作为模板而不是创建成组件。
以上是百度搜索设计团队在设计组件库升级过程中的心得分享，包括搜索业务对于“好的设计组件”的诉求，以及一些搭建和优化组件的实用思路，核心是探讨如何从组件库建设的角度入手，成功助力团队提升设计资产消费效率。
当前我们已经完成设计资产工程化的前序环节，我们对设计资产的升级和探索并没有结束，未来我们将持续探索设计系统工具化的形态、与AI大模型结合的机会，通过丰富消费途径，实现在业务交付的不同阶段下全方位提效。
这部分内容后续有机会也将会和大家见面，请大家期待！
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
前 Meta AI 团队创立的 Hero 公司，推出专利技术 AI Autocomplete SDK，能实时预测任务所需全部参数，输入 “订机票” 即刻呈现所有选项，让交互速度提升 10 倍、成本大降。这篇文章深入解析这项革命性技术的工作原理、应用场景与商业价值，探讨它能否成为未来 AI 应用的标配，带你看懂人机交互的下一场变革。
你有没有想过，为什么和 AI 聊天总感觉像在玩猜谜游戏？你说想订机票，AI 问你去哪儿。你说去纽约，它问什么时候出发。你说下周三，它又问几点。你说早上，它接着问要直飞还是转机，经济舱还是商务舱，要不要托运行李。这种来回问答的过程让人抓狂，就像是在玩一场永无止境的”二十个问题”游戏。更糟糕的是，有时候你都不知道 AI 需要什么信息，只能等它一个一个问。这种交互方式看似自然，实则效率低下，完全违背了 AI 应该让我们生活更简单的初衷。
前 Meta AI 团队成员创立的 Hero 公司刚刚发布了一项专利技术，可能会彻底改变这种局面。他们推出的 AI Autocomplete SDK 不是简单的自动补全功能，而是一个能够实时预测并呈现完成任务所需全部信息的系统。想象一下，当你开始输入”订机票”的时候，屏幕上立刻出现所有相关参数：出发地、目的地、日期、时间、航空公司、座位偏好、行李选项等等，你只需要填写或选择就好，不需要等 AI 一个一个问你。这听起来像是一个小改进，但实际上它可能会让 AI 交互速度提升 10 倍，成本降低 10 倍，并且为未来的增强现实设备奠定基础。
Hero 不仅将这项技术用在自己的助手应用中，还通过 SDK 向其他公司开放。这意味着我们可能很快就会在各种应用中看到这种全新的交互方式。而且，他们刚刚获得了 Forerunner Ventures 领投的 300 万美元追加投资，这是在去年 400 万美元种子轮之后的又一次资本认可。我深入研究了这项技术后发现，它的影响远比表面看起来要深远得多。
这个现象背后反映的是当前 AI 交互方式的根本缺陷。大语言模型虽然能理解自然语言，但它们并不知道用户想要完成什么任务需要哪些具体信息。就像 Hero 的 AI 工程师 Saharsh Vedi 说的：”现在的问题是，负担都在用户身上，他们需要思考 AI 需要什么信息。”这完全颠倒了技术服务人类的关系。
我自己在使用 AI 工具时也深有体会。比如用 AI 生成图片，我经常需要反复调整提示词，尝试不同的描述方式，才能得到满意的结果。有时候我花在琢磨提示词上的时间，比直接用传统工具做图还要长。更令人沮丧的是，即使你精心设计了提示词，AI 也可能遗漏某些重要细节，导致结果不符合预期。然后你又得重新生成，这不仅浪费时间，对于按次收费的服务来说，还意味着额外的成本。
当前主流的 AI 应用都试图通过各种方式解决这个问题。有些添加了建议按钮，提供预设的提示词模板。有些使用引导式问答，一步步收集用户需求。还有些像 Adobe 的 Firefly 应用，把提示词拆分成多个部分，比如创作音乐时分别输入情绪、风格和用途。这些方法都在一定程度上改善了用户体验，但都没有从根本上解决问题：用户仍然需要主动思考和输入信息，AI 仍然处于被动等待的状态。
Hero 的方法则完全不同。他们不是让 AI 更聪明地问问题，而是让系统主动预测并呈现完成任务所需的全部信息。这种思路的转变看似简单，实则颠覆了整个交互范式。就像创始人 Brad Kowalk 说的：”我们基本上意识到，你在互联网上能做的任何事情，都只是一系列参数。一旦你看到了这一点，就很难再忽视它。”这句话听起来简单，但它揭示了一个深刻的洞察：无论多么复杂的任务，本质上都可以分解为一组参数，而这些参数是可以预测和呈现的。
AI Autocomplete 的核心理念是前置加载所有必要信息，而不是通过反复问答来收集。当你开始输入或说话时，系统会实时更新界面，显示完成这个动作所需的所有参数。这不是简单的文本补全，而是一个理解任务结构、预测所需信息、动态呈现选项的智能系统。
拿订机票这个例子来说。在传统的 AI 助手中，你可能需要经历这样的对话：你说”我想订机票”，AI 问”您要去哪里？”，你说”纽约”，AI 问”什么时候出发？”，你说”下周三”，AI 问”您希望几点的航班？”，你说”早上”，AI 问”经济舱还是商务舱？”，你说”经济舱”，AI 问”需要托运行李吗？”，以此类推。整个过程可能需要十几轮对话，每次都要等待 AI 的回应。如果你在某个环节说得不够清楚，或者 AI 理解错了，还得重新来过。
但在 Hero 的 AI Autocomplete 系统中，当你输入”订机票”的瞬间，屏幕上就会出现所有相关字段：出发地、目的地、出发日期、出发时间、航空公司偏好、返程日期、座位类型、行李选项等等。你可以随时停下来，只填写你知道的信息，然后发送查询。系统会根据你已经提供的信息，智能地建议或填充其他字段。你不需要等待 AI 一个一个问你，所有信息都在你眼前，你完全掌控着交互的节奏。
这种方法的优势是多方面的。第一，速度快。Hero 声称可以让操作速度提升 10 倍，因为省去了大量来回对话的时间。第二，成本低。每次 AI 的响应都需要服务器计算，减少对话轮次意味着大幅降低运营成本。Kowalk 特别强调了这一点：”因为涉及的消息更少，规模化运营的公司可以节省服务器成本。”第三，用户体验更好。你不会感觉自己在被 AI 审问，而是在一个清晰的框架内主动提供信息。
我特别欣赏 Hero 工程师 Vedi 说的那句话：”希望我们回头看时，几乎不记得’提示词’这个概念。”这体现了他们的雄心：不是改进提示词，而是让提示词成为历史。在他们的愿景中，未来的 AI 交互应该是结构化的、可预测的、高效的，而不是开放式的、充满不确定性的对话。
AI Autocomplete 的应用场景远比订机票更广泛。Hero 在发布时特别强调了几个重要领域，每个都有可能被这项技术彻底改变。
搜索和电商是最直接的应用场景。现在在电商平台搜索商品，你需要输入关键词，然后在成百上千的结果中筛选，使用各种过滤器来缩小范围。这个过程既费时又费力。但如果有了 AI Autocomplete，当你输入”咖啡”时，系统立刻显示出品牌、烘焙程度、包装规格、配送时间、订阅频率等参数。你可以快速选择你想要的选项，甚至可以设置”每月配送”这样的重复订单。Hero 展示的咖啡订购例子就很好地说明了这一点：不仅可以快速完成当前订单，还能轻松设置定期订购，就像你说”每个月”一样简单。
媒体生成是另一个会被改变的领域。我之前提到过用 AI 生成图片时需要反复调整提示词的痛苦。AI Autocomplete 可以在你开始输入时就实时展示各种参数：主体、动作、风格、光线、相机角度、分辨率等等。你可以从这些选项中选择，而不是试图用文字准确描述你想要的效果。这不仅能激发创意，让你看到自己可能没想到的选项，还能显著减少生成次数，从而降低服务器成本。对于视频生成这种计算密集型任务来说，减少迭代次数的意义更加重大。
客户服务和企业表单填写也是重要应用场景。现在的客服聊天机器人通常需要通过一系列问答来收集信息，比如你的订单号、问题类型、联系方式等等。这个过程对用户来说很繁琐，对企业来说也低效，因为经常需要后续跟进来补充缺失的信息。有了 AI Autocomplete，聊天机器人可以根据用户的初始问题，立即呈现所有相关字段，引导用户一次性提供完整信息。这既节省了用户时间，也降低了企业的运营成本。
我认为这项技术最具潜力的应用可能还没有被充分认识到。比如在教育领域，AI Autocomplete 可以帮助学生构建更好的学习查询，展示他们可能没想到的相关主题和角度。在医疗领域，它可以帮助患者更准确地描述症状，提供结构化的问诊表单。在法律、金融等专业服务领域，它可以帮助非专业人士更有效地表达需求，获取更精准的服务。这些场景的共同点是：专业性强、信息复杂、普通用户难以准确表达需求。AI Autocomplete 恰好可以弥合这个知识鸿沟。
Hero 的 AI Autocomplete 不仅改变了用户体验，还开创了一种全新的广告模式。这让我感到特别兴奋，因为它解决了自然语言界面商业化的一个核心难题：如何在对话式交互中自然地融入广告，而不破坏用户体验？
传统的搜索广告模式是基于关键词和搜索结果的。你在 Google 搜索”咖啡机”，顶部会显示付费广告。这种模式在图形界面中运作良好，但在纯对话界面中却很难实现。你总不能让 AI 助手在回答问题的中途突然推销产品吧？那会让对话变得非常生硬和令人反感。
Hero 的方法则巧妙得多。在 AI Autocomplete 系统中，品牌可以通过三种方式出现：第一，类似 Google Ads，品牌可以付费成为决策过程中的优先建议选项。比如在订咖啡的例子中，Peet’s Coffee 可以付费让自己出现在品牌选择列表的前面。第二，品牌可以建议互补产品，添加到当前订单中。比如在你订咖啡时，建议搭配某款点心或咖啡杯。第三，品牌可以从更高的重复购买率中受益，因为在 AI Autocomplete 系统中，设置定期订单就像说”每个月”一样简单。
我认为这种广告模式的天才之处在于，它不是打断用户的决策过程，而是增强这个过程。当你在选择咖啡品牌时，看到各种选项本来就是决策的一部分，付费推广的品牌只是在这个自然的选择过程中获得了更显眼的位置。这和传统搜索广告的逻辑一致，但执行方式更自然、更不突兀。
Hero 目前正在与 AI 广告平台 Koah Labs 讨论合作，将这种新广告形式推向市场。我觉得如果这种模式成功，它可能会成为自然语言界面商业化的标准模式。想想看，未来所有 AI 助手、AI agent 和对话式应用都可能需要这样一种不破坏用户体验的广告模式。Hero 作为先行者，有机会定义这个新兴市场的规则。
更重要的是，这种广告模式对小企业也很友好。不像传统的品牌广告需要巨额投入，自然语言广告可以非常精准地针对特定需求。一家本地咖啡烘焙商可以选择在用户搜索”小批量手工烘焙咖啡”时出现，而不需要和星巴克竞争”咖啡”这样的大词。这种精准性和可负担性可能会让更多中小企业进入数字广告市场。
AI Autocomplete 的诞生其实源于增强现实的需求，这是我觉得最有远见的部分。Hero 的联合创始人 Brad Kowalk 和 Seung Woo Lee 都曾在 Meta 工作，参与 AR 相关项目。离开 Meta 后，他们一直在思考 AR 大规模普及面临的一个核心问题：当 AR 设备的屏幕空间远小于智能手机时，如何让它同样有用？
这是一个很多人没有深入思考过的问题。我们习惯了智能手机的大屏幕、复杂菜单、多层导航。但 AR 眼镜不可能有那么大的显示空间，也不适合复杂的触摸操作。那么，如何在有限的界面上提供丰富的功能呢？
大公司的思路通常是将移动端的界面缩小，配合手势控制。但 Hero 认为这不是正确的方向。Kowalk 和 Lee 的洞察是：AR 设备需要的不是缩小版的图形界面，而是基于意图的交互系统。用户应该能够用自然语言表达意图，系统通过 AI Autocomplete 这样的技术引导用户提供必要信息，然后直接执行任务。整个过程不需要复杂的 UI，只需要清晰的参数呈现和简单的选择机制。
我觉得这个思路非常前瞻。它不是试图把现有的交互模式搬到新设备上，而是为新设备设计全新的交互范式。这种轻量级但强大的 AR 操作系统，可能会成为下一代计算平台的基础。就像触摸屏为智能手机带来的革命一样，基于意图的自然语言交互可能会为 AR 设备带来类似的变革。
Hero 三年前就开始申请这项技术的专利，说明他们很早就看到了这个方向。现在专利已经获批，技术已经成熟，时机也恰到好处。大语言模型的进步让自然语言理解变得可靠，AR 设备开始进入消费市场，用户对新交互方式的接受度也在提高。所有这些因素结合在一起，为 AI Autocomplete 这样的技术创造了完美的时间窗口。
虽然 Hero 现在主要在移动和 Web 应用中推广这项技术，但他们的长远目标显然是 AR。这也解释了为什么他们选择以 SDK 的形式开放技术，而不是只在自己的应用中使用。他们希望建立一个标准，一个未来 AR 交互的基础协议。如果成功，Hero 可能不只是一家应用公司，而是下一代计算平台的基础设施提供者。
Hero 选择以 SDK 形式开放 AI Autocomplete 技术，这是一个非常聪明的战略决策。CTO Seung Woo Lee 解释说：”我们三年前就意识到，AI agent 的瓶颈不会是 AI 浏览互联网和完成任务的能力，而是用户知道该说什么的能力。所以，我们不是再造一个玩’十个问题’游戏的聊天界面，而是推出一个让用户能一次性完成任何多步骤动作的系统。我们相信我们的技术有能力增强今天所有使用自然语言输入的产品。”
这段话揭示了他们的雄心：不是造一个更好的聊天机器人，而是改变整个行业的交互方式。这就需要让其他公司也能使用这项技术，而不是把它封闭在自己的应用中。从商业角度看，这是一个高风险高回报的策略。风险在于，开放技术意味着竞争对手也能使用，可能会削弱自己的差异化优势。回报在于，如果技术被广泛采用，Hero 就能成为这个新交互范式的标准制定者和基础设施提供者。
我认为这个选择体现了创始团队的格局。他们在 Meta 工作过，见识过平台级技术的威力。他们知道，真正改变世界的不是一个优秀的应用，而是一个被广泛采用的标准。就像 HTTP 协议定义了网页浏览，触摸屏定义了智能手机交互，AI Autocomplete 有潜力定义自然语言交互的标准。
SDK 策略还有助于快速验证技术价值和收集反馈。通过让不同行业、不同应用场景的公司使用这项技术，Hero 可以快速发现技术的优势和局限，找到最有价值的应用场景，并根据实际使用情况不断改进。这比自己闷头做一个应用要高效得多。
从生态系统角度看，SDK 策略有助于建立网络效应。使用 Hero AI Autocomplete 的应用越多,用户就越熟悉这种交互方式。用户越熟悉，新应用采用这种交互方式的价值就越大。这种正反馈循环一旦启动，会形成很强的护城河。就像用户习惯了触摸屏之后，任何新的移动设备都必须支持触摸，未来用户习惯了 AI Autocomplete 之后，任何新的自然语言应用可能都需要支持这种交互方式。
Hero 的 AI Autocomplete 让我重新思考了当前 AI 交互的发展方向。整个行业似乎都在朝着”更自然的对话”这个方向努力，让 AI 更像人类一样交流。但 Hero 提出了一个反直觉的观点：也许最好的交互方式不是完全模拟人类对话，而是结合对话的自然性和表单的结构性。
人类之间的对话之所以高效，是因为双方共享大量背景知识和语境。你和朋友聊天时，可以用很简短的话表达复杂意思，因为你们互相了解。但人和 AI 的对话不一样，AI 不知道你的偏好、习惯和当前情境。如果完全模拟人类对话，就会导致大量不必要的来回确认。
Hero 的方法是承认这个差异，利用 AI 的优势来弥补。AI 可以快速分析任务结构，预测所需信息，实时更新界面。这些都是人类做不到的。通过展示结构化的参数，AI Autocomplete 实际上是在利用机器的优势，而不是试图完全模仿人类。
我认为这种思路会影响整个 AI 产品设计领域。未来我们可能会看到更多混合式交互：既有自然语言的灵活性，又有结构化界面的清晰性。这不是倒退到传统 GUI，而是在更高层次上综合了两种交互方式的优点。
从技术架构角度看，AI Autocomplete 也提出了新的要求。它需要 AI 模型不仅能理解用户意图，还要能预测任务结构和参数需求。这可能会推动一类新的 AI 模型发展，专门用于任务分解和参数预测。Hero 提到他们使用了一系列模型来预测用户可能输入的内容，说明这不是单一模型能解决的问题，而需要专门的技术栈。
对于正在开发 AI 产品的团队来说，Hero 的成功提供了重要启示：不要只关注 AI 的智能程度，还要关注交互设计。最聪明的 AI 如果交互方式糟糕，用户体验也会很差。反过来，即使 AI 能力有限，如果交互设计得当，也能提供很好的用户体验。Hero 的技术本质上是通过更好的交互设计，最大化了现有 AI 能力的价值。
我也在思考这项技术可能的局限性。它适合参数化的、结构化的任务，但对于真正开放式的、需要创造性的对话可能不太适用。比如你和 AI 讨论一个哲学问题，或者寻求情感支持，这种场景下强行展示参数就会显得生硬。所以 AI Autocomplete 可能不会取代所有类型的 AI 交互，而是在特定场景下提供更优选择。
另一个值得关注的是隐私和数据安全。AI Autocomplete 需要理解任务结构和预测用户需求，这意味着它需要访问相当多的上下文信息。如何在提供个性化服务和保护用户隐私之间找到平衡，将是这类技术普及过程中必须解决的问题。
Hero 目前正在自己的助手应用中测试这项技术，计划在几个月内向用户发布。他们重点展示的功能是帮助用户通过自动补全提示词找到会议时间或和朋友见面的时间。这是一个很实用的场景，也是一个很好的切入点。安排会议往往需要考虑多个人的时间、地点偏好、会议时长等因素，用自然语言描述清楚并不容易。有了 AI Autocomplete，这个过程会简化很多。
但我更期待看到 Hero 在更广泛场景中的应用。比如在旅行规划、购物、客户服务等领域，AI Autocomplete 的价值可能更加明显。Hero 的 SDK 策略意味着我们不需要等 Hero 自己去开发所有应用场景，而是会看到各行各业的公司将这项技术集成到自己的产品中。
从融资角度看，Hero 去年获得了 400 万美元种子轮，现在又获得了 Forerunner Ventures 领投的 300 万美元追加投资。Kowalk 表示，根据应用和 SDK 的增长情况，他们计划在未来几个月筹集更大一轮融资。我认为如果 SDK 能够吸引到一批有影响力的客户，证明技术价值，那么 A 轮融资应该不成问题。这项技术的潜在市场非常大，任何使用自然语言输入的应用都可能是潜在客户。
我也在想，Hero 会不会成为下一个 Twilio 或 Stripe 那样的基础设施公司？Twilio 让每个应用都能方便地集成短信和电话功能，Stripe 让每个应用都能方便地接入支付。Hero 有潜力让每个应用都能方便地提供优秀的自然语言交互体验。如果真的走到这一步，Hero 的价值将远超一个普通的应用公司。
但挑战也是存在的。技术再好，也需要市场教育和生态建设。开发者需要理解这项技术的价值，学会如何集成和使用。用户需要适应这种新的交互方式，培养新的使用习惯。这些都需要时间和持续投入。Hero 团队有 Meta 的背景，应该对这些挑战有充分认识。
我特别欣赏 Hero 团队的一点是，他们在三年前就开始布局这个方向，提前申请了专利。这种前瞻性在快速变化的 AI 领域特别难得。很多公司都在追逐最新的热点，而 Hero 则在思考更根本的问题：人机交互的本质是什么？未来的交互应该是什么样子？这种长期思维是真正有影响力的公司的特质。
最后，我想说的是，Hero 的 AI Autocomplete 提醒我们，AI 革命不只是关于更强大的模型，也关于更好的交互设计。技术进步和设计创新同样重要，甚至在某些场景下，好的设计比更强的模型更有价值。这也是为什么我对 Hero 的未来充满期待。他们不是在和其他公司比谁的模型更强，而是在重新定义人机交互的方式。这种创新往往更持久，也更有影响力。
我相信，几年后回头看，我们会惊讶地发现自己曾经需要花那么多时间和 AI 来回对话，就像我们现在回想起曾经需要记住各种命令行指令一样。AI Autocomplete 可能就是推动这个转变的关键技术之一。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
今天给大家带来的分享是《AR，我们从设计说起》，希望大家通过这个分享能够快速了解AR的实现原理，AR的设计流程，以及在设计过程中遇到的问题，在最后会分享我这些年做AR设计的一些心得和技巧。
关于AR
AR这个词对大众而言并不是一个陌生的词，但是AR的实现原理是怎样的？
AR的中文名字是增强现实技术，它是一种实时地计算摄影机影像的位置及角度，并且加上相应的图像、视频、3D模型的技术。
简单来讲就是在现实世界上叠加一些虚拟信息，然后再实时计算它在设备上的位置以及角度的变化。
AR的目标是将屏幕上的虚拟内容放在现实的世界中与之互动，帮助大众更快捷更直观的去获取信息，并且AR自带强大的商业价值。身边的小伙伴经常会把AR跟VR搞混，其实AR是增强现实技术，而VR是虚拟现实技术。
AR是将虚拟的物体放在我们周边的现实环境，增强现实世界的感官体验；VR则是将我们放在虚拟的环境中，打造一个以假乱真的沉浸式体验。
它们在设备上进行划分，AR对大众用户来说参与的门槛低，操作的门槛更低，因为AR只需要拥有一部带摄像头的智能手机，便可以成为一个载体，在增强现实世界的同时，重塑用户的交互体验，而VR的设备对于大众用户来讲日常比较难接触到，需要较为专业的设备和场地。
AR技术的核心是识别与跟踪，它的实现方式分为两种：
● 图像检测法；
● 全球卫星定位系统法。
图像检测法
图像检测法其实是AR最常见的一种定位方式，经常用在图片识别和人脸的识别。它的技术实现流程主要分为三步：
Step 1：需要捕捉特征图像，算法会对图像进行规划处理，计算有效特征点进行匹配，可以看下图一，这些绿色的小点点就是有效特征点；
Step 2：从偏离的矩形算出一个三维坐标系，建立一个空间；
Step 3：实时跟踪数据内容的位置和角度的变化；
刚才讲到绿色的小点点设计师应该怎么去检测呢？这里推荐一个网站给大家 —— Vuforia，注册账号后上传设计图就可以直接将图稿的特征点标记出来，并且对其进行打分，特征点越多，识别的准确率越高。（链接在文末)
观察第一张图的上下两幅作品，可以发现它仅仅只是背景和深浅不同，形成的有效特征点也有所不同，因为算法在灰度对比度高的情况下会形成更多的有效特征点。
我们再观察第二张图，可以发现第二张图在太阳的圆形部分没有形成任何有效特征点，因为算法会排除掉一些比较平滑的曲线或元素，视为无效特征点，这种点一般出现在夹角处，所以为了使特征点分数更高，我们在设计的时候需要：
● 避免画一些比较平滑或带弧度的元素；
● 特征点需要平均分布在每一个角落。
最后看第三张图，几何云的部分重复出现在不同的位置上，它形成的有效特征点的数量和位置也一样。因为重复出现的规则图形会被算法判定为无效特征点并排除掉，所以在做设计的时候需要：
●避免用一些规则的图形和一些重复出现的元素。
图像检测的优点是简单、高效和多样性，缺点是容易受环境、光线、距离、遮挡、聚焦这些因素产生变化，会使虚拟内容产生抖动、卡顿、误判、识别慢、无法识别的情况出现。
环境光线距离就不需要多讲了，遮挡就是取决于取景的角度和范围。聚焦指的是设备，也就是我们的摄像机，我们的手机对于深色还有渐变颜色进行对焦时会较慢显现。
所以在做视觉稿的时候，其实需要满足很多条件，并且要与开发进行多环境测试、一起研讨，才能得出一张比较合格的识别图，优秀的识别图必须确保它的稳定性，还有它的识别速度。
我们来看看实际项目中是如何应用的。
在2016年的时候，团队策划了《QQ奥运火炬手》AR活动，基本上是在一个毫无经验的情况之下，不断地试错，不断地修正，在两个月内从风格到终稿花了将近3000稿，才完成六个奥运城市28张识别图的设计，可以看到DEMO呈现出来的效果相对比较稳定，而且识别速度非常快的，基本在一秒之内完成。
这里强调优秀这个词，因为我们不希望用户第一次接触AR时就造成一些挫败感，导致对新技术的体验产生抗拒心理，所以对识别率的速度还有稳定性做了相当多的调试，当时也获得了世界吉尼斯纪录的证书。
这是以前的一个小DEMO，通过手机的扫一扫识别一层一层传递的过程。刚才说到图片检测法的图像场景，现在再看一下纹理识别的场景，人脸识别其实就是图像检测法的边缘检测，它可以检测出人脸的部位，同时跟踪这些部位进行运动，把虚拟的内容跟肢体做无缝的贴合。
比如说经常用到的特效挂件，大家看到市面上的一些美颜APP都有些什么样的能力呢？
● 实时美颜
● 脸部贴合
● 动作触发
● 脸部变形
● 换脸、扣脸
● 氛围滤镜
● 3D模型
其它便不一一阐述了，相信大家也有所了解。
针对QQ的一些社交场景，我们团队也做了QQ特有的一些特效挂件，例如可以在QQ的聊天界面中的拍摄功能，还有聊天，都可以在视频聊天看到，玩到。还有利用AI还有AR的结合，在两人通话中做了一个小游戏，通过做表情赢取对方的红包。
全球卫星定位系统法
全球卫星定位系统法是是利用GPS去定位我们所处的位置，在真实的空间里寻找一个平面，可以现实世界中跟虚拟物体进行互动和观赏。
优点是适合于室外的跟踪，可以克服在室外场景中光照，还有聚焦等不确定因素，而缺点是很考验设备的性能，包括当前网络的环境。
可以看到这上面有两个比较陌生的词，一个是LBS(Location Based Service)，一个是POI(Point of Interest)。LBS其实是基于移动位置服务，配置服务GPS获取位置的一个方式。有些AR的游戏是基于LBS去实现的，它们所用到的实现方式也就是全球卫星定位系统法。而POI就是一个兴趣点，它在地图上可代表是一栋大厦，一个商铺或者一处景点等等，它包含四方面的信息，就是名称、类别、坐标和分类。
这个是16年日本做的一个AR游戏，相信大家都有玩过。
这个游戏是利用全球卫星定位系统法去实现的一个游戏，为什么给大家看刚才的短片，是因为腾讯2017年新年QQ的一个运营活动跟它的玩法特别像，都是基于一个地图上去寻找一个红包或者一个宝藏，然后找到这个位置，再通过完成一些任务去获得这些红包或者礼品。
做这个运营活动的时候，需要去考虑如何体现AR的空间概念，譬如说要合理利用一个真实的空间，因为设计师出的设计稿再也不是750×1334的尺寸了，它是一个真实的空间，需要把这空间进行拓展，去引导用户移动手机镜头，跟踪这些虚拟物体进行移动和互动。
我们可以通过物体的走向去体现一个空间感，譬如说从远到近，从左到右，从上到下等方式让用户移动起来。
在地图的引导上，可以从远近这个层次去打造一个三维空间，譬如说离我们比较近的AR点的时候，需要强化我们的信息，做一些差异化的动画引导，再远一点的地方就只需要给一个简单的贴图或者简单的元素告知用户，远处也有一个红包，或者礼品。
IP的力量是非常强大的，当时使用了QQfamily的baby Q作为财神形象给用户发红包，它的作用是可以跟用户产生一个平等的对话，陪伴用户一起完成一些任务，建立一个平等亲密的关系。
在2016年的时候，通过《QQ奥运火炬手》活动，一推出QQ就被称为是国内首个AR用户超过1亿的社交应用，整个活动吸引了全球一百四十三个国家的用户，跟AR的互动超过将近两亿次。
在2017年的时候《QQ天降红包》运营活动用户量超过3亿，半年间就收获业界还有一些用户的良好口碑，QQ是一个很年轻的产品，它的用户大部分都是学生。通过这样的活动跟新的技术做结合，我们成功将QQ的品牌升级为年轻化，娱乐化，还有科技化。
过去的设计手法就是从图形，动画还有色彩上做一些创新。现在我们加入一些新的技术，比如说AI、AR、音效和物理震动之后，可以升级用户的一些感官体验，使设计更加沉浸式，更加娱乐化。
把AI跟AR做一个很好的结合，是因为更好的AI需要更好的AR去体现。
那么大家都说AI就是AI，AR就是AR，其实这个说法是错的，因为它们的关系非常密切。如果我来作比喻的话，
「AI就是人的大脑，AR就是人的一些感官体验」
跟这些新的技术做结合，会使得设计和活动会有四个优点，那就是话题性，串联性，沉浸式和娱乐化。
通过一些新的技术给用户带来的新鲜感和话题性，再把一些时间音效还有振动影像这些元素有效地串联在一起，让用户身临其境，更加专注在操作当中，更加强化整个设计，整个产品的趣味性，也提高整个产品的娱乐价值。
去年世界杯的时候，我们推出了《QQAR穿越赛场》。
相对奥运而言，世界杯并不是全民都会关注的一个赛事，所以当时用了很大部分的时间来做用研，想方设法去提升用户的参与感。我们对用户的行为和心理进行分析，希望能通过新的交互形式和新的技术让用户更好的参与进来。
在做运营设计的时候，需要从三个部份去策划：
● 如何去吸引用户；
● 在用户体验的过程中如何制造一些惊喜；
● 希望用户在最后有一个想要抒发自己的欲望的出口，将活动分享出去。
那如何去吸引用户参与活动呢？可以利一些视觉线索，突出一些重点信息，通过差异化的设计去满足用户的好奇心。譬如说，利用一个足球的运动轨迹引起用户的注意力，让用户产生好奇心，去点击入口，到第二个页面的时候，需要告诉用户具体的活动内容，这是比较轻的设计手法，比较直接的方式是在登录QQ之后，直接给用户一个活动预告。
这个需要结合QQ扫一扫的界面，并且跟活动里面的场景结合起来，打造一个新的UI风格。我们可以透过一些色彩质感和执行动画告诉用户，这是一个充满科技感的运营活动，一个新的UI活动风格，一个新的科技感风格。
沉浸式体验，往往也包含人的感官体验和认知体验。
我们需要从大众的一些记忆里面提取一些设计元素，基于现在的场景、应用做结合。那么我们如何去提取用户的一些记忆元素？可以通过我们记忆中一些片段去提取它的色彩、质感，还有声音、图形、运动方式、光学和力学这样的特征去和设计做融合。
说起穿越这个话题，大家也会想到哆啦A梦的穿越门或者哆啦A梦的时光机，还有些用户就会想到我们近年来比较火的奇异博士其中的一个片段，我们抽取奇异博士打开穿越门的片段提取一些设计元素，譬如说它的运动方式，力学和光学特征。
首先我们需要去教育用户“空中画圈”，“空中画圈”这个词大家应该都不难理解，当时请了很多深大学生去公司做用研，当时试玩这个活动的时候，发现很多同学都不会玩，不是说大家没有看过奇异博士，也不是说大家对AR没有接触，是因为这种新的互动形式会让用户的心理造成一个不确定因素，并且怀疑自己的判断，大家更多的习惯直接在屏幕上画圈，而不是举起自己的手，在空中画一个圈，开启穿越门，甚至有一些同学直接手反过来一直在扣摄像头，都会有这种情况出现。
因此才会让我们的设计更加客观，我们自认为很好理解的事情，其实对于一些大众用户来说，并不容易去实现。
在此次研究的基础上我们做了图文的结合，到最后不断优化了十几个方案，不断地去找学生做用研，最后得出了一个解决方案——模拟一个真实的画圈场景。做了一个动画，并且加上简洁的文字和操作的反馈来引导用户操作，同时也支持用户屏幕画圈，可是扣摄像头还是做不到的，这是为了避免用户在试玩的过程中会发生一些中断。
关于AR画圈在设计师的工作来说，设计这个点的动画好像很简单，其实它特别困难。开发同学需要考虑手机性能以及QQ引擎等问题，为了确保用户的流畅体验，设计可能需要做一些牺牲。
当时我们有一个限制，动画必须保证在5到8帧之内。但是它会出现卡顿，色差，模糊，生硬这些情况，并且我们用AE的粒子效果去做一个动画的时候，跟开发实现的原理其实不太一致，所以我们要不断去跟开发做调试跟还原效果。再者比如说AE里面的粒子效果导出PNG之后会有很大的色差，这些都是需要不断去修正和想办法解决的。
我们在多方面调试下，修正方案，寻找解决的方法，最后做出了一个相对比较满意的效果。
在空中画圈之后，它会立马形成一个3D立体的穿越门，这个穿越门可以让我们360度地观看，并且可以在现实还有虚拟场景中来回穿梭，这需要很多的面片去做一些贴图处理，但是会遇到技术上的问题，所以只能用最精简的方式去达到我们理想中的效果。
对于一些引擎还有技术的限制，需要想很多的方法去将资源整合。譬如说从AR画圈到AR穿越门，再到一个虚拟的AR赛场，其实是有四段不同的资源合成的，需要严格去把控整个时间的进场和退场。
第一步：需要想方设法去用一些巧妙的手法让它过度自然；
第二步：如何让用户感觉到身临其境，可以从视觉、听觉、触觉这三方面去提升用户的感观体验；以第一人称的视角能够360度去观看整个AR赛场，然后再配合现场真实的一些音效，像是解说员的旁白，还原一个真实感；
第三部：触感。触感的设计我们知道自从IOS升级之后，手机有强、中、弱三挡的振动，我们利用设计这些振动的频率，还有长短还原踢球，球击龙门还有球在草地上来回滚动的触感，主要目的就是提升用户的真实感；
第四步：如何去增强用户的分享欲望。除了从质感上去打造真实的报纸质感之外，我们根据用户的一些阅读习惯去把内容排版起来，分布在每一个角落。再来我们根据整个国家的球服配色，不同的赞扬文案，还有用户画圈的过程，会有视频录屏把这些元素整合在一起，打造一个魔法报纸，以这些个性化的设计去提升用户的参与感，让用户有一个分享的欲望。
设计心得
关于AR的设计流程的建议：
● 在定义玩法的时候，交互和操作要尽量的简单，降低用户的参与门槛与操作门槛，不要让用户形成挫败的心理；
● 在交互阶段的时候，我们通过用研定出最佳的新手引导方案，确保用用户懂得玩这个活动；
● 在视觉阶段的时候，需要预留时间给开发做测试，反复去调试还原视觉效果，AR的设计原则其实跟大部分设计原则都是一样的，它是一个金字塔的三角形关系，首先要确保应用性，应用性就是要有一些简单明了的操作，还有一些引导暗示用户是会使用AP或是会玩这个活动的，避免用户的心理造成一些挫败感；
● 稳定性。需要确保整个体验流程是通畅的，要多维度的给到一些操作反馈，避免用户在体验过程中发生意外或者中断；
● 最后才是愉悦感，通过设计的手法让用户得到一些娱乐感和满足感，沉浸其中，忘记真实世界的场景。
关于AR沉浸式体验的建议：
● 情景：需要设计背景或剧情去吸引用户，让用户产生一个探索的欲望；
● 空间：需要合理的去利用真实的空间；
● 情节：需要明确一些比较细节的目标，让用户的行为有一些特别的反馈，让用户对整个体验有着绝对的主控感；
● 角色：可以通过创建一些角色关系，情景化的设计，去提升用户的参与感；
● 氛围：可以从视觉，听觉，触觉三方面去提升整个体验的愉悦感；
● 节奏：从简单到挑战，需要慢慢循序渐进的使得用户集中精神。
结语
最后就是我在做AR项目的一些反思。
之前我经常就会觉得设计师的工作只是考虑怎么包装这个APP，怎么包装这个品牌，怎么做好看就可以了。其实并不是的，我们需要考虑用户的一些体验问题，还有我们要具备一些产品思维，所有跟新技术去做融合的设计是有很高的风险，一个好的设计其实是选择众多条件下的最佳方案。
我们在设计过程中会遇到很多困难、很多限制，而且需要用设计去解决一些技术问题，我们会把这些限制设为思考问题的出发点，提供一个更完善的方案，同时我也相信科技是跟技术在不断的进步，所以有一天我们可以做到我们理想中的设计。
来源：站酷 作者：腾讯ISUX团队
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com