Skip to content

首页主界面设计与交互规范

页面路径

home/index

页面组成

  • 顶部导航栏:搜索、消息、个人中心
  • 轮播图区域:活动、公告、专题推荐
  • 快捷入口:门票购买、语音导览、VR体验、服务设施
  • 路线推荐区:推荐列表与查看更多入口
  • 精选内容区:图文/视频内容卡片
  • 底部导航:首页、路线、发现、我的

核心交互

顶部导航

  • 点击搜索框进入搜索页
  • 铃铛图标显示未读数并跳转消息列表
  • 头像入口跳转个人中心

轮播图

  • 默认 5s 自动轮播
  • 用户手势滑动后暂停 3s
  • 滑动距离超过 30% 切换
  • 点击轮播图按配置跳转页面

快捷入口

  • 固定 4 宫格布局
  • 图标 + 文字组合展示
  • 点击反馈采用轻微缩放动画

推荐与内容区

  • 路线卡片可进入详情页
  • 支持横向滑动查看更多内容
  • 内容卡片支持分享

底部导航

  • 当前 Tab 高亮
  • 支持切换动画
  • 发现页可展示红点提示

前端规格

  • 设计基准宽度:375px
  • 适配单位:rpx
  • 状态栏高度:iOS 20px / Android 24px
  • 需处理全面屏底部安全区域

典型样式约束

  • 顶部导航栏高度:44px
  • 轮播图高度:200px
  • 路线卡片宽高:280px × 160px
  • 内容卡片宽度:300px

谷子科技知识库平台 - 多格式摄入、受控编译、岗位隔离问答