宠物助手 —— 微信小程序界面设计与原型开发
WeChat Mini Program · UI/UX Design
宠物助手 —— 微信小程序界面设计与原型开发
这是一次从零开始的微信小程序设计作业，围绕宠物健康管理与宠物主人社区两条主线，完成了从信息架构梳理、交互原型设计到前端代码实现的全流程。
一、选题与设计定位
宠物饲养者每天需要记录喂食、体重、健康状况、拍摄日常照片，同时希望和其他宠物主人分享生活、交流经验。现有工具要么过于专业（兽医向），要么太社交（纯照片流），缺乏一个以宠物为中心、数据与温度并重的记录工具。
因此产品定位为：宠物健康日记 + 轻社区，核心价值主张是「记录每一天，陪伴每一步」。
目标用户
18–30 岁养猫 / 狗 / 龟 / 鸟的年轻人，习惯用手机记录生活、偶尔分享朋友圈。
核心痛点
宠物数据分散记在备忘录里，想分享时借搜索找不到适合的宠物主。
设计原则
低学习成本（三步完成每日打卡）；视觉温暖（暖黄色调）；数据可视（折线图一眼看趋势）。
技术选型
微信小程序原生框架；ECharts 图表；LocalStorage 本地数据；纯前端模型，无需接入后端 API。
二、信息架构与页面设计
整体采用三 Tab 结构：宠物主页、社区广场、我的中心，逻辑分层清晰，降低认知负担。
🐾 宠物 Tab（核心）
宠物档案 + 每周日历；今日体重 / 健康状况 / 饮食推荐 / 今日照片；ECharts 折线图历史趋势。
💬 社区 Tab
话题广场、推荐信息流、图文帖子；支持发布图文、点赞、收藏、评论互动。
👤 我的 Tab
用户头像、成就徽章展示；我的发布、收藏、通知管理入口。
📋 子页面
每日打卡（record）、帖子详情（postDetail）、发布帖子（publishPost）、我的收藏（myCollection）。
主色调选用 #ffcb01 暖黄色，搭配白色卡片背景，营造温暖活泼的宠物氛围，同时保证信息层级清晰。
三、界面演示
以下为小程序主要页面的实际运行截图，涵盖宠物主页、数据图表、每日打卡和社区模块：
宠物主页 · 初始状态
宠物主页 · 已记录状态
体重趋势 · ECharts 折线图
每日打卡 · 体重 + 健康 + 照片
社区广场 · 话题 + 推荐信息流
帖子详情 · 点赞 + 收藏 + 评论
四、核心功能实现
1. 宠物档案管理
使用本地存储方案管理多宠物信息，支持猫 / 狗 / 龟 / 鸟四种类型。新增宠物通过 Modal 弹窗录入，切换宠物实时更新主页全部数据。
2. 每日打卡
打卡页面支持录入体重数值、选择 / 添加健康状态标签、拍摄或上传当日照片。数据实时回写主页当日状态，并持久化到 LocalStorage 供图表读取。打卡完成后展示鼓励卡片动效，增强使用仪式感。
3. ECharts 体重折线图
引入 ECharts 微信小程序适配版，在 Canvas 上绘制近两周体重变化曲线。针对小程序 Canvas 与 H5 API 差异使用 ec-canvas 组件封装渲染逻辑，并做了 DPR 适配，避免高分屏模糊问题。
4. 社区模块
社区采用 UI 组件化思路，帖子列表、话题标签、用户头像均为独立组件，Mock 数据支撑原型演示，整体架构预留了接入后端 API 的扩展空间。
五、遇到的难点与收获
整个开发过程中，碰到过不少平台特有的坑，也积累了一些调试经验：
- 主色调：暖黄 #ffcb01 在白底卡片和黄色按钮上表现良好，但在图表线条上需要降低明度以保证识别度。
- 本地存储：LocalStorage 容量有限，图片采用相对路径引用 + 降分辨率方案，避免超出存储上限。
- Base64 限制：小程序不允许 Data URI 直接显示，拍摄的照片需先写入临时路径再通过 Base64 存储显示。
- 页面通信：打卡页到主页的数据回传使用 getCurrentPages() 栈访问父页面 setData，实现跨页面状态同步。
六、项目总结
ECharts 适配难点
解决 Canvas 与 H5 API 差异，使用 ec-canvas 组件；DPR 适配避免 Canvas 渲染模糊，确保高分屏图表清晰度。
组件通信方案
打卡数据通过 getCurrentPages() 回写父页面 setData，实现实时刷新，避免重新加载页面。
日期选择器
自定义 picker-view 多列联动，处理月份天数差异（大小月 / 闰年），确保日期选择逻辑正确。
设计与工程平衡
从交互稿到代码的还原过程中，深刻体会视觉效果与性能约束之间的权衡——微信小程序的限制倒逼出更精简的方案。