赞助商
立即赞助

万字雄文!移动端 Banner 设计指南(附超多案例)

Banner设计3年前 (2021)更新 流光
3.2K 0 0

注:章分图片来源于络,有些链接实在到了,如果作者看到可评论里放上作链接,感谢。

万字雄文!移动端 Banner 设计指南(附超多案例)

根据遇到的问题,总结的一些小经验,个人的一点薄见,大交流。

国内国外运营 Banner 设计

最有小伙伴接到了国外的营外包项目,发现国外和国对于营的需求是有差别的,这篇章就谈谈国外:中国、韩国、欧美,它们营设计的各自特点和里面的门道。

主要从以下三方面来说:

万字雄文!移动端 Banner 设计指南(附超多案例)

1. 风格特点

个地区差异大相同。

万字雄文!移动端 Banner 设计指南(附超多案例)

中国从古到今讲究遵循传统,过年过节讲究气氛,营一种氛围。红包来表达祝福和心意;次,就是社会环境,中国人「热闹」,逢年过节,一帮人聚到一起才热闹,别人都、卖的火的肯定就是好的,就「跟效仿」。

韩国建国很,历史相对比短。所以文化氛围比年轻,偶像文化在韩国盛行,传统的东西相对少,是比年轻化的:年轻化的偶像,年轻化的文化,年轻化的价值观。

欧美整个文化环受移的响,比较开放国际化,体现的文化也是比较多的,包容性、简洁、尚是这些它最直的点。

接下来分谈下三个地区运广设计特异化:

国

国运突出是优惠:送红、满减、优惠券等;必须要喜庆,鲜艳色:以红色、橙色、黄色居多,来刺激消费。好像进了卖场「瞧瞧看看,季末打折满100减99」

万字雄文!移动端 Banner 设计指南(附超多案例)

韩国

韩国的文化「社交」这一关键词体现的尤为重要,「Line」这款APP对韩国响比较大,面的矢量涂鸦风格的插画深入人心,Line 官方计可爱且色鲜的「馒头人」、「可妮兔」、「布朗熊」和「詹姆士」四个形象也有点,所以Line的「IP属性」和「矢量涂鸦」就成为了韩国主流计风格。

万字雄文!移动端 Banner 设计指南(附超多案例)

2. 整体构图

而韩国的偶像明星文化也颇具影响力,在推时也用到明星来造效应。

从整体构图解析一下三个地的计细节。首先把一个运营 banner 按照组件层进行拆,别来一下。

分为:文层、主体物层、装饰层、背景层

万字雄文!移动端 Banner 设计指南(附超多案例)

文字层

从文字层可以出中国的文字层划更加清晰。运用「格式塔」理,主文案和标题的突出,能让用户对息提取更加准确直观。

万字雄文!移动端 Banner 设计指南(附超多案例)

中文结构的复杂性,排版上必须严格,所以在层划上装饰线的运用也是比较常见的。(后面有针对性字体计形式,详细解读,这就不细说了)

万字雄文!移动端 Banner 设计指南(附超多案例)

韩文的本身的图形质,为保证识别度,文案提炼简,息层相对较少。文字层一为层。

万字雄文!移动端 Banner 设计指南(附超多案例)

有思的是韩文由于字形结构的一,排版上多候会搭配字体形式的变化来增加排版式的变化,装饰线的运用也比较多变。

万字雄文!移动端 Banner 设计指南(附超多案例)

英文排版上本质上和韩文相同——符号化,通过字形的点来出主要息。

万字雄文!移动端 Banner 设计指南(附超多案例)

排版的优势性,让其排版变化上带韵律,加上装饰线的运用,本身字形的符号性视觉呈现有计。

万字雄文!移动端 Banner 设计指南(附超多案例)

主物

为辅助信息传达,往往采用图文结合,注意主物的构图局朝向,主题物对主要文字到视引导用,用户的聚焦点一定是主文案,而不是主物。

下图「」作为整个画面的「支点」,把模的脸部向主要文案指引,最终达活动的最核心。

万字雄文!移动端 Banner 设计指南(附超多案例)

下图「眼睛」为整个画面的「支点」,利用眼睛视线,把用户向文案核心指引。

万字雄文!移动端 Banner 设计指南(附超多案例)

利用周围的物体形成三个「支点」,把视觉中心聚焦中间主文案。

