Skip to content

非首页导航

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

资料来源:

蓝湖参考图

VISTA C 非首页导航蓝湖参考图
非首页导航以这张蓝湖图为准。它展示了右侧竖排导航、底部横排导航、少量入口和 Menu 按钮。

用在哪

  • 画廊。
  • 户型图。
  • 样板间。
  • VR、WALK、3D 大楼。
  • 其他已经进入内容浏览的页面。

非首页导航的第一目标是让用户切功能,同时不能挡住主体内容。

两种形态

形态什么时候用位置
右侧竖排入口较多,主体图左侧空间更重要主体内容右侧
底部横排入口较少,或者宽屏展示主体内容下方或右下

少量入口时,只保留当前页附近最需要的入口和 Menu。完整功能仍从 Menu 进入。

Menu 是非首页导航的主入口。

  • Menu 按钮固定在同组入口的最后一个。
  • Menu 使用青色底,和普通玻璃卡片明显区分。
  • 点击 Menu 打开完整导航面板。
  • 当前页面不把 Menu 当成当前项,当前项应该落在对应功能卡片上。
  • 入口少到只有一个页面功能时,也保留 Menu。

普通功能卡片

部分规则
底色黑色 10% 透明玻璃
圆角16pt
阴影0pt 4pt 20pt,黑色 10%
边框上边和左边更亮,右边和下边更暗
图标白色线性图标
文案英文最多两行,中文优先短词

普通功能卡片不要使用青色底。青色只给 Menu 或当前业务强按钮。

和首页导航的区别

项目首页导航非首页导航
目的让用户从首页进入项目功能让用户在内容页面之间切换
主体Logo、完整功能、底部链接图片、3D、VR 或内容画面
常见位置页面中心区域主体右侧或底部
Menu可打开完整导航必须保留,作为更多入口
品牌 Logo 列表可以出现不出现

不要这样做

正确不要
导航贴近主体边缘把导航压到主体画面中间
Menu 用青色底普通功能卡片也全用青色
入口多时改右侧竖排横向挤成一排小按钮
入口少时保留 Menu因为入口少就取消完整导航

HOMEVISTA 设计规范