Skip to content

首页交互设计

1. 页面概览

雪哒 APP 首页作为流量分发与功能聚合的核心入口,采用"发现+功能+分发"的三层结构设计。

  • 顶部导航: 发现 (默认) | 雪场 | 俱乐部
  • 功能金刚区: 5 个核心功能入口
  • Banner 区: "拼图式"首页推荐 (左主右副)
  • 内容信息流: 双列瀑布流,支持多维筛选

2. 核心功能区 (King Kong)

位于顶部 Banner 下方,提供高频功能入口:

图标名称功能描述目标页面
🎫购雪票快速进入雪票购买频道票务首页
💰赚雪币积分任务与签到入口任务中心
📸买照片雪场摄影服务聚合摄影服务页
🎿约教练教练预约与筛选教练列表页
📺雪场直播实时查看雪场实况直播列表页

3. Banner 与推荐区

采用 "1左 + 2右" 的拼图布局,最大化屏幕利用率。

  • 主 Banner (左): 大图展示核心活动,支持多图轮播 (带指示点)。
  • 副 Banner (右): 上下两张卡片,用于次级流量分发 (如排行榜、聊天室)。
    • 交互: 标题 + 副标题 ("点击查看 >") + 图标/图片。

热门雪票

横向滑动卡片,展示 Top 10 推荐。

  • 卡片结构:
    • 封面图: 左上角展示 运营标签 (如 "日场4小时")。
    • 信息: 雪场名称 + 起步价 (蓝色高亮)。
  • 交互: 横向惯性滑动,点击进入商品详情。

4. 发现信息流 (Feed)

采用 双列瀑布流 (Masonry) 布局,提升浏览效率。

顶部筛选标签 (Chips)

横向滑动筛选,默认选中 "推荐":

  • 💎 推荐: 综合算法推荐
  • 💃 约搭子: 找人滑雪
  • 🏘️ 拼房: 酒店/民宿拼单
  • ⛸️ 拼教练: 拼团请教练
  • 🚗 拼车: 往返交通

内容卡片

  • 样式: 图文/视频混合排列,高度自适应。
  • 信息: 封面图 + 标题 (2行省略) + 用户信息 (头像/昵称)。
  • 价格: 若为交易/拼团类内容,展示价格标签。

5. 全局导航 (Bottom Bar)

底部常驻 5 个 Tab,快速切换核心场景:

  1. 首页: (当前页面) 发现与推荐
  2. 交易: 闲置装备与票务市场
  3. 行程: 用户滑雪行程管理
  4. 留言: IM 聊天与系统通知
  5. 我的: 个人中心与订单管理

交互细节: 点击底部的 "+ 我要发布" 悬浮按钮,弹出半屏菜单,选择发布类型(动态/闲置/活动等)。

雪哒产品文档

请输入访问密码