交互设计规范之导航

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-禁止演绎
1150 0 1 2021-09-24

导航

Navigation 


一.定义

展示多个平级关系的页面或功能


二.用途

应用于分类、排行等需多个维度展示的情况。


三.类型

底部常驻导航、tab导航、纵向tab导航、抽屉导航、宫格导航等。

1.底部常驻导航

1.1 样式描述

元素包括:图标、文字、辅助标记(可选),需区分选中状态/未选中状态;

1.2 布局说明

1.  3≤数量≤5;

2.  一般常驻底部,或可做个性化动效处理。

【交互说明】

1.部分长页面选中状态下再次点击图标时,支持单击触发回到当前页面顶部、双击触发回到顶部并刷新。


1.Tab导航

1.1 横向Tab

样式描述

元素包括:文字、辅助标记(可选)、异形图标,需区分选中状态/未选中状态;

布局说明

1.可固定或滚动;

2.一般吸顶处理;

【交互说明】

1.tab之间为平级关系,点击切换,可辅助左右滑动手势切换;

2.tab之间切换时,在记录缓存的情况下,保留用户原浏览位置;

3.一般默认选中项应为第一个。


1.2 纵向Tab

样式描述

元素包括:文字、辅助标记(可选)、异性图标,需区分选中状态/未选中状态;

布局说明

1.固定在页面左侧,控制数量如无特殊要求不应超过一屏;

【交互说明】

1.一般默认选中项应为第一个,点击切换;

Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票