灵动感知前端交互架构

一、设计起点：一个完整的视觉体系

灵动感知是一套面向宠物户外追踪和健康监测的基于OpenHarmony的低功耗宠物感知与定位系统，覆盖了从传感器数据采集、后端处理、到客户1端展示的完整链路。App 端的定位从一开始就不是"把数据读出来显示一下"——它需要在同一块屏幕上同时承载实时体感（宠物在哪、体温多少）、历史洞察（过去 30 天的健康趋势）、设备管理（围栏、上报频率、绑定切换）、社交互动和智能家居联动。这么多信息要同时友好地呈现，意味着界面不能是一个功能列表，而必须是一套有层级的信息空间。

设计参考了主流移动端设计语言中"层级表面"的概念——不同重要性的信息占据不同的视觉高度。最重要的信息（宠物实时状态）占据屏幕最大面积并浮动在所有内容之上，次重要的快捷入口（地图、轨迹、健康）以卡片形式下沉一层，纯功能性的配置和社交则沉淀在次级页面中。同时也参考了健康类应用中的柔和底色方案——长时间监测场景的本质是"看护"，界面需要安静下来，而不是持续发出视觉噪音。

二、色彩与材质：绿金方案，来自健康场景的色板

色彩系统的建立依赖于一个简单的前提：这是一个需要用户长时间注视的监测类应用。Google 在 Material Design 3 中提出了动态色彩和表面层级的概念，核心思想是界面的色彩应该适应内容和使用场景。Apple 在 iOS 的健康类应用中使用了柔和的背景色——一个带轻微冷调的灰白，不是纯白。这两套设计语言在本项目中的交集就是"绿金方案"——以绿色为唯一强调色相，用三个亮度梯度覆盖三级视觉权重，用白底弥散阴影替代一切硬边界。

六个颜色构成完整的功能色板。基础背景色（#F7F9F8）是一个带冷调的浅灰绿——在 OLED 屏幕上，纯白背景的像素需要以最大亮度发光，长时间观看会产生不可忽视的眼部疲劳。这个背景色在保持明亮感的同时降低了约 15% 的亮度刺激。深绿（#2E5C31）用于标题和最高层级的强调，中绿（#439B47）用于按钮高亮和选中态，浅绿（#60B664）用于大面积装饰渐变和背景发光。三档同色相梯度的逻辑来自 Apple 在 macOS 中对系统强调色的处理方式：同一个色相、三档亮度，对应三级视觉权重，用户在潜意识中不需要切换色彩认知就能分辨信息重要性。白色是唯一的"卡片面"颜色。警告红（#FF4D4F）仅在体温超过安全线时出现，且只在有限的几个组件中激活——这是一种有意为之的"色彩稀缺"策略：当用户在日常使用中几乎看不到红色，那么一旦红色出现，它的注意力捕获能力就达到了最大。

色彩的动态变化是这个系统区别于传统设计的最关键特征。当宠物体温突破 39.1°C 时，首页顶部的渐变状态卡片在 400 毫秒内从蓝绿对角渐变平滑过渡为红色渐变，卡片外层投影颜色同步变为红色光晕；右下角的悬浮宠物状态卡片同时触发背景变红、边框高亮、状态文字加深和警示标签出现的四重变化。四重变化的过渡时间被锁定为同一个 400 毫秒、同一条缓动曲线——这是 Material Design 的 Motion 指南中强调的"同步过渡"原则。

材质层面参考了移动端系统中"毛玻璃穿透"的视觉语言。首页上漂浮着三个半透明组件——它们直接调用了系统底层的采样渲染管线，对面板后面的像素做实时采集再叠加半透明背景。"零硬边界"是整套视觉体系的底层约束：卡片之间不使用线条分隔，所有层级完全通过阴影、圆角和色彩对比来构建。

三、信息架构：导航设计与主页的交互式场景

底部导航由鸿蒙系统的标签控制器驱动，使用固定宽度模式将屏幕底部均匀分配给五个标签。当前激活的标签图标会放大 1.1 倍，配合摩擦力曲线驱动的弹性缩放过渡——图标先轻微缩小再弹回，模拟物理世界的弹性碰撞，然后一个绿色胶囊形状的背景指示器滑入图标下方。五个标签的任务分工反映了信息架构设计中的权衡：主页承载第一视觉印象，只展示最重要的实时状态和一只像素猫；详情页将四个服务入口集中到可滚动的纵向空间中承担控制中心角色；AI 助手标签没有任何文字标注，仅靠图标引导发现，有意降低了此功能的视觉权重；宠圈承载社交内容流；个人中心整合了头像卡片、功能列表和退登操作。

