TAB栏在网页设计中使用比较普遍,优点是可以在有限的空间内展示多块内容,缺点是用户必须点击或鼠标移动上去才能看到内容,因此在某些情况下TAB栏的使用会让一些内容被用户忽视,特别是对于电子商务网站,如何使用TAB值得我们思考。
TAB栏是适合多内容页面排版的最好方法之一,它可以在不增加页面长度或者打乱页面排版基础上美化页面,并且这几年逐渐成为电子商务网站越来越常用的方法–特别是产品页面上的使用。
但是我在浏览这些使用TAB栏的站点时一直关心这个问题–TAB栏是否被顾客注意到?它们是否太不明显了?
我最近在研究的一个站点,它的交叉销售和鼓励销售的产品附加点击率很低。罪魁祸首就是产品推荐被隐藏在了一个基本上没人点击的TAB栏上了。
以下是一些电子商务网站的TAB栏范例:
主页/导航


TAB栏是适合多内容页面排版的最好方法之一,它可以在不增加页面长度或者打乱页面排版基础上美化页面,并且这几年逐渐成为电子商务网站越来越常用的方法–特别是产品页面上的使用。
但是我在浏览这些使用TAB栏的站点时一直关心这个问题–TAB栏是否被顾客注意到?它们是否太不明显了?
我最近在研究的一个站点,它的交叉销售和鼓励销售的产品附加点击率很低。罪魁祸首就是产品推荐被隐藏在了一个基本上没人点击的TAB栏上了。
以下是一些电子商务网站的TAB栏范例:
目录页

产品信息



细小的文本链接TAB栏是很容易被忽略的:

有时“TAB”看起来根本就不像TAB栏(Eddie Bauer 用的是黄色框)

这些例子里的TAB栏都是独立展示的,所以很容易注意到。但是你把TAB元素运用在一个有其他设计元素的页面上时,TAB栏是容易被忽略的。
你注意到没?
当你一眼扫过这个页面时你注意到“video”的tab栏吗?

结账/登录
有多少已注册用户一次又一次地经历注册过程仅仅是因为已注册用户选项被“藏”起来了?

如果你的网站使用TAB栏–请确保你知道TAB栏带来的收益大于顾客错失内容和购买的风险。确保你对内容页版本变化的测试,跟踪TAB栏点击或在顾客交互观测点进行用户测试。
情非得已
21个Sketch实用高频小技巧2019-02-15
25款值得收藏的优秀网站模板免费下载2015-09-16
20套高质量的免费网页模版PSD素材2013-09-02
20款国外时尚大气的按钮开关PSD素材下载2013-07-31
CSS实例教程:十步学会用CSS建站2011-10-05
网页设计师:浅淡网页BANNER设计2010-09-27
网页细节教程:WEB设计精确点滴2010-09-13
网页设计中的点滴细节把握2010-09-01
总结交互组件创新的四种方式2010-06-28
最全的国外电子商务CSS模板下载2010-06-18
实例解析3种文档大屏适配方法
相关文章2632020-03-09
详细解析UI设计中搜索栏设计的技巧
相关文章6092019-03-31
UI设计师如何设计最常见的关闭按钮
相关文章4042019-02-24
设计师解读如何让扁平的网页更出彩
相关文章10302018-12-07
UI设计师需要学习的保存功能设计总结
相关文章3422018-12-07
7招表单设计设计师方法提升表单体验
相关文章5672018-12-07
UI设计师必学栅格设计原理和技巧
相关文章4992018-11-29
5个网站设计实例解析网页设计趋势
相关文章4452018-11-29
