网页设计师:原来Banner设计还有这么多套路！

新闻 2024-9-22编辑：深圳网站建设阅读（）标签： 这么多 套路

深圳网站建设公司 帮助企业提升【shēng】网站形象【xiàng】,彰显公司实力,PC+手机+微【wēi】信【xìn】+小程【chéng】序
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专【zhuān】属VIP的服务】24RX365 为【wéi】您【nín】提供1对1的专属VIP服务

　　Banner 广告是快速高效的吸引【yǐn】用户的重要手段。通常在网站中都占【zhàn】据着【zhe】不错【cuò】的位置，它们的转【zhuǎn】化【huà】率和它本身的设计优【yōu】秀与否息息相【xiàng】关，最重【chóng】要【yào】的是，它要能迅速的【de】吸引用户的注意力【lì】，通过优秀的【de】文案【àn】和【hé】视【shì】觉让用【yòng】户立刻马上点击。

　　那么，作为网页设计师，我们应该如何制作一张能快速抓住人眼球的banner呢?

　　一、分 析

　　1、结构

　　banner的结构大致分【fèn】为【wéi】三层【céng】：背【bèi】景层【céng】、装饰层、文案层。背景【jǐng】层会确立整体banner的风格或【huò】配色;装饰【shì】层起到【dào】点缀作用，并可【kě】以控制整体版式的平衡;文案层是核【hé】心【xīn】内容的展示，以展示【shì】主要文字为主。三层级互相组【zǔ】合【hé】搭配，从而支撑起整个banner。

　　2、版式banner的常见版式：

       ①左右排【pái】版、

       ②居【jū】中排版【bǎn】。

　　受【shòu】到文案字数限制、所选搭配元素、产品的属性等【děng】原因，版【bǎn】式【shì】的选择需要根据实际【jì】情况进行【háng】判断【duàn】。

　　3、样式

    常见的【de】banner构图样式组合有：平铺样式【shì】、环绕样式、倾斜样【yàng】式、斜切样式、放射样【yàng】式、isometric样式、三角样【yàng】式等。

　　4、关联

       背景层、装饰层、文案层，三者之间有【yǒu】着密切的关【guān】系。

　　比如：背【bèi】景层设计【jì】的过于复杂，那么内容文字的处【chù】理就【jiù】要倾向于【yú】简洁，反之亦然;而装饰层也并不是必须【xū】要存在【zài】于每一个banner当中【zhōng】。当背【bèi】景【jǐng】层中内容【róng】已经【jīng】很丰富的时【shí】候，装饰的【de】内容可以删去。

　　banner中背景是图片【piàn】，而且细节丰富【fù】，那【nà】么文案就【jiù】可【kě】以做简洁【jié】化处理。

　　当背【bèi】景为纯色时，需要适当的添加【jiā】点【diǎn】缀物。而且可【kě】以【yǐ】对文字进行处理增加吸引力【lì】，避【bì】免整体的【de】单调。

　　5、背景

　　背景的种类大致分为适量图形、字体、颜色和图片四种。

　　图片包括写实图片和卡通图片等;颜色分【fèn】为【wéi】纯【chún】色或渐变;字体放【fàng】大【dà】也可【kě】以当【dāng】做背景;矢量图【tú】包含的组【zǔ】合有很多【duō】。简单的圆【yuán】形【xíng】、方形。甚至是点、线的【de】组【zǔ】合都可以运用在背景中。每当节日临近，也可【kě】以匹配一些节日风格的适量图形【xíng】进行设计【jì】。

　　6、装饰

      装饰【shì】的点缀应【yīng】该是锦上【shàng】添花的。适当的点缀【zhuì】和修饰，可以让页面避免单调【diào】;也可以【yǐ】使banner的元素之【zhī】间【jiān】达到平衡，视觉效【xiào】果更【gèng】加和谐。同时，文字【zì】的运用也是【shì】装饰点缀的关键。根据产品属性的不同，举例说明：金融类的banner可以使用较小或【huò】较细【xì】的字体进【jìn】行【háng】搭【dā】配。同【tóng】时，使用【yòng】点状分布【bù】排列营造高端感;电【diàn】商【shāng】类的banner可以使用【yòng】渐变的圆【yuán】形或线条进行修饰。目的是搭【dā】建出欢快的【de】、促销的感【gǎn】觉【jiào】，吸引用户点击。

