【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?

用户头像
北京/UI设计师/95天前/369浏览
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?
   医疗资源紧缺的社会问题短期内难以消除,AI+ 医疗的长期价值本质上解决的还是
医疗资源供大于求的资源效率分配问题
。尤其是医疗资源稀缺的三四线,数据显示下沉市场用户可以通过 AI 对话
低成本、低门槛、强专业
的获取医疗资源。
   蚂蚁阿福在 AI+ 医疗健康领域异军突起,离不阿里健康和支付宝的强大生态链,阿福深度链接第三方权威医疗机构和真人医师专业背书,端到端构建了
“医疗咨询-挂号治疗-健康管理”
的全链路场景闭环,完成AI的角色定位从
“对话工具”到“健康助理管家”
的身份跃迁。
   
大家可以从这个视频中了解蚂蚁阿福的产品定位和基本功能:
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
   本文从界面信息架构以及交互视觉表现上,进行设计思考解析,
   聚焦以下4个重点:
  • 阿福如何通过UI设计降低用户的使用门槛?
  • 阿福如何让用户相信并接受 AI 医生看诊的?
  • 锦上添花的交互、视觉、动效设计亮点
  • 学习阿福,提升UI设计的精致感
一. 阿福如何通过UI设计降低用户的使用门槛?
1.1 对话式的交互形式
   蚂蚁阿福的整体呈现形式是 GPT 的对话式,一问一答的自然沟通,区别于传统的功能入口大杂烩。
对话式交互的优势在于从传统的“寻找功能”转向为“表达需求”,用自然语言进行交互操作。
   任务流在对话中完成,避免了频繁跳出应用。传统的金刚区、菜单栏、banner、搜索框都会被AI对话所取代。对话即交互,对话即搜索,对话即触发。
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1MDA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
对话即交互 对话即搜索
收藏
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1MjQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
对话流任务
收藏
1.2 图文引导
   通过图文结合的直观教育,对于低熟悉读的用户起到了很好的引导作用。
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1MDQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
图文引导
收藏
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1MDg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
图文引导
收藏
1.3 隐私安全保护
   采集敏感信息时,明确信息源、解析步骤、专业背书、给予用户极强的确定感,展现了极佳的同理心,在每一个关键交互节点都给予了实时反馈。这种设计降低了交互阻力,实现了隐私安全与操作效率的平衡。
(1)拍摄前——建立心智
   提供“无痕拍摄”入口,提示皮肤、私密部位等适用场景,打消用户顾虑
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1MTI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
拍摄前
收藏
(2)拍摄中——持续反馈
   通过取景器、状态栏用户不可能忽略的地方时刻告知用户"正被保护"的状态
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1MTY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
拍摄中
收藏
(3)拍摄后——问后即焚
   对用户上传的照片进行隐私处理,并告知本次对话不会保存,以及情景切换的视觉隐喻
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1MjA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
拍摄后
收藏
1.4 无障碍长辈模式
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE0NzY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
长辈模式
收藏
二. 阿福如何让用户相信并接受 AI 医生看诊的?
   医疗是一个极具专业门槛、容错率极低的领域,用户本质上就对 AI 存在天然的信任隔阂,在 AI+ 医疗领域的表现尤为突出,AI 的一场误诊就足以导致用户的信任崩塌。且 AI+ 医疗的事故责任归属模糊,更加深了用户的不信任感。
   AI+ 医疗最难跨越的一步就是如何让用户对AI结果产生信赖感?
   我们来看看阿福是怎么做的——阿福的核心表现不是让 AI 拟人化,而是
让虚拟的 AI 回归“人本位”
,建立真人IP。强化AI与真实物理世界中的权威三甲医院、资深专家教授的深度链接,促使用户将这份信任投射到AI,
信任AI的本质,是信任“人”
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1Mjg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
对外宣传
收藏
2.1 真人权威背书
   通过展示“本人授权”、“专属知识“与“医生验证”的实名制认证,建立起虚拟与现实的强链接。
   在对话回复结果中,突出可量化的数据分析,让真人背书的权威性得以增强。
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1MzI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
真人权威背书
收藏
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1MzY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
真人权威背书
收藏
2.2 用户习惯培养
初次进入:侧重"认知与背书",视觉重心引导主要引导用户去“了解AI智能体”;
再次使用:侧重"关系与连接",展示"我的关注&最近使用",将临时的咨询关系转化为长期的医患信任,培养用户的使用习惯。
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1NDA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
用户习惯培养
收藏
2.3 打破次元壁的沟通
   在视觉上模拟用户熟悉“拨打电话”的界面,加上医生本人的声音极大地增强了亲近感,大大削弱了“人机对话”的机械感。
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1NDQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
破次元沟通
收藏
2.4 细分问诊场景
   问诊场景明确,术业有专攻,一个 AI 智能体就是一个就诊专科,限定用户心智,避免话题跑偏无目的的发散提问
