非首页导航
非首页导航用于用户已经进入画廊、户型图、VR、WALK、3D 大楼等页面后切换功能。它不负责首页首屏,也不负责首页完整导航面板。
资料来源:
蓝湖参考图

用在哪
- 画廊。
- 户型图。
- 样板间。
- VR、WALK、3D 大楼。
- 其他已经进入内容浏览的页面。
非首页导航的第一目标是让用户切功能,同时不能挡住主体内容。
两种形态
| 形态 | 什么时候用 | 位置 |
|---|---|---|
| 右侧竖排 | 入口较多,主体图左侧空间更重要 | 主体内容右侧 |
| 底部横排 | 入口较少,或者宽屏展示 | 主体内容下方或右下 |
少量入口时,只保留当前页附近最需要的入口和 Menu。完整功能仍从 Menu 进入。
Menu 按钮
Menu 是非首页导航的主入口。
- Menu 按钮固定在同组入口的最后一个。
- Menu 使用青色底,和普通玻璃卡片明显区分。
- 点击 Menu 打开完整导航面板。
- 当前页面不把 Menu 当成当前项,当前项应该落在对应功能卡片上。
- 入口少到只有一个页面功能时,也保留 Menu。
普通功能卡片
| 部分 | 规则 |
|---|---|
| 底色 | 黑色 10% 透明玻璃 |
| 圆角 | 16pt |
| 阴影 | 0pt 4pt 20pt,黑色 10% |
| 边框 | 上边和左边更亮,右边和下边更暗 |
| 图标 | 白色线性图标 |
| 文案 | 英文最多两行,中文优先短词 |
普通功能卡片不要使用青色底。青色只给 Menu 或当前业务强按钮。
和首页导航的区别
| 项目 | 首页导航 | 非首页导航 |
|---|---|---|
| 目的 | 让用户从首页进入项目功能 | 让用户在内容页面之间切换 |
| 主体 | Logo、完整功能、底部链接 | 图片、3D、VR 或内容画面 |
| 常见位置 | 页面中心区域 | 主体右侧或底部 |
| Menu | 可打开完整导航 | 必须保留,作为更多入口 |
| 品牌 Logo 列表 | 可以出现 | 不出现 |
不要这样做
| 正确 | 不要 |
|---|---|
| 导航贴近主体边缘 | 把导航压到主体画面中间 |
| Menu 用青色底 | 普通功能卡片也全用青色 |
| 入口多时改右侧竖排 | 横向挤成一排小按钮 |
| 入口少时保留 Menu | 因为入口少就取消完整导航 |

