品艺网络

整站优化 网站设计Tab标签切换的效果制作

发表时间:2018-04-15 09:50

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

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

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

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

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

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

  将整个Tab标签链接区域的宽度和高度全部进行li对CSS样式中的padding属性设置实现。

  当用户第一次进入你的网站或是某个页面时,首先引和引导用户准确地进行页面操作。所以,在对你的网站设计Tab标签切换的效果时,整站优化不妨参考本文为你罗列出来的几个简单的注意事项,把Tab标签的操作效果设计的更合理。

网站优化推荐
2018-08-24
2019-07-14
2019-03-22
2019-02-23
2018-12-30
2018-12-30
2018-12-30
2018-11-04
2018-11-04
2018-08-16
2015-01-30
2015-01-29
2015-01-29
2015-01-28
2015-01-28
2015-01-27
2015-01-27
2015-01-26
联系地址 广东省东莞市莞城区可园路10号
联系电话 18024682589
联系邮箱 463450176@qq.com