主页的第一视觉印象除了像素猫和浮动卡片外，还有一个容易被忽略但设计投入很大的元素——全屏天气背景。这不是一张静止的背景图，而是一个完全由真实天气数据驱动的动态场景。App 端每次进入主页时向高德地图天气 API 请求当前所在城市的实时天气状态，返回的天气描述文字被写入全局状态。天气背景组件监听这个字段的变化，根据天气类型切换三种完全不同的渲染模式。晴天时，组件展示一张明亮的室内光线背景图——画面中有从窗户投射进来的自然光效果，以全透明度渲染。阴天或多云时，画面切换为一张深色调的积云天空背景图——色温偏低、对比度压缩，呈现阴沉天空的视觉效果。雨天是最特殊的状态：组件在深色云背景之上叠加播放一段循环雨滴动画。这段动画内置在 App 的原始资源目录中，渲染模式设为填充式覆盖全屏；同时设为静音、无操作控件、且不拦截触摸事件。整个背景层的切换不由即时跳变完成，而是经过一段 3 秒的平滑淡入淡出过渡——旧天气背景缓慢降低透明度为新场景让路，没有视觉割裂感。这种沉浸式背景设计界面不仅展示天气数据，而是将整个屏幕变为天气本身。

四、卡片系统：阴影、圆角与层级表面

所有卡片组件共享一套统一的视觉参数：圆角半径在小卡片上使用 12 像素、顶层大卡片上使用 24 像素；阴影的垂直偏移在 4 到 15 像素之间，阴影颜色为半透明黑色。圆角半径越大，卡片边缘的视觉张力越小，卡片看起来越"软"、越"安全"——这在宠物健康监测场景中是一个隐性的情绪信号。阴影的垂直偏移量对应 Material Design 中的"Elevation"概念：偏移越大意味着卡片离背景越远、视觉层级越高。

详情页顶部的渐变状态卡片是整个应用中层级最高的单个组件。正常体温下，卡片背景是一个 135° 对角线渐变——起点蓝色，终点绿色。这个角度在正方形上恰好产生最大的对角线跨度，避免了水平或垂直渐变在宽卡片上的单调感。一旦体温突破 39.1°C，整张卡片在 400 毫秒内平滑过渡为红-深红渐变，投影同步变为红色光晕。卡片内部嵌有一个白色半透明的环形电量进度条，传达出"状态数据悬浮于情感背景之上"的层次关系。

快捷服务入口是复用次数最多的组件。所有四个功能入口共享同一个模板定义，结构统一：左侧浅色圆形背景包裹的图标，中间功能名称，右侧淡灰色箭头。每个按钮有独立的浅色背景——地图用浅蓝、轨迹用浅绿、围栏用浅橙、健康用浅紫——形成了一套不依赖文字的四色功能编码。按钮内部自带设备合法性检查——如果用户尚未绑定任何设备，先弹出提示而不是跳转到空白页面。

五、会呼吸的像素猫：传感器数据的情感翻译

宠物状态页上有一只像素风格的猫，它是整个应用中最不"功能性"但最能传递情感的组件。这只猫的行为完全由项圈上的体温传感器数据驱动——不是一段预录的固定动画，而是一个以体温值为开关的实时状态机。

体温正常时，猫处于随机行走-休息循环中：每隔 12 到 45 秒开始一段持续 3 到 6 秒的行走——左右移动约 10 像素，每 0.3 秒切换左右脚帧图。行走结束后进入站立帧，等待下一次随机延迟。这种"随机间歇运动"模拟了真实猫的行为节奏——猫大部分时间在趴着。当体温超过 39.1 摄氏度时，行为发生根本变化：行走循环被立即中断，帧图强制切换到趴卧姿态，同时叠加视觉双重反馈——画面整体向红色偏移但保持绿蓝通道不变维持辨识度，同时以 1.03 倍的速率缓慢缩放模拟发烧时的沉重呼吸。

整个动画的同步时钟是一个独立于页面生命周期的全局定时器——即使页面切换、组件被销毁重建，时钟依然在后台运行。这保证了猫的行为在页面间切换时不会突然复位，保持了时间线的连续感。

