首页

灵感枯竭不用愁!5 个优质产品设计巧思,轻松打破创作瓶颈

清阳 交互设计及用户体验

大家好,欢迎来到兰亭妙微UI设计公司轻分享专栏!我们会持续拆解优质线上产品案例,挖掘实用的设计思路与细节,和大家一起发现日常产品里的精妙设计,汲取创作灵感。今天就分享 5 个落地性极强的产品设计巧思,帮大家走出创作瓶颈。

一、懂车帝:AI 图片识车,打造零门槛查车体验

懂车帝上线 AI 图片识车功能,用户只需拍摄或上传车辆照片,系统便能快速识别车型,并同步展示品牌、款式、车辆配置等完整信息,精准解决用户查车、识车的核心痛点。
  1. 简化操作,降低信息查询成本
     
    针对汽车爱好者、购车人群 “认车难、查配置流程繁琐” 的问题,该功能自动抓取车辆外观、车标等核心特征,一键输出完整车型资料。对比传统手动检索、参数比对的方式,大幅提升信息获取效率。
  2. 全场景适配,助力消费决策

    image.png

    无论是街头偶遇心仪车辆随手识别,还是在二手车市场核验车辆配置,AI 识车都能精准匹配信息。多场景的实用能力,为用户选车、购车提供客观参考,让车辆信息查询变得简单高效。

二、高德地图:地标打卡动效,赋予互动满满仪式感

在高德地图「足迹」的地标打卡环节,产品搭配趣味动画、手机震动双重反馈,大幅提升用户的使用体验与参与感。设计以小人持旗插地的动态画面为核心,打卡完成后弹出 “地标打卡王” 专属标语。
  1. 动效加持,强化打卡仪式感
     
    插旗动画搭配手机震动,为简单的打卡行为赋予十足仪式感。动作画面与荣誉标语自然衔接,及时给予用户正向心理反馈,让打卡成功的喜悦感更强烈。
  2. 趣味互动,打造长效记忆点

    image.png

    生动流畅的动效,让「足迹」功能深入人心。原本单纯的记录工具,转变为 “征服地图、收集地标” 的趣味互动玩法,有效激发用户主动探索、解锁更多打卡称号的意愿。

三、懂车帝:3D 看车,线上沉浸式感知实车空间

依托高精度 3D 车辆模型,懂车帝 3D 看车功能完整还原实车外观与内饰细节。为了让用户直观判断车内乘坐空间,产品还提供多款不同身高的人体模型,可精准测算车内头顶、腿部等区域的剩余空间。
  1. 突破局限,打造沉浸式看车体验

    image.png

    借助三维建模技术,用户可自由旋转、缩放车辆模型,配合流畅的交互动画与实时反馈,打破传统图文看车的单调感,营造身临其境的线上看车氛围,提升用户对车辆的认知度与信任感。
  2. 数据可视化,直观评估乘坐空间
     
    将抽象的车辆尺寸数据转化为可视化场景,借助不同身高假人模拟乘坐状态,直观展示车内空间大小。帮助用户在线上快速判断车辆空间是否适配自身需求,有效提升选车决策效率。

四、美团外卖:美食动态展示,趣味视觉拉动流量转化

美团外卖在商品列表中融入美食制作动画,动态呈现美食热气腾腾的画面,用趣味视觉效果吸引用户目光,同时助力商家引流获客。
  1. 趣味动画,延长用户浏览时长

    image.png

    用户上下滑动页面时,美食动画顺势播放,鲜活的画面缓解了用户 “选择困难、不知道吃什么” 的浏览焦虑,有效留住用户,提升页面停留时长。
  2. 双向赋能,实现流量高效转化
     
    区别于生硬的广告推送,美食动画兼顾平台推广需求与用户体验,既能帮助商家曝光产品,又能激发用户进店、下单的欲望,实现平台、商家、用户三方共赢。

五、滴滴搬家:场景化套餐设计,降低用户决策难度

滴滴搬家摒弃单纯罗列货车尺寸、展示车辆图片的传统模式,结合用户真实搬家场景设计套餐,让用户快速匹配适配车型,告别反复对比的困扰。
  1. 场景化展示,需求一目了然
     
    功能精准对标用户搬家核心需求,清晰标注不同车型可装载的物品,例如两轮车、洗衣机、三人沙发、床垫、床架等,并附上物品尺寸限制,内容直观易懂。
  2. 贴合用户认知,简化选择流程

    image.png

    产品跳出专业车型参数表述,按照单人物品、双人物品、小家庭、大家庭等生活化场景划分套餐,用户无需理解复杂车型规格,根据家庭人数、物品多少就能快速选定车型,极大降低决策门槛。

写在最后

以上案例均来自团队日常 UED 体验与总结。后续我们也会持续深度体验各类产品,挖掘更多优秀设计思路与落地案例,把实用的设计方法运用到实际工作中,打磨出更优质的用户体验。
 
希望本次分享能为大家带来启发,我们下期再见!
 
转载:优设

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

 

image.png

发红包用户不领情?看淘宝如何用“砸金蛋”让用户参与度狂飙!

清阳 交互设计及用户体验

兰亭妙微UI设计公司分享:在电商运营中,直接派发红包的模式逐渐陷入瓶颈:福利形式单一、用户领完即走,既无法沉淀用户停留时长,也难以强化频道心智。对此,淘宝秒杀团队另辟蹊径,以 **「天天砸金蛋」** 为核心玩法,将单纯的权益发放升级为沉浸式互动体验,借助游戏化设计大幅提升用户参与度与复访率。本文将完整拆解该项目的设计思路、玩法架构、视觉体系与品牌融合策略,重新定义电商权益设计的核心价值。

一、重新认知权益设计:从 “发福利” 到 “造体验”

传统电商权益以红包为主,具备结果明确、操作简单的特点,但缺陷十分突出:用户领取后立刻离开,整个过程毫无期待感与参与感,权益仅停留在 “物质奖励” 层面,无法成为连接用户、频道与消费决策的纽带。
淘宝设计团队提出全新思路:让每一次权益领取,都成为值得期待的互动过程。我们将权益隐藏在趣味玩法之中,借助 “砸金蛋” 的动作营造期待感,在揭晓奖励的瞬间放大用户的获得感。至此,冰冷的福利发放转变为有温度、有仪式感的体验,完成从 “被动领取” 到 “主动参与” 的核心转变。

二、选择 “砸金蛋”:契合用户心智的经典玩法重构

“砸金蛋” 并非新兴玩法,但其天然适配电商秒杀场景,也是团队最终选定该载体的核心原因:
  1. 低学习成本,玩法直观
     
    整套流程简化为「进入页面 — 砸开金蛋 — 揭晓奖励 — 领取权益」四步,逻辑通俗易懂,用户无需额外学习,零认知门槛即可参与。
  2. 贴合用户心智,场景共鸣
     
    该玩法自带线下商超促销的氛围感,精准匹配淘宝秒杀用户 “省钱、薅福利” 的核心诉求,天然拉近与用户的距离。

    image.png

基于这一载体,团队搭建了可无限扩展的玩法结构:以 “砸蛋” 为主线核心,页面动线围绕用户核心行为设计,保证 “进入即可砸蛋” 的流畅体验。在此基础上,叠加任务体系、蛋壳积分、道具玩法、周期活动等拓展内容,全程不打断主线交互,既固化了长期玩法心智,也实现了多元权益的整合,解决了平台权益分散、玩法杂乱的问题。

image.png

三、视觉体系:以 “变与不变” 打造长效吸引力

金蛋不仅是玩法载体,更是贯穿全场的视觉符号。团队采用 **“基础统一 + 动态创新”** 的设计原则,平衡品牌辨识度与体验新鲜感,打造可复用的超级视觉容器。

(一)不变:筑牢视觉锚点,建立用户信任

image.png

始终保留金蛋核心形态:统一的金色质感、高光效果与圆润造型。无论活动如何迭代,核心视觉符号保持稳定,让用户一眼识别 “淘宝秒杀金蛋”,快速建立熟悉感与信任感。

(二)变化:分层设计,持续激活新鲜感

团队将金蛋拆解为多层视觉结构,通过轻量化改动实现体验更新,不增加用户认知负担:
  1. 表情与动作层:传递实时情绪反馈

    image.png

    结合不同使用场景设计丰富表情与肢体动作,区分初始状态、点击互动、等待停留、完成任务等不同场景。将用户操作转化为可视化情绪,搭配「+3」「+5」等即时数值提示,实现情绪 + 数据双重正向反馈,直观强化 “操作必有回报” 的认知,激励用户持续参与。
  2. 主题服饰层:适配节日与品牌场景

    image.png

    针对元旦、春节等各大节日定制专属皮肤:元旦融合灯笼、飘雪元素,营造迎新氛围;春节搭配糖葫芦、糖画等国风元素,烘托喜庆年味。借助节日视觉放大仪式感,驱动用户从 “可参与” 转变为 “主动想参与”。
  3. 道具与动态层:丰富互动趣味

    image.png

    搭配手持道具、粒子动效、礼花特效等内容。砸开金蛋时触发气泡、液体飞溅、星光闪烁等粒子效果,强化互动的冲击力,让奖励揭晓的瞬间更有 “惊喜感”。

四、品牌融合:告别硬广,让合作自然融入体验

传统品牌合作多以静态 Logo 贴片呈现,极易被用户判定为广告,接受度极低。在「天天砸金蛋」玩法中,团队创新品牌植入模式,让品牌成为体验的一部分:
  1. 品牌皮肤定制:让品牌 “穿上金蛋外衣”

    image.png

    为合作品牌定制专属金蛋皮肤,用户在砸蛋互动中自然接触品牌形象,将 “被动接收广告” 转化为 “主动发现福利”。
  2. 动态语言适配:贴合品牌调性设计动效

    image.png

    根据品牌属性定制粒子动态:饮品品牌强化液体流动效果,高端美妆品牌突出高光质感,用动态设计替代生硬的品牌露出。
  3. 情绪绑定:让品牌关联美好体验

    image.png

    依托金蛋丰富的表情体系,将品牌与 “惊喜、开心、满足” 等正面情绪绑定。用户记住的不再只是品牌名称,而是参与玩法时的愉悦感受,大幅提升品牌记忆度。

五、核心思考:权益设计的终极目标

当权益成为电商平台拉动流量、促进转化的核心驱动力时,设计的核心绝非一味放大红包、优惠券等数字奖励。淘宝秒杀团队通过「天天砸金蛋」项目验证了一个核心结论:设计的价值,是放大权益的体验过程
我们将一颗普通的金蛋,打造成承载全品类权益、多元玩法、品牌合作的超级容器,实现了从 “单纯发放权益” 到 “趣味玩转权益” 的升级。设计不再只是功能的载体,更是用户价值的放大器。
原本 “领完即走” 的单次福利行为,被重塑为用户愿意停留、乐于互动、主动复访的长效体验。当权益被赋予温度与趣味,用户收获的就不只是一份优惠,更是一段值得回味的互动体验。
 
