蚂蚁阿福 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 端设计师，我们究竟要如何理解组件？
当接触到一个新组件时，通常会陷入到迷茫。一方面是组件过于的熟悉，我们在日常的工作当中会频繁接触到大量的组件内容（毕竟是组件设计师...）另一方面则是新的组件不断涌入，我们作为设计师一时之间不知道如何进行分析，今天我们就来聊聊 B 端设计师与组件之间的“爱恨情仇”。
先来简单说说什么是组件？
我认为组件就是组成用户界面的基本元素，也是前端在开发过程当中，抽象出来可以复用的模块。对于定义大家不必过于纠结，最主要还是要了解其使用，比如在下方页面当中，会包含有哪一些组件？
A. 输入框 开关 上传 按钮 文本提示
B. 输入框 开关 上传 按钮 气泡卡片
C. 输入框 开关 图片预览 按钮 文本提示
这就是我们要了解关于一个组件的判断流程，我认为会有三步：形式、交互、场景。
其实我们在去辨别新一个组件的时候，会优先关注组件的「样子」，进而来进行辨别。
比如下方的两个组件，我们其实很快速就能判断出一个是 单选框，一个是多选框。因为在我们潜意识当中单选为圆形、多选则为方形，因此对于一个组件的第一印象则会和它的形式相关。
但很多时候，随着业务的变化，我们也会给组件更多含义。比如在下方三个新建按钮当中，因为他们的形式不同，所对应的含义也并不相同。
通过形式上，我们可以理解为：
再举一个例子，比如在这三个选择组件当中，正是由于其组件形式的变化，导致它们在使用上也会存在较大差别~
当然，正是因为它们样子的改变，组件的使用含义也会产生变化。
知道它的样子还不够，我们还要了解它究竟应该如何操作，因此就需要明确对应的交互状态。
比如同样给到大家两个组件，请你去辨别这两个组件分别是什么？
其实我们很难进行细致的辨认，因为这两个组件在形式上基本相同。但我们一旦将其动起来，你就会发现不同，左侧的是一个按钮，而右侧则为链接。
其实我们在辨别交互状态时，通常会存在两种辨别维度：常规交互与业务交互。
常规交互是指在网页端当中的基础交互，比如 Hover、点击，这种情况大多数设计师经常接触，因此我们就不花太多时间放在这上面。
第二种交互类型是业务交互，它主要出现在特定的页面上。比如在图表中的下钻、过滤、联动、缩放等等；在表格就会有 冻结、拖拽、选中 等交互，这些内容都是我们在涉及特定页面时需要关注的。
所以我们再去理解一个组件的时候，也需要去考虑这个组件所关联的交互状态，这样才能够对于这个组件有个更为全面的认识。
作用对比则是去思考这个组件与其他作用类似的组件之间究竟会存在什么差别？
因为每一个组件都会有它存在的意义，我们可以通过横向单维度的对比，了解到这个组件它所对应的特点。
这个我们来举一个完整的例子，带大家感受一下~
举一个例子
比如最近在行业当中，出现一种新的组件叫做：蚂蚁线
刚开始在腾讯云的官网看到了蚂蚁线，但其实我对他真的一无所知。于是乎，我开始了组件调研。
从形式开始，你会发现“蚂蚁线”是位于文本下方，通过虚线的方式呈现。
通过这种形式，我们能够拓展一些其他的类似样式。
比如在飞书当中，当你写一个错别字的时候，飞书会提供默认的下划线提示你修改错误。但这个下划线是一个实线，并且会以黄色作为标注，这就是形式上的差异。
其次，在交互上，在整个页面中，当你将鼠标悬停在虚线上时，这个提示会告诉你这里有信息可以进行预览。通过这样，我们就能大致明白“蚂蚁线”的含义：它出现在文本下方，使用虚线的方式提示用户这里有更多的信息。用户通过将鼠标悬停在虚线区域的文本上，便可以查看更多内容。
最后，在对组件进行对比时，思考与“蚂蚁线”具有相同作用的组件，我想到有两个：Tooltips和Popover。并简单整理它们在日常页面的使用，一共会包含三种相同的情况下的交互形式。同时，明确分析纬度以信息凸显程度进行对比，进而能够将这三个组件进行区分。
并且在页面中，交互的形式也会有所不同。因此我们简单整理，会有三种相对应的对比方式。并明确它们，以信息干扰程度作为标准，来进行单维度的划分。进而就能得到“蚂蚁线”组件的一个整体的用途。
关于组件，确实由于时间有限，给大家分享到这里。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
设计必须兼顾可读性、交互性和美学。
| 数据类型 | 推荐图表 | 设计要点 |
| 时间趋势 | 折线图、面积图 | 强调时间轴与变化幅度 |
| 分类对比 | 柱状图、条形图 | 便于横向比较 |
| 比例结构 | 饼图、环形图 | 仅适合维度较少的场景 |
| 空间分布 | 热力图、地图 | 展现地理关联与密度 |
| 关系网络 | 桑基图、力导向图 | 适合流向或关联数据 |
设计原则： 图表越简单越好，炫技式图形往往增加理解成本。
| 应用场景 | 设计重点 | 体验策略 |
| 金融风控平台 | 实时风险监控 | 深色主题+高亮风险指标 |
| 智慧城市大屏 | 多维度数据展示 | 分屏布局+动态联动 |
| 运营分析仪表盘 | 用户留存/转化 | 自定义筛选+趋势预测 |
| 工业监控系统 | 设备状态实时刷新 | 极简图表+高对比报警色 |
当数据能被理解，洞察才能被发现， 当洞察被发现，决策才有真正的价值。
| 维度 | App 界面 | B 端界面 |
| 交互形式 | 强调直觉、轻量化操作，多为点触+语音+手势 | 强调效率与多任务处理，键盘快捷键+复杂面板+语音辅助 |
| 视觉体系 | 更追求情感化与品牌个性 | 更注重信息密度与结构化展示 |
| AI 应用 | 偏向个性化推荐与情绪陪伴 | 偏向任务预测、智能报表、协作优化 |
你有没有过这样的经历：浏览网站时，甚至没有完全集中注意力，突然之间，大脑还没来得及反应，你就点击了某个内容？这并非巧合。这是设计心理学在引导你点击。
可点击的UI不仅仅是让按钮看起来像按钮。它关乎理解你的大脑如何响应视觉提示、层次结构和交互模式。如果你曾经好奇为什么有些UI让人上瘾，而有些却像个残酷的玩笑，那么这篇文章正适合你。
让我们深入研究可点击界面背后的心理学，了解设计师每天在不知不觉中打破或掌握的实际规律和原则。
在设计语言中，“可供性”指的是物体的外观如何暗示如何使用它。旋钮看起来可以旋转。按钮看起来可以按下。汉堡菜单看起来……就像隐藏了真正的内容。
重要性：用户不应该猜测什么是可交互的。它越像可以触摸、拖动或点击的东西，你的大脑就越会说：“没错，这就是一个东西。”
设计师是如何搞砸的：扁平化设计太过了。按钮开始看起来像普通的文字，突然之间没人知道该点击什么了。如果它看起来像个标签，但实际上是一个行动号召，那么你就陷入了可用性的“犯罪现场”。
改进：使用视觉提示；阴影、对比度、悬停状态，使其清晰易懂。出于对 UI 的热爱，除非你是为间谍设计，否则不要将链接隐藏在模糊的图标中。
希克定律说，你给某人的选择越多，他们做决定的时间就越长，甚至可能放弃整个选择。
重要性：想让用户点击那个实用的 CTA 按钮吗？别把它埋没在由 17 个同样醒目的按钮组成的菜单中。简化。引导。精简。
设计师是如何搞砸这一点的： “让我们给用户自由。”翻译过来就是：“让我们让他们恐慌。”
改进：提供清晰的选择。优先考虑重要事项。采用渐进式披露；现在显示较少，以后显示更多。
菲茨定律的基本意思是，点击目标的时间取决于目标的大小和距离。简而言之：大按钮更容易点击，而且不需要人们横跨整个欧洲才能找到它们。
重要性：在巨型页面的右上角放置微小链接？恭喜，你成功创建了一款令人困惑的游戏的用户体验版本。
设计师们是如何搞砸这一点的：把“下一步”按钮放在离“后退”按钮12英里远的地方。或者把主要的行动号召 (CTA) 藏在页脚的某个地方，靠近版权符号。
改进：按钮要足够大，方便点击，尤其是在移动设备上。将相关操作分组。确保重要信息触手可及。
雅各布·尼尔森定律提醒我们，用户期望你的网站能够像他们之前使用过的其他网站一样。熟悉并非偷懒的设计，而是良好的用户体验。
重要性：如果您的“添加到购物车”按钮形状像骆驼，人们就会跳转。
设计师是如何搞砸的：试图重新发明轮子。没错，你的团队想要与众不同，但用户不想每次访问网站都要学习一门新的 UI 语言。
改进：使用常见模式。只有当回报值得时才打破预期。你不是在设计艺术，而是在设计功能。
人们对未完成的任务记忆比已完成的任务更深刻。这就是为什么如果你把衣服叠成一半，你会觉得很奇怪。
为什么重要：显示进度条、步骤或清单的用户界面可以帮助用户继续前进。“您已完成 80%”就像是激励用户投入的诱饵。
设计师是如何搞砸的：隐藏进度。不显示反馈。让用户猜测还剩多少。
使其变得更好：使用步骤、加载器、进度环以及任何可以告诉用户“嘿，你已经接近成功”的东西。
人们会记住那些看起来与众不同的东西。清单上那个奇怪的项目？它就是那个能留下深刻印象的。
重要性：想让用户点击你的主要操作吗？让它在视觉上引人注目。颜色、大小、间距，都应该传达出“这就是重点”的信息。
设计师是如何搞砸的：把所有东西都做得大胆、明亮、庞大。如果所有东西都太吵闹，就什么也听不到了。
改进：选择一件事情来突出。利用颜色对比来突出重点。但要有所选择，只有重要的事情才能得到关注。
并非所有细节都会被记住。人们大多会回忆起体验的高潮以及它是如何结束的。
重要性：顺畅的结账流程很棒，但如果最终确认页面看起来像 2004 年的错误消息，那么用户就会记住它。
设计师是如何搞砸这一点的：虽然流程很顺畅，但最后却功亏一篑。或者在用户即将完成操作时引入了阻力。
让体验更佳：结尾要有力度。让最终的互动令人愉悦。一点动画、一条贴心的提示，甚至一个微妙的声音，都能留下美好的回忆。
如果你的用户界面感觉像数学考试，用户就会消失。保持简洁，消除不必要的摩擦，不要让短期记忆超负荷。
仅仅因为您可以在选项卡内的模式中添加下拉菜单并不意味着您应该这样做。
UI 中的心理学并非空谈。你可以将其融入到你的工作流程中。一个好的工具会很有帮助，尤其是如果你每天都在 Figma 上工作的话。
我一直在使用MadeinFigma，它是预先构建的组件和流程的集合，已经考虑了希克定律、冯·雷斯托夫定律，甚至是传统的逻辑。
这就像在设计时肩上扛着一位小心理学家，但没那么恐怖。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
本文大纲
一、好的收藏体验这么做
二、互动信息隐私的保护
三、确定按钮放左边or右边？
四、手机实体键分布的合理性
五、静音键存在的必要性
六、经典的旋钮式交互
业内有很多人觉得手势交互没必要拿出来深究，觉得用户使用产品的过程中，自然而然就会去使用拇指，进行手势操作。但这种说法，就跟「用户心理模型」类似。当然，对于用户来说没必要深究手势交互，但作为设计师，如果不了解其背后的逻辑，那么就无法解决产品设计背后的一些问题。
所以我们今天，好好聊一聊手势交互这件事。你会发现，原来你以往观察或以为的设计问题，都是手势交互在作祟。
我们以前经常听到「以用户为中心做产品设计」这句话，意思是产品需依附于目标用户的真实场景来设计。与此同时，其实还有一句话在提醒着交互设计师如何做产品设计，就是「以触摸屏为中心做产品设计」。
为什么呢？因为用户从始至终都是在跟触摸屏做接触，不管换了什么设备，他们都是要通过屏幕与产品进行交互的。
我们可以在这里思考一下手势的意义。
手势的出现改变了什么？可以回想一下 iPhone 4 发布的时候，当看到这样一台屏幕上没有任何按键的设备，是不是会觉得不可思议？键盘，电话接听按键等都消失不见了。
人们在使用 iPhone 这样的产品时，不再需要去强行记忆任何固体按键。触摸屏与手势的结合，帮助我们隐藏不必要的元素，帮助用户聚焦于内容，在有限的物理空间获得更多的信息。
所以用户通过触摸屏与产品进行交互，跟通过键盘按键与屏幕进行交互是完全不同的。手势交互更自然且更。
手势操作对我们来说如此自然和直观的主要原因是因为它们类似于与真实对象进行直接交互。譬如你用遥控器控制电视上的按键，需要通过上下左右这样的操作来定位指示器，而触摸屏直接就可以通过手指点击内容进行操作。这是完全不同的概念。
综上所述，我们能知道，手势的三个要素：简洁、易用、直观。
所以我们通过一些常见的手势行为，就可以在产品界面上很轻松的完成任务。
常见的手势行为：
当然，我们经常也会遇到一些背离手势交互的产品设计，虽然也是点击、拖动等等，但操作起来总是不那么顺心。这里面有一个关键点就是，手势直观性。
有数据表明，苹果的 3D Touch 使用率非常低，就是因为直观性太差，用户不知道通过这个操作能带来什么结果，且使用它需要长按，经常会同时呼出「卸载」，那么效率也就会降低。久而久之，用户就不去使用了。
正面例子如下图，滑动与文案结合。
这样一看，用户马上就能知道这个操作行为如何触发，紧接着就产生行动，然后会反馈结果。
这也是手势交互的核心：触发，行动，反馈。
对比 3D Touch，触发没有提示，行动后时常有两种反馈结果，相比起来就不那么友好了。
除了上面聊的这些，手势交互还能从另一方面来提升效率，就是拇指操作区域。
我们都知道，现在手机屏幕越来越大，甚至比最早屏幕大了一倍以上。但是很多设计师并没有转换思维，跟进这个趋势的变化。
这里给大家普及一个知识：大部分人误以为，手指在屏幕上的热区是永恒不变的，但其实手指热区会根据设备的变大而缩小。因为手掌支撑设备的重心靠后走了，所以拇指操控屏幕的范围也就变小了。如下图。
结果是，手机屏幕变大，双手持机的用户变多，但依然还有 75％ 的用户是使用拇指来触摸屏幕的。因此，术语「拇指驱动设计」应运而生。
我们上面说到，在使用一些产品的时候，经常会遇到使用起来不顺心的情况，然后说了「手势直观性」的概念。但这里，还有个更重要的原因，就是「拇指操作区域」。
拇指操作区域被分为三块内容，分别是：易于触达，难以触达，以及介于两者之间的区域。
看下图。
所以在设计界面时，要注意界面的主要操作元素是否处于用户易于触达的范围之内。
如果你仔细观察并思考过，也会发现，iOS 的产品界面中，「返回」按钮就位于「难以触达」的区域。原因是产品人员本身也不想用户返回或退出，而是让用户聚焦于当前页面，想要返回，那就需要付出一点成本，什么成本？操作成本。
有人会说，由于 iOS 可以从手机的左边缘向右侧轻扫以获得返回效果，因此在大多数 iOS 产品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用户都知道这一点，也不是所有产品都支持这一特性的。而且手势交互的进化本来也就是为了提升用户操作的效率，所以本质上他们并不矛盾，只是相比以前，我们现在的操作更快了。并且「右滑」返回，本身在手势操作中相比「点击」也是更具操作成本的。
当了解了手势的一些意义，以及拇指操作区域对于产品设计的重要性之后，我们就可以通过一些案例来做一个全局分析了。
1. 内容在上，操作在下
许多人设计 App，但是没人研究过 App 为什么要这么设计。
比如，为什么起初要把标签栏放底下呢？关于这个问题，当初我也是问了许多人，而基本都只是说这是官方设计规范。这相当于是一句废话。
通过翻阅多方资料，我发现在工业设计领域有一条重要的基本设计原则：内容在上，操作在下。
比如在使用电脑的时候，操作在下意味着使用者在操作过程中，手指始终处于界面下方，而内容在上面，就不会出现手指遮挡内容的情况。
如下图的键盘操作提示：
基于此，相信你也知道为什么标签栏在下方了吧？
另外，为什么 iOS 设计规范建议将「编辑」按钮放置在界面右/左上方的位置呢？
界面右/左上角的位置对拇指来说显然是不友好的。然而，这样做的原因也是显而易见的：编辑功能会让数据发生变化。将这类控件放在难以操作的位置上（与左上角的返回是一个道理），就是一种防御性的设计策略，可以在一定程度上避免因为太容易产生误操作而导致的破坏性的结果。
通过这一小段之前聊过的内容，你们会发现，手势与拇指操作其实在驱动着产品设计。下面我们来聊个大的案例。
汉堡包菜单，也就是侧边栏导航，Facebook 早期测试显示侧边栏导航让用户使用率降低了一半。
我们一起来看看市面上给出的三类说法。
1. 可见性太低
默认状态下，用户是看不见侧边栏的，除非点击了侧边栏的弹出按钮。所以这种情况下，里面的功能都是用户脑袋里已知的，但很可能都想不起来。比如，现在你回想一下知乎底部 5 个标签分别是什么？或者微信右上角「+」里面有哪些功能？是不是要想一会儿，才能记起来？甚至还是想不起来。
之前我在文章里写过，用户对于功能的使用一定是「所见即所得」，而不是「心向往之」。用户只会注意自己看到的信息，而不是凭借记忆或想象来使用产品。
底部标签栏就很好的解决了汉堡包菜单的「可见性」问题。
2. 效率较低
效率较低主要在于操作频率，大家看下面两组图的对比。
第一张图，当用户从首页进入到个人信息页面，只需要两步；而第二张图，则要三步。
这里多一步看起来似乎影响不大，但如果现在要从个人信息页面到「标签 3」的话，第一张图也只需要两步，第二张图还是需要三步，当频繁去使用这样的产品后，用户的整体效率就会下降，体验也会随之降低。
3. 与平台模式冲突
大家应该知道，在 iOS 的操作页面中，通过手势可对 tab 进行左右切换，而侧边栏除了通过点击菜单按钮展开之外，也可以通过右滑弹出。这里面有什么冲突呢？看下图。
当页面聚焦在「标签 2」时，右滑除了能回到「标签 1」，同样也很可能会切出侧边导航栏。
这样的手势冲突，导致页面层级与功能导航的优先级混乱了。
无论是导航还是控件，当它们组成一个页面后，它们的操作就会有优先级。比如下面这个例子。
如果你对标红的分段控件比较熟悉，就知道，它是可通过屏幕滑动进行切换的。但是在「短信」里，它是不能通过滑动屏幕进行切换的，因为用户可对单条信息进行左滑做删除或其他操作。所以当页面操作模式存在矛盾时，我们会将子层级操作优先于父层级操作。
譬如你进入朋友圈，是不能马上回到首页的，这时候页面层级较深，产品人员要将用户聚焦于页面本身，如果直接能返回到首页，页面层级和产品架构就会混乱。
类似的例子还有很多，我这里就不继续列举了。
所以从「短信」的例子可以看出，当控件与控件之间的手势发生冲突时，我们要考虑优先级，将内容优先于页面来处理。那么回到上面的例子，分段控件与汉堡包菜单的手势发生冲突时，很明显我们要优先分段控件的操作，而禁止掉汉堡包菜单的右滑手势。结果就是，效率又低了。
4. 小结
这三类，如果你认真思考里面的关系，其实就会发现，它们的共通点就是与拇指的联系过于被动或直接被切断了。
它们的核心点就是拇指与触摸屏的关系。
如果你现在还不能深刻理解汉堡包菜单的劣势，那就想一下去看一下现在的产品，其中「我的」、「个人中心」或「更多」其实都是变相的汉堡包菜单。
在「我」这个标签页里，这一系列功能列表，无非就是另一种模式的汉堡包菜单，只是这里呈现的都是不重要的功能，并不影响用户使用这个产品。回想一下，你是不是很少，甚至从来没用过这里的某几个功能？再跟手势结合，就会发现，「我」所处区域并不是容易点击的区域，这就是它效率低下的原因了。现在能懂了么？
当传统的确认弹窗逐渐被手势操作取代，大家就应该察觉到：以往从电脑迁移到移动设备上的交互行为已逐渐被改善。
我曾经写过一篇文章，叫「取消按钮的设计逻辑」，讲了「左取消，右行进」这个原理。意思就是当我们在设计弹框的时候，用户已经习惯这样的操作路径，所以不要轻易更换位置以混淆用户的认知。再从手势的角度来说，就是右边更容易点击。
后来有同学说到，但是有些特殊场景，譬如删除资料，而产品人员不希望用户删除，于是把删除放在左边，取消放在右边。毕竟右边更容易点击，所以位置换了会比较合理。
这是错的！
我们不能通过改变用户使用产品的常识来将产品人员的想法置于用户之上。当用户已经形成「左取消，右行进」的认知之后，违反这样的一致性，去换位置是很危险的。所以出现了 action sheet，来解决一些产品关于 alert 无法解决的问题。
如图。
大家要记住的是，当页面逻辑与手势操作产生逻辑冲突时，我们不是去否定以前已经被验证且正确的内容，而是通过创新，来解决这个冲突。这就是拇指驱动设计的一种方式。
包括我们以前在移动设备上选择删除某项数据，都会弹出警告框，询问我们是否确认删除。这种方式会打断我们的操作行为，久而久之，用户已经对此交互方式习以为常，或者说免疫了，但这种弹框的方式始终被认为是不好的一种交互手段。所以侧滑删除，已经被更多产品功能用来取代没必要弹框的操作。
也许很多人没思考过底层原因，或者仅仅只是觉得其相比弹框显得更友好。其实这个行为是基于手势交互做了相应的优化，让用户操作起来更加方便。
到了这里，我再举个所有人都熟悉的例子，就是轮播图了。
轮播图最早出现于网页端，后来被大量商家模仿，以至于到移动端还备受各产品设计人员的欢迎。但其实很多人对轮播图的使用方法都是错误的。
下面来看轮播图与手势的关系。
试想：你的轮播图有 6 张 Banner，你要翻到第 4 张，无论是往前翻还是往后翻都要产生 3 次交互行为。而大部分产品的用户在界面停留的时间不会这么久，更不会看完你 Banner 的内容。以至于有研究表明，大部分产品里，除了第一张 Banner 的点击率能达到 83% 之外，其余的点击率都非常低。
有人说可以点击下面的原点指示器做跳转，这么小的点，你觉得点击它现实么？所以手势交互与轮播图是相互矛盾的一种设计方式。
所以当运营策划了一个活动，而你就往顶部的轮播图里塞，这个行为就已经注定这个活动的用户参与度是很低的了。除了个别电商产品，他们以卖广告位给商家作为盈利点，但即便如此，我相信这个广告位除了第一张图的点击量稍高外，其他图片的点击量相对于产品本身的用户体量比较而言还是很低的。这也是为什么部分产品把轮播图规则改为用户进入首页随机展示轮播图页面，而不是强制指定于显示第一张的原因。
毕竟轮播图在顶部，用户需要通过拇指长时间的在「延伸区域」进行操作，那么使用率自然就降低了。
如果你的产品有很多活动是在同时期进行的，那么我给部分产品的建议是放一个活动主题入口，如下图。（当然，这要视情况而定，并不是通用的。）
我们现在看到的搜索框基本都是放在屏幕顶部。
为什么呢？
市面上对这个问题的解释是这样的：用户已经被现在的产品训练得在界面的顶部必须看到一个搜索框，设计师打破这个常规就要承担风险。
看完这篇文章，你就已经知道，对于用户来说，由于屏幕顶部离拇指很远，处于难以触达的区域，在体验上很不好。所以搜索框成了认知上应该在顶部，但操作体验上又不应该在顶部的一个设计。
但是回想一下，会发现大多数 App 的主要内容都是位于易于触达的区域。所以当看到高德地图把搜索框移动到下面来之后，就能知道，拇指驱动设计的概念被越来越多的人认识到其重要性。
地图类产品把搜索框移到下面来的首创应用不是高德，应该是 Lyft。
瞧，拇指驱动设计，多酷~
《上瘾》里有句话：当人们不由自由地做出下一个举动时，新的习惯就会成为他们日常生活的一部分。
当手势充分地发挥了作用，辅助用户操作或实现功能，它就成了用户不可分割的一部分。
今天通过对手势意义的解读，以及拇指驱动设计的解析，再加上这些案例的拆解，我相信你能更好地理解为什么手势交互这么重要了。
交互设计师对于「触摸屏」，必须有深刻的认识，才能理解设计背后的逻辑。
如果这篇文章对你有帮助，记得点个赞，后面我好持续输出。
文章来源：优设
交互手势是用户操作的重要部分，交互手势的设计好坏非常影响用户体验，那么，交互手势的设计上对于容错性和逻辑性需要注意什么？
随着用户体验被愈发的重视，更多的 APP 偏向于使用多手势优化用户的操作流程，降低使用阻力。
点击某个确定的按钮的手势操作虽然被普遍使用并被用户熟知，但是增加更快捷的手势操作可以大大增大操作热区，提高操作效率，如下图。
然而，我们可以发现由于不同产品的设计师对于用户体验的理解不同、交互层面的思考不同，导致设计的交互手势也不同。
有时同一种操作在不同的 APP 中交互手势也是不统一的，这无疑增加了用户的学习成本和记忆成本。
举个例子，iOS 端的得到和有书的播放页的打开和关闭方式。
得到有两种方式打开和关闭页面，用户可以通过点击控件或上滑控件打开播放页，通过点击收起按钮或下拉页面关闭播放页。但是有书只有一种方式打开和关闭，用户只能通过点击控件打开播放页，通过点击返回图标关闭播放页。
这让习惯了使用得到的我去使用有书时，感觉非常别扭，每次都尝试用得到的手势去操作但是都失败了，失败后我下一次并没有记住仍然用手势去操作，如此反复令我相当沮丧。
容错性是一个很大的话题，今天我们仅仅在交互手势层面上讨论。
上面的例子中，有书并没有设计滑动手势去打开和关闭播放页，那么我以我的经验去进行的滑动滑操作在有书这个产品中就是错误的和不被产品识别的。但是这种手势又广泛存在于大量的音频播放 APP 中，如喜马拉雅、荔枝 FM 等。
一旦用户从这些 APP 迁移到了有书，本来养成的操作习惯在有书就失效了，用户就会感觉“这个 APP 很难用，用起来很不舒服”，进而可能放弃有书转而投向其他产品怀抱。
与手势设计类似，这也是为什么现在的同种类型的 APP 的信息架构设计越来越同质化，当我们打开淘宝、天猫、京东时我们有时感觉就像是同一个 APP ，本质上也是为了降低用户的迁移、记忆和学习成本。
如下图所示，提高手势的容错性对用户的意义。
很多优秀的产品考虑到了上述问题，设计了多手势来优化用户体验。
举个例子，在 APP Store 的首页点击一个推荐卡片后进入详情页，由于详情页是直接由卡片放大转场的，不同于传统的新页面右侧进入和从底部弹出。
在用户的使用习惯和认知中新页面如果从右侧进入就可以通过右滑返回，从底部弹出的话就可以下拉返回。因此，当用户面对卡片放大进入新页面这种全新交互时可能会疑惑如何返回，对此理解不同的用户可能会尝试右滑，也可能尝试下拉。
APP Store 的设计在此就有很好的容错性，用户可以通过三种方式返回首页，分别是、右滑返回、下拉返回和点击叉号返回，这不但降低了用户的记忆和学习成本，也便于不同习惯的用户使用。
针对不同的场景，手势的使用也会有不同。
一个很好的案例是知乎的评论：知乎的评论的关闭方式有三种，分别是下拉、右滑和点击叉号。
用户观看评论的场景有两种，第一种是只想看一下精选评论然后关闭，第二种是被评论吸引后一直往下看。当用户单手操作不方便点击叉号时，下拉对应的是第一种用户；右滑对应的是第二种用户，不管用户看了多少屏的评论，随时可以通过右滑关闭评论（因为用户翻阅了很多屏评论后需要下拉到第一条评论时，下拉关闭评论手势才会生效，所以第二种用户一般不使用下拉去关闭评论）。
可能你会心生疑惑：“第一种用户也可以使用右滑来关闭评论呀”，确实可以，但是对于人的操作习惯来说，上下滑动会比左右滑动更方便。
还值得讨论的是苹果自 iPhone 6s 开始加入的新交互方式 3D Touch，它允许用户通过更大力度的重按呼出情景菜单快捷地使用高频功能而不用先打开 APP，对于追求效率的用户来说简直不要更方便，但是对于不支持 3D Touch 的机型则无法使用情景菜单。
因此，在生活中我发现这样的现象，很多使用惯了3D Touch 的用户换到无 3D Touch 的苹果机型后很不习惯，总是尝试去重按但是是无效的。
其实在很多安卓手机上也有情景菜单这一功能，它巧妙地将卸载也加到了情景菜单中，因此用户只需要通过长按就可以获得所有需要的功能，而不是像苹果那样长按是卸载而重按是情景菜单。
我猜测苹果为了适配所有机型，提高容错性，从今年的发布会的 iPhone 11 和iPhone 11 pro 开始，取消了 3D Touch，转而使用 Haptic Touch （有震动反馈的长按）代替。当你长按某个图标时，感受到震动后松开，即可呼出二级菜单；如果震动后仍不松开，则进入到卸载 APP 时的抖动状态，使得之后的即使不支持 3D Touch的机型可以使用便捷的情景菜单了。
对于不支持 3D Touch 的老款机型会不会在 iOS 13 更新后也可以使用 Haptic Touch 呢？
如果一致统一的话，容错性将大大提高，我们将拭目以待。
不仅仅是 iOS ，Android 的版本 Android 10经历了 6 个测试版迭代后正式发布，我们发现交互手势是 Android 10 的一个巨大亮点。Android 10 在第三版内测系统开始引入全局手势操作，用户启用后，屏幕底部便不会再出现虚拟按键和导航栏，只会剩下一个指示条，上滑返回主屏、侧滑返回上一层的操作逻辑也均和 iOS 保持一致。
这可能标志着安卓手机一直以来在国内各家厂商的各种创新手势的割裂生态中即将重归统一，并和 iOS 保持一致。
这种妥协将大大提高在用户使用一款新安卓手机时的容错性，同时降低了今后用户在两大系统之间的迁移成本。
再谈谈逻辑性，在交互手势的层面上，如果用户能够通过某个手势进行某个操作后，按照逻辑，用户也可以通过反向的手势或对应的手势进行逆向操作。
比如，在微信首页下拉调出小程序页面，之后可以通过上拉返回首页。点击加号呼出更多操作，再次点击加号收起更多操作。
如果违背了用户的心理模型和逻辑性，用户就会感觉到混乱和不适。
这里举一个反例， Uki 的个人主页可以通过点击或下拉底部的固定底板收起更多信息，但是收起后只能通过点击展开更多个人信息而不能上拉，不符合逻辑与用户的心理模型。
如下图所示，逻辑性对用户的意义。
有的时候，我们会发现为了提高容错性，我们会牺牲一部分逻辑性。
就像上文提到的知乎关闭评论弹出框，逻辑上它是从底部弹出的，但是不但能够下拉关闭还可以右滑关闭。尽管右滑关闭有些违背用户的心理模型，但是确实给用户带来了很多操作上的便捷。
我们需要考虑的因素包括使用频率、危险程度和特殊体验。
1）考虑不同平台的硬件系统和操作系统特性
由于硬件与操作系统差异，iOS 系统支持很多手势，但是安卓系统在手势支持方面就不如 iOS 丰富。
安卓硬件设备的差异比较大，不同安卓手机厂商会在安卓系统的基础上自定义系统的手势操作，因此对于手势的支持也有较大的差异。对于这种情况我们需要熟悉相应平台的规范，做到心中有数。
2）考虑所选的手势的学习成本和记忆成本，用户是否已经被教育
如下图所示，尽管设备支持的手势数量多不胜数，但是日常使用 APP 时，大部分用户习惯使用的手势很少，比如单击、双击、滑动、上拉、下拉、双指扩张和收缩等。除此之外的手势教育成本和学习成本很高。
一般比较通用的功能是没有必要在此处创新的，但是如果一些特殊的操作确实需要加入时，我们就需要考虑下面的问题。
a. 如果没有教育成熟，考虑加入教学或搭配简易的操作方式
对于我们需要加入的手势操作当前用户并未被教育成熟时，我们需要考虑加入手势教学，具体的手势教学类型下一部分会详细讨论。
然而，大部分情况下用户的记忆是短期的，教学内容可能会被快速遗忘，下次用户使用 APP 时仍然不会使用特殊手势。此时我们应该将一些比较难以记忆的手势操作搭配一个简单的手势操作。
比如 QQ 阅读的下拉拟物绳灯切换夜间模式的手势操作设计，其考虑到了有些用户在现实生活中并未见过拟物绳灯，并不知道是要进行下拉才能触发操作。因此，QQ 阅读贴心地搭配了一个简单的点击操作，用户通过点击绳灯也可以切换夜间模式，如下图。
b. 考虑所选手势是否可能导致冲突和误操作，如果导致了，考虑如何避免和折中
最常见的手势冲突情况就是 APP 的手势与操作系统的全局手势冲突。
解决方案有两个，一是避免设计与全局手势一致的手势操作，例如 iOS 的在屏幕边缘右滑返回、全面屏机型的底部上滑退出应用等全局手势操作；二是仍然设计与全局手势冲突的操作，但是将全局手势部分禁用或以其他的方式区分开。
如下图有书播放页的案例，由于进度条滑动控件过于靠左，导致使用 iOS 全局右滑返回手势时有时会产生误操作，即本来想要右滑返回却不小心滑动了进度条。
这种情况下我们可以标注一个右滑手势禁用区域给开发工程师说明情况，将此情况避免掉即可。
误操作指的是，我们设计的手势操作与 APP 内的其他操作或系统全局手势操作接近导致用户触发了非预期的操作。比如 iOS 端的知乎被吐槽的一个右滑返回手势操作，经过研究发现，由于 iOS 端的知乎在浏览回答的页面设计的右滑返回的热区过大，导致用户上滑浏览的时候如果手指的滑动角度变化幅度过大一不小心就触发了右滑返回，再次进入回答后又需要翻页很久才能找到之前离开的地方，很影响体验。
我觉得知乎可以减少热区，将热区调整为 iOS 全局的右滑返回区域即可，如下图所示。
当然，产品设计需要平衡与取舍，如果减少了热区是否会影响其他用户的体验还需要考虑和调研，两者并无绝对的对错
当新手势无法直接让用户感知时，我们需要加入一些手势教学帮助用户快速上手使用。
1）手势教学方式
a. 浮层和动画引导使用静态或动态的手势图片或气泡示例告诉用户使用哪种手势进行操作
相比于静态，动态比静态更为直观和易学。
b. 内容隐喻通过微妙的视觉线索暗示用户此处可以通过某种手势进行操作
由于教学内容难免具有干扰性，对于高级用户来说是不必要的，但是对于初级用户又是必要的，因此以这种内容暗示的方式使教学极为轻量化，在低干扰的情况下使得用户学习了手势操作。
如下图，哔哩哔哩在打开第一篇文章时会平移显示下一篇文章的框架，暗示用户可以通过左右滑动切换文章。
再比如陌陌在打开点点功能时，会在用户进入页面的时候播放一个动画，暗示有很多卡片叠加在了一起，用户可以通过滑动切换卡片。
2）教学的出现时机
a. 操作前当产品中设计了不容易感知的新手势，在用户操作前，通过教学让用户了解和学习新的手势。
b. 错误操作后对于一些与用户的心理模型和习惯不一致的手势，提前预测用户可能输入的错误手势，在用户错误操作后进行提示，规范用户的操作方式。
如下图，由于知乎旧版本是通过左右滑动切换回答的，新版本调整为上下滑动后，需要纠正用户使用习惯。因此，当用户仍然使用左右滑动时，会出现浮层提示用户正确的手势进行教学。
以上是日常思考和总结，有不恰当之处欢迎指出。希望本文在大家进行手势设计的过程中能够帮助做出合理的决策。
文章来源：人人都是产品经理
蓝蓝设计的小编 http://www.lanlanwork.com