前段时在做运类设计，banner 在其占了较大比，为此想写篇阶段性结。其部分观参考了相关视频教程和文章，设计新手枚，如有不足请大家海涵。
banner 由五分组成：版式，字体，颜色，背景，点缀。我就针对这几点做些具体分析。
一、关于版式
大家发现没有，大体上 banner 版可分为两：图文左右排版、文居。
1. 图文左右排版
banner 需要含具体素材，如某位大咖，某件品时，般会选择左右排版。并图文比例约为6：4（接近0.618黄比例）。
关于为何文部分要大于图片部分，我做了如下分析：如 banner 有某位大咖、某件品，而没有文衬托，用户不会知 banner 想表什么。
如图，banner 中只有一位拉大琴的中年外国男子，人们会猜测这男子的个人专辑发布了？他是谁？，通过图片户只对信息有个大致了解。
相反，如果把 banner 中图片分遮，而只保留字分。人们够获取的键词有：5首电影歌曲、忆过往的。因此即使没有配图，字将信息精准地带给户，字占例应当图片多些。这就解释了为何大分左右版的 banner 都是字占大于图片。
banner 有些文放左边，有些放右边，这有什么区呢？
图中第一个 banner 是于欧美电影歌曲的，右侧可布拉琴的男子，可配电影片，还可放正在播音的留声机。第二张 banner 同样如此。
面两图均是图左字右的 banner，第一张《首席医官》，特指这本书。
第二章奥运冠军陈一冰求婚——除了没别人了。
说了这多，总结出图右字左和图左字右的别了吗？图片在右，配图内容比较模糊；图片在左，配图内容比较清晰。由于人习惯的阅读顺序是从左右，左边放什味着用户会先什。当图片息清晰图片放左，先用定配图吸引用户目光，再加以体的文字阐述就更正常不过了。而如果把含义不清的配图放在左边，用户得右边的文字部才能获得 banner 想传递的内容，这会导致用户收息间增加。
2. 文字居中
在工作中没怎触过文字居中的排版方式，因此抱歉没法做多的剖析。印象中商比较喜欢此类排版，也许是文字放在正中的位，底下可以放许多产品？
版式中小标题的比例：
发？小标题比例约2：1。其实这一级标题，二级标题同道理，我们设 banner 时总希望用户能把 banner 的文字看全，但又不希望小标题混一起主次不清，因此排版合理，用户能看清字的综合考虑下，小标题比例约2：1。（其实小标题太小运营们也会怼的）
二、关于字体
banner 中常用的字体三种：衬线体（serif）、非衬线体（sans-serif）、书法体（cursive）。
都字体各自的性格，衬线体笔画粗细之分，它模仿的中古字体古碑文的字体，因此衬线体能给人古典，文的感觉，合用于文气息或与女子的相关设。
非衬线体笔画简洁，笔画较粗，体，简约的特性，合用于苍劲力，与男子相关的设。
书法体源自中古，能体中文化挥洒墨水的豪气，用于文主题金戈铁马般的豪迈主题。
注意：商用字体需注意版权，这点很重。
三、关于颜色
活中，色彩心理学让人对颜色的认知有大的响。
黑色：黑色一种表品质、权威、稳重、时的色彩，同时也含冷漠、悲伤、防御的消极感。
白：传递一种简单、纯、高雅、精致、信任、开放、干净、畅快、朴素的情感。
灰色：代表睿智、实、执着、严肃、压抑色。
红色：传递庆、自信、斗志、权威、性感的情感。
绿色：是然界中最常见的颜色，代表生命力、青春、希望、宁静、和、舒适、安全的情。
蓝色：三原色中的一种，表永恒、灵性、清新、自由、松、舒、宁静、商务。
紫：是一种代表优雅、浪漫、高贵、时尚、神秘、梦幻、灵、创造的颜。
黄色：代表阳、青、活力、时尚、尊贵、年轻轻快、辉煌、希望颜色。
因此在设计中择色调要遵从如上。
例如活泼年轻的内容可选择纯度较高的蓝绿色、绿色等作为主色调。
文艺类内容则适饱和度不高，偏向色这类能让人静的色彩。
关于颜色的搭配，一会在花瓣上找些主题相近的 banner 作参考。
此外推荐几配色网站：
- https://coolors.co/browser/latest/1
- https://color.adobe.com
- https://uigradients.com
四、关于点缀
大约有3种。椭圆点缀，圆角矩形点缀，实物点缀。圆形圆角矩形点缀可适当加些渐变和阴。
为了不让实物点缀过抢眼，可以适当做些弱化，比如降低透度或是做些模糊理。
五、关于背景
大约有3种，纯色背景，实物背景，材质背景。根据画面的需要可择合适的图。
看了这么多手痒痒了吗？此时此刻，打开 ps 做个 banner 练练手呗。
欢迎关注作者的公众号：「喜马拉雅XUED」
浙公网安备33011002017549号