全部案例
Apricot App(友杏)

Apricot App(友杏)

Apricot AI用户健康管理App

业务逻辑 / 用户体验 / 界面设计 2025

设计命题:把日常关心,连接到有准备的就诊

我把健康管理看作一段由日常记录、预约和信息回看组成的体验。一次测试之后,用户还可能想找医师、准备资料,或看看上次问诊留下了什么。Apricot App 的设计围绕这些不同的使用时刻展开。

Apricot App(友杏)是 Apricot AI 面向用户(病人)的工具,连接预约问诊、九型体质测试、每日自测,以及接收问诊病历药方。2025 年,我围绕这些任务进行业务逻辑、用户体验与界面设计。

用户任务:同一个人,在不同阶段需要不同的帮助

我按首次探索、准备就诊和持续回访来理解同一个人的不同需要。前者需要亲近感,中间阶段需要清楚的安排,回访则需要熟悉的位置与记录。首页作为共同起点,可以容纳不同的使用节奏。

任务场景用户想完成什么可能的理解阻力设计回应
初次了解看懂产品能提供什么,再决定是否测试体质术语陌生,不清楚投入后能获得什么首页四个任务入口,体质介绍与专属形象预告
准备就诊找到医师、确定时间、提前说明情况诊所与医师选择交织,不确定预约是否完成搜索与最近沟通入口、时段选择、预约详情、在线预诊
持续回访查看历史问诊信息,继续日常记录内容、测试与医生记录混在一起,难以判断来源体质专属内容、每日自测、按医师与时间组织的病历

我把“现在想做什么”放在入口层,把“当前进展如何”放在详情层。首页先给方向,预约和病历再展开具体内容。这样做,也是为了让轻量浏览与明确任务在同一套界面中自然共处。

体验结构:两条路径,在首页相遇

日常使用可以从认识体质进入,也可以直接开始每日自测;就诊则从预约入口独立开始。我用两条路径组织这些任务,让用户根据当前需要选择起点,无需为了预约先完成一整套自测。

  1. 了解状态从首页选择体质相关内容,判断是否开始测试
  2. 表达感受通过问答与影像描述当前状态
  3. 阅读反馈查看自测文本,回溯自己的输入
  4. 再次回来在首页查看专属内容,进入下一次记录
  1. 寻找医师搜索诊所或医师,也可从最近沟通继续
  2. 确认安排选择日期与时段,核对预约详情
  3. 准备信息补充主诉、相关经历与可选照片
  4. 回看记录就诊后查看医生审核的病历与医嘱

两条路径对我来说也是两种内容节奏:日常内容可以轻一些,预约信息则更集中。它们通过共同的导航、卡片和按钮样式保持联系,让用户从浏览进入具体操作时,仍然觉得熟悉。

初次使用:先给一个具体的开始理由

我用形象轮廓和“解锁”入口,为首次进入建立一个具体的期待。四个常用功能仍然集中在首屏,下面再展开内容。页面既能直接开始任务,也给想先了解产品的人留一点探索空间。

人物形象是这组设计里比较有温度的一部分。我希望它帮助用户记住体质分类,也让第一次打开产品时的感受更轻松。专业说明与行动入口则保持独立层级,亲近感和清楚的表达可以同时存在。

首页 / 用任务入口建立方向感

首页 / 用任务入口建立方向感

我把九型测试、每日自测、预约和病历集中在首屏,再向下安排角色和文章。功能区更紧凑,内容区更舒展,角色预告成为两者之间的视觉连接,让页面同时拥有明确方向与一点探索感。

体质介绍 / 在行动前补足理解

体质介绍 / 在行动前补足理解

我用分类示意与大图建立第一印象,简短介绍跟随其后,底部按钮承接开始动作。图形负责让抽象分类更容易接近,文字负责补充理解,整体保持轻柔的阅读节奏。

专属页面 / 让完成之后有去处

专属页面 / 让完成之后有去处

我让角色、名称和相关工具共同构成专属页面。角色是第一眼的识别点,信息卡片则把内容逐层展开。这里的设计目标,是让完成测试之后的页面有自己的性格,同时与首页保持关联。

  • 状态延续我让首次进入与完成测试后的页面共享主要位置,用内容变化表达使用阶段。
  • 视觉分工角色承担识别与情绪,标题说明主题,功能入口承接下一步。