转载:优设

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

 

image.png

会员功能持续升级,背后是设计师的满满用心

清阳 交互设计及用户体验

兰亭妙微UI设计公司:在用户需求日益多元化的旅游市场中,会员权益的价值不仅在于提供优惠,更在于创造差异化的体验与长期归属感。本次会员权益感知升级,我们通过权益展示规则优化和场景化等方式,加强用户对会员权益的感知,让用户从预订到旅程的每个环节都能清晰感知会员权益的价值。

一、背景

当前,集团持续加大在会员权益方面的投入,旨在通过更具价值的权益体系提升用户体验。优质的会员服务不仅能增强用户粘性和忠诚度,更能有效提高权益使用率和订单转化率。此次会员体验升级,正是希望通过优化权益设计和服务体验,实现用户价值与平台效益的双赢,最终形成"投入-体验提升-效益增长"的良性循环。

二、问题洞察

通过走查线上各业务线(如机票、酒店等)的页面,我们发现了以下 2 个问题:

1. 不同业务线间:权益的展示节点和感知强度不同,缺少一致的设计原则

目前各业务线在会员权益方面的设计手段不同,在权益展示点位和感知强度上存在明显差异,缺少一致的设计原则进行规范。具体表现为:

酒店:主要通过货架展示强化会员权益感知

机票:侧重在列表页和中间页等固定位置展示

火车票:则聚焦于权益使用环节的触达

image.png

2. 单个业务线内:优势权益在流程中没有充分传达

通过对各业务线现有页面的走查,我们发现会员权益在订前、订后部分关键节点存在展示缺失的问题。虽然用户在流程中能看到权益信息,但整体感知度仍有不足。

image.png

针对上述问题,我们需要建立统一的设计原则,在保持各业务线自身特色的同时,形成协同一致的会员体验,提升用户对会员权益的整体感知效果。

三、设计优化——从"能看到"到"感知好"

本次优化主要围绕两个核心目标展开:一是建立规范的权益展示原则,二是提升用户对权益的感知度。具体将从以下几个方向着手:

1. 权益前置,强化展示

根据历史机票和酒店的项目数据,我们发现将具有明显优势的权益提前展示,能够显著增强用户的感知,并有效提升预订转化率。例如携程酒店将会员账户中的的权益与预订流程结合,将原本无早餐的劣势转化为会员可免费兑早餐的优势展示。这样的方式为我们提供了本次优化的思路——通过权益前置来强化权益,加强感知。

image.png

什么样的权益需要前置?——设定强弱权益规则

为提升会员权益展示效果,我们通过对权益内容的系统分析,将其划分为两大类别:强权益和弱权益。

强权益:指与产品线直接相关或对价格产生显著影响的权益,例如酒店业务的免费早餐服务和会员专享价格。这类权益在用户购买决策中起关键作用,能有效提升用户满意度和预订转化率,因此需要在核心预订节点进行重点展示。

弱权益:指与产品线关联度较低的权益,例如机票业务的快速安检服务。虽然这类权益不会直接影响用户的预订决策,但可作为增值服务提升用户体验,间接促进转化。

image.png

为确保权益展示的客观准确,我们也可以借助内部的权益价值计算公式,量化每项权益的实际价值,帮助我们精准评估和展示权益,为用户提供更有价值的会员体验,最终提升用户满意度和忠诚度。

2. 让权益贯穿各节点的策略

在对各业务线的线上页面进行走查时,我们注意到订前、订后部分节点常常出现权益感知缺失的情况。

为了充分提升权益的曝光,我们制定了强弱权益展示的规则,定义了在各节点展示的必要性。在预订前节点,我们优先展示与用户决策紧密相关的强权益,并在相关性较低的节点提前展示弱权益,以加深用户印象并促进转化。预定后,对收益、转化率和 CPO(客服来电率)的影响较小,需要做到尽可能强的展示。

image.png

根据以上规则,我们在实际点位进行了应用:

以火车票业务为例,我们通过优化权益展示策略,在首页新增曝光点位、强化现有页面展示效果,并完善订后权益展示,使会员权益的触达贯穿用户全流程。优化后,权益曝光率和用户感知强度有了明显的提升。

image.png

3. 更加严格的设计规范

此前制定的会员权益视觉规范,因各业务线复杂度不同,在多次迭代后逐渐出现差异,导致不同业务线之间展示不一致、单个业务线内流程不统一的问题。为此,本次优化中我们也重点明确了各类场景的标签使用规范和文案规范,全面提升展示一致性,同时加强会员身份的表达。

image.png

经过以上几点优化,上线后数据显示用户对会员权益的满意度、会员权益的使用率都有显著提升,验证了设计方案的有效性。

四、强化重要节点的感知

除了常规流程中的会员感知,我们也在思考如何进一步加深用户的印象,让用户订票时优先选择携程。

1. 出行中节点——提供好用的体验

订后的节点往往容易被忽视,以机票的快速安检权益为例,用户通常需要打开携程 App → 查找订单详情 → 定位权益入口 → 完成核销,步骤较长,导致体验打折。

新版本中,我们将出行相关的会员权益(如快速安检)直接前置至携程 App 大首页的行程卡片。用户打开 App 即可快速查看和使用权益,无需多层跳转。改版后,用户体验和权益使

image.png

用率都得到了提升。

 

2. 会员升级节点——制造惊喜感

基于 KANO 模型,我们可以将用户需求分为三类:基本型、期望型、兴奋型,在前面的改版中我们已经满足了用户的前两类需求。我们希望制造惊喜感和仪式感来满足用户的兴奋型需求。携程会员体系以“山峰”为视觉符号,不同高度代表不同等级,用户每次升级,都象征着翻越一座新的高峰。象征用户翻越山峰的升级节点正是满足用户“兴奋型需求”的关键时刻。

因此,在用户升级时,我们在携程首页增加升级弹窗强化惊喜感和仪式感。用户打开 App 即可直观感受到等级提升的成就,并快速了解新增权益。上线后带来了人均使用权益订单量、会员中心访问率等数据的提升。

image.png

结语

通过系统化的设计与持续迭代,会员权益体系能够深度释放用户价值,推动品牌的长期可持续增长。在这个过程中,我们需要确保用户在全渠道触点中获得连贯一致的体验,从而建立稳固的品牌信任,降低用户的学习与决策成本。同时,我们需要强化会员的价值感知,通过具象化的权益呈现和情感化的设计表达,让用户切实感受到专属特权与归属感,最终打造出更具黏性的用户体验闭环。

转载:优设

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

 

image.png

兰亭妙微UI设计:Neemo Project 企业AI项目管理后台全案运营价值解析

之晨 交互设计及用户体验

Neemo Project 企业AI项目管理后台全案运营价值解析

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。今天,我们来深度拆解一套企业AI项目管理后台的ui设计,从信息架构、配色策略、移动端适配到数据叙事的视觉表达,逐一解析其背后的设计决策。

一、项目基础概述

截屏2026-06-11 15.15.17.png

1.1 项目背景与核心用户痛点

Neemo Project 是搭载 AI 辅助能力的企业级项目管控后台,核心服务两类人群:企业项目管理者、跨部门协作执行团队成员。

传统项目管理工具普遍存在运营与使用痛点:

管理者视角:项目工时、任务完成率、周期进度数据分散,需要手动汇总多表格统计,无法实时全局把控项目风险与交付节点;多团队协作成员、会议、截止任务分散在不同页面,统筹效率低下;

执行团队视角:任务缺少清晰时间规划,到期提醒滞后,流程重复工作占用大量人力,缺少自动化辅助工具简化重复性工作;

界面体验痛点:多数传统管理后台布局拥挤、深色界面色彩杂乱,数据图表层级混乱,长时间办公浏览极易视觉疲劳,缺少标准化状态区分体系,任务进度难以快速识别。

本产品以「AI 自动化赋能 + 全维度数据可视化 + 轻量化任务协同」为核心设计思路,从管理层全局管控、执行层高效落地两个维度,解决企业项目协同低效、数据统计繁琐、节点管控缺失的行业痛点。

1.2 项目核心设计目标(以企业真实运营需求为核心)

全局数据直观可视化:整合工时、任务完成量、周期活跃度、团队协作信息,首页一站式呈现,管理者无需多页面跳转即可掌握项目全貌;

AI 自动化降本增效:内置 AI 辅助模块,自动简化常规流程、分析项目绩效、动态管控任务截止时间,减少人工重复操作;

标准化任务协同体系:统一任务状态标识、日历排期、会议管理、截止预警模块,跨团队成员快速看懂任务优先级与进度;

统一高端深色专业视觉体系:搭建完整组件库,深色基底搭配高区分度功能色,兼顾长时间办公护眼需求与 B 端产品专业科技感,全页面操作逻辑、视觉语言高度统一。

1.3 完整企业项目管理闭环

产品覆盖完整项目全生命周期管理:项目总览数据大盘 → AI 绩效分析辅助 → 月度日历任务排期管理 → 截止节点风险监控 → 团队协作人员管理 → 会议日程统筹 → 任务状态动态更新与自动提醒。

二、全链路企业使用体验拆解

2.1 项目总览首页:一站式全局管控大盘

页面左侧固定侧边导航栏,收纳全部一级功能入口,便于管理者随时切换模块;页面顶部为项目基础信息栏,展示总投入工时、进行中 / 已完成任务总量、协作人员头像组,配套独立 AI 助手快捷入口,一键调用智能分析功能。

页面核心区域分层排布多维度可视化图表:长条柱状图展示项目全周期每日任务活跃度,环形进度环直观呈现整体任务完成率;右侧分区独立卡片承载截止任务清单、团队会议日程两大核心模块,卡片内自带进度条清晰展示各子任务交付进度,主次信息层级分明,管理者打开页面即可快速定位风险滞后任务。

2.2 日历任务排期模块:清晰规划每日执行工作

首页下方嵌入月度日历视图,按日期纵向排布当日全部待执行任务;不同状态任务采用标准化色块区分:绿色代表已核验完成、橙色代表进行中、紫色代表待启动规划、红色代表风险逾期任务。

单条任务卡片精简展示任务名称、归属模块,鼠标悬浮可展开详情弹窗,支持快速筛选任务状态、自定义视图排序,团队成员可快速认领、查看自身负责工作,管理者可直观查看每日团队负载,合理分配工作量。

2.3 AI 绩效分析与截止管控模块:自动化降低管理成本

独立 AI 绩效分析模块自动测算流程简化效率,量化 AI 为团队节省的工作量;截止管控功能实现全自动化管理:系统自动识别变更交付节点,推送到期提醒,任务逾期时自动重新分配对接人员,无需管理者手动跟进督促。

整套状态标签组件统一规范,Active、In Progress、Validation 三类核心进度标识色彩固定,全页面通用,团队成员无需额外学习即可快速分辨任务阶段。

2.4 团队协作与会议管理模块:打通跨部门信息同步

