VOL.7浏览器标签设计的一些启发
水宿鸟
用户至上，关注细节，这是每一位产品经理都应该努力做到的。而对于细节和易用的拿捏，并不容易把握。今天跟大家分享一个案例，看看备受瞩目的苹果在safari浏览器中出色的细节设计。
这里要说的是浏览器标签的设计。
一、主流浏览器的四种Tab设计
依次为ie8、火狐、Chrome、Safari：
可以注意到，同样是在浏览器扮演重要角色的Tab，各个浏览器的设计都有所不同，到底谁家体验更好一些呢？我们来简要分析一下。
二、设计的优劣
1、ie8：
Tab默认显示的元素有网页title 、favicon，在选中状态下会出现关闭按钮。
这样的设计会导致一个麻烦，当在同一窗口下打开N个网页时，想关掉一部分就比较头疼了，需要一个个点开一个个关上，如果用户电脑性能不理想，这些操作将浪费掉很长时间。win7下任务栏可以解决这个问题，但如果浏览器的操作任务还要借助任务栏完成，是不是有点可怜？
2、火狐：
Tab默认显示的元素有网页title 、favicon、关闭按钮（根据宽度决定显示）。这个设计的缺点同ie8，而且更遗憾的是，因为默认情况下显示出关闭按钮，或多或少会导致一些误操作。
3、Chrome：
谷歌浏览器 Tab默认显示的元素有网页title 、favicon、关闭按钮，类似火狐。这里要说的是，谷歌浏览器在打开多个Tab时的显示是很可怕的，举一个极端点的例子，看下打开数十个网页时的显示情况：
除去favicon和网页title，这些标签就像一堆一模一样的螺丝钉，要想在这里找出些什么来，实在太难了⋯⋯
4、Safari：
没有favicon，标签的关闭按钮只在鼠标悬停时会显示出来。对于苹果来说，每个设计都散发着简单易用的气质。
当一个用户想去关闭一个Tab时，首先要做的就是找到这个Tab，这时鼠标就会自然移动到该Tab上，顺而触发显示出关闭按钮，然后顺利的关掉它。这个小小的操作流程既没有走不通的地方，又留出了空间 、精简了页面，类似中国国画经典的留白之美。
得益这样的设计，用户可以在只看title不点开Tab的情况下关掉不需要的网页。
对于 Chrome多标签的问题， Safari处理的也很妥当，可以仔细欣赏一下safari多Tab时的下拉设计，里面其实还有很多东西可学。
三、一句总结
在完成功能的同时，尽量简化设计、易于操作。
┾━┾━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄━━━━┄
本文由水宿鸟De设计笔记首发，作者水宿鸟，BLOG中任何文字、图像皆采用知识共享署名-非商业性使用-禁止演绎2.5中国大陆许可协议进行许可。商业网站、纸媒体如需转载，须经本人同意。欢迎非商业网站、媒体转载，但必须注明出处和链接。违者皆构成侵权。E-mail:euloo#qq.com QQ:287589972
我的腾讯微博地址是：http://t.qq.com/eulooo 欢迎收听。
5 条评论
我比较喜欢CHROME的标签，一般情况下我不会开那么多网页吧？
楼上说得是。
另外，不知道作者是如何定义“误操作”的呢？根据你的描述，如果在s上鼠标悬停，依然很容易进行“误操作”。相反，当我想特地关掉某个标签的时候，在c和f下，可以立马看到这个小×。特别地，悬停在这个小×上时，c背景为红色，以警示。
不知道作者注意到没有，c的多标签关闭是非常流畅的，当标签大于窗口宽度时，关掉几个会进行拉伸——但不会在鼠标悬停在标签栏时进行。这也算是“易用”之一吧。
此外，c的标签是可以独立拖出来自成窗口的。一般也不会一次点那么多，呵呵。
很可惜，没有看到s的超级多标签的截图。作者的“一句话总结”未免教条了点。
以上个人意见，用了c很长时间，可能存在偏见。
我想说,其实带网站logo还是不错的,至少从外观上就可以直观的区别网站;
另外,像opera浏览器的预览标签也不错,遨游的自动标签大小,
chrome浏览器标签的拖动确实不错,虽然打开很多网页的时候会出现楼主所说的情况,但是每个浏览器都是那样的..而且,某些浏览器也有关闭右侧/左侧标签的功能吧..
另外, 直接在标签上按下鼠标中键可以直接关闭该网页,不用再一下一下点关闭按钮.
= =,
@喔喔兒
这里只是给人机交互和简洁设计提供一下思路，每个用户都是最个性的存在，他们根据自己的爱好选择浏览器，我篇文章属于我的偏爱
= =,说的也是, 反正最终肯定应该以人为本才对,