当打开一个网页时，最先抓住我们注意力的就是页面的Banner图，它相当于挂在网页最醒目位置的“广告横幅”，与企业（产品）形象和宣传思想紧密相关。

网页设计中，一张Banner图主要的组成元素包含4个方面：文案 、商品、背景、点缀物，通过细节的处理，打造吸睛的视觉效果，从而引导用户关注网站相关内容。

当开始构思一张Banner图前，设计师首先需要弄清楚企业（产品）的定位和分析用户群体画像，其次在进行各元素的创作。

一.文字的设计

在网页上，群众能直接获取的信息80%来源文字表达的形式，文字是页面中不可或缺的组成元素，字体的样式、大小、颜色的设计好坏可以直接影响到整个页面的视觉传达效果。

直接将一行文字贴在Banner页面上，是很多新手设计师最容易犯的错误，制作出的banner图呆板木讷，群众看到也没有明显的情绪波动和视觉震撼。

避免这样无效的信息传达情况，设计师可以在文字排版上进行排列混搭设计，例如

大小和颜色的混搭

排列组合的混搭

不同字体之间的混搭

二.色彩的运用

抛开纯理论形式的冗长无趣，色彩在banner中应用的概念主要有两大类——彩色和非彩色，彩色的看色相、纯度、明亮度，非彩色就是饱和度为零的色彩。

只是将暖色调改为冷色调，画面所表现出来的热闹气氛立马被削弱大半。

采用了大面积留白给人素雅的感觉外，画面的整体颜色也采用比较安静的灰色调，给人舒适素雅的感觉，而图2增加饱和度整体变得非常艳丽。

那么在Banner图的实际设计中，我们应该如何使用色彩呢？首先色彩在画面设计中不会单独存在，必定需要依附其他的构成，比如平面构成、立体构成等。

同时在运用色彩时，可以采用网页中的色彩统一，具体可以体现在网页里所有区块标题颜色的统一性，整个网页界面的所有颜色的搭配。

或者采用富有对比度的颜色搭配，可以极大程度的冲击用户的视觉直观感受。

细节决定成败，作为设计师在Banner图的设计上更要多加注意，让页面整体更符合企业（产品）的宣传主题，展现出的色彩搭配更具有吸引力，采用个性化的文字搭配，从而提高网页的吸引度和关注度。

三、辅助元素

相对于枯燥的文字，图片更容易引起用户的注意力。但这可能会影响到文字的效果，最终用户单独的通过图片无法理解网页内容传达的意思。那么我们可以将图片作为辅助元素，页面中心用文字表达，背景用图片辅助，当用户切换文字的时候，图片跟随变化。这样既不显得单调，又能很好的突出页面主题内容。

四、优先排序

通常我们用大图去给用户以视觉冲击力，也最能引起用户的兴趣，所以我们将图片优先展现。当然，当用户被吸引住之后，我们再用文字去引导他下一步的动作。而且，在设计网站的时候，我们还可以将图片和文字配以不同的颜色，更方便的去引导用户。

五、加载速度

网站上图片放的比较多，特别是一些高清精美的大图，然后JS交互效果也比较多，而如果是响应式网站，那么加载的速度可能就会受到一定的影响。这时候，我们如果让框架先加载出来，文字浮现，图片再慢慢呈现，用户体验可能会好很多。