万字雄文!移动端 Banner 设计指南(附超多案例)

装饰

点面是运用最的元素,中国把平面设计的三大构成运用到极致。

万字雄文!移动端 Banner 设计指南(附超多案例)

为营造构图的稳定,在设计里加点和的元素让画面占比更加平衡,同时弥补画面中空白的地方,减少负空间,让构图更加饱满。

万字雄文!移动端 Banner 设计指南(附超多案例)

同时点和的元素也是为辅助衬托主元素,分要合理,避免,造成使画面的拥挤。

万字雄文!移动端 Banner 设计指南(附超多案例)

面简单的理成形状,用形状合主物,达到聚焦视中心,来突出主题,但是形状不易复,「式塔原理」——「简单」原则(我们的眼睛在观看时,眼脑并不是在一开始就区分一个形象的各个单一的组成部分,而是将各个部分组合来,使之成为一个更易理的统一),用户更容易理。

万字雄文!移动端 Banner 设计指南(附超多案例)

三角形——用稳定的特点来达到视的平衡

万字雄文!移动端 Banner 设计指南(附超多案例)

圆形——最简单直接有效的图形元素,视聚焦更明确

万字雄文!移动端 Banner 设计指南(附超多案例)

边形——富画面,边形的边角的特点也用做突出设计的高逼

万字雄文!移动端 Banner 设计指南(附超多案例)

形状流在营销中突出活动的促销感和气氛,在重大活动中经常看到,彩上也比鲜艳。相欧美、韩国,中国电运用比,也面反映出出中国运营推竞争的残酷映射出来的「浮夸」。

万字雄文!移动端 Banner 设计指南(附超多案例)

背景层

中国设计里最多变的就属背景了。可利多彩渐变、放射的线、还有图案叠,画面合表达的体基调

万字雄文!移动端 Banner 设计指南(附超多案例)

韩国的设计分为涂鸦放射背景和纯色背景简单几何形状

万字雄文!移动端 Banner 设计指南(附超多案例)

欧美撞色对和性冷淡纯色,会视错觉,来吸引户眼球

万字雄文!移动端 Banner 设计指南(附超多案例)

3. 营销推广层面

文案营第一素,办法突出运营信息,所运营必须注意的,这就了根据活动气氛行字体设。

中国字体的复杂和的久远特殊性,对于字体我们是有很深的研究和诣,表现空间很大。另外由于中字形的复杂,导致字库设计成本较大,字体种类相对较,为了避免字体版权问题,多采一些设计变形来达到营销推广目的。如针对字形进行改变、针对笔画进行工、针对体积和质感进行变等。

次叠加——提取等比重的笔画,变现字的积和空间感

万字雄文!移动端 Banner 设计指南(附超多案例)

笔画链接——让文字直接更紧凑,空间运用更整合理

万字雄文!移动端 Banner 设计指南(附超多案例)

笔画装饰——增加文字设计感,突出表现风

万字雄文!移动端 Banner 设计指南(附超多案例)

厚度次——让字突出,增加厚重感

万字雄文!移动端 Banner 设计指南(附超多案例)

字形改变设计——考虑到字版权,对字进行设计,结合主题进行宣传

万字雄文!移动端 Banner 设计指南(附超多案例)

字内部装饰——字呼应主题的一种简单方式

万字雄文!移动端 Banner 设计指南(附超多案例)

韩国字形相对简单,变化不是很,运用厚度积和笔画装饰来表现字

万字雄文!移动端 Banner 设计指南(附超多案例)

欧美的西文字更的是运用和主物穿插、和字形搭的变换,和复古风字厚度设计

万字雄文!移动端 Banner 设计指南(附超多案例)

4. 小结

可看到同的国地区根据本国习惯、审美、格同,都有各自同的设计。中国营销快速简单直接效果;韩国偶像路线,管是对于模特的择,还是红形象的择,把粉丝效应到了极致;而欧美则简单兼顾设计创意表现。

浅谈学习Banner

随着在大趋势崛起,很多习类产开始现。很多在做的小伙伴求助,习类的营 banner 无从手,思路清晰,那么我稍稍的屡了一思路,浅谈一习 banner 的个人薄见。

