导读｜从个性化护肤流程、AI成分分析到皮肤日记追踪，构建"记录-执行-反馈"的护肤行为闭环。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

GlowPath 并没有把自己限制为一款简单的护肤品清单或定时提醒工具，而是试图建立一个覆盖个性化护肤流程构建、日常习惯追踪、皮肤状态变化监测与产品成分智能解析的个人护肤操作系统。

· 核心痛点解决：针对用户（特别是护肤新手和敏感肌人群）面临的"不知道用什么产品"、"记不住护肤步骤"、"看不到皮肤改善效果"等痛点，App 提出了"Make self-care simple, personal, and easy to stick with"的服务理念。

· AI 赋能：AI 不仅仅是后台的成分识别工具，更是前台的"护肤顾问"。它被安排在产品详情页的"AI Ingredients Analysis"（AI成分分析）、护肤流程的个性化推荐以及皮肤日记的智能标签归类等关键决策点，将复杂的化妆品化学成分转化为用户可理解的护肤语言。

· 核心价值：通过"Build a consistent skincare routine, track daily habits, and understand how your skin changes over time"的设计愿景，解决了用户在护肤过程中缺乏系统性和持续性的痛点，让护肤从"凭感觉随便涂"变为"有计划、可追踪、能看到效果"的科学护理。

二、信息架构：把功能转译为用户的护肤工作顺序

信息架构围绕"今天该做什么—正在做得怎样—下一步如何调整"展开，打破了传统护肤App仅按产品分类的静态目录结构。

· 首页层级：首页以当日问候（"Hi, Maria, Day 2"）、日历打卡区、皮肤状态自评（"How is your skin today?"）、UV指数提醒和早/晚护肤流程为优先层级；底部导航栏（Acne、Home、History、+、Routine、Progress）将核心功能组织为可快速进入的任务模块；长期数据则沉淀到Diary History进度看板。这样的分层既照顾即时行动，也保留专业用户对趋势和细节的需求。

· 流程层（Routine）：Routine 页面采用"Morning | Evening"双阶段切换器，将护肤流程按时间场景拆分。每个步骤（Face Cleanser、Toner、Serum、Daily Cream、SPF）以编号列表呈现，支持自定义提醒时间（"Everyday 8:00"）和重复周期设置。这种设计将复杂的护肤知识转译为可执行的每日任务清单。

· 资产层（Products）：Products 模块允许用户管理所有护肤品，内置搜索功能快速定位。每个产品详情页展示适用肤质、使用方法、用户评分和AI驱动的成分分析，将"成分表"这一专业内容转化为可操作的护肤决策依据。

三、关键交互：从浏览信息走向完成任务

交互亮点是把复杂的护肤管理转译为低门槛的勾选与记录动作。

· 日常打卡流：每日打卡流程是核心交互。用户打开App后，首页直接展示当日护肤流程（Cleanser → Toner → Day Cream → SPF），通过简单的勾选完成打卡。完成度以"7/10"这样的进度指标显性化，配合"Don't forget to use SPF"等温和提醒，减少用户在高动机时刻之外进行额外配置的负担。

· 照片日记与状态标记：在Routine Check-up页面，用户不仅可以标记当天使用的产品（勾选/未勾选状态），还可以通过"Take Photo"或"Photo Library"上传皮肤照片，结合"Acne"、"Redness"、"Sensitivity"、"Texture"等皮肤状态标签，构建带有视觉证据的护肤日记。这种"照片+标签+产品"的三维记录方式，让用户能直观看到产品使用与皮肤改善之间的关联。

· 日记筛选与回溯：Diary History 页面提供了强大的筛选系统——按时间范围（Last 3/7/30 Days）、产品类别（Cleanser/Toner/SPF/Daily Cream）、已用产品等多维度过滤，帮助用户快速定位特定时间段或特定产品相关的皮肤变化记录，让数据真正服务于护肤决策。

四、视觉系统：品牌表达必须承担信息语义

GlowPath 的视觉设计在"医疗专业感"与"生活方式亲和力"之间找到了精准的平衡点。

· 色彩策略：大面积纯白背景建立洁净、通透的基调，传递护肤产品应有的"纯净"心理暗示。柔和的草绿色/薄荷绿（#a3d9a5、#95ec69、#c8e6c9）作为核心操作色，在大面积白色中保持清晰焦点，象征自然、健康与生命力。深灰/黑色用于主要文字，浅灰色用于次要信息和分割线，形成清晰的视觉层级。