每日自测:把输入负担拆开,把反馈依据留下

用户未必能一次准确表达自己的感受。我将问答、影像采集与结果阅读分开组织:问答使用固定选项降低表达门槛,拍摄页提供构图指引,结果页保留输入记录,便于回看。

  1. 回答问题用频率选项表达感受,进度提示建立过程预期
  2. 采集影像在独立拍摄界面中对齐示意,集中完成一个动作
  3. 回看输入阅读结果时仍能找到问答记录,保留核对线索
问答 / 用进度和固定选项减轻判断负担

问答 / 用进度和固定选项减轻判断负担

我让顶部进度、固定频率选项和底部“下一步”形成一条清楚的阅读线。每道题沿用相近的控件尺度和位置,内容变化时,操作方式仍然熟悉。交谈辅助入口也保持在相同的视觉语境中。

拍摄 / 把说明放在动作发生的位置

拍摄 / 把说明放在动作发生的位置

我将姿势说明与轮廓示意放进取景区域,让图形指引贴近动作发生的位置。相册与翻转入口保持次级强度,拍摄动作成为视觉中心。页面在这一刻只需要集中完成一件事。

结果 / 给出结构,也给出可回溯的依据

结果 / 给出结构,也给出可回溯的依据

我用“现状—问题—结论”的标题结构组织结果,下面保留输入记录供回看。这里讨论的是长内容的排版方式:先给阅读入口,再展开段落,用稳定的卡片边距与文字层级承接信息。自测内容与医生记录保留各自的来源身份。

  • 输入的节奏我把问答和影像采集分成独立步骤,让每一屏聚焦相对明确的动作。
  • 反馈的层级我用摘要、分组与记录组织结果阅读,同时区分自测内容和医生记录的来源。

预约选择:让新用户找得到,让复诊用户走得短

我保留搜索、诊所与医师切换、地区选择和最近沟通几种入口,因为寻找医疗服务的起点并不相同。有人先知道地点,有人先知道医师,也有人只是想延续上一次联系。我希望这些路径在同一个列表框架里自然展开。

我将预约理解为“找谁、去哪、何时”三组信息。医师主页先建立人物与地点的联系,日期和时段再通过独立页面展开。每一步的视觉重点更集中,整体又沿用一致的控件和选中态。

预约入口 / 从已有关系或新的搜索开始

预约入口 / 从已有关系或新的搜索开始

我把“最近沟通”放在新的搜索与列表之前,让已有联系和重新寻找都有入口。地区、地址与人物信息共同建立识别线索,卡片之间保持相近的密度,方便连续浏览。

医师主页 / 把人物与就诊地点关联起来

医师主页 / 把人物与就诊地点关联起来

我让医师信息、坐诊分馆和预约服务在同一页形成关联。人物区建立识别,地点区展开具体安排,底部电话与线上预约形成主次清楚的操作组。

时间选择 / 把可选状态放到同一张日历里

时间选择 / 把可选状态放到同一张日历里

我用日历、时段和选中状态组织时间选择。日期和时段分别占据清楚的区域,再由一致的强调色连接当前选择,让整个过程有逐步展开的节奏。

  • 选择层级我用相近的选中样式连接日期与时段,让逐步选择保持熟悉。
  • 信息位置医师、分馆和预约时间是这段体验的主要线索,我希望它们在页面中形成清楚的组合。

诊前交接:预约成功之后,体验还没有结束

我让预约成功页同时承接两件事:确认已有安排,以及介绍在线预诊。成功提示先建立结束感,预约摘要提供具体信息,预诊入口再开启下一段准备。通过位置和视觉强度,让这几个层次自然接续。

  1. 预约已确认先呈现时间、地点与就诊人,消除是否成功的疑问
  2. 补充就诊资料说明填写价值与可选项,允许在就诊前继续准备
  3. 形成预诊报告把主诉、相关经历和照片整理为可核对的信息
  4. 进入线下沟通帮助医生了解情况,接诊时继续核对与补充