页面右上角聚合全部项目协作人员头像,点击可快速查看成员分工、在线沟通;独立会议卡片统一记录会议主题、时间段、会议规划内容,区分「已规划 / 进行中 / 已结束」状态,自动留存会议记录,避免跨部门信息断层,减少线下同步沟通成本。

截屏2026-06-11 15.16.56.png

三、视觉与标准化组件系统:高端深色 B 端专业体验

3.1 色彩视觉体系(适配企业长时间办公场景)

基底主色:低饱和深紫深色背景,弱化屏幕强光刺激,长时间办公不易视觉疲劳,塑造科技感专业企业氛围;

数据高亮色:明黄色用于整体进度环形图、绩效重点数据,紫色作为 AI 功能、待启动任务主色,绿色代表完成 / 核验状态,橙色代表进行中任务,四色形成强区分度,快速识别数据与任务状态;

文字层级:纯白色大号数字展示核心指标,浅灰色小字承载辅助说明,高对比度保障深色界面文字清晰可读;

操作功能色:白色作为按钮、弹窗基础底色,与深色背景形成柔和对比,不刺眼。

3.2 全场景可复用标准化组件库

整套后台搭建完整统一组件体系,覆盖:侧边导航、数据柱状图、环形进度指标、任务日历卡片、截止任务卡片、会议日程卡片、任务状态标签、弹窗浮窗、AI 功能按钮、人员头像组件等全部页面基础元素。

统一组件带来双重企业使用价值:

管理 & 执行端:全页面视觉、交互逻辑统一,新入职团队成员快速上手系统,降低工具学习成本;

产品迭代端:新增项目模块、AI 功能、管理报表可直接复用现有组件,大幅缩减设计、开发人力成本,系统拓展性更强。

3.3 品牌视觉体系配套

项目配套专属点状抽象品牌 Logo,以圆点阵列构成字母 M 图形,简约几何风格和后台科技极简视觉完全统一,线上后台、宣传物料视觉语言贯通,强化企业项目管理工具专属品牌记忆点。

截屏2026-06-11 15.17.34.png

四、交互与企业管理体验核心亮点

全局信息前置设计:首页聚合工时、进度、任务、会议、协作人员全部核心数据,减少多层级页面跳转,提升管理者统筹效率;

AI 自动化全流程赋能:自动绩效分析、到期提醒、任务重分配,替代大量人工统计、跟进工作,压缩管理人力成本;

标准化色彩状态体系:任务、数据、功能通过固定色彩区分,无需阅读文字即可快速抓取核心信息;

轻量化悬浮弹窗交互:任务详情、人员信息、操作菜单均采用浮窗展示,无需新开页面打断当前工作流;

多模块分区独立卡片设计:截止任务、会议、周期数据分区隔离,信息互不干扰,逻辑清晰不杂乱。

 

 

五、项目商业落地价值

提升企业项目交付效率:全局可视化管控 + AI 自动化工具,提前识别项目滞后风险,降低延期交付概率,提升项目交付质量;

缩减企业管理人力成本:自动统计、智能提醒、任务重分配功能,减少项目专员、行政跟进、数据统计的人工工作量;

差异化市场竞争力:市面多数项目管理工具缺少内置 AI 辅助模块,深色高端可视化界面精准面向中大型企业、科技团队,形成独特产品优势;

可持续业务拓展:模块化组件架构可后续拓展多项目台账、财务工时统计、客户对接模块,满足企业长期数字化管理升级需求。

截屏2026-06-11 15.16.43.png

六、全案设计总结

双人群需求平衡设计:同时兼顾企业管理者全局数据统筹、一线执行团队轻量化任务操作两类核心诉求;

B 端深色数据界面分层设计,核心指标放大前置,辅助信息收纳至次级区域,解决海量数据阅读困难问题;

AI 功能深度融入产品全流程,用自动化设计解决企业重复性管理工作痛点;

全组件化界面搭建,统一视觉与交互标准,兼顾团队使用流畅度与产品长期迭代拓展能力。

图片来自Behance

 

 

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

 

image.png

 

兰亭妙微UI设计:线上医疗问诊预约 App 全案用户体验价值解析

之晨 交互设计及用户体验

线上医疗问诊预约 App 全案用户体验价值解析

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。今天,我们来深度拆解一套线上医疗问诊预约 App 的ui设计,从信息架构、配色策略、移动端适配到数据叙事的视觉表达,逐一解析其背后的设计决策。

截屏2026-06-11 15.12.11.png

一、项目基础概述

1.1 项目背景与核心用户痛点

本项目是一站式线上医生预约诊疗 App,核心覆盖两类使用人群:有问诊、复诊需求的普通就医用户、多科室私立诊所 / 综合医疗机构运营方。

传统线下就医与老旧医疗预约产品存在多重体验短板:

用户端:挂号流程繁琐,科室查找复杂,医生资质、出诊时间、收费标准信息分散,预约操作步骤冗长;无法直观查看患者真实评价,难以快速匹配适配自身需求的医师;

机构运营端:多科室数据分散,预约、改期、取消流程依赖人工客服,人力成本高,缺少统一的患者管理与线上获客渠道;

界面体验:多数医疗软件色调沉闷、信息堆砌,页面层级混乱,中老年用户操作门槛高,缺乏安全感与专业舒适感。

本产品以「简化全流程预约、透明化医疗信息、轻量化多科室管理」为核心设计思路,从患者就医体验、机构运营效率两大维度解决行业现存痛点。

1.2 项目核心设计目标(以用户真实需求为核心)

截屏2026-06-11 15.11.53.png

降低用户就医操作门槛:科室分类直观,预约链路极简,全年龄段用户均可独立完成挂号;

医疗信息透明化:集中展示医师从业年限、接诊人数、收费、出诊时段、真实患者评价,帮助用户快速决策;

优化机构运营效率:线上自助改期、取消预约,减少客服接待压力,打通多科室统一管理后台;

统一专业温和的视觉体系:医疗向低饱和蓝为主色调,搭建标准化组件库,全页面视觉、操作逻辑连贯,塑造安心可靠的医疗品牌感知。

1.3 完整用户使用闭环

产品覆盖完整就医线上流程:科室快速筛选 / 搜索 → 医师列表浏览对比 → 医师详情资质查看与评价查阅 → 选择就诊日期时段 → 一键完成预约 → 预约单管理、线上改期取消、就诊后评价反馈。

截屏2026-06-11 15.11.42.png

二、全链路用户使用体验拆解

2.1 首页科室筛选页:快速定位就诊需求

页面顶部设置全局搜索框,支持医生、病症、科室关键词检索;下方以统一图标色块分区展示全科室入口,心内科、牙科、妇科、心理科等八大常见科室一目了然,无需多层菜单查找。

下方医师推荐卡片集中展示核心信息:医师姓名、所属医院科室、综合评分、每日出诊时段,底部放置醒目黑色预约按钮,用户无需进入详情页即可快速发起挂号,大幅缩短操作路径。同时支持收藏心仪医师,方便后续复诊快速查找。

2.2 医师详情页:完整透明展示医疗信息

点击医师卡片跳转详情页,分层陈列全部决策所需信息:

基础资质:从业年限、累计接诊患者数量、每小时诊疗费用;

就诊预约模块:下拉选择就诊月份、具体日期,多时段分时选择框清晰区分可预约档期;

患者真实评价板块:拆分接诊沟通、院内环境两大评价维度,星级直观展示医师服务水平。

全部信息分区清晰,主次分明,用户无需反复翻页即可完整了解医师情况,减少决策顾虑。

2.3 预约与订单管理页:自助化降低人工成本

预约成功后生成专属就诊订单卡片,清晰标注就诊医师、时间、地址;支持用户线上自主更改就诊时间、取消预约,全部操作无需联系客服。

订单配套核对清单,区分线上问诊、线下到院诊疗两类服务,就诊前自动留存预约凭证,方便到院核验,同时减少机构前台核对工作量。

2.4 就诊评价页面:完善双向反馈体系

就诊结束后用户可提交多维度星级评价,分别针对医师沟通服务、医院环境两大板块打分,评价数据实时同步至医师主页,为后续患者提供真实参考,同时帮助机构优化服务短板。

三、视觉与组件系统:塑造专业安心的医疗氛围

3.1 色彩视觉体系(适配医疗行业信任感需求)

主色调:干净柔和的深海蓝,医疗行业通用信任色,低饱和度不刺眼,弱化就医焦虑感;

基底色:纯白 + 浅灰页面底色,弱化视觉压迫,长时间浏览无疲劳感;

功能区分色:纯黑色作为主行动按钮(预约、提交),高对比度突出核心操作;浅灰用于次要标签、辅助文字;红色爱心作为收藏标识,轻微点缀提升页面活力。

3.2 标准化可复用组件库

整套 App 统一标准化组件,覆盖科室图标按钮、医师信息卡片、星级评分模块、日期时段选择器、评价表单、底部操作按钮等全部基础元素。

统一组件带来双重用户价值:

患者端:全页面操作样式、交互逻辑一致,老人、新手无需反复学习页面操作;

机构运营 & 迭代端:新增科室、活动页面可直接复用组件,大幅降低开发与设计成本,系统扩展性更强。

 

四、交互与用户体验核心亮点

需求前置筛选:首页直接展示全科室入口 + 热门医师推荐,用户打开 App 即可完成核心操作,减少跳转层级;

信息分层减法:医师卡片只保留关键决策信息,详细资质、评价收纳至详情页,首页不堆砌冗余文字;

全自助预约管理:支持自主改期、取消预约,减少机构人工客服压力,提升用户自主操作便捷度;

透明化评价体系:多维度星级评价直观展示医师服务水平,消除用户线上挂号信息不对称的顾虑;

极简预约链路:从选科室到完成挂号仅 3 步核心操作,无多余弹窗、表单拦截。

截屏2026-06-11 15.10.59.png

五、项目商业落地价值

提升患者留存与转化:简化挂号流程、信息透明化,降低用户就医决策成本,提升线上预约转化率,为医疗机构拓宽线上获客渠道;

降低机构运营人力成本:线上自助改期、取消、评价全流程自动化,大幅减少客服、前台接待工作量;

打造差异化线上医疗品牌:温和简约专业的视觉风格,区别于市面上杂乱繁杂的医疗 App,塑造安心可靠的品牌形象;

可持续业务增长:模块化系统架构支持后续拓展会员套餐、线上问诊、治疗套餐等增值业务,帮助机构提升长期营收。

 

图片来自Behance

 

 

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

 

image.png

Dorun Dorun 结伴跑步社交 App 全案体验价值解析

之晨 交互设计及用户体验

Dorun Dorun 结伴跑步社交 App 全案体验价值解析

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。今天,我们来深度拆解一套结伴跑步社交 App 的ui设计,从信息架构、配色策略、移动端适配到数据叙事的视觉表达,逐一解析其背后的设计决策。

截屏2026-06-10 18.13.26.png

一、项目基础概述

项目背景与核心用户痛点

