网站tab导航的设计
作者:Tony- 来源:得设计 发布时间:2008-11-10 12:36:00
之前有写过一篇浏览器的tab设计,这回说说网站的tab设计。
一说到tab很自然地就想到了导航、信息架构。随着网站信息结构的复杂化,选择tab似乎是性价比最高、结构传递最明确的导航方式。这也是其中面包屑导航方式衰弱的重要原因。
如果你想用tab的方式构架你的网站,搞明白下面几个问题,或许对你怎么设计会有帮助。
用tab解决什么问题?
在设计tab之前,先要搞清楚为什么用tab,每个tab下的信息到底是什么,信息之间的关系是:
信息结构一共有多少层?
tab跟大标题之间的关系(大标题的作用大多是给用户定位)
并列关系
过滤关系
是否互为同类项?
包含与被包含?
……
如上图,tab1和tab2下面的信息互相之间的关系?每个tab下信息和大标题之间的关系?只有搞清楚关系和需求,才有办法进行下一步设计。
tab结构
看下面几张图,相信应该能够感受到结构的区别了。
上图都是选中tab4的效果,但结构方式却不一样。虽然这个例子很简单,但我们在实际操作的时候,往往会比这复杂很多,比如:
tab下面需要嵌套tab,如digg的设计。或者tab和面包屑的结合方式,(如原来junchen介绍过的)等等,很多问题往往因为多层的信息结构,在tab的运用上面,需要灵活变通。(在研究结构的时候,需要完全抛开交互和视觉样式来分析)
tab的交互方式
选中的tab是否可以再操作?如果是,如何告诉用户?点击tab的时候,刷新不刷新页面?
tab的视觉样式
tab长得什么样子,会很直接地影响用户对导航的认知,举三个比较常见的例子:
当然,视觉样式肯定很难穷举出来,有需求的参考一下这里。
几点提示
1 tab的个数,最好遵循 7±2原则。尤其是非主导航区域。
2 在没有把需求和结构搞明白之前,切勿拘泥于tab的样式设计。
3 在多级tab的情况下,如何精简结构是一门学问,需要多从产品形态和用户需求方面考虑,不一定需要一味的追求结构的清晰和统一,造成不必要的冗余。
猜你喜欢
- 09年的电影缓缓的落下帷幕,以及新年伊始,轰轰烈烈催人癫狂的《阿凡达》。整年里,最让人我记忆深刻的还是《飞屋历险记》。Carl与Ellie被
- 前言:PyPDF2是一个纯Python的开源库,能够分割或合并PDF文件,也可以裁剪或转换PDF文件中的页面。我们还可以使用PyPDF2查看
- HTTP状态码 摘要说明成功2××  
- 简单生成器有许多优点。生成器除了能够用更自然的方法表达一类问题的流程之外,还极大地改善了许多效率不足之处。在 Python 中,
- 面向对象编程的2个非常重要的概念:类和对象对象是面向对象编程的核心,在使用对象的过程中,为了将具有共同特征和行为的一组对象抽象定义,提出了另
- 在写一个多线程类的时候调用报错 RuntimeError: thread.__init__() not calledclass Notify
- 安装你可以从PyPI上直接安装这个库:pip install itsdangerous适用案例在取消订阅某个通讯时,你可以在URL里序列化并
- 一、react-reduxreact-redux依赖于redux工作。 运行安装命令:npm i react-redux:使用: 将Prov
- 命令行进入python打开cmd——>直接输入python即可,如下退出python方法一:先按Ctrl+z,再按Enter(回车键)
- <base href="http://digi.tech.qq.com/images/ld/2007/1022/
- 1、fastcgi ,通过flup模块来支持,在nginx里对应的配置指令是 fastcgi_pass2、http,nginx使用proxy
- 一、错误提示:用户登录失败,该用户与可信SQL Server连接无关联 错误18452原因是远程登录没配置好,配置方法如下:1:开启SQL2
- 前言近期在工作中遇到某表某字段是可扩展数据内容,信息以逗号分隔生成的,现需求要根据此字段数据在其它表查询相关的内容展现出来,第一想法是切割数
- 参考网址构建网络我们可以通过torch.nn包来构建网络,现在你已经看过了autograd,nn在autograd的基础上定义模型和求微分。
- 写在前面的话作为有个 Python 菜逼,之前一直用的 Pycharm,但是在主题这一块怎么调整都感觉要么太骚,看起来不舒服,要么就是简直不
- pycharm设置Console控制台输出自动换行解决方法File --> Settings… --> E
- 在这篇asp之数学函数里,我们将会以表格的形式,让大家了解到关于ASP中能用到的数学函数,里面包括一个数的绝对值、一个数的平方根
- SQL中的单记录函数1.ASCII返回与指定的字符对应的十进制数;SQL> select ascii('A') A,a
- 本文实例讲述了python采集百度百科的方法。分享给大家供大家参考。具体如下:#!/usr/bin/python# -*- coding:
- 本文介绍MySQL与Redis缓存的同步的两种方案方案1:通过MySQL自动同步刷新Redis,MySQL触发器+UDF函数实现方案2:解析