静态页面设计图

清明寄思 H5 交互板

视觉方向采用“清新素雅国风 + 极简治愈风”,用青、白、浅绿做主色,交互全部限制在点击、滑动、长按三种基础手势内。

查看完整 H5
雨雾开场预览
滑动拨开雨雾

01 开篇解锁

用雨雾遮罩做第一眼记忆点,用户一上手就知道“滑一下”能解锁页面。

寄思放鸢预览
点击寄语,长按放飞

02 寄思放鸢

把情绪表达压缩成“选一句话 + 长按纸鸢”两个动作,既轻量,又有纪念感。

清明食俗预览
点食材,合成青团

03 清明食俗

三枚食材按钮触发即时反馈,再用卡片化小科普承接内容,简单直白,不会打断节奏。

踏青寻景预览
左右滑动,点击打卡

04 踏青寻景

横向场景切换强化“春游”感觉,每屏只放两个热点,降低学习成本。

寄思卡片预览
一步生成分享卡

05 卡片收束

把寄思话语、踏青景点、食俗记忆统一收束成一张竖版卡片,方便展示和保存分享。

用户旅程

雨雾解锁 → 放鸢寄思 → 食俗合成 → 踏青打卡 → 生成寄思卡

轻互动原则

每页一个核心动作,反馈即时、路径单一,不做复杂跳转和隐藏逻辑。

移动端适配

以 375 × 812 为基准,兼容 320 至 430 宽度,并处理安全区与底部手势区域。