在很设计师刚开始缕思路的时,总因为无从下手而着急盲目,下意识的认为「我不啊」!复的不,就从简单的开始缕。从设计开始,我构图没想,设计啥设计?简单点,从构图开始吧,我思路没想,构啥图?继续简单点,一步一步往前推,直到推到最简单的细节,从最初一步开始做。你现,首先一步就是先建立一个符合主题的思路。

谈学习类 banner,光听一听就觉得头大甚至讨厌的事情。因为本来学习就是让人拒绝的,如何引导用户主动做一个不想做的事,就得用一些殊的段了。

咱们这主要从以下来多维度探讨:

万字雄文!移动端 Banner 设计指南(附超多案例)

1. 主题定位方向

K12教育

K12 也就是九年义务教育和三年高中,所以人群定位少年,年龄 7-18 岁。个年龄段非常单纯。

大家可以回想一下候,在这个年龄最享受的是什?那就是「足」和「参」,候玩积木、做游戏,最重要的不是赢了能得什西,而是参其中享受快。所以建立一种参,参进来「一起玩」的觉,就会得足。

万字雄文!移动端 Banner 设计指南(附超多案例)

下面这类 APP,为了能够吸引这一部用户,大多都以有趣好玩为主,「游戏性」是最大的点,所以情化计是非常好的选择,通过丰的「体积插画」用游戏的思路激发兴趣,让觉有参,从而吸引「想」并「点击」。

万字雄文!移动端 Banner 设计指南(附超多案例)

识付费

而对成年人来说,学习需求变成一种「插件思」,能够快速学,或者说是能够收获很的干货,突出不枯燥、学、能懂。类的情感化设计相对少儿学习插画,更的突出主题所以,以更极简的设计形式。

万字雄文!移动端 Banner 设计指南(附超多案例)

万字雄文!移动端 Banner 设计指南(附超多案例)

有时候字作为视觉中心更直观,整体设计格可更简单,对于成年人来说,这种设计更直达我们需求本身,更容易解。

万字雄文!移动端 Banner 设计指南(附超多案例)

高端知识分享

对于这部分人,面两类完全不同,从所处层级就不同。首先这类人,学习的可能就不只了,多的需求职场环境的。比如,我怎么同事、朋友、下属好的相处,如何具好的服力,或者修一下,就了学习需求,基于「马斯洛金字」里的,这里学习需求可能也高层次的,了体自己的价。

万字雄文!移动端 Banner 设计指南(附超多案例)

所以关的,这谁讲的课;通过设绪版,映射出当课程的专业、严谨、课程的价高,这些关键点。

万字雄文!移动端 Banner 设计指南(附超多案例)

课程的品质感的体,颜色不能太多,插画设元素少,多的利用文字排版少图形突出主题。

总之,根据代表的户来针对性设计。就好像剪头发,Tony 老师肯定会给一个 20 多岁的年轻人一个小平头;穿衣一样,你上班肯定会穿个背心裤衩就了,但在海边放松你可穿个西、牛仔,我相信大都明白这个道。

2. 构图结构

良好的构图,目的是够户易懂,首先结构要清晰、简单,要构图如:中、左右。

万字雄文!移动端 Banner 设计指南(附超多案例)

居中结构

突出活动文案,居中构图很好的选择,不足就体不了趣好玩的调性。直白主就明确什么。所以用户的视觉焦点会聚集重区域,忽略掉周围的东,设的时候,周围元素主衬托,不能抢主视觉重。

万字雄文!移动端 Banner 设计指南(附超多案例)

所以运用插画风格的话,简单轮廓插画剪影插画合的。

万字雄文!移动端 Banner 设计指南(附超多案例)

设的时候注意几点:一,主体突出饱满,太小易画面太空;二,弱化辅元素并不把它的粗糙。

万字雄文!移动端 Banner 设计指南(附超多案例)

左右结构

左右结构分为两,是左图右文,左文右图。两构图秘密在于,用户浏览序是「从左至右」,如图在左边,图在表意性不明显情况下,我们需要看遍文,再看遍图,这样图相于复浏览了两;文在左边减少了复阅读,提高了阅读效率,在运广「3秒原则」里,是首先要考虑素。而插画设计本身也是为了烘托氛,表意性不是很明显,所以突出文案尤为要。

万字雄文!移动端 Banner 设计指南(附超多案例)

所以,市上大部分学习知识类左右构图,更倾第左文右图。

万字雄文!移动端 Banner 设计指南(附超多案例)

