数字营销
加载的结果……
网络浏览器可能是人们电脑上最常用的应用程序之一。对于设计师和开发者来说，浏览器主题就像画布，能够让艺术家或品牌为他们的粉丝群创造主题。但是，在如此极端的景观方向和一系列功能障碍的情况下，设计浏览器主题是一项充满陷阱和陷阱的创造性努力。
在设计一个新的主题时，有很多事情需要考虑——从避免受版权保护的图像到实现在特定浏览器范围内工作的设计。本指南包含了为Chrome、Firefox和Internet Explorer设计自定义浏览器主题的一些关键技巧和一般指南。
凤凰城太阳队的浏览器主题与图像很好地平衡。
浏览器主题设计的关键注意事项
设计浏览器主题最棘手的部分是环境的可变性。
保持设计的灵活性，以在Linux、Mac和PC以及不同版本的浏览器上良好地显示Firefox和Internet Explorer，这是至关重要的。例如，Firefox 4和IE在标题栏中显示了部分背景图形，而Firefox 3.6及以下版本则没有。
环境变异的维度与处理
Firefox提供了最大的设计灵活性，特别是在浏览器chrome，这是导航按钮和URL地址栏所在的区域，以及浏览器视口之外的区域。
Windows操作系统下的Firefox 3.6浏览器chrome。
Windows操作系统下的IE 9浏览器。将两者的差异进行比较。当我们设计跨浏览器主题时，Firefox是其他设计的基础。下面，你将看到印第安纳波利斯小马队浏览器主题显示了从Firefox到IE再到Chrome的设计空间的缩小。
小马Firefox浏览器主题。
小马IE浏览器主题。
小马Chrome浏览器主题。设计的垂直占地面积保持在最小。虽然Firefox需要200像素高的图形，但实际情况是通常只能看到前85像素。对于Internet Explorer，垂直维度锁定为50像素;对于Chrome来说，就更少了。
依赖于用户能够看到完整图像的设计可能无法工作，因为顶部或底部铬并不总是可见的。图像的水平尺寸也有其特殊的考虑。当浏览器窗口水平放大时，背景图像会发生移动。
设计师必须牢记这一点，因为一个以500像素打开的浏览器和一个以1024像素打开的浏览器从背景图像角度来看会有完全不同的外观。
我们公司浏览器主题的维度指南。图像的总宽度为3000像素。使用跨越整个背景的图像或占用整个空间的单个元素是解决问题的一种方法，但也可能导致过大的文件大小(从而导致执行速度较慢的主题)。
使用重复背景
一种方法，以确保充分风格的背景和较小的文件大小需要使用筛选元素，平铺纹理或部分图像。这些有图案的背景可以提供简单的优雅，减小文件大小，更大的灵活性和潜在的更成功的设计。
选择映像文件格式
为您的浏览器主题设计选择正确的文件格式与决定在网页设计中使用哪种格式类似。
如果图像需要透明，请使用。gif或. png格式。如果它们不透明，使用.jpg作为文件格式。
动画
该设计的动画组件也可用于Firefox和IE。这可能是一个很好的增强(例如，在圣诞树浏览器主题中添加闪烁的灯光)，但很容易做过头。保持动画最少，因为它可能会分散用户的注意力。
Firefox支持gif或png动画。IE只能显示动画gif。
处理所需的浏览器UI组件
设计师必须牢记，在创建任何设计时，都有特定的元素需要可见。
例如，在Microsoft Windows中，控件位于浏览器的右上方。Chrome、Firefox和IE在标签不透明度方面都有视觉差异，这取决于标签是在焦点中还是在背景中。导航控件、地址栏和搜索框背后设计的可见性也因浏览器和操作系统而异。
旧的漫画浏览器主题是一个有趣的概念，有很多易读性问题。
保持简单，避免视觉疲劳
记住:浏览器每天要使用几个小时，用户每次打开浏览器时都要查看浏览器的主题设计。保持设计赏心悦目是避免使用的重要标准视觉疲劳一个失去的用户。
处理“新标签”用户体验
通常情况下，在设计浏览器主题时，浏览器chrome应该是重点，因为这是用户一次接触数小时的内容。
“新标签”体验——用户打开一个空白标签或打开另一个浏览器窗口的事件——也在浏览器中创建了主题机会。在谷歌Chrome的情况下，这是受限制最少的领域。新的选项卡图像可以为这个区域带来一个设计元素，而不是一个等待用户下一个URL的空白页面。
Chrome中使用图像，Firefox中使用HTML。文件大小也是保持标签加载速度的一个考虑因素。浏览器标签的功能越来越强大;它已经成为搜索框、缩略图和动态统计(比如Gmail中有多少未读电子邮件)等新功能的保留场所。
我们建议你把你的设计强度放在底部，这样它被阻碍的机会是有限的。
保时捷Panamera浏览器主题展示了“新标签”的体验。
在浏览器主题设计中要避免的事情
现在您已经熟悉了创建浏览器主题的一些一般设计注意事项，让我们来看看应该避免的一些事情。
浏览器主题logo太宽
Firefox允许将logo插入到导航按钮的左侧。
你的logo实际上可以将整个浏览器的导航UI向右移动。然而，用户有强烈的偏好浏览器的后退按钮停留在原来的位置——称之为“肌肉记忆”——如果浏览器主题将它移离原来的位置太远，就会产生挫败感。保持标志宽度为最小。
依赖于像素完美位置的设计
由于跨浏览器平台的变化，依赖于垂直元素精确放置的设计必须从考虑中消除。例如，在某些情况下，背景图形元素会向上移动，从而在设计和浏览器布局之间产生冲突。
布朗大学的浏览器主题需要刷新，以修复Firefox 4中由水平线造成的不对齐。
浏览器主题设计入门
浏览器主题为你提供了一个吸引在线观众的好地方。
对于公司来说，它将他们的品牌扩展到广泛使用的应用程序。对于设计师来说，浏览器主题是一个具有挑战性的地方，可以展示他们的设计技巧和克服环境限制的创造力。您是否有兴趣开始构建自己的自定义浏览器主题?
这很容易开始。这里有一些资源可以帮助你开始工作。
- 铬:入门-主题-谷歌Chrome扩展
- Firefox:如何创建角色(基本的Firefox主题指南)
- Firefox:创建(并托管)自定义角色
- Firefox和IE: BT:Engage(设计、构建和分享您自己的浏览器主题)
相关内容
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。
