跳到主要内容

Sérein — 健康类移动应用

健康类移动应用

一款用于习惯追踪与引导式呼吸的移动应用。以单一 React Native 代码库覆盖 iOS、Android 与 Web——在每个平台上都精致而原生的体验。

2026-07
  • 移动开发
  • 应用设计
  • 艺术指导
React NativeExpoTypeScriptReanimated
Sérein — 健康类移动应用 预览
  1. 01

    单一代码库 → iOS、Android 与 Web(演示)

  2. 02

    引导流程、本地个人资料,以及自定义习惯创建(图标 + 颜色)

  3. 03

    各平台原生 UI:iOS 上的 SF Symbols、触觉反馈、离线可用

背景

Sérein 是一款概念性移动应用,用于展示与我的 Web 项目不同的能力:原生跨平台开发。目标是打造一款安静、极简的健康应用,让人每天都想回来。

演示在浏览器中打开,置于一个手机外框内呈现:它确实是一款移动应用,而非网站。

目标

  • 证明对移动端标杆技术栈 React Native / Expo 的掌握。
  • 交付在每个平台上都原生的体验,而非最小公分母。
  • 超越原型:一款真正可用的应用,具备持久状态与完整流程。

方案

四个如同每日仪式般设计的界面:

  • 今天 — 当天的习惯、进度环、进行中的连续记录(streak),以及一个用于创建习惯的悬浮按钮。
  • 创建习惯 — 一个模态面板,含图标选择(有序网格)、颜色选择实时预览:绝不千篇一律。
  • 呼吸 — 一段带动画的心脏相干练习(5 秒 / 5 秒),由轻微的触觉反馈把控节奏。
  • 进度与个人资料 — 最近 7 天的网格、最佳连续记录,以及在引导流程中即创建的可自定义个人资料(名字、头像)。

因平台而异的原生体验

  • iOSSF Symbols 图标、Liquid Glass 标签栏、Taptic Engine。
  • Android — Material 图标、原生振动。
  • 所有平台 — 精致的排版、微动画(Reanimated),以及完全离线运行:数据留在设备上,没有服务器。

技术栈

React Native + Expo(expo-router)、Reanimated 动画、AsyncStorage 本地存储、部署在 Vercel 上的静态 Web 导出。一套代码库,三个目标平台。

TalkDoc