左右构图受限于屏幕显示内容,所以,有个明确主体物至关要。比如:像 VIPKID 和哒哒英语,会有个自己 IP 主形象,比较生动突出了品特征,能让用户有代入感;有像些知识分享,会有个明确讲师或者物,体现专业权威性,在设计上切都以突出主物来展开,不要设计太过于复杂。

万字雄文!移动端 Banner 设计指南(附超多案例)

不于电商模特,主物首先穿着上不能太花哨,要正;围装饰上不要太浮夸,要精简,甚至像高端知识分享,背景个简单颜色来衬托。

万字雄文!移动端 Banner 设计指南(附超多案例)

衍生结构

还有以上面构图衍生的构图形式,比如倾斜构图,受限于 banner 尺寸高度,过大的倾斜角度会让画面失衡,负空间留不均,会让画面不协调。

万字雄文!移动端 Banner 设计指南(附超多案例)

构图比例合理

注意画面整构图比例,文案占比永远是大的,不要让主要画面辅助元素大抢文案的风头,因为即使图形辅助精彩,用户更关心的是「你能给他看什么」。

万字雄文!移动端 Banner 设计指南(附超多案例)

文案和辅助元素大概是六四开,黄金分割比例能让焦点更的关注内容,有小伙伴能在做的时的沉浸在放大的画里,由没有直观感受,错误的预估当前构图的合理,所以做图的时缩小画离远看是个非常不错的方法。还有一个就是,做完 banner 导出图,双击打开图,把图拖小到无法拖动为止,看当前际尺寸大小,用际尺寸来检查。

更多构图形式:《文案超多的海报计该怎排版?16个实用模板送给你!》

3. 文案文字

文案选字

文字的选择也是衡量当前产品用户定位的标准,首先文字结构不能太复,K12 教育因为身用户年轻化的特点,字形简单而且饱满有趣,所以一艺术手写爱字比适合。

万字雄文!移动端 Banner 设计指南(附超多案例)

免费用爱字推荐:沐瑶软笔手写、站酷快乐、郑科黄、站酷小薇 LOGO 、锐字言。

其可爱字体推:汉仪唐美人、汉仪糯、汉仪铸字童年体、汉仪麦体、方正胖娃体、方正字迹新书、造字工房童心、文悦方糖体。

如是高端知识分享和知识付费,体现高端。文要简单,形不要那么随意,些黑体和简单衬线体比较合适。

万字雄文!移动端 Banner 设计指南(附超多案例)

免费商用黑体衬线体荐:思黑、思宋、站酷文艺体、正书宋简体。

其他黑体衬线体推荐:汉仪瑞意宋、方清刻本悦宋、方兰亭、造字朗宋、造字黄金时体、造字体。

文案排版

当用户人群比较轻,意所的呈方式都直接,文案精简并且排版直观,提炼关键主标题,信息层级拉明显,如果信息层级不清楚,识别性很差的,先看下面的案例:

万字雄文!移动端 Banner 设计指南(附超多案例)

看这两,明显右的对于我们识别,对当功能的认知清晰,还一明显的视觉引导,突出了主的交互点;左的由于信息比较密集,导致我们无法短时间反应出关键信息什么,这比较糟糕的,运营同样如此,运营比较尴尬的一点,如果用户看不懂或不感趣,根本不会点击、不予理睬的。那么流入口的意义就了,设的再精,都一非常差的作品。

炼案是很有必要的,面两个同样的设计,右边对于案的认知就更明显。

万字雄文!移动端 Banner 设计指南(附超多案例)

有的时候往往案的键信息较多,我们在版的时候第一个重要点,就是版怎么拉开信息对,同时又版紧凑?有时需要增一些特定图形,或按钮。但是又会考虑,了这些特殊图形和案又显得相对独立整体;还有就是键点该怎么取舍,强那些案、弱哪些,或是案是重要的,同时键的数字要突怎么办?

万字雄文!移动端 Banner 设计指南(附超多案例)

左图,左边案放大了键点,由于右边案字较粗,层级拉开还是够突,如果想拉开对的话那就他们截然同。右图,字体择上拉开强弱,右边的字划择细一些;左图的键数字够突,通过亮改变颜色,来强;按钮在左边画面显得太独立,和案没有形成统一系,反而按钮看起来变得要案重要,那么把按钮插到里面。

