征集网锐志网络淘途找素材上91123RF图片库
创意在线首页
官方微博:腾讯
平面设计交互设计CG动漫工业设计建筑环境数码影像创意搜
 首页大赛征集资讯教程画廊访谈作品集创企同盟设计招聘人才专区竞赛台专题论吧 找素材看酷站设计网址库
教程网 Illustrator、Photoshop、CoreaDreaw、AI教程、PS教程
当前位置:首页 > 教程 > HTML/CSS > 正文
网站设计Tab标签切换的效果制作
作者:菠菜博 来源: 发表时间:2009-3-31 11:08:23 浏览:

在如今的网页设计中,Tab标签切换的应用已经是非常的广泛,基本在每个网站中都有这样的效果被应用到前台的设计中去,来完成之前无法完成的任务。所以,Tab标签的设计也就成了一个不可小觑的工作流程,在浏览一个网站时,看到了他们的Tab标签制作的导航菜单效果,但却是没有达到该有的效果,反而增加了用户浏览的困惑,该站的Tab标签效果如下图:

那么,通过这个效果图,你可以确定我的当前操作状态是在哪个标签下吗?Site Details还是Statistics?显然,功能实现了,但效果失败了。

你可以说是在Site Details标签的激活状态,因为,Site Details标签的box显然更大些,并且其背景颜色正好跟底部横向条的颜色一致;你也可以认为当前是在Statistics标签的激活状态,因为乍一看,Statistics标签跟中间的白色间隔条是很一致的;两者皆有可能,那用户就要迷惑了,迷惑也就导致了错误的体验,降低了可用性。

Tab标签切换的应用之所以越来越广泛,主要是它可以有效地对页面内容进行合理准确的导航,告之用户他当前页面的操作状态。Tab标签不仅感官上给人舒服易操作的印象,也完全跟我们日常生活中使用的文件夹标签一样,所以更容易让用户接受。

这里分5步简单地罗列出了制作一套完整的Tab标签的全过程

1,将激活状态下的标签跟内容紧密联系

在开始提到的那个效果中,我当前的浏览状态是Site Details标签内容,但是,由于设计的疏忽导致Site Details标签跟下面的内容产生了一个白色的间距,从而使其功能产生了歧义,效果也是失色很多。所以,激活状态下的标签一定要跟其对应的内容很好的结合起来。

2,确保其他标签(未处在激活状态的)跟当前标签样式的不同

要做到这一点并不难,你可以通过修改其他标签样式的颜色、边框、背景等等属性,来达到跟当前标签的不同,从而,明确地告之用户他当前的操作状态。你一可以通过背景图片的方法对其他标签样式进行伪3D的效果修饰,或是加深颜色制造阴影等等,方法多种多样。

3,改变激活状态下标签的字体颜色

改变激活状态下标签的字体颜色,使其效果跟其他标签完全不同,从而在视觉上产生强烈的反差,如此设计的好处之一就是,可以让用户一目了然地看清楚,除了当前状态之外,还可以进行哪些内容的操作,方便用户操作切换。

4,Tab标签链接区域的界限跨度

将整个Tab标签链接区域的宽度和高度全部进行link设置,不要只是对链接文本进行小区域的修饰,这样不但降低了页面的易操作性,而且在视觉上也是一个很大的问题。所以,在对Tab的anchor锚点进行设置时,尽量做到填充整体Tab标签的全部区域,你可以通过对CSS样式中的padding属性设置实现。

5,确保每个页面都有激活状态的标签

当用户第一次进入你的网站或是某个页面时,首先,他们将会注意下网站的Tab标签状态,判断当前的Tab标签是否和自己查找的内容一致。尤其对于通过搜索引擎进入到网站中某一页面的用户来说,这个功能尤其重要。页面中适当位置的Tab标签,就像一面旗帜,指引和引导用户准确地进行页面操作。
所以,在对你的网站设计Tab标签切换的效果时,不妨参考本文为你罗列出来的几个简单的注意事项,把Tab标签的操作效果设计的更合理。





在线编辑:angel
本文链接:


推荐阅读:
·年度出版物《中国创意设计年鉴·2016/2017》征集公告
·HAZZYS哈吉斯第二届原创插画设计大赛
·青春唯美插画培训网络远程班正在招生
·创企同盟VIP:网络品牌建设提供商-木兰设计
·2017大艺时代全国原创插画设计大赛征稿
·二十四节气标识系统设计征集函
·39800元 奉节县征集“三峡之巅”LOGO
·10000元 2017第三届“海上丝绸之路”创意设计大赛
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件请不要盗链本站地址,且不准打上各自站点的水印!

创意素材推荐 矢量 | PSD | 模板 | 高清 | PNG | 网页背景
2009-02-06
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站
个性展示 网站教学 工 作 室 学校教育 卡通漫画 文化艺术 体育运动 美容健身 食品饮料
近期推荐报道 返回首页更多精彩等着你!

Photoshop| Photoshop快速调出情侣图片柔美的插画艺术| 绝望的小熊—美国插画师Luke
网页设计| 波兰Tiquet网站设计作品欣赏插画艺术| Nanami Cowdroy灵动黑白插画
Photoshop| Photoshop调出美女图片绚丽的橙红HTML/CSS| 实现DIV透明而里面的文字不透明
平面设计| 世界杯之平面广告欣赏插画艺术| Alberto Cerrite&ntil
平面设计| Havaianas人字拖最新平面广告系列网页设计| 英国madefavourite简洁细腻型
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站 个性展示 网站教学 工 作 室 学校教育
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站 文化艺术 体育运动 美容健身 食品饮料
网站名称:whaternet
网站地址:http://whaternet.com/
加入时间:2014-8-5 13:59:20
网站名称:mnnaite
网站地址:http://www.mnnaite.com/static/
加入时间:2014-8-5 13:58:07
网站名称:tijuanaflats
网站地址:http://tijuanaflats.com/
加入时间:2014-8-5 13:55:32
网站名称:digital
网站地址:http://production-digital.com/
加入时间:2014-8-5 13:54:45
网站名称:deutschesee
网站地址:http://www.deutschesee.de/
加入时间:2014-8-5 13:51:54
网站名称:kennedy
网站地址:http://www.kennedyandoswald.com/
加入时间:2014-8-5 13:50:57
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