Dorun Dorun 是一款主打「结伴慢跑、运动社交」的轻量化跑步记录 App,核心服务两类人群:日常慢跑爱好者、想要养成运动习惯却难以独自坚持的普通用户。传统运动类产品普遍存在用户体验短板:

1. 独自运动缺少陪伴与正向激励,用户极易放弃打卡,运动留存率低;

2. 运动页面数据繁杂冰冷,纯数字图表枯燥,缺少情绪共鸣;

3. 社交链路薄弱,无法实时查看好友运动状态,运动分享形式单一;

4. 界面视觉生硬严肃,长时间使用容易产生疲惫感。本项目通过「陪伴式 IP + 实时社交 + 轻量化运动记录」的设计思路,从情绪、功能、视觉三层解决用户坚持运动难、社交互动弱的核心痛点。

项目核心设计目标(以用户体验为核心)

1. 降低运动门槛:新手引导清晰易懂,操作步骤极简,零基础用户也能快速上手;

2. 打造陪伴式情绪体验:专属卡通 IP 贯穿全流程,消解独自运动的孤独感,持续给予运动激励;

3. 完善运动社交闭环:实现好友实时位置 / 运动状态查看、运动成果个性化分享、长期运动数据沉淀;

4. 统一全页面视觉语言:搭建标准化组件库,保证从引导页、运动页到个人中心,操作逻辑、视觉感受连贯统一。

完整用户使用链路

产品完整覆盖运动全生命周期:新手引导 →运动前好友状态查看→运动中轨迹实时记录→运动后个性化打卡分享→个人长期运动数据存档,形成完整的“运动—社交—复盘”闭环。

二、全链路用户使用体验拆解

新手引导页:直观传递产品核心价值

开屏三页引导完全站在用户视角,直白展示三大核心功能:结伴跑步、查看好友实时运动、打卡分享运动日常。页面搭配治愈 IP 形象,文字简短易懂,底部统一行动按钮,无多余信息干扰,用户 3 秒就能明白产品能为自己带来什么,大幅降低新用户认知成本。

截屏2026-06-10 18.14.41.png

运动前页面:社交激励唤醒运动动力

用户进入 App 首页即可实时查看全部好友运动动态:包含好友跑步距离、上次运动时间、在线状态。配套暖心唤醒通知机制:针对 3 天以上未运动的好友推送提醒,通过社交督促激发用户运动意愿,解决 “独自运动没动力” 的核心痛点。页面信息分层清晰:好友动态列表为核心区域,底部放置一键开启跑步的主按钮,用户无需多次跳转就能快速开启运动。

运动中记录页:轻量化呈现运动数据

跑步过程页面摒弃繁杂数据堆砌,只保留用户最关心的 4 项核心信息:实时距离、运动时长、配速、步频;搭配彩色渐变地图轨迹,直观展示跑步路线,视觉柔和不刺眼;全程仅保留 “暂停记录”“结束跑步” 两个核心操作按钮,避免多余功能分散用户运动注意力,适配户外跑步单手简易操作的使用场景。

截屏2026-06-10 18.14.47.png

运动后上传分享页:个性化打卡丰富社交场景

跑步结束后支持两种打卡展示形式:标准轨迹地图、自定义实景照片背景;用户可自由替换背景图,搭配运动数据生成专属运动动态,丰富分享素材,提升用户主动分享至社交平台的意愿。极简一键发布按钮,完整打通 “运动完成 - 分享互动” 的社交链路。

截屏2026-06-10 18.14.53.png

个人中心页面:可视化沉淀长期运动成果

个人主页分为两大模块:打卡相册、月度运动记录清单。打卡相册以日历图文形式留存每一次运动瞬间,月度清单清晰展示每日跑步数据,让用户直观看见长期运动收获,强化坚持运动的成就感,提升用户长期留存。

截屏2026-06-10 18.15.06.png

三、品牌 IP 与视觉体验体系:用治愈感提升用户粘性

专属陪伴式卡通 IP 形象

项目打造专属蓝色软萌球形 IP,覆盖全套情绪表情:开心奔跑、疲惫低落、加油鼓励、心动点赞等,适配 App 全部使用场景。核心设计逻辑:将冰冷的运动数据赋予情绪温度,用户运动时、懈怠时、完成目标时都有对应 IP 形象陪伴,消解独自运动的枯燥感,建立情感联结。IP 统一应用在弹窗、气泡提示、卡片、引导页,品牌记忆点极强。

截屏2026-06-10 18.14.24.png

色彩视觉体系(适配长期手机浏览)

· 主色调:柔和浅天蓝色,低饱和度不刺眼,适配长时间户外、室内看手机场景,传递轻松治愈的运动氛围;

· 辅助色:浅灰、纯白作为页面基底,深蓝色作为主操作按钮,区分主次操作;

· 状态色:火焰橙、爱心粉、星星浅黄作为情绪点缀色,仅用于 IP、标签小元素,不破坏整体干净清爽的视觉基调。

截屏2026-06-10 18.14.34.png

标准化全页面组件系统

整套 App 搭建完整可复用 UI 组件库,覆盖按钮、输入框、列表、卡片、弹窗、底部导航、标签气泡等全部基础元素。统一组件带来两大用户优势:

1. 全页面操作逻辑一致,用户切换页面无需重新适应操作方式;

2. 界面整洁统一,无杂乱视觉元素干扰,查找功能、阅读信息效率更高。

截屏2026-06-10 18.14.18.png

四、交互与用户体验核心亮点

1. 实时好友同步机制:无需主动刷新,一键查看好友当前跑步位置与进度,实现“线上结伴跑步” 的陪伴感;

2. 轻量化信息减法:运动页面只保留刚需数据,非必要功能全部收纳至次级页面,适配户外单手操作;

3. 情绪化反馈设计:所有弹窗、通知、结果页面搭配对应 IP 表情,运动完成给予正向鼓励,懈怠时给予温柔提醒;

4. 多形式分享载体:支持地图轨迹、实景照片双模式打卡,满足不同用户的社交分享喜好;

5. 数据可视化沉淀:日历相册 + 月度清单双重形式记录运动成果,直观强化用户运动成就感。

 

五、项目商业落地价值

1. 提升用户留存:依靠陪伴 IP + 社交激励双设计手段,解决运动类 App 普遍存在的 “三分钟热度” 流失问题,拉长用户使用周期;

2. 降低用户获客成本:丰富个性化打卡素材,驱动用户自发向外分享传播,实现自然流量裂变;

3. 差异化市场竞争力:市面上多数跑步软件偏向专业硬核数据,本产品主打治愈陪伴社交,精准切入普通休闲慢跑人群空白赛道;

4. 低研发迭代成本:全套标准化组件库,后续新增活动、功能页面可快速复用,降低产品迭代开发成本。

六、全案设计总结

1. 以用户情绪需求为底层逻辑,不止做运动数据工具,更打造陪伴式运动社交空间;

2. 全流程轻量化信息设计,区分运动前 / 中 / 后不同场景的用户操作需求,精准简化页面信息;

3. 专属 IP 贯穿全场景,建立独特品牌情绪记忆点,和同类运动产品形成明显视觉差异化;

标准化组件系统统一全端体验,兼顾用户使用流畅度与产品长期迭代效率。

 

图片来自Behance

 

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

 

image.png

 

兰亭妙微原创作品|大气污染可视化系统的UI进阶之路

丽洁 交互设计及用户体验

近期完成了一个颇具成就感的项目——青海师范大学大气污染可视化系统的界面视觉设计与交互设计。

项目背景:

该系统由青海师范大学委托进行重点页改版,旨在参加环保信息化领域的比赛。原系统界面功能区划分明确,但数据堆叠较为拥挤,视觉比重失衡,信息层级模糊,导致用户难以快速聚焦核心内容。

 

设计策略与优化:

1、风格定位:采用科技感设计语言,以深蓝为基底,通过背景图案增强纵深感,辅以科技感边框与线条点缀,在丰富页面层次的同时突出关键数据。

ScreenShot_2026-06-11_095920_826.png

2、信息重构:面对庞杂数据,去粗取精,提炼核心内容。通过文字颜色、粗细及高亮处理的差异化运用,强化主次层级,使用户能够以直观的方式获取信息,有效降低理解难度。

3、视觉优化:以清晰图表替代文字堆砌,适度留白营造呼吸感。关键数据浮于场景之上,形成空间层次,在有扩展性的同时提升阅读体验。

4、场景落地:完成全国页面及山西省临汾市专题页的精细化设计,涵盖治理事件、效果分析及污染浓度趋势等核心模块。

ScreenShot_2026-06-11_095931_891.png

一点感悟:

大屏设计的核心难点从来不是炫技,而是将复杂数据转化为清晰易懂的信息。界面之美,在于让用户"一眼就懂"。

 

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

 

image.png

兰亭妙微UI设计:Voltera 新能源停车充电系统UI全案深度拆解

之晨 交互设计及用户体验

Voltera 新能源停车充电系统 UI 全案深度拆解

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。今天,我们来深度拆解一套双端停车充电系统的ui设计,从信息架构、配色策略、移动端适配到数据叙事的视觉表达,逐一解析其背后的设计决策。

截屏2026-06-10 16.49.57.png

一、项目基础概述

项目背景与核心痛点

Voltera 是一套服务于新能源停车场的一体化智能管控系统,主要面向两大使用群体:停车场运营管理人员、新能源车主。

在传统模式下,双方都存在明显使用困扰:车场管理者无法直观查看车位状态、充电桩使用数据,场地利用率难以把控;新能源车主寻找空闲充电车位费时费力,充电进度、能耗情况也无法实时了解,双方使用体验都大打折扣,信息不通畅成为最大问题。

截屏2026-06-10 16.52.54.png

截屏2026-06-10 16.52.33.png

项目核心目标

1. 面向车场运营者:把繁杂的运营数据简化呈现,支持全天候实时监控、数据趋势查看、车位预约管理,让管理工作更高效;

2. 面向新能源车主:简化操作步骤,快速找到合适的充电车位,实时查看充电状态与能耗,打造便捷的用车体验;

3. 全场景视觉与体验统一:电脑管理后台、手机 App、线下广告屏保持体验一致,线上线下服务无缝衔接。

1.3 项目覆盖终端

系统支持多设备使用,包含 PC 端管理后台、苹果移动端 App、户外立式信息屏,全面适配不同场景下的使用需求。

截屏2026-06-10 16.53.02.png

 

二、全场景使用体验解析

使用流程:逻辑清晰,操作简单

整套系统根据两类人群的使用习惯,规划了专属操作流程:车主可完成登录、查找车位、在线预约、实时查看充电状态等操作;车场管理人员可查看全场车位数据、统计使用趋势、管理充电订单。

使用优势:

1. 功能分区明确:系统划分为登录首页、全场数据总览、车位筛选、充电数据查看、系统设置几大板块,功能划分清晰,上手零门槛;

2. 体验持续优化:结合大量真实用户的使用反馈反复调整流程,规避操作卡顿、查找困难等问题,适配不同年龄、操作习惯的使用者;