六、健康中心：主从对比与日级洞察

健康页的核心设计策略是"主从双层级"信息展示——页面主体由四张聚合信息卡片组成，每张卡片包含两个数据层。主层用大号彩色字体展示板载传感器的当前读数（体温、湿度），副层在右下角用弱化灰色小字展示高德天气 API 在同一时刻返回的室外参考数据。室内传感器数据对比室外天气数据，用户可以直接判断宠物的生理读数是被环境拉高的还是独立异常的——这是个在医学信息展示中常见的"上下文耦合"策略。

健康趋势页展示 30 天的日级摘要。App 端在拉取数据后，运行一个轻量级的本地异常检测：连续两天步数低于 30 日均值的 70% 即触发活动量骤降标签；连续三天体温逐日攀升触发风险预测；当日内累计高温小时数超过 2 小时判定为持续发热。三个检测在不同维度上运行时互不排斥。日详情页以 24 小时为粒度拆解单日的体温走势、步数分布和活跃比例变化，用户点击异常标签后进入详情，可以直观看到哪个具体小时段出现了数据异常。

七、宠圈与个人中心：社交界面与设置项的工业化

宠圈标签承载了宠物主人的社交内容流——用户可以发布图文动态、浏览他人分享、执行点赞和评论。每张动态卡片使用和系统其他卡片完全相同的圆角、阴影和底色参数。个人中心标签整合了三个功能功能区：顶部的头像和简介卡片采用圆形头像加文字描述的布局——头像裁剪为 64×64 像素正圆，外包围 2 像素浅灰色环线，右侧是昵称和简介文字。

功能列表部分使用一个通用组件——设置行。每行接收五个输入属性：标题、右侧描述文字、是否显示分隔线、是否为红色破坏性样式、以及点击回调。正常设置行显示灰色右侧箭头，破坏性操作（退出登录）使用红色字体且无箭头。退出登录的执行流程是：清空本地存储中所有用户凭据 → 断开实时连接 → 重置全部界面状态为默认游客模式 → 跳转到登录页。这套流程不删除用户在服务器上的数据——仅清除本地凭据，为多设备登录场景保留回旋空间。

八、智能家居与自动化：条件编排与独立通道

智能家居页面以网格布局展示所有已注册的智能设备——每台设备以卡片形式呈现，包含设备图标、名称和一个物理拨动开关。拨动开关点击后通过 HTTP 接口向服务器发送控制指令，服务器端在收到指令后执行系统命令——通过消息队列客户端向独立端口 1884 发布 JSON 开关载荷。这个端口独立于主设备数据通道，两者在 I/O 层面完全分离。

自动化规则的创建通过底部弹出对话框完成——用户选择触发传感器、比较运算符、阈值数值、目标设备和目标状态。对话框在打开时自动向服务器请求当前在线设备列表作为可选目标，用户只需在列表中选择而不需要手动输入设备标识符。创建完成后规则写入服务器，后续每条设备上报数据都会触发一次全量规则的条件匹配。匹配逻辑包含去重步骤——先查询目标设备是否已经处于目标状态，避免重复下发相同的控制指令。

九、认证与安全：多层校验与设备绑定

登录流程采用邮箱验证码加密码的双要素校验：用户输入邮箱后，系统生成六位数字验证码并通过邮件发送，有效期十分钟；验证码和密码都正确才允许登录。登录成功后生成一个 16 字节的十六进制随机凭据写入用户表，所有后续的敏感操作接口都通过解析和对比此凭据来完成身份校验，不需要在服务端维持会话。注册流程与登录镜像对称——增加用户名唯一性检查，注册成功后自动生成凭据并直接进入登录状态。

密码重置分为三步独立接口——发送验证码、校验验证码、提交新密码覆写密码哈希。每个步骤独立存在，调用顺序由前端控制而不是服务端串行化。设备绑定的安全性使用了产品密钥保护机制——每台设备出厂时写入唯一的硬件 ID 和 PIN 码，用户首次绑定时除了账户凭据还需输入设备外壳上印制的六位 PIN，双重校验通过后才建立绑定关系。同一台设备只能绑定一个用户——如果扫描的是已被他人占用的设备，接口会返回该用户的脱敏用户名，提示先联系原拥有者解绑。

组件化设计总表