现在所有的信息,一插一,并且突出的文案明显,关键数字也明显;最让他们整在画面构图中面积比例放大,改版是不是舒服很。

还有一些伙伴可能觉得亲密性则不就是距离相近,然后没有把控好各个部的文字距离,导致反而该拉开的没有拉开,该近的没有近。

万字雄文!移动端 Banner 设计指南(附超多案例)

上图这个案例,主文案为了行,但左边由于主文案行距比较宽,而跟辅助息的距离近,导致亲密性不够,而由于标题文案比较孤立,上半部的息和下半部息散,整体统一度不够。

右图改进后,调合适距,并加装饰线,协调下辅助信息比较短问题,时也起到分割作用让上下文案有关联和统。

文案排版的其他细节还错排版时,注意错的小,太会丢失掉排版的平衡性;注意文案排版对齐,往往的时候不注意,会让的作品看起不够精细;文案倾斜处理的时候,一般况都往右倾斜,第一,右都我们的主习惯方向;第二,往右可以很好的把用户引导到关键信息,这些也 banner 排版里常犯的错也规避的一些坑。

万字雄文!移动端 Banner 设计指南(附超多案例)

4. 颜色技巧

颜色倾向

如果是代表年轻化,多用绿色和黄色,绿色代表活力、生机、积极向上;黄色系代表温暖、希望、舒服。

这两个颜色由于是临近色关系所以也会搭配出现在画,色环 90° 颜色搭配所以是最舒服配色,有是颜色比常和谐。

由于蓝色绿色的邻近色、黄色的对比色,色绿色的互补色、黄色的邻近色,所以绿、黄、蓝、这些会画面中组主色、辅色、点缀色。

注意协调好每分颜色之间占,色 60% 左右、辅色 30% 左右、剩的辅助色 10% 左右。

万字雄文!移动端 Banner 设计指南(附超多案例)

如果是代表科技、互联,就会蓝色为,颜色会像上面那样丰富,颜色体现的设计没有那么泼,代表冷静、自然、科技。

一般画面在2-3种颜,以蓝为主,搭紫。因为紫和蓝是邻近,不像暖一样太冲撞,所以我们经常看到蓝紫种「基」的搭。

万字雄文!移动端 Banner 设计指南(附超多案例)

识分享类,分为普通的讲师分享和高端识分享。讲师分享颜要亮一,颜搭大概是 1-2 种。

而高端知识享,要体现知识的稀缺性和专属,代表尊贵、品质、价值,颜色大多用暗色或消色(消色就是黑灰),大概也是 1-2 种。

万字雄文!移动端 Banner 设计指南(附超多案例)

颜色方面总结点坑需要避开的:一,如果用插画表现,一定要避免颜色的灰和脏,因为学习代表着积极向上的,灰色不适。颜色选取的候大概要避开「颜色警示」的位置。

万字雄文!移动端 Banner 设计指南(附超多案例)

二,插画风格避免选择紫和一些冷色调,以暖色调为主,才能贴情绪版定位;三,同的道理,颜色不要过于艳丽、过于刺激,反差显了,反而阅读体验不好,响观;四,所有的颜色最终都要定位主题上,做完后,反向推倒检查一下,颜色呈现符当前文案定位吗?符面向的用户人群吗?根据主题当前配色适吗?

更多电商配色法:《这是篇不看会后悔配色干货》

5. 小结

最后我想说是,所做东西把自己成模拟用户自检下,自己如看到这个 banner 会击么?会吸引到你么?能观感受到么?会让你舒服么?如连自己都感,那是相失败。

如何使Banner中主体物更突出

运专题在设计时候,我们要考虑是针运需求,特定需求用户传零成本阅读体验,很多设计师做 banner 画特乱,原是画没有突出主体元素。

所以 banner 设考虑贴合当传达的主题,所谓设的「言之」。下面详细的谈一下运营设时如何突出主体元素,其中的言之。

营最终想给户快速传达案信息,就是「秒阅读」体验,配合辅助案的体图形更方户解。

以看到下图左为让画面富,设计师往往加一辅助元素或图形;而图右糟糕的元素添加反而度设计,干扰用户对运营活动身的理和其表意。

万字雄文!移动端 Banner 设计指南(附超多案例)

么,何突出视主物,而达到最理想的设计品的表意呢?

从以下五方面细谈:

万字雄文!移动端 Banner 设计指南(附超多案例)

1. 图形化辅助元素