3. 人群需求区分:管理端侧重全场宏观数据,车主端聚焦个人用车需求,功能不冗余,每个人都能快速找到自己需要的内容。

多设备使用体验(电脑后台 + 手机 App)

1)PC 管理后台:功能全面,管理高效

电脑端专为车场管理人员打造,布局规整合理:左侧为常用功能入口,中间展示车位信息,右侧搭配全场停车场全景视图,底部呈现各类运营数据。

截屏2026-06-10 16.53.02.png

使用特点:

1. 信息主次分明:首页优先展示空闲车位、占用车位、充电车位等核心数据,再延伸至车位详情、月度 / 周度使用率等辅助信息,查看逻辑循序渐进;

2. 操作灵活便捷:支持全景地图缩放、鼠标悬停查看车位详情,还可自由切换年、周、日不同时间维度的数据,满足多样化管理需求,适配长时间办公查看的使用场景。

2)手机 App:轻量化设计,随手即用

手机屏幕空间有限,系统遵循 “核心功能优先展示” 的原则,打造极简使用体验:

1. 底部设置固定导航栏,将充电这一高频功能放在核心位置,点击即可直达;

2. 首页优先展示停车场全景与推荐车位,充电页面重点突出充电进度,能耗数据也以简易图表呈现,一目了然;

3. 全设备体验统一:手机端沿用电脑端的信息展示样式,仅精简内容,用户切换设备使用时,无需重新适应,学习成本极低。

截屏2026-06-10 16.51.32.png

视觉与标识体系:清爽直观,一眼看懂

整套界面采用简约商务风格,以易用性为核心打造视觉体验:

色彩标识

· 整体以白色、浅灰色为基底,色调柔和,长时间查看屏幕也不易产生视觉疲劳;

· 用不同颜色区分设备与车位状态:绿色代表车位空闲、充电运行正常,蓝色专属标识新能源充电桩,橙色提示使用高峰,黑色按钮标注主要操作选项,无需阅读文字,仅凭颜色就能快速判断状态;

· 品牌视觉统一:简约品牌标识贯穿所有设备,线下宣传物料也保持同款风格,整体观感整洁专业。

文字与留白

文字大小区分明确,核心数据放大展示,辅助说明文字简洁精炼;页面预留充足留白,内容排布疏密得当,不会出现信息拥挤的情况。

图形展示

系统搭配实景图片、简易图表辅助展示:用车场、车辆实拍图让场景更直观;用折线图、柱状图展示数据变化;用彩色区块区分不同车位类型,告别密密麻麻的文字描述。

 信息展示形式:分区规整,查阅高效

系统将各类信息整合为标准化展示模块,分类清晰:

1. 车位信息模块:清晰标注车位位置、步行距离、收费标准、充电标识与预约按钮,电脑端多列展示、手机端单列排布,查阅方便;

2. 数据统计模块:突出核心数据,搭配简易图表,使用率、能耗等数据直观可见;

3. 充电详情模块:整合车辆状态、充电功率、剩余时长等信息,电脑端、手机端均可灵活查看。

规整的展示形式,让信息查找更快捷,大幅提升使用效率。

数据展示:直观易懂,实时掌握

1. 重点数据放大呈现,车位占用率、充电进度、使用涨幅等核心信息第一眼就能捕捉;

2. 支持多维度数据对比,管理人员可清晰区分普通车位与充电车位的使用差异,为运营决策提供参考;

3. 悬浮提示功能:鼠标点击或悬停即可查看数据解读,不用反复跳转页面,查看数据更省心。

 

三、交互与使用亮点

1. 智能推送贴心便捷:车主打开 App,系统会自动推荐距离最近的空闲充电车位,省去手动筛选的麻烦;车场管理后台首页直接展示全场运营数据,无需层层点击查找;

2. 数据实时同步:电脑后台与手机 App 数据实时联动,车位状态、充电进度毫秒级更新,信息零延迟;

3. 操作流程极简:从找车位、预约、充电到结束订单,全程仅需几步核心操作,无多余弹窗与繁琐表单,使用流畅;

4. 线上线下体验联动:线下户外信息屏与手机 App、电脑后台使用同款视觉与内容,服务体验保持统一。

截屏2026-06-10 16.51.44.png

四、项目价值与落地思考

1. 兼顾管理与使用双重需求:一套系统同时满足车场运营的大数据管理需求,和车主轻量化的用车需求,帮助停车场降低运营成本,提升整体服务效率;

2. 用数据赋能智慧运营:系统将车位空置率、充电桩使用率等运营数据直观呈现,帮助车场管理者合理调整定价、规划充电桩布局,实现精细化运营;

3. 贴合新能源行业调性:整体风格简约大气,契合新能源汽车科技、高端的行业定位,区别于传统老旧的停车系统,提升车场整体形象。

截屏2026-06-10 16.53.47.png

五、核心体验总结

1. 多设备无缝适配:电脑、手机、线下屏体验统一,不同场景使用都顺手;

2. 数据展示通俗直观:不管是管理人员还是普通车主,都能轻松看懂各类数据;

3. 流程前置优化:结合真实使用习惯规划操作路径,从源头减少操作麻烦;

4. 精准区分人群需求:针对管理者、车主打造专属功能,各司其职,实用性拉满。

 

转载自Behance

 

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

 

image.png

 

兰亭妙微UI设计公司 蚂蚁阿福APP拆解:对话式交互如何重构就医全流程?

丽洁 交互设计及用户体验

蚂蚁阿福 APP 以 AI 医生朋友的身份重新定义健康管理,从对话式医疗入口到智能体驱动的全流程服务,这款应用正在颠覆传统医疗产品的交互逻辑。它不仅通过人格化设计降低医疗决策压力,更借助阿里生态实现从咨询到就诊的完整闭环。本文将深度解析其创新设计如何重构用户与医疗服务的连接方式。

今天向大家分享一款最近刚推出的蚂蚁旗下的 AI 健康助手——蚂蚁阿福 APP ,希望你能从这篇产品体验分析中有所收获。如果你觉得我们的文章有价值,欢迎分享给你的朋友!

蚂蚁阿福是谁?

蚂蚁阿福是蚂蚁集团推出的 AI 健康管理应用,由原 AI 健康工具 AQ 升级而来。产品愿景是成为用户的 AI 医生朋友,提供健康咨询、图片解读(支持报告、病例、处方、药盒)、个人和家庭健康档案管理,以及预约挂号、云陪诊等医疗健康服务。

蚂蚁阿福有什么设计亮点?

对话式医疗入口:用 AI 重构交互方式

当你打开蚂蚁阿福 APP的第一刻,你会发现它像 ChatGPT、DeepSeek 一样,只有一个对话框。这正是 AI-UX 的典型表现形式——把「对话」作为核心入口,弱化传统的多层级导航,让用户用一句话就能触达预约、解读报告、症状咨询等多种服务。交互形式就像与医生聊天,而不是过去在 App 里找入口、找功能。

设计亮点

  • 人格化的 AI 形象与语言:蚂蚁塑造了一个名叫阿福的卡通医生 IP 形象,降低医疗决策的心理压力,提升用户信任感。
  • 关键词即体验起点:用户无需理解产品结构,输入健康关键词即可触发服务,显著降低使用门槛。
  • 多智能体并行承载复杂场景:在传统菜单栏上方,不同智能体对应不同医疗流程,用户一次点击即可进入明确的任务流,避免对话发散。

体验思考

对话式AI交互和传统的菜单栏相比,用户的心智需要改变什么?

最近我对用“用户心智”这个知识点有了全新的理解。这得益于刚好在尝试全新交互的设计,而体验到阿福时,我尤其感同身受,因此重新思考了这个问题。

从交互方式上看,传统菜单栏要求用户预先了解功能位置和层级结构,通过”点击—浏览—选择”的路径完成任务。而对话式 AI 交互让用户从”寻找功能”转向”表达需求”,用自然语言直接描述问题,对话即交互、对话即操作。

这种转变对应着心智模型的两个层面:

  • 从空间导航到意图表达:用户不再需要在脑海中构建”这个功能在哪个菜单下”的空间地图,而是像与人对话一样说出”我想做什么”,系统来理解并执行。
  • 从记忆负担到表达负担:虽然降低了记忆功能位置的成本,但增加了准确描述需求的要求——用户需要学会如何”问对问题”。

另外,你会发现阿福的头部有点拥挤(包含用户中心、智能体、任务中心等入口)。这是因为过去在菜单栏或金刚区的高频功能都被上移了。也许这就是未来的设计趋势——”菜单栏”从下往上,把最宝贵的黄金位置留给 AI。

心智模型(Mental Model)

心智模型是用户基于过去经验形成的认知框架,决定了他们如何理解产品的运作方式。它影响用户如何理解界面、预测交互结果并做出操作决策。当产品的实际运作方式与用户的心智模型一致时,体验会更流畅;反之则会增加学习成本和认知负担。

AI 诊室:全新的互联网在线就诊

与传统 AI 对话式交互不同,阿福将医疗场景中的高频应用设计成独立智能体。用户可以在底部对话框上方和头部直接触发,比如接下来介绍的 AI 诊室。使用其他 AI 工具问诊时,体验往往缺乏仪式感。但在阿福中,点击 AI 问诊后,系统会明确提示”你已进入 AI 诊室问诊中”。接下来的流程会聚焦于你的症状,进行梳理分析,最终推荐适合的医院和医生。

另外,阿福受益于阿里健康和支付宝的强大生态,可以在 APP 内完成预约和问诊的闭环。用户只需一个 APP,就能完成从诊前咨询到在线就诊的全流程。

交互流程

  • 用户在底部打开 AI 诊室智能体,系统显示问诊中。
  • 输入病情,可以切换就诊人、上传报告等。
  • 第一轮分析:AI 判断初步症状,实时显示进度(遵循系统可见性原则,体验很好),同时生成下一轮可能输入的提示词(交互体验相当棒——点击标签就能自动跳入输入框)。
  • 第二轮分析:AI 继续确认症状(我预计系统已可预判 90% 的病情),并提供”直接出结论”按钮——用户可以选择继续补充信息,也可以直接查看专业结果。
  • 多轮分析后或点击”直接出结论”后,AI 给出最终病情判断,并提供对应解决方案、就近医院挂号和医生推荐。
  • 用户可选择去公立医院就诊或直接在线问诊。

设计亮点

  • 智能体即场景容器:AI 诊室不是聊天窗口,而是明确的”就诊空间”,天然限定用户心智,避免对话跑偏。
  • 阶段化流程强引导:从选咨询人到描述症状,再到诊疗建议,每步都有清晰状态提示,显著降低医疗决策的不确定感。
  • 任务完成感明确:通过”本次 AI 诊室咨询已结束”的节点提示,帮助用户形成心理闭环,避免无限对话。

体验思考