· 卡片与空间：所有卡片采用大圆角矩形设计，边缘平滑柔和，避免尖锐棱角带来的生硬感。卡片内部通过充足的留白区分内容块，无复杂分割线。极轻微的弥散阴影使列表项从白色背景中轻微浮起，增加了界面的层次感和悬浮感，但不过分厚重，保持了整体的轻盈度。

· 字体与图标：标题使用无衬线字体（Sans-serif），字重对比明显（标题加粗，正文常规），显得现代且友好。图标采用线性与面性结合的风格，线条纤细流畅，配合绿色点缀，风格统一且精致。底部导航栏采用五段式布局，中间突出的"+"号引导用户进行核心操作（记录/拍照），符合拇指热区的使用习惯。

五、面向产品与设计团队的可复用价值

· 对产品经理而言：最值得借鉴的是"习惯养成闭环"设计：数据采集（皮肤照片+产品记录）并非终点，而是必须进入个性化建议生成、行为执行追踪、效果反馈展示和再次调整的完整闭环。GlowPath 通过"Day 2"这样的打卡计数器和"You're doing great — keep going"这样的正向激励文案，巧妙地将游戏化机制融入日常护肤场景，提升了用户留存率。

· 对设计团队而言：要重点维护"医疗专业感"与"生活亲和力"之间的视觉平衡。GlowPath 没有使用传统医疗App的冷蓝色调，而是选择了温暖的草绿色系，配合圆润的卡片设计和鼓励性文案，让护肤这一带有"自我关怀"属性的行为不再显得像"看病"，而是一种愉悦的日常仪式。这种色彩心理学的应用值得在健康类App设计中广泛复用。

跨行业经验复用：本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司，同时也是专业的软件界面设计公司，在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司，我们深知不同行业对界面交互的特殊要求；作为数据可视化设计公司的复杂仪表盘方案，以及高端网站设计公司的品牌级视觉呈现，这套"以用户任务为中心"的信息架构逻辑均可复用。同时，我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力，确保设计稿能够被高保真还原。

六、专业审视：仍需补齐的体验边界

现有方案的主要风险是功能密度与认知负荷的平衡问题。

· 可读性适配：虽然浅色清新风格很讨喜，但在户外强光下白色背景+浅色文字的组合可能影响可读性。建议增加自动亮度适配或提供深色模式选项，特别是在护肤场景可能发生在浴室等潮湿环境时，屏幕可视性尤为重要。

· AI 可信度：AI成分分析功能虽然亮点突出，但需要明确标注分析的置信度和数据来源。如果AI对某成分给出"有害"或"推荐"的判断，应增加"仅供参考，请咨询皮肤科医生"等非诊断性提示，避免用户过度依赖算法做出错误的护肤决策。

· 隐私安全：皮肤照片涉及高度个人隐私。用户上传的面部照片应提供本地加密存储选项，并在隐私政策中明确照片的使用范围和删除机制。同时，社交分享功能（如有）应允许用户选择是否隐藏面部识别特征。

结语：设计的最终判断标准是业务与使用价值

GlowPath 展示了AI护肤产品从"产品目录工具"走向"个性化护肤伴侣"的路径：以打卡机制建立习惯，以照片日记形成承诺，以即时反馈维持行动。真正决定产品可信度的，不是AI分析了多少成分，而是每条护肤建议是否透明、可执行、可被用户修正，以及用户是否真的能在30天后看到皮肤变得更好。

在护肤这个充满"智商税"和"幸存者偏差"的领域，一个能诚实面对数据局限、尊重用户隐私、用科学态度替代营销话术的产品，才能获得真正的长期用户信任。GlowPath 迈出了这一步，但距离"值得信赖的护肤AI伙伴"还有相当长的路要走。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

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

交互文档该怎么写，是很多 B 端设计师每天都会遇到的问题。兰亭妙微在大量 B 端项目中深刻体会到：画交互原型只是第一步，一份规范、清晰的交互文档，才是团队高效协作的关键。今天我们系统梳理交互文档的撰写方法，帮你完成一次深入的扫盲。

导读｜用清晰的预算、交易与预测体系降低企业财务决策成本。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