流畅线条的

我们在看音乐类营 banner 的时候发现线条非普遍,特别是利 illustrator 里的「混合工具」来实现两条线之间的复制混合。

万字雄文!移动端 Banner 设计指南(附超多案例)

人涂鸦剪影

往往了表特的主题:比如轻化、性化,通过错移动,添加亮色使人突出,往往多的表:音乐、设、嘻哈接文化的电商运营宣传中。

万字雄文!移动端 Banner 设计指南(附超多案例)

这类设性鲜明,所以之考虑好,所传达的特的人群不符合当的审认知。

简单几何形状

时候了让传达主题加明确,简洁化设很必「少即多」,所以比如学习知识付费类的设,脆就用简单的圆形、方形、波浪曲线。

万字雄文!移动端 Banner 设计指南(附超多案例)

下面这案例,设者了使这几人不会太散,用圆形包裹,目的也了加整体,试一下,如果把圆形去掉,人不仅会显多,画面也显得既单调又乱。

万字雄文!移动端 Banner 设计指南(附超多案例)

立体几何载体

让风格调性显品质高,样让设计少而精。需要注意是,品质感高逼格设计所用图形相要规些,尽量不要显太随意,多用块形状和立体几何载体。

比如网易严选,了突出「所卖东都精挑细选」,会采用立体几何载体衬托的方式,所表的就「隆重里挑一」,我们不一样~(会唱的朋友们一起唱)

万字雄文!移动端 Banner 设计指南(附超多案例)

多边图形

运用模特表现时候,高品质感会用些规则多边形,比如:四边形、多边形等。多边形状会我们带来稳感,「尊贵感与众不」往往是这类商品想传我们。

万字雄文!移动端 Banner 设计指南(附超多案例)

不规则流体

促销类商营造促销的氛围,激发购买欲,会用多色彩的不规则流体,目的为了传达「降价、折扣、减、超值、限」等 ,往往会为围绕主体物四周,突出主体素。

万字雄文!移动端 Banner 设计指南(附超多案例)

小结

图形化元素是最简单也是最用的一种突出主元素的表现方式,不管是用哪种,一定要想明白所表现的主题:符不符合当前主题;推所属对应的用户群:心理认上能不能赞同;满两点,所加的图形才有意义。任何图形是为辅助突出主元素,住一点,你就不盲目的进行设计。

2. 文案装饰衬托

字铺

直接把相字铺是最见的一种方式,当前对应题的人物名字、相案、对应英等。

万字雄文!移动端 Banner 设计指南(附超多案例)

文字与主体穿插

利用文字与主体的穿插营造出空间感,也平面设中常用到的手法,同样也保证文字基本的识别度提下。

万字雄文!移动端 Banner 设计指南(附超多案例)

注意文字颜色与主体颜色之间拉反差,不糊一坨,就得其反了,当的时候加一点点阴影还很必的。

万字雄文!移动端 Banner 设计指南(附超多案例)

小结

不管是什么形,所加文要有意义,跟主题相关。任何加文案定要能衬托主体物,也要有很强表意性,毕竟文案才是最要。

3. 颜色对比的运用

主体物吸色衬托

从主体物上之间选取,作为背景颜色搭配,来衬托主体物简直不要完美,前提是主体物的颜色相对够和谐舒服。需要衬托的背景颜色相对要弱一点,以突出主体。

万字雄文!移动端 Banner 设计指南(附超多案例)

颜对比

我们一想到颜对比,马上想到「红绿赛狗屁」句,句的意思不是说红绿不行,而是说错误的红绿不行,听不懂啊?来,举个栗子…李子…梨子…例子!

万字雄文!移动端 Banner 设计指南(附超多案例)

左图的红绿颜占比以看到是比平均的,大概1:1的比例,但是红为一个比刺激的颜,颜很鲜艳,果搭的绿也一样饱和度很高,两个撞到一没有一个突出,画面就不么和谐。

右图如果把红色的占比相应的减少,饱和度不变,而绿色降低饱和度,从而面积占比增大,起衬托的作用,画面之间是不是舒服多。

下图其他颜色比样如此。

万字雄文!移动端 Banner 设计指南(附超多案例)

结

颜色对比的诀是:主体如果是亮色,背景就用冷色;主体用重色,背景用亮色;主体用纯色,背景用灰色;不管哪种对比,主体物的颜色一定是面积最的那一个,无论如何拉开颜色对比反差是道。