如果你觉得 ChatGPT、DeepSeek 这类对话式 AI 产品的交互过于简单,融入智能体设计的阿福会给你更多惊喜。智能体像一个封装了特定功能的应用,具有明确的目标导向,用 AI 服务于这个目标,而不是让用户在自然语言中”摸索路径”。换句话说,智能体就像传统的二级功能模块——用户触发后,系统会在当前场景中围绕这个需求进行交互。

正是这个流程的设计,让我发现了它的独特之处。无论是之前体验过的阿里旗下安诊儿和讯飞晓医,还是我 7 月份构思的北京协和互联网医院 AI 版本方案,都未曾想过可以通过智能体来丰富交互设计形式。

AI 智能体是什么?

AI 智能体(AI Agent)是一种能够自主感知环境、做出决策并执行任务的 AI 系统。与传统的对话式 AI 不同,智能体具有明确的目标导向,能够调用多种工具、API 和服务来完成复杂任务。

AI 找医生:融入传统交互的创新设计

AI 找医生这个智能体同样带给我很大的惊喜和启发。它成功地将传统医疗 APP 中用户已经熟悉的交互模式融入产品,同时巧妙地结合了 AI 智能对话方式,形成了一种既保留用户认知习惯又具有创新性的混合交互体验。

交互流程

  • 用户在底部打开就医服务智能体,点击AI 找医生。
  • 平台提供按科室和按疾病两种类型的检索(这一步和我们平时去医院挂号找医生的习惯完全一致)。
  • 点击科室或病种,触发 AI 对话,系统开始结合患者的病情、地区进行推荐(医生数据来源自在全国拥有 90 万医生的好大夫)。
  • 患者可以直接进入医生主页,进行在线问诊和挂号。
  • 如果对平台推荐的医生不满意,可以进入全部医生二级页面进行个性化筛选(传统的找医生形式),也可以让阿福重新为你推荐。

设计亮点

  • 融合传统交互模式:在 AI 对话框中加入传统的 TAB 组件,让用户可以切换筛选,符合用户的使用习惯。
  • 标签即意图触发器:疾病/科室标签本身就是结构化意图,点击即可触发 AI 搜索,无需多轮描述。
  • 给人留下深刻印象的视觉设计:除了交互形式的创新,视觉设计同样出色,为用户带来全新的视觉体验。

体验思考

体验完这个智能体的交互流程后,我意识到过去对对话式 AI 产品的交互和 UI 理解过于浅显。它们确实主要依靠对话交互,但随着智能体的发展,每个智能体都代表一个独立的流程、内容甚至风格。

以 AI 找医生为例:它融合了传统的 TAB 框架,让用户按科室或疾病查找;当 AI 推荐的数据不满意时,还提供”查看全部”按钮,引导用户进入二级页面进行个性化筛选。这个设计让我发现,AI 产品远比想象中丰富——它不只是简单的对话框和侧边栏。

写到这里,我突然想起另一款对话式医疗 APP——讯飞晓医。当我输入”预约挂号”时,系统只能提示我跳转至其他医疗网站完成挂号。相比之下,阿里的生态能力令人赞叹:阿福直接连接好大夫等平台,用户可以在 App 内完成从 AI 推荐、查看医生到付费问诊的全流程,无需跳出即可实现就诊闭环。

医生AI分身:让专家经验规模化服务的创新尝试

早在 2023 年参与钉钉智能体测评时,我就有过类似构思:如果将专家过往的就诊经验和知识喂养给 AI 并进行专门训练,这个智能体能否解决 80% 的诊前基础咨询?当我体验这个智能体并查询相关资料后,发现阿福的医生 AI 分身确实做得非常出色。

该模型(官方名称叫蚂蚁·安诊儿医疗大模型 AntAngelMed)基于海量医学文献和去隐私化的真实病例数据构建,具备”深度思考”能力。它可对复杂、信息不全的临床场景进行多轮推理、逻辑验证与自我纠错,助力精准诊疗。

在产品层面,AI 医生整合了语音对话、挂号、补号申请等多种功能和场景。患者可以像与真人交流一样咨询,医生则能 24 小时服务多位患者。

设计亮点

  • 专家身份具象化,建立信任起点:AI 不再是泛化的医生形象,而是明确绑定真实专家(姓名、医院、学科、头衔),让用户在对话前就建立信任预期。
  • 医学思考路径可视化,不只给结论:通过「院士团队解读 / 医学思考路径 / 文献引用」等模块,将 AI 的推理过程展示出来,降低”黑箱感”,增强专业可信度。
  • 多模态输入降低使用门槛:支持语音对话、拍照上传病历与检查报告,降低中老年用户或非专业用户的表达成本,贴合真实就医场景。

体验思考

医生 AI 智能体这一创新模式对多个行业领域具有重要的参考价值。它的核心在于:将一位拥有数十年临床经验的医疗专家所积累的专业知识、诊疗经验和实践智慧进行系统化的数据处理和标准化转换,再借助人工智能技术,使这些专业知识能够同时为成千上万的用户提供高质量的服务。

我甚至有一个大胆的设想:在未来,即便一个专家寿终正寝,只要他能把自己的知识库和经验传送给 AI,这个专家是不是就并未真正离去,而是可以继续造福我们的子孙后代?

健康小目标:自动生成健康打卡任务

「健康小目标」是一个围绕具体健康意图(如改善睡眠)展开的目标型智能体。它通过 AI 引导式问答拆解目标,自动生成可执行的日常任务,并将”制定计划—每日打卡—正向反馈”完整串联,形成持续的行为干预闭环。

体验这个功能时,我特意下载了几款健身打卡 APP,对比阿福的打卡流程与专业健身应用的差异。整体体验下来,阿福的用户体验更流畅。由于首页更聚焦、更简洁,我可以一目了然地看到所有打卡任务。

交互流程

  • 用户在底部打开健康小目标智能体。
  • 进入后开始设置自己的小目标(用户可以选择模板也可以进行自定义)。
  • 在AI 对话框完善详细资料。
  • 一键生成健康计划和打卡任务。
  • 打卡任务建立后,AI 首页会实时同步提醒。

设计亮点

  • 目标即入口,灵活自由:用户可以选择系统设置好的打卡目标,也可以从一句“我想睡得更香”去建立自己的专属目标。
  • 结构化提问,替用户完成自我诊断:以“我想睡得更香”为例,系统通过睡眠状态、入睡时长、睡前行为等问题,帮助用户把模糊感受转化为可分析变量。
  • AI 自动生成“可打卡”的微行动:不是泛泛建议,而是直接给出可执行、低负担的具体行为(如调暗灯光、热水泡脚)。
  • 打卡与 AI 强绑定:从创建、执行到反馈,始终在 AI 场景内完成,避免任务系统与对话系统割裂。
  • 即时正反馈与成长机制:打卡成功即获得“健康福气值”,通过情绪化动画与数值反馈强化成就感。

体验思考

这个智能体给了我两点启发。

第一,表单类操作(如添加就诊人、填写问卷等)可以直接在对话框中完成,无需跳转到新页面。实际体验下来,这种设计不仅高效,还能保持用户的使用连贯性。

第二,健康小目标就像常见的用户签到打卡功能,通过持续打卡增强用户活跃度。但我认为最大的亮点在于:你可以在对话框中输入想实现的目标,系统就会为你自动规划。这正是自我决定理论(Self-Determination Theory)的绝佳体现,当用户具备自主性和胜任感时,他们会感觉是在主动使用产品,而非被产品操控。

AI 拍皮肤:一体化皮肤管理流程

这还是我第一次如此细致地了解我的皮肤,因为阿福的 AI拍皮肤智能体更像一个一体化的皮肤管理工具。不仅可以拍患处、看舌苔,还可以测肤质、测毛发。很幸运,工作了这么多年,我还没有秃头的迹象,AI 给我的测评是要注意休息、少熬夜,目前毛发良好。

设计亮点

  • 多场景入口统一:拍患处、看舌苔、测肤质、测毛发等能力集中在同一入口,用户无需理解功能边界,只需选择“我想拍什么”。
  • 渐进式诊断对话:先基于图像给出初步提示,再通过关键追问(瘙痒时长、接触史)逐步收敛判断,显著降低误判焦虑。
  • 强大的图像识别能力:仅需拍摄患处照片即可完成分析,并提供专业的诊疗建议;
  • 延续性关怀设计:微交互特别出色,通过「3 天后再聊」与订阅提醒,将一次性问诊转化为持续的皮肤管理关系。

体验思考

我不得不感叹当今 AI 技术的飞速发展。当我完整体验了看舌苔、测肤质和测毛发这些功能时,虽然或许是我之前未曾留意,但还是给了我很大的震撼。AI 仅通过不同视角和角度的拍照,就能在短时间内快速评估出用户皮肤的健康状况——这本身就是科技的巨大进步。我没有去找 ChatGPT 探讨背后的技术原理,只想从一个普通用户的角度,表达我体验这些技术时的真实感受。

药管家:围绕“用药”的完整闭环服务

「药管家」围绕患者真实的用药场景,将药品识别、用药管理、用药指导、价格查询与购买行为整合为连续流程。用户从”我手上有什么药/我需要吃什么药”出发,可以自然完成从查询、添加到用药提醒,乃至购买的全链路操作。AI 在其中承担持续辅助与决策支持角色。

这个环节让我深刻感受到一个完整生态的价值——你在阿福就能实时查询药品价格、多维度对比,以及直接通过外卖配送或邮寄下单。

设计亮点

  • 完整的闭环服务:药管家并未将拍照识别、比价、用药计划、购买拆成孤立功能,而是围绕“用药”这一高频行为,构建单一连续路径,符合用户一次性完成任务的心理预期。
  • AI 深度介入但不过度干预:AI 能基于上传的药品图片与健康档案,主动识别用户意图并给出结构化用药解读,同时明确风险边界,不替代医生判断,建立可信的“辅助者”形象。
  • 用药行为的时间化与自动化:通过用药计划,将一次性的药品查询转化为持续行为管理,AI 与提醒机制共同承担“记忆负担”,降低用户出错与遗忘风险。
  • 从认知到行动的顺滑闭环:在用户确认药品信息与用法后,无缝衔接比价与购买场景,决策成本最低时提供转化能力,既提升效率,也强化平台价值。

体验思考

C 端产品的页面空间寸土寸金。当我添加了用药提醒后,我突然意识到阿福的首页其实是一个任务中心,而非传统的科普资讯推荐区。特别是与安诊儿 APP 相比,阿福的首页虽然看起来千人千面,但它能够感知、读取并提醒用户——无论是健康打卡、健康数据还是用药提醒,这个卡片区的场景拓展与应用都关联着整个产品的功能体系。

AI报告:诊断+ 诊疗闭环衔接

体验到这里时,恰好我刚带小孩去医院做了个小检查。拿到抽血报告后,我尝试将报告拍给阿福,亲身体验了 AI 报告功能。与医生相比,阿福的 AI 报告能帮助患者更系统、更完整地了解细节。医生工作繁忙,虽然经验丰富、能快速判断病情,但往往没有足够时间为患者详细解释。

