(翻译)导航标签( Navigation Tabs)
来源:互联网 发布:可以赚钱的app软件 编辑:程序博客网 时间:2024/05/21 09:01
问题概述
需要将内容划分为多个部分,采用平面导航方式来访问这些部分的内容,这样可以清晰地指示当前的位置[1]。
示例
用途
- 用于内容可以划分为2-9个部分,需要使用屏幕导航模式时;
- 用于内容每个部分的名称相对较短时;
- 用于想让导航在水平方向充满整个页面时;
- 用于想提供网站中的最好的模块或者子模块列表时;
- 如果想显示与特定内容相关的数据,则不要使用本模式。例如显示最新的文章;
- 如果不需要找出当前选中的选项,则不要使用本模式[2];
- 如果模块列表或者目录列表中包含“更多...”链接,则不要使用本模式。可以考虑使用其它导航模式。
解决方案
- 采用水平栏包含网站中的不同的部分或目录;
- 通常使用类似于按钮的标签表示一个部分或目录,这就是为什么标签应该是可点击的,而不仅仅是作为文本来标识一个部分或者目录;
- 根据需要,还可以在顶部栏下再配备一栏,用以显示当前在顶部栏中选中对象的下一级内容;
- 标签链接的所有网页中导航标签都一直存在;
- 不同网页中的导航标签结构(顺序)应该保持一致,这样用户就可以将导航标签与其对应的网页联系起来;
- 应该高亮显示选中的标签,这样便于指示当前的位置;
- 如果使用了下一级内容导航标签(也就是在顶部栏下面有一个二级水平栏),应该在当前选中的顶部栏标签与二级水平栏之间建立明确的、可视化的关联[3]。
说明
本模式类似于桌面的扩展,GUI元素就像桌子上的物品一样。导航标签功能参考文件柜中的文件夹管理方式,因此其用法 也为最终用户所熟悉。
导航标签能够明确地、可视化地说明在网站中可以找到什么内容,并且高亮显示用户当前所在的位置。
原文地址:http://ui-patterns.com/patterns/NavigationTabs
[2]原文:Do not use when there is no need to single-out the currently selected option.
[3]原文:If subsections are used (a second horizontal bar below the top bar) there should be a clear visual connection between the currently selected top tab and the bar below showing subsections.
阅读全文
0 0
- (翻译)导航标签( Navigation Tabs)
- (翻译)模块标签( Module Tabs)
- Android官方导航栏ActionBar(二)—— Action View、Action Provider、Navigation Tabs的详细用法
- Web Navigation(Web导航)
- JSF导航规则(Navigation)
- 自定义navigation(导航栏)
- Tabs Outliner(标签系统)
- 隐藏底部导航栏(tabs)
- jsf 的导航演示(navigation)
- iOS 导航条(navigation)
- Confluence 导航地图(Navigation Map)宏
- 导航栏视图控制器(navigation controller)
- (ros/navigation/gmapping)导航/建地图
- 简单导航抽屉(Navigation Drawer)
- (ros/navigation/gmapping)导航/建地图
- 导航栏(Navigation)上多个点击事件
- (ros/navigation/gmapping)导航/建地图
- React-Navigation导航(页面跳转)
- CentOS 7下shadowsocks客户端的使用
- LINUX
- Tensorflow+SSD+Windows10+GPU的配置及运行
- Scrapy爬取伯乐在线的所有文章
- mongoose创建数据结构,实现基本增删改查功能
- (翻译)导航标签( Navigation Tabs)
- 各种LINUX资源链接
- Python\opencv平移变换
- rabbitmq安装
- Java读取Excel
- 提交BUG的标准规范
- Pascal程序笔迹:和为零
- LeetCode 15. 3Sum
- 算法12.02