当下 SaaS 数字化平台赛道竞争加剧，用户体验已成为企业产品核心竞争力。兰亭妙微长期服务多业务线政企、商用后台项目，常年面临多产品线并行、历史系统迭代负担重、跨岗位协同低效、界面视觉割裂等痛点。过去项目仅满足基础功能可用，缺少统一设计标准，重复开发拉高成本，客户对操作流畅度、界面一致性的需求持续提升。

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

一、项目定位与行业现存痛点
产品简介
FocusFlow是面向软件研发全团队的文档与任务一体化协同平板Web后台，适配平板横屏触控操作，深色专业基底搭配渐变绿主视觉。产品覆盖两大核心业务：多团队任务进度管控、技术文档分支版本管理，实时推送全员任务创建、文档标注、状态流转动态，支持新建文档分支、配置权限、绑定配套文件与注释，区分前端、后端、市场、CRM多业务团队，满足研发日常迭代任务跟进、技术架构文档版本维护、跨部门协作同步全场景需求。

传统研发协同工具四大行业痛点
1. 界面浅白刺眼不适合长期编码办公：多数协同工具浅色基底，研发长时间盯屏幕易视觉疲劳，缺少专业深色模式；
2. 任务与文档版本割裂：任务进度、技术文档分支分属两套系统，无法在同一页面联动查看；
3. 平板适配体验粗糙：PC端页面直接压缩至平板，导航层级深、触控按钮过小，横屏办公效率低；
4. 团队动态分散无统一信息流：成员新建任务、修改文档、流转状态无聚合动态面板，需要逐个页面查看更新。

二、完整研发协同办公闭环
平板端单页面打通团队动态查看→任务状态跟进→文档分支管理→新建版本分支完整操作闭环
1. 左侧多级导航栏：顶层概览、联系人；任务模块区分进行中/已关闭；集成、业务商机；下方按研发团队分类（CRM、后端、前端、市场、教育站点），层级清晰一键切换业务板块；
2. 中部实时动态信息流：按时间倒序展示全员操作动态，附带人员头像、操作内容、任务状态流转标签（新建/进行中/已完成），直观掌握团队当日工作进度；
3. 右侧文档分支管理面板：罗列架构、数据库、基础设施全系列技术文档分支，标注创建时间、配套文档数量、维护人，支持选中查看详情；
4. 悬浮新建分支弹窗：完整表单配置分支名称、附件、文档上限、可访问成员、备注注释，一键创建新版本文档分支，完善版本管控流程。

三、核心页面模块设计拆解
模块1：平板横屏完整工作台总览
全深色基底，左侧固定多级侧边导航，中部动态信息流，右侧文档分支卡片，三栏布局适配平板宽屏触控
1. 顶部全局栏：产品Logo、全局搜索框、任务全部/更新分类切换、详情定位标签；
2. 左侧导航分层设计：通用总览、任务管理、集成商机、多业务研发团队分组，选中项采用渐变绿色高亮；
3. 动态流标准化卡片：成员头像+操作文案+时间戳，搭配状态渐变标签区分任务阶段，低饱和度彩色区分不同团队；
4. 文档分支圆角卡片：标题、分类、文档数量、维护人信息分层展示，选中分支绿色对勾标记；
5. 右上角悬浮触发新建分支按钮，唤起弹窗完成版本创建操作。

模块2：文档分支列表与新建弹窗
1. 列表模块：极简深色卡片排布，每条分支附带文档、描述计数标签，轻量化圆角弱化厚重感；
2. 新建分支弹窗：分区表单控件，包含附件上传、分支命名、数值下拉框、成员权限标签、多行注释输入框，底部渐变绿确认按钮与白色取消按钮形成清晰操作区分。

 模块3：任务动态单组件规范
独立拆分动态卡片组件，人物信息、操作文字、状态流转箭头可视化，状态色块采用柔和蓝、绿渐变，可全局复用统一视觉标准。

四、视觉设计体系：深灰渐变绿专业研发深色风
 1. 色彩系统
- 基底底色：纯深灰近黑深色基底，长时间办公护眼，适配研发人员昼夜编码场景；
- 品牌渐变主色：柔和青柠绿渐变，用于导航选中、主操作按钮、选中标记，作为产品核心识别色；
- 状态区分辅助色：浅蓝标记进行中任务、灰黑为新建、浅绿为已完成，多色柔和不刺眼；
- 文本色：浅灰白正文、浅灰辅助说明文字，层级区分清晰不费眼。