AI 报告不仅为患者提供多轮对话追问,最后还会自然衔接 AI 诊室、医生解读与医院推荐,形成从”看不懂报告”到”下一步怎么做”的完整闭环。

设计亮点

  • 一键式认知降噪:通过 AI 自动结构化报告内容,将专业医学术语转译为用户可理解的结论与建议,显著降低信息理解成本。
  • 过程可感知的分析状态:扫描、脱敏、分析、整理结论以步骤化进度呈现,增强系统可见性,缓解用户等待与不确定感。
  • 分流式行动推荐:在 AI 解读后明确给出“AI 继续问诊 / 真人医生解读”两种路径,尊重不同风险偏好与决策阶段的用户。
  • 信任边界清晰:通过「仅供参考、需遵医嘱」等提示,主动声明 AI 能力边界,避免过度承诺带来的信任风险。

体验思考

我们也许真的要认真思考如何利用 AI 来帮助我们更好地生活了,比如 AI 报告这样的功能,它至少可以解决大部分患者对于专业报告的疑惑,了解 50%-70% 的基础情况。过去的互联网医院可以解决全国城市医疗资源不对等的痛点,而随着 AI 的加持,我觉得这种痛点会逐渐降低,就像 我在 AI 医生分身那个环节提到的一样,如果AI 可以把一个医生过去几十年的知识和就诊经验复刻,那么无论我们在哪个城市,都能同时享受到这个医生带给社会的价值。

总结与思考

蚂蚁阿福给了我哪些思考?

第一,传统菜单栏会逐渐消失吗?

正如我在第一部分讨论的,阿福的对话式入口给了我很多启发。看着阿福拥挤的头部,我真切地感觉到——传统菜单栏可能会在越来越多的产品场景中彻底消失。甚至连搜索栏这样的功能,都会被 AI 输入框替代。对话即交互,对话即搜索,对话即触发,让我们拭目以待。

第二,智能体驱动 AI 产品设计创新

我每天都在使用 ChatGPT,长久以来形成了一种刻板印象:对话式 AI 产品的设计平淡无聊,传统的交互和界面设计似乎不再重要,取而代之的是功能逻辑和提示词设计。但阿福的设计给了我新的启发,打破了我对对话式 AI 产品的固有认知——未来的 AI 产品可以结合智能体做出更多创新,交互界面设计依然重要。

第三,对话式 AI 产品的应用场景将越来越广

我想到了许多应用场景,特别是与医疗高度相似的政务领域,比如税务、教育等。如果这些传统行业引入对话式 AI 交互,将极大提升工作效率。试想一下,当你只需在税务 APP 中输入几个字或说一段语音就能开始办理业务,能为前台工作人员节省多少时间?在这里给自己定个小目标:2026 年设计一款政企对话式 AI 产品,探索这个领域的设计趋势。

转载:人人都是产品经理

8ad61732265770.png

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

e5891719196478.jpg

兰亭妙微分享:6000 字拆解飞书聊天窗口:为什么它不只是聊天?

丽洁 交互设计及用户体验

飞书的聊天窗口设计正重新定义企业协作的边界。通过标签页集成、多模态通讯、结构化搜索等创新功能,它将传统IM工具升级为沉浸式工作台。本文深度拆解了这款产品如何将碎片化沟通转化为高效生产力,其设计哲学值得每一位关注协作效率的产品人思考。

今天我想向大家分享我近期对飞书聊天窗口设计的体验洞察 ,希望你能从这篇产品体验分析中有所收获。如果你觉得我们的文章有价值,欢迎分享给你的朋友!

飞书是谁?

飞书是字节跳动旗下的新一代一体化协作平台,诞生于 2016 年。它将即时通讯、日历、文档、云盘、OKR、审批等功能深度整合,试图通过”All-in-One”的产品哲学重新定义企业办公的协作方式。相比传统 IM 工具,飞书更像是一个以沟通为中心的工作操作系统,致力于消除信息孤岛,让团队协作变得更加高效与流畅。

飞书的聊天窗口有什么设计亮点?

多维沉浸协作:聊天窗口下的全场景集成逻辑

飞书的聊天窗口设计彻底打破了”即时通讯工具”的传统边界。通过在会话界面顶端嵌入可自定义的标签页(Tabs),飞书将对话框重构为一个微型协作工作台。用户无需跳转页面,即可在聊天上下文中快速切换文档、云表格、网页链接或关键任务,实现从”信息流”到”任务流”的无缝融合。

设计亮点

  • 工作流的横向无缝集成:除了系统默认的“消息”、“文件”外,支持用户自由添加云文档、多维表格或第三方网页链接作为标签页。这意味着对话不再是孤立的,而是与核心生产力工具高度绑定的协同入口。
  • 高自由度的个性化配置:标签页支持自由排序与自定义命名。用户可以根据项目紧迫程度,将最重要的协同资源通过“Pin”或添加标签的方式置顶,构建符合个人直觉的操作路径。

体验思考

从接触飞书到此次深度拆解,中间大概有 3 年多时间。我算不上飞书的重度用户,但过去 1 年多,飞书已成为我负责的在线教育项目中的主要沟通工具。如果不是这次深度体验,我从未发现聊天窗口竟然支持 tab 切换查找内容,甚至可以自定义。

当我开始深度体验时,从上至下的第一个功能就给了我惊喜——它突破了我对聊天窗口的固有认知。传统的 IM 软件将沟通(聊天)与结果(文档/任务)剥离,导致用户频繁在应用间跳转。而飞书通过”标签页”将生产力资产直接”拎”到会话层。这种设计策略证明了在 B 端产品中,沟通往往基于具体目标,这就是协作的本质——减少操作跨度就是提升生产力。

体验到这里,我甚至特意打开企业微信进行对比。毕竟在国内,这两个工具是企业办公的二选一。相比飞书,企业微信的聊天窗口采用传统模式,和微信的聊天模式相差无几。

另外,这一功能设计充分体现了渐进式披露和自我决定理论这两个设计策略——不强迫普通用户接受复杂的工作台逻辑,而是将深度协作工具隐藏在轻量级的标签切换中,并充分给予用户自主性和掌控感。

知识卡片:

渐进披露(Progressive Disclosure):一种信息呈现策略,只在用户需要时才展示更复杂或高级的功能,而非一次性呈现所有信息。这种方法防止用户被过多信息淹没,减轻认知负荷,让用户能逐步学习和适应界面。

自我决定理论(SDT):人有三个基本心理需求——自主性(想自己做决定)、胜任感(觉得自己做得到)和关系感(感到被认可和接纳)。如果产品设计能满足这些需求,用户就会更愿意使用。

全维度即时触达:多模态通讯的一站式整合逻辑

飞书在聊天窗口顶端集成了覆盖全场景的通讯矩阵,将语音通话、视频会议以及运营商电话拨打深度整合在统一的交互入口下。除了文字,还支持语音、视频和电话拨打。更让人爱不释手的是,飞书的语音/视频不仅可以自由切换,还可以随时邀请其他伙伴发起多人会议,并提供屏幕共享、录制、倒计时、直播等工具——沟通体验真的非比寻常。

设计亮点

  • 多模态通话的自由无缝切换:在通话过程中,用户可根据沟通需求的变化,在语音与视频模式间一键即时切换,无需中断当前会话流。
  • 动态受邀的实时会议扩张:支持在单聊通话中随时点击“添加成员”,将点对点沟通瞬间升级为多人群组会议,极大提升了解决复杂问题的响应速度。
  • 高集成度的在线协作工具箱:音视频窗口内原生集成屏幕共享、实时录制(妙记)、倒计时、甚至直播等进阶工具,将通讯界面直接转化为生产力工作台。
  • 全渠道的触达补位体系:除了网络音视频,还支持直接拨打运营商电话,确保在网络环境不稳定或对方离线时仍能实现关键信息的物理触达。
  • 结构化的会议轨迹沉淀:通话结束后的时长、录制内容及参与成员会自动回填至聊天流中,形成完整的协作轨迹,方便后续复盘与索引。

体验思考

在深度使用飞书协作的这一年里(此前三年我都是独立工作),我才真正理解为什么会诞生飞书、企业微信这类协作软件。例如,飞书的语音通话可以直接转化为会议,完美解决了传统聊天软件如微信的痛点:第三个人加入时必须挂断并重建群聊;分享屏幕时不得不切换到腾讯会议。这种”沟通即协作”的逻辑大幅提升了工作效率,无需频繁切换沟通方式。

相比传统聊天软件,这种聊天既协作、语音既会议的模式是从”沟通媒介”到”协作场景”的跃迁。它不仅深度集成了聊天和协作场景,更通过屏幕共享、倒计时和录制功能,将稍纵即逝的语音信息转化为可搜索、可引用的数字资产。

结构化信息检索:从“大海捞针”到“精准透视”的搜索逻辑

飞书聊天窗口的搜索功能不仅是一个关键词入口,更是一个强大的结构化过滤器。它通过将混乱的聊天记录原子化地拆解为消息、云文档、文件、图片/视频、链接等五大维度,配合“来自用户”与“时间范围”的多重嵌套过滤,让用户在海量碎片化信息中实现秒级定位。这种设计将搜索从一种“试错行为”转变为了一种高度确定的“资产调取”过程。

设计亮点

  • 基于资产属性的横向维度切片:搜索界面顶部分设消息、云文档、文件、图片/视频、链接五个 Tab。这种分类符合 B 端用户“找东西”时的第一直觉——先确定类型,再检索内容。
  • 多重嵌套过滤筛选器:支持在特定分类下叠加“来自用户”和“时间”筛选。例如,可以精准搜索“上周 Beck 发给我的所有 PDF 文件”,这种多维交叉检索极大地收窄了结果集,消除了无效冗余。
  • 即时态的搜索意图反馈:在输入关键词的过程中,系统会实时渲染出高亮匹配的消息流,并同步显示发送时间与上下文片段,帮助用户在无需点开详情的情况下快速确认信息的有效性。

体验思考

在飞书的聊天窗口中,搜索并不是一个独立、泛化的全局能力,而是深度绑定在“会话”这一上下文之中。我觉得它的更像是一种从“文本检索”向“资产管理”的心智迁移。比如传统的 IM 搜索往往只针对文本,而飞书把对话中产生的每一个文档、每一条链接都定位成数字资产,于是我们可以通过不同的类型、时间、以及发送人去进行筛选。

回到产品设计层面,我觉得飞书的设计,解决了过往我们在传统 IM 搜索中的三个痛点:

  • 降低回忆成本:用户不需要记住“我当时发的是图片还是文件”,系统先帮你分好类。
  • 减少无效滚动:用结构化搜索替代时间线式翻找,避免在长会话中反复滑动。
  • 强化内容的“资产属性”:聊天记录不再是一次性消费的信息,而是可反复调用的工作素材。

无界沟通中枢:跨语言协作下的实时翻译增强逻辑

