随着时光的流逝，越来越多的浏览器开始相应党的号召–“与时俱进”的使用标签方式来显示网页。而由于这种标签式的设计局限，在设计时需了解网页标题与网页图标的某些限制,以更好的提升用户体验:
一个典型的标签式浏览器由两部分组成：
同样，我将分成两块讨论网页标题的一些设计规则：
1、网站图标
由于SEO的需要，一般网站对网页标题已有足够的重视，但对于网站图标却仍没有重视。时常会看到某些网站的活动页面没有网页图标。
正如公司的logo一样，网站图标是公司形象的体现。当用户使用浏览器在多个网页标签切换时，网页图标能起到标识页面所属的网站。尤其是在现出窗口满天飞的今天更是如此。
并且，网页图标正好与网页标题形成互补：如果说网页标题是网站各个网页不同内容的索引，那么网页图标正好就是标识该页面所属的网站的标志了（尤其是在国内的许多网站都有乱开新窗口的毛病下，网页图标显得更加重要）。
网页图标尺寸只有16×16像素，想要在这么点地方上做到容易辨别也确实需要花点心思。借鉴上面几个大网站&我个人网站的样式。并结合设计Logo的一些思路。我总结应从两方面入手。
- 颜色：网站图标的色彩应与网站相吻合（例如：食品类的网站就不适合用黑颜色的图标，而是用体现出其含义的颜色），并且需保证在标签上能够醒目的被识别出来（像上面的sohu图标就有点失败，在灰色的背景下不能很好的显现出来了）。；
- 形状：不用质疑，任何想在16×16的这么点像素内放过多的细节都是不可能的。因此，要为图标制作简化的图形（像上图中网易的图标，易字的颜色很突出，不过由于其笔画过于零碎如不仔细处理不能很好的被识别）。；
因此，上面的一组图标中，属sina的识别性最强。
2、网页标题的使用：
首先，我们先看下显示网页标题文字的title标签定义：
如果你对SEO有所了解应该知道：网页标题对页面的搜索引擎结果有重要的影响。网页标题带有页面内容关键词的页面搜索引擎会给予更高的评价。
从用户体验的角度来说。网页标题应是页面内容的简要描述。当用户只能看到页面标签时，那么标签上面的文字就是唯一能得知网页所包含内容的信息来源。
而鉴于浏览器标签式设计的特点，应确保用户可在有限的文字长度内能够读懂标题。不过由于各个浏览器之间的差异，无法准确的给出多少个字的限制，标题的前半部文字显示出的概率要比后面的大。依据此原则，在标题的开头就比较重要了。
我抓取了Windows的四种与Mac上三种主流浏览器用来确定网页标题的最大/最少文字数目。
| Windows | 最多显示汉字符数 | 最少显示汉字符数 |
|---|---|---|
| IE | 20 | 1 |
| Chrom | 10 | 0 |
| Firefox | 15 | 2 |
| 遨游 | 12 | 0 |
| Mac | 最多显示汉字符数 | 最少显示汉字符数 |
| Firefox | 16 | 2 |
| Chrom | 14 | 0 |
| Safari | 17 | 4 |
除此之外，还有三种特殊情况：
用户打开太多窗口：
每个浏览器的表现不同，可能有些过于疯狂的用户会点成这样，或是电脑中毒后才会打开这么多的窗口。好在这样的情况并不常见。
从上面的抓屏对比来看，当打开过多窗口时：firefox效果最好：既有足够的展示标题空间也有网站图标。谷歌浏览器在过多标签的时候会出现堆积在一起的现象。
弹出窗口（在新浏览器中打开的）
这种弹出窗口类似于在新页面内打开一个窗口，因此网页标题的长度可以再长些。
全屏窗口：
全屏后标题就看不见，因此只需考虑SEO即可。
<< 返回前篇