2. 图形与可视化规范
1. 轻量化大圆角悬浮卡片，低透明度柔和阴影，多模块同屏排布不拥挤；
2. 状态流转可视化箭头，直观展示任务从新建到进行中再到完成的完整流程；
3. 纤细线性极简导航图标，技术向简约风格，适配研发专业调性；
4. 团队区分低饱和彩色小点标签，快速识别业务归属。

3. 文字层级规范
纤细无衬线专业等宽商务字体，三层清晰信息层级：动态标题/分支名称加粗大字→操作说明、团队分类中等字→时间、计数辅助小字，平板远距离浏览也能快速识别关键信息。

五、产品商业与研发团队落地价值
1. 原生专业深色基底适配研发办公：不用手动切换模式，长时间查看代码、文档视觉负担更低；
2. 任务与文档分支同屏联动：平板单页面同步管控迭代任务与技术架构版本，减少多系统切换；
3. 专为平板横屏优化三栏布局：导航、动态、文档分区合理，触控按钮尺寸适配平板手指操作；
4. 统一聚合团队动态信息流：当日全部任务、文档更新集中展示，管理者快速掌握团队协作进度；
5. 标准化文档分支权限配置：完整表单管控版本可见人员，保障技术架构文档数据安全。

图片来自Behance

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

兰亭妙微深耕政企、能源、军工、工业数字化界面设计十六年，服务数百套后台管理、数据大屏、管控系统项目。在长期落地中我们发现，多数项目出现方案反复修改、上线体验不达预期，根源是缺少一套完整机制校验设计合理性，仅凭设计师主观经验输出方案。一套经得起业务、技术、用户三重检验的合理设计，需要贯穿需求、分析、执行、评审、验证、迭代全流程管控，本文结合团队实战经验拆解完整落地体系。

在政企、制造、金融等 B 端系统落地项目中，列表页是承载海量业务数据、批量处理单据、跳转详情的核心页面，也是企业员工每日高频操作的核心模块。兰亭妙微深耕企业后台设计多年，服务数百套管理系统后发现，大量产品存在列表层级混乱、检索逻辑低效、交互容错缺失等问题，严重拖慢业务处理效率。本文结合团队一线实战案例，完整梳理 B 端列表页设计目标、底层原则、三大列表类型、全链路交互规范，输出一套可直接复用的标准化设计方案。

深耕政企、工业制造、金融财税等 B 端系统设计多年，兰亭妙微服务过数百套企业后台产品，在项目落地中发现，表单是打通业务数据、实现系统管理价值的基础载体。很多企业后台因表单布局杂乱、信息层级模糊、填写容错机制缺失，大幅增加员工录入、修改数据的时间成本。本文结合团队大量实战案例，完整梳理 B 端表单页的底层逻辑、分级布局规范、页面落地细节与复杂表单解决方案，输出一套可直接复用的标准化设计思路。

不少刚接触 B 端设计的从业者，容易割裂业务、产品与 UI 设计，只会对着原型页面做视觉美化，无法建立完整项目思维。兰亭妙微结合渡轮票务数字化后台实战案例，完整梳理从业务梳理到上线走查的标准化 B 端设计流程，打通从商业需求到界面交付的全链路逻辑。

谁说B端医疗软件只能是枯燥的表格？

今天分享一个把严谨科技做成艺术品的案例——德祥生物全自动血型分析系统。

由兰亭妙微（蓝蓝设计）操刀，这次不仅是UI升级，更是一场关于“效率与美感”的深度重构！

亮点一：色彩心理学的应用 

摒弃传统高亮色，采用冷调蓝+浅灰背景。

目的：降低视觉噪点，缓解检验科医生长时间工作的视觉疲劳，同时保持医疗设备的严谨感。

 亮点二：信息层级重构（左-中-右）

左侧导航：功能分区明确，快速切换；

中间核心区：模拟物理卡盘形态，直观展示运行状态；

右侧数据区：关键指标（样本数、完成率）实时悬浮。

目的：符合人眼扫描习惯，缩短寻找信息的时间，提升操作效率。 

亮点三：异常状态的强提醒 

利用红/绿/蓝三色建立条件反射。

目的：无需阅读文字，余光扫过即可判断设备是“正常”、“进行中”还是“报错”，极大降低事故风险。 

设计师碎碎念： 

好的B端设计，是在克制中找平衡。 既要满足微流控技术的复杂参数展示，又要保证界面的清爽易用。 这套设计做到了“始于颜值，忠于效率”，值得所有医疗SaaS产品经理参考！

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