　　7、文案

      ① banner的设【shè】计当中，文案【àn】字数的多少也至关【guān】重要。过多字数或【huò】复杂的内容非但不能【néng】让用户清楚文案【àn】要表达的【de】事情【qíng】，反而会让用户感到麻烦。因【yīn】此，当我们接收到的文案字数过多的话，要第一【yī】时间【jiān】果断提出自己的想法。文【wén】案【àn】中的卖点和痛点【diǎn】是最【zuì】重要的两个部【bù】分，其他【tā】内容【róng】都【dōu】可【kě】以省略。

　　② 字体方面主【zhǔ】要分【fèn】为【wéi】衬线【xiàn】字【zì】体和【hé】非衬线字体。衬线字体的笔画有修饰，且粗细【xì】不同，参考【kǎo】宋体;而非【fēi】衬线字体就比较横平竖直，笔画粗细相同【tóng】。衬线字体大多用在古典风格或民族风格的banner设【shè】计当【dāng】中。非衬线字【zì】体适用的范围【wéi】就【jiù】比【bǐ】较广，可【kě】以说绝大多数的banner中都可以运【yùn】用。

　　③ 文案分为主标【biāo】题和副【fù】标题。主标题自然是最【zuì】精简也是最【zuì】抢【qiǎng】眼的部分，而【ér】副【fù】标题可以是【shì】主标题的解释说明，也可以是接主标题的新文案。区【qū】别搭配有助于用户第【dì】一时间分【fèn】辨出文案的【de】主次【cì】，让页面【miàn】更加协调【diào】。

　　8、配色

       好的配色需要一定【dìng】的配色基础以及日常练习的积累【lèi】。但是当遇到特殊状况【kuàng】时，显然并不【bú】会在【zài】颜【yán】色上留【liú】给我们有【yǒu】太多的时间。所以，我们就需要一些辅助的方式来【lái】完【wán】成【chéng】颜色的【de】搭配工作【zuò】。

　　这里我推荐两个网站：

　　第一个【gè】网【wǎng】站会推荐许多不【bú】错的颜色【sè】搭配，其中有不【bú】少是我个【gè】人比较喜欢的;第二个网站是material design官网中的color部分。其中的Color palettes在我们输入颜【yán】色之【zhī】后自【zì】动生【shēng】成搭【dā】配。有了【le】这两个网站的配【pèi】色加持，会大大缩短我们设【shè】计【jì】banner的时间。

　　二、方 法

　　1、搜集

　　要在极短的时间【jiān】内设计出【chū】效果【guǒ】不错的banner，除非【fēi】能力强悍【hàn】或是胸有成【chéng】竹，我能【néng】想到的方【fāng】法就在于平日【rì】的“积累”。

　　文中提到【dào】的背景、装【zhuāng】饰，都是碎片化可【kě】拼接的内容【róng】。我们在工作或平日里【lǐ】可以设计出足够的素材，那【nà】么在时间【jiān】紧迫【pò】的时【shí】候【hòu】进【jìn】行拼接就好。

　　文字字体方面【miàn】我们可以分析出平【píng】时所给文案中【zhōng】的一些“套【tào】路”;分【fèn】析里面【miàn】总是会【huì】提到【dào】的几个【gè】字或者是相似度很高的标题，来进行字【zì】体【tǐ】的设计。

　　无论【lùn】是简单也好【hǎo】、复杂也好，把平日里制作的元素素材进行整理【lǐ】归纳，建立自【zì】己的素【sù】材库。这样，在面对措【cuò】手不及的任【rèn】务【wù】时才【cái】不至于慌【huāng】乱。花瓣或【huò】者Eagle就是两个不错的【de】素材整理【lǐ】工具。

　　2、临摹

　　提到【dào】临摹，我们就不得不提到另一个词“抄【chāo】袭”。其实【shí】，抄袭的认定是【shì】见仁见智【zhì】的【de】。每【měi】个人都有自己【jǐ】的认【rèn】定界限。而我能【néng】想到【dào】的避【bì】免抄袭的方法，就是“刻意改变”。以下【xià】面的小人为例。

　　作为设计师而言，我相信都【dōu】不愿意碰到要求临时【shí】出图的情况出现。但我们【men】也需要【yào】为这种情况而做准【zhǔn】备【bèi】，以确保在时间【jiān】紧【jǐn】迫的【de】时候来保【bǎo】证自己设计【jì】产出物的质量。因此，日【rì】常的收集和【hé】积累【lèi】就尤为重【chóng】要【yào】。

• 上一章：网页设计师联盟:网站设计必须遵循用户体...
• 下一章：网页设计之栅格系统