如果要推荐此次产品分析中最惊喜的功能,实时翻译无疑是我的首选。飞书的实时翻译功能彻底抹平了国际化协作中的语言鸿沟。通过在聊天设置中深度集成翻译助手,飞书不仅实现了接收消息的”自动翻译”,更创新性地推出了”边写边译”模式。这一设计将翻译从”被动查阅”升维为”主动表达”的即时增强,让跨国团队无需第三方工具,就能在 IM 窗口内完成流畅且地道的原生对话。

设计亮点

  • 双向无缝的自动化链路:支持“自动翻译”接收消息与“边写边译”输入消息,构建了一个闭环的语言补偿系统,确保信息的录入与读取均能保持在用户的母语心智下。
  • 即时态的“边写边译”微交互:在输入框上方实时渲染翻译结果,并提供“一键插入”功能。这种设计将翻译过程短路化,用户输入中文即可同步生成英文表达,极大地提升了外语沟通的信心与效率。
  • 极高自由度的展示策略控制:允许用户自定义翻译展示效果(如“仅译文”或“原文+译文”对照),满足了从“快速获取信息”到“学习地道表达”等不同维度的办公诉求。
  • 多入口、短路径的设置逻辑:翻译设置不仅深藏于后台,更直接部署在聊天窗口的“翻译助手”快捷入口中。用户可根据沟通对象的国别,实时一键切换目标语言(如英语、日语、泰语等),响应速度极快。

体验思考

体验这个功能时,我不禁思考:飞书的实时翻译能否替代 HelloTalk 这类专业语言学习软件,让我在真实工作场景中自然地学习外语?它不仅支持自动翻译和边写边译,更重要的是能消除语言障碍,提升工作效率。而且,这还是一个完全免费的功能。

发现这个功能后,假如未来我能服务国际客户,我也觉得不必胆怯。它不仅打破了”表达焦虑”,更能实际解决跨语言协作沟通的难题。

从聊天到创作:IM 窗口的富文本生产力进化

你是否遇到过这样的情况:用传统 IM 软件发送长文字时,需要添加格式,比如加粗、增加项目序号?事实上,我一直忽略了飞书的这个功能。虽然我坚持聊天应言简意赅,但在工作场景中,确实常需要编辑长段落文字。

飞书聊天窗口通过一键转化功能,将传统的单行文本输入框升维为专业的富文本编辑器。这一创新设计打破了即时通讯”碎片化表达”的局限,让用户无需跳转文档页面,就能在会话流中直接产出结构清晰、排版精美的深度内容,实现”沟通”与”创作”的无缝对接。

设计亮点

  • 输入框的形态折叠与爆发:通过输入区右侧的“全屏扩展”图标,实现从“线性输入”到“面性编辑”的平滑切换,兼顾了短平快的沟通与长篇幅的逻辑产出 。
  • 移动端原生的排版工具栏:在扩展后的编辑界面,底部集成了加粗、项目序号、图片插入、甚至文档链接引用等高频格式工具。这种设计将 PC 端的文档编辑能力微缩到了指尖,极大降低了手机端处理复杂信息的难度 。
  • 上下文感知的富文本渲染:支持在消息流中直接渲染带有标题层级、清单、甚至多维表格卡片的内容。这使得重要消息在长长的对话记录中具备极高的视觉识别度 。

体验思考

当我拆解得越细致,我发现我对飞书的印象就在一步步的改变。聊天对话框一键转化为富文本编辑器的设计,不仅规避了”长文表达必须跳转文档”的痛点,更解决了碎片化聊天导致信息混乱的问题。富文本编辑框本质上是一个”强制信息结构化”的引导工具——通过引导用户使用项目序号、加粗重点,设计师无形中帮助团队提升了信息分发效率,确保核心指令不被社交闲聊淹没。

原子化工具矩阵:将“社交对话”彻底转化为“协作中心”

飞书聊天窗口底部的工具栏是一个集成了多元化办公能力的原子化矩阵。它不仅涵盖了基础的社交元素(如表情、图片、语音),更深度嵌入了生产力组件(如任务、云文档、红包、定位等)。这一设计确保了用户在沟通的任一环节,都能即时调取对应的工具来推进工作,真正实现了“所聊即所得”的协作闭环。

设计亮点

  • 多模态消息输入的无缝切换:工具栏横向集成了表情、图片、语音、红包等高频入口,支持在文字交流中快速插入多模态内容,丰富了办公沟通的情感维度与信息载荷。
  • 生产力工具的近地化部署:将“任务(Task)”、“日历”、“Pin”等深度办公功能以原子图标形式放置于二级菜单或侧边快捷栏。这种“近地化”策略让用户无需退出聊天,即可完成任务分配与日程核对。
  • 场景化的交互降压设计:例如“语音转文字”功能在录入时提供实时反馈,以及“稍后处理(Pin/标注)”的快捷操作,有效缓解了多任务并行下的信息焦虑。

体验思考

请点击“➕”按钮,然后仔细看看飞书底部工具栏藏着多少功能。如果说传统 IM 软件的工具栏是社交驱动的,而飞书则是任务驱动的。也许在 B 端的工作场景中,聊天框不应仅仅是字符的传输带,而应成为各业务模块(如 OA、CRM、任务管理)的统一分发器。

不过虽然工具栏功能繁多,但飞书通过“常用置前、深度收纳”的排版逻辑,避免了信息过载。这种设计确保了用户在基础聊天时处于“社交心流”中,而在需要专业协作时,又能通过二级菜单快速唤起“协作心流”。

聊天即可发起会议和任务,从会话到执行无需切换

我强烈推荐大家一定要注意飞书聊天窗口底部菜单栏的日程和任务这两个功能。因为你可以在和同事的聊天中随时发起会议和任务分配。你甚至不需退出聊天窗口去会议和任务面板,就能把工作的事儿在聊天窗口完成。

飞书通过在 IM 界面深度嵌入这样的快捷功能入口,消除了传统办公软件中切换应用、同步上下文的繁琐过程,让用户在沟通的任一瞬间都能一键将“想法”转化为“行动”,构建了一个从实时对话到确定性执行的闭环。

设计亮点

  • 上下文感知的任务一键分配:通过底部工具栏的“任务”原子组件,系统支持自动带入当前聊天对象与核心内容,让用户无需重复输入即可完成任务的创建与下发。
  • 闭环式的执行状态沉淀:无论是会议结束后的“妙记”摘要,还是任务的截止提醒,都会以结构化卡片形式自动回填至对话流,确保协作痕迹可追溯、可审计。

体验思考

我觉得飞书的聊天窗口实在太能理解用户的需求了,也许这正是飞书是字节跳动内部延伸出来的产品,它的诞生就是为了帮助字节跳动提升效率,所以它能深刻洞察到如何在几秒钟内防止办公效率的流失,从而将会议与任务视为 IM 的内生能力,而不是外部插件。

体验到这里,我真正改变了自己对飞书的产品认知,它并不是社交工具,而是数字办公室。即便只是一个聊天窗口,飞书也构建了全能的任务分发器。这种系统功能之间连接的颗粒度,让人叹为观止。

极致的结构化分发:从“消息海洋”到“有序看板”的效率跃迁

飞书在聊天窗口外围构建了一套极细颗粒度的消息过滤体系。通过将混合在一起的消息流原子化地拆解为未读、标记、单聊、群组、云文档、任务等多个 Tab 标签,飞书将“阅读消息”这一行为从无序的翻找升维为精准的任务处理。这种设计极大地提升了信息检索与处理效率,确保了核心任务在海量沟通中始终处于视觉中心。

设计亮点

  • 多维度的横向标签切换(Tabs):在消息列表顶部提供了一排可滑动的分类标签,支持用户在“未读消息”与“任务/云文档消息”之间秒级切换,实现了信息类型的快速物理隔离。
  • 基于“重要性”的深度过滤(标记/Pin):将用户标记(Flag)或置顶的消息独立成 Tab。这种“收藏夹”式的设计逻辑,让长周期的关键指令不再被新产生的碎片化对话淹没。
  • 针对“人”与“事”的场景剥离:通过“单聊”与“群组”的切片,用户可以根据当下的协作意图(如:找某人沟通或跟进项目组进度)选择对应看板,有效降低了社交干扰带来的认知切换成本。
  • 资产化的协同消息汇总:将涉及“云文档协同”和“任务管理”的消息独立分发,这一设计让用户能绕过复杂的聊天上下文,直接进入文档批注或任务反馈流程。

体验思考

当我退出聊天窗口,准备结束这次产品体验的时候,我又突然发现飞书的消息列表页也藏着不少细节。如果习惯了传统 IM 软件按时间顺序堆叠消息的模式,飞书则通过 Tab 标签来标注消息的状态,甚至点击左侧筛选,还可以查看标记、@我、标签、单聊、话题等等更细的分类。

这是一种“信息熵增”的减法交互技巧和策略。随着工作时间增长,群组与好友数量会不可控地增加(即熵增),Tab 标签本质上是一套“动态降噪系统”。它允许用户通过点击特定的 Tab(如“未读”),瞬间将复杂的界面简化为仅剩待办事项的极简模式,从而缓解用户的信息焦虑、提升专注力。

总结与思考

为什么要拆解这样一个功能?

过去几年我一直在用飞书,但坦白说,在没有刻意拆解之前,我从未意识到一个聊天窗口里竟然藏着这么多“为效率而生”的设计细节,虽然它是使用频率最高、却也最容易被忽略的核心界面。

我们日常使用协作软件时,常常会沿用其他 IM 的习惯,把它当作一个“像聊天一样聊天”的地方:发消息、回消息、刷对话就结束了。直到我开始更细致地体验与对比,才发现飞书把聊天窗口做成了更接近“协作工作台”的中枢入口。沟通不再只是信息往返,而是能在对话上下文里直接完成。

无论是结构化搜索在海量消息中精准定位关键资产,还是一键发起会议、随时分配任务让“讨论”立刻落到“行动”,又或者是实时翻译让跨语言协作更顺滑,这些能力都尽可能被收拢到同一个聊天窗口里完成。也因此我相信,你在看完这次拆解后,会对飞书的使用场景与产品认知产生新的变化:原来一个聊天窗口不仅能承载沟通,还能承载协作与生产力的闭环。

飞书的聊天窗口设计对我们有什么启发?

我认为,飞书把“以场景为中心”的策略发挥到了极致:和 C 端产品不同,它真正聚焦于 B 端协作沟通场景,将用户最高频、最真实的工作场景——沟通——作为承载协作的主舞台。

于是,文档、任务、会议、搜索、翻译等能力都能在同一上下文中被自然调用,让用户沿着“正在讨论什么”这条主线,持续推进到“接下来要做什么”。这种将信息流与任务流紧密耦合的设计,显著降低了切换成本与认知负担,也让团队的协作轨迹更容易沉淀、回溯与复用。

正因如此,这个聊天窗口几乎浓缩了飞书的设计精华:既承载其“沟通即协作”的价值主张,也映射出对真实工作场景与用户需求的深刻洞察。

转载:人人都是产品经理

8ad61732265770.png

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

e5891719196478.jpg

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档