4. 主体物局部打光

人物面部打光

人物面部是最容易辨识,也是视焦点部分,所以让面部从画面凸现出来尤为重要,让光源聚焦到脸部,主人物显得更加有质感和饱满度。

万字雄文!移动端 Banner 设计指南(附超多案例)

物体亮打光

物体和人物相相对简单,亮光分为视觉焦点,物体显得有质感,只需要给亮特殊光源即可。

万字雄文!移动端 Banner 设计指南(附超多案例)

小结

光线能突出主体的同时,让构图加丰富饱满,切记光线不过亮,看起会很不舒服。

5. 主体元素摆放技巧

物截取范围

截取摆放物时候注意,为了让视觉焦、有辨识度。具有代表性物和明般截取半左右,大约胸部以上部位;而电商模特为了展示所卖衣服,般露出大约三分。

万字雄文!移动端 Banner 设计指南(附超多案例)

万万不要切头部

让人物完美的呈现在画面之中,让画面能够起来舒服些,构图也相对完整,反之把头部一刀切,会使画面负空间变,构图拥挤,而观者对于人物的识别度也随之降低,阅读成本变高。

万字雄文!移动端 Banner 设计指南(附超多案例)

人物摆放要求

人物组合时,整人物处理要基持一致,特别是眼睛视要尽量持统一的视基准,不显得乱不堪。

万字雄文!移动端 Banner 设计指南(附超多案例)

多物体的摆放

表现美食产的时候,字中构图,物体散点摆放要注意,角的统一,统一俯视角,要有俯视有平视,保证统一。

万字雄文!移动端 Banner 设计指南(附超多案例)

6. 案例带练示例

案例分析

这是个小伙伴做美类运 banner,看到这个设计时候我内心是崩溃,我们分析下问题。

万字雄文!移动端 Banner 设计指南(附超多案例)

问题,首先主体物没有突出,主体物偏灰,背景也灰;问题背景太乱,没有视觉焦;问题三,文案识度完全丢失掉了,排版也太乱;好下我们来改下。体看下来,并没有表现出美要体现「变美」,用户完全没有视觉感受。

调改动

万字雄文!移动端 Banner 设计指南(附超多案例)

前对比

最我们来看看对比效果,是不是很。

万字雄文!移动端 Banner 设计指南(附超多案例)

无论什么样的设计,加什么样的元素,目的只有一个就是要有理有据、有道理,所有的运营设计是为辅助主文案。不要让你的设计无用,或者减分,把设计元素最大化挥它的用才是设计的最终目的,你就说是不是吧!

更多突出主体的面计巧:《背景主体之如何让背景突显主体?》

最后我想说是,设计没有绝好与坏,能根据不需求做出符合用户体验习惯设计,才是好设计。设计师任何不以解决问题为目设计,都是设计师自我意淫。希望这篇文章能大家带来帮助!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

近一年多接触到了插画 Banner 设计,算是自己边做边摸索,还在学习探索期,目前总结了一些做稿的思路,分享的目的是为了梳理...
banner教程
当你需要展示一段持续提示,却又不想打断用户操作。用 Dialog 弹窗会打断用户操作,Toast 又不够明显,Snackbar 会自动消失,...
Banner
Banner包含什么元素? 在电商设计中,最重要的就是店铺的banner设计,banner中所包含的元素也多种多样,每一种都有不同的功能...
Banner设计
什么样的电商 Banenr 点击率更高?京东出品的人工智能设计平台「羚珑」通过对比分析每日产生的几百万个设计图,得出这5个实用...
Banner
每张运营位中的视觉图,其实都代表着整个平台的视觉品质。不论是犄角旮旯,还是我们的开屏图、首页轮播位。 发现问题 首页头...
Banner设计
本篇内容是围绕插画 Banner 三个层次中的画面元素层的延展内容。 在拿到设计需求,没有什么想法的时候,可以参考以下画面元...
Banner设计
经过上篇的分享《Banner设计宝典系列!玩转9种最常见的设计风格》之后,我又马不停蹄的进行了这篇文章的总结。 今天分享的内...
Banner设计
近年来,设计圈有两大趋势不容忽视,一是人工智能、神经网络、深度学习无疑是时下最热门的科技名词,「人工智能设计」这个词...
Banner