补充一个小知识:
AI 智能体和传统对话式AI有什么区别?
AI 智能体(AI Agent)是一种能够自主感知环境、做出决策并执行任务的AI系统。AI智能体具有明确的目标导向,能够调用多种工具和服务来完成复杂任务。
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1NjA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
细分问诊场景
收藏
   这种产品架构落地的本质还是阿里链接真实世界的强大资源整合能力,以及市场和用户对品牌实力的认可度。从营销角度来看,阿福选择国民级资深主持人何炅作为品牌代言人也十分契合蚂蚁阿福的品牌形象——资深、专业、健康。
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1NDg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
IP形象
收藏
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzMxNTI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
IP形象植入
收藏
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE0ODA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
阿福品牌代言人何炅
收藏
三. 锦上添花的交互、视觉、动效设计亮点
3.1 备受行业好评的时光机卡片交互设计
   做过落地项目的设计师应该都深有感触,不是UI设计师没有想法,只会“抄”,而是在交付周期紧张、人力不足、视觉规范限制、实用性价值不高等种种因素下,扼杀掉很多UI设计创意。
就当前落地效果而言,蚂蚁阿福团队对于设计体验还是十分重视且愿意投入的。
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
3.2 润物细无声的心灵疗愈翻卡动效设计
   自然流动的光感动效和心灵疗愈的主题不谋而合,给人一种平静放松的惬意感,像瑜伽静坐后被午后的阳光撒得暖洋洋的。
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1NjQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
光感卡片
收藏
3.3 chips 推荐的交互设计
   在AI对话爆炸式增长的年代,蚂蚁阿福作为一个集成大体量功能的智能体,在功能的可触达性和曝光度上对设计师是一个重要的考验。
   作者在平时设计落地中,就经常面临产品经理为了曝光功能提升使用率,希望将大部分功能都一股脑堆积在一级页面,这不仅和设计师追求的页面简洁有所冲突,更重要的是:功能层级浅了,但大大增加了用户的决策成本和选择困难。
   蚂蚁阿福首页的 chips 支持了20+功能入口,在交互细节上做的很吸引作者的一点是:用户滑动到尽头时,会自动拉起更多菜单的面板,将全量的功能入口展现给用户,这种操作既提升了曝光率又不打扰,很巧妙,值得借鉴。
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
四. 学习阿福,提升UI设计的精致感
   阿福在平衡视觉精致感、信息饱和度上做得很出色,是值得视觉设计师学习借鉴的。设计精致度的提升的关键,就在于把细节做透,作者总结了几个比较突出的视觉特点:
4.1 背景做质感
   在空旷背景上做柔光弥散渐变、或叠加实景图片以及动图轮播都能有效提升页面质感
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE0ODQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
背景质感
收藏
4.2 信息层次标签化、破形、延展
   我们来对比下蚂蚁阿福和北医三院的医师信息界面,就可以明显感知设计精致度的不同。
(两个软件的产品定位完全不同,在此仅针对UI设计分析,无绝对的优劣之分,每个界面都是当前项目投入下的相对优解)
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE0ODg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
信息层次(对比北医三院小程序)
收藏
4.3 通透悬浮卡片
   试着给普通的卡片加上不均匀的渐变,边缘高光、纹理、折角、体积感,都能提升精致度。
   大家可以对比看下豆包的AI回复结果和阿福的回复结果的呈现形式,豆包纯文字图片平铺排版看着非常理工类,缺乏阿福的精细感。再对比看下输入框和 chips ,加上边缘高光和通透质感后,整体的精致度都有所提升,且页面层级感也增强了。
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE0OTI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
通透悬浮(对比豆包)
收藏
4.4 风格统一的图标
   医疗分科类的图标在设计上较为考验图标的抽象能力,需要将具体的身体器官抽象为表意性较强的图形语言。
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1NTY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
风格统一的图标
收藏
4.5 数据可视化呈现
【蚂蚁阿福APP解析】出色的AI+医疗对话式UI设计怎么做?(图ZMTU0MzE1Njg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
数据可视化(对比豆包)
收藏
3
举报
|
2
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
高级表盘系列UI源文件
新能源APP应用UIKit
科技医疗透明柜UI界面设计
抽象液态渐变UI背景模版
手表表盘UI系列
【新年UI图标】影音icon
【新年UI图标】游戏/娱乐icon
【新年UI图标】珠宝icon
新拟态风格 UI设计组件库
UI 登录界面设计模板包
拟物风质感写实UI卡片合集源文件
【新年UI图标】优惠券icon
钱包ui模板
【新年UI图标】汽车icon
【新年UI图标】银行卡icon
Security Camera UI kit
UI应用平面图标
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
3D卡通UI界面图标可爱插画免扣素
UI通用设计素材1
我的钱包-UI界面设计-app
盲盒APP UI设计
【新年UI图标】30个图标
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册