我把预诊看作一次信息整理:用户通过表单表达情况,报告再把这些输入组织成便于阅读的资料。表单与报告因此可以有不同密度,但沿用相同的标题和分组逻辑。

成功状态 / 确认安排,再引导准备

成功状态 / 确认安排,再引导准备

我把成功提示放在页面开头,下面紧接预约、分馆与医生信息,再提供在线预诊入口。确认信息先被看见,后续准备拥有独立位置,页面因此有明确的结束与接续。

预诊表单 / 先确认对象,再表达诉求

预诊表单 / 先确认对象,再表达诉求

我先安排就诊人与预约资料,再展开主诉、相关经历和可选照片。标签与输入区沿统一基线排列,可选提示贴近字段。长表单通过分组和距离形成层级,而不是依赖更多装饰。

预诊报告 / 从输入框转换为沟通材料

预诊报告 / 从输入框转换为沟通材料

我把表单输入转换成基础资料、诉求和图片几个阅读组。报告不再强调控件边界,而是用标题、段落和留白组织内容,让填写与阅读两种状态有不同的节奏。

持续回访:让日常内容和医生记录各有位置

完成一次预约并不足以让用户持续回来。首页需要一个轻量的回访入口,病历则要在真正需要时容易找到。我用专属内容延续首页体验,再以独立病历列表承载需要核对来源的医生记录。

回访首页 / 用状态延续上一次体验

回访首页 / 用状态延续上一次体验

我让回访时的体质角色出现在熟悉的位置,再连接专属内容和工具。位置不变、内容延续,使首页能够回应不同的使用阶段,也让角色成为持续的识别点。

病历列表 / 用人和时间帮助找回记录

病历列表 / 用人和时间帮助找回记录

我用医师、机构与时间组成记录单元,头像和姓名提供快速识别,文字沿统一列展开。不同长度的信息共享相近的行距,让多条记录放在一起仍然容易扫读。

病历详情 / 把结论、医嘱和责任来源区分开

病历详情 / 把结论、医嘱和责任来源区分开

我将结果、医嘱与医生信息放进不同信息面,用标题和间距区分内容。相比日常内容页,这里更强调安静的阅读感,以及记录来源与时间的清楚位置。

  • 内容连续性我让首页保留熟悉的回访位置,让病历页承担更集中的历史阅读。
  • 来源表达自测、预诊资料与医生记录共享视觉语言,同时通过标题和身份信息建立各自的语境。

视觉与交互:让亲近感服务于清晰度

我让青绿色贯穿主操作、选中态和关键入口,紫色更多出现在体质角色与专属内容中,暖色作为辅助。这种分工让操作与个性化内容各有辨识度,又能在一套轻柔的界面中相处。

  • 操作层我用相近的颜色、位置和动词建立按钮之间的联系,让下一步容易找到。
  • 内容层角色、头像和插画提供识别点,正文通过短段落与分组展开。
  • 状态层选中、预约与审核等信息由文字和样式共同表达,让颜色承担辅助作用。

对我来说,设计系统还包括内容的写法。时间、名称、占位内容和报告标题采用相近的表达方式,会让组件组合起来更自然。这些细节和圆角、字号、间距一样,都值得在交付时认真整理。

回看设计:让亲近感与清楚的层级共存

这组页面让我一直在做两种尺度之间的取舍:角色与插画可以更有情绪,预约与记录则需要更稳定的信息秩序。我希望视觉变化围绕内容展开,而不是每到一个模块就换一种设计语言。

设计层次我的处理思路希望形成的感受
主要入口图标、名称和固定位置共同建立识别打开后有清楚的方向
角色与内容用专属形象、配色和内容摘要延续状态日常使用有亲近感
选择与表单控件一致、相关字段成组、主操作突出逐步填写有稳定节奏
报告与记录摘要先行,正文分组,身份与时间相邻长内容也有阅读起点
跨页面细节统一文字层级、边距与状态表达切换任务时依然熟悉

我比较看重的,是这几种感受能不能同时成立:轻松开始,清楚操作,安静阅读。它们不需要完全一样的版式,但需要共享一套足够稳定的视觉基础。