CASE STUDY / 04
近视防控多角色系统多模块小程序线上线下服务
近视无忧已上线MYOPIA CARE PRODUCT PLATFORM
近视无忧包含 C 端商城、B 端商户、AI 自习室和设备折旧换新四组小程序。项目分阶段上线，服务家庭用户、线下门店和渠道商户，涵盖产品购买、会员管理、到店训练、商户经营和设备换新。
- 我的角色
- 唯一 UI 设计师负责交互、UI 与开发走查参与各阶段上线验收后续项目增加产品梳理工作
- 项目时间
- 近视无忧首版：2024.06—08设备折旧换新：2024.11AI 自习室：2025.05
- 已交付结果
- C 端商城与会员上线B 端商户小程序上线AI 自习室用户端与商户端上线设备折旧换新小程序上线
- 核心能力
- C 端商城、会员与家庭成员管理B 端商户认证、会员与收益管理到店训练与设备折旧评估流程
01 / Problem
多类业务，多个角色。
商品、会员、到店训练和商户经营分布在不同小程序中，每个角色需要不同的首页和操作路径。
商品与服务关联
商品、服务包、会员和家庭成员相互关联，购买者也不一定是实际使用者。
任务各不相同
家庭用户关注购买和训练，商户与渠道更关心会员、订单和收益。
分阶段增加
四组小程序先后上线，基础组件、状态和操作习惯需要保持一致。
02 / Consumer
C 端：购买产品，管理家庭会员。
服务包按适用人群、周期和权益展示。下单时选择实际使用的家庭成员，区分付款人与使用者。
会员服务包护眼产品商城家庭成员订单与续费积分与押金
03 / Merchant
B 端：经营商品、会员与收益。
商户端围绕认证、商品、会员、订单、团队和结算安排首页入口，方便处理日常经营任务。
商户认证商品库存会员邀请佣金结算收益提现
04 / AI Study Room
AI 自习室：连接线上购买与到店训练。
用户购买体验卡或月卡后前往附近门店训练；商户端用于管理门店、设备、客户、服务和收益。“AI 自习室”是产品名称，不涉及 AI 诊断或治疗功能。
05 / Device Trade-in
设备折旧换新：分步完成评估。
用户依次填写设备信息、检查使用状态、上传照片并查看预估价格，再提交服务商确认。
- 01设备选择品牌与型号
- 02信息识别SN 码与购买时间
- 03状态评估外观、屏幕与功能
- 04图片上传补充设备照片
- 05估价提交预估范围与服务商确认
Design Highlights
代表性设计
跨产品保持一致
沿用颜色、卡片、状态、按钮和账户信息等基础规则。
按角色安排入口
家庭用户、门店和渠道商户各自看到常用任务。
说清服务与权益
明确展示服务包、周期、押金、保险和续费信息。
补齐产品梳理
后续没有产品经理，我负责整理需求、流程和页面。
07 / Reflection
复盘：更早建立统一规范。
首版完成时，团队还不知道后面会增加其他小程序，因此没有提前搭建设计系统。
从第二个小程序开始，就应该整理共用组件和状态。
先整理共用部分。组件、状态和账户信息可以更早统一。
再处理业务差异。每组小程序保留适合自身角色和任务的页面结构。