导读： 今年iOS 7与Android L都将动效作为提升用户体验的利器，如果你还木有通读整一篇设计指南，就先来了解一下阿里同学今天的分享吧，通过案例剖析，帮你了解动效与设计原则的关系，来学习咯。 一个新的设计风格的确立一定会提出他特有的设计
今年iOS 7与Android
L都将动效作为提升用户体验的利器，如果你还木有通读整一篇设计指南，就先来了解一下阿里同学今天的分享吧，通过案例剖析，帮你了解动效与设计原则的关系，来学习咯。
一个新的设计风格的确立一定会提出他特有的设计原则。而如今设计原则越来越多的关注到了动效的定义。甚至在Android L的Material
Design中直接将动效写入的设计原则中：Motion provides meaning
（动画表达含义）。这里我们就通过一些业界成熟案例来简单说明下动效是怎么在设计原则的基础上定义出来的。
首先，我们看下iOS 7上的案例。众所周知，iOS 7相对于6设计更加的扁平，去掉了很多质感，保留一些微弱的质感，避免对内容的干扰。这一点遵循了iOS
7最新的设计理念，内容优先（Defer to Content），透气（Provide
Clarity）。基于内容优先和透气的原则，对之前繁复的UI进行减负，剔除多余元素，有主次的保留，并统一界面里的质感。
iOS的6到7，外界都评价为设计由拟物到扁平，其实并不准确。iOS7还在延续拟物的设计，从界面到动效上有主次的保留了拟物的元素。
时间设置控件可以很清楚的说明这个问题，新旧两版都是模拟波轮这个物体。只是新版为了更加突出内容，放弃了多余的质感，内容的呈现依然用波轮的方式表现。甚至在你波动波轮时会发现，已选状态上依然保留了玻璃的特性，在边缘会有一个折射效果。由此可以看出，iOS
7的简洁还是保留了相当多的拟物细节的。
另一个细节是在开关控件的设计上，新版同样放弃了原有的光泽的材质，而使用了更加柔和的材质，让界面更加的主次分明。如果说之前的材质是金属或者硬塑料的话，那新的材质更加柔和，类似纯色的橡胶，更软，有韧性，可延展。由于材质发生了根本的变化，那么所显现的动态效果也将是不同的。
以上这些都是基于内容优先和透气来做的。iOS 7还有一个设计原则是：有层次的表达（Use Depth to
Communicate）。在ui界面上表现为前后层次的区分，通过纵深感表达内容之间的关系。
在动效方面，动画转场是对内容层次关系更好的诠释。通过模拟的纵深效果，让用户清晰的知道页面之间的从属关系。
虽然iOS6也有类似功能的动画效果，通过抽屉打开的形式表现层级不关系。但很显然，新版的效果与确定的设计原则更吻合。
参考： iOS Human Interface Guidelines
说完iOS，说说Android。材料设计（Material Design）是google发布的系统Android
L里提出的设计观点。其核心设计原则是，材质的隐喻（Material is the metaphor）。
关于材质的隐喻，简单一点说就是将物理界中不同的材质特性提炼，再按需要结合在一起使用的 *** 。单从视觉上看，材质的隐喻更多落在卡片式设计上。但材质的特性更多需要通过行为上的互动才能体现出来。通过对象给出不同的反馈，可以了解到它的材质特性。这就需要通过动效的手法来体现。
这里我们举三个点击反馈的案例，来说明Android是怎么诠释材质的隐喻这一设计原则的。
这三个效果都是点击触发的，彼此之间有共同点，但又都不完全相同。我们可以将反馈动画分解，能更好的说明问题。
涟漪效果＋区块变暗
涟漪效果＋阴影变大
涟漪效果＋内容闪白
这时，我们可以发现，反馈动效都用到了涟漪效果，同时它又是以手指的触碰位置确定起始位置的。结合起来，很容易就可以想到，这是引用了水的特质：手指触碰平静水面，产生圈状涟漪。
除了涟漪，我们再来分析下另外三个不同的动效：
区块变暗 > 内容下沉效果 > 按钮按下
阴影变大 > 区块浮动效果 > 被磁力或意念之类的抓起
内容闪白 > 闪光照射效果 > 拍照时的闪光灯
同样都是点击，为什么要赋予内容不同的材质特性呢？这我们就要看下使用场景了。
wifi的选择菜单，点击结束后即关闭了；
卡片式的内容区块，选择后应该会展开更多内容；
相册照片，与拍照的闪光灯可以自然的联想到一块。
所以，结论就是，点击手势赋予内容水的材质；而根据不同场景又分别赋予了内容按钮、悬浮、闪光灯的材质。这就很好的诠释了材质的隐喻这一概念，根据不同需要将不同的材质特性赋予一个对象。
ok，关于动效与设计原则之间的关系，我们先说到这里，下次我们将会结合自己的案例详细说下怎么基于设计原则打造适合自己产品的动效。
原文地址：muxalimama
*** 天气图标动效是AE软件的一个经典应用场景，它可以让你展现出各种天气状况的动态变化，增强视频的视觉效果和趣味性。如果你想学习如何 *** 天气图标动效，本文将为你提供详细的步骤和技巧。废话不多说，接下来我们就将通过步骤详细的为大家讲解讲解，一起来看看吧~AE *** 天气图标动效图文教程：01:画图标在AI中绘制图标，合成尺寸800600，提前分层，方便导入AE02:导入AE将AI文件拖拽到AE中，选择导入类型为合成，材质大小为图层大小03:调整构图调整合成设置，帧率30，持续时间2秒04:创建一个背景图层创建一个纯色，作为背景，在底层05:创建形状选择AI层，右键单击从矢量层创建一个形状，然后删除AI层06:准备插件准备好随机插件07:生成动画将插件类型更改为wiggle，选择Sunlocation属性，然后单击以生成随机动画08:调整属性调整位置和力度09:调整速度检查周期2秒，调整运动速度至0510:添加效果预合成云，在预合成中添加随机效果(同上)11:调整属性复制云并将复制透明度更改为7012:添加掩码新建一个调整图层，设置云体的alpha蒙版13:调整效果给调整图层添加一个高斯模糊，强度为100，你就完成了!最终的效果：完成了这一系列的操作之后，你已经成功地 *** 了一个简单而又生动有趣的AE天气图标动效。当然，还有很多其他的天气状况可以通过类似的方式来实现，而且随着你对AE软件的更深入理解，你也能够创造出更加复杂和高级的天气动效。希望本文能够让你在AE *** 中取得更多的突破和进步！最后，还为你提供更多的AE教程，一起来学习学习吧！
动效有多重要？那是太重要了。如果现在APP没有动效，你肯定会感觉少了点什么，比如最简单的加载动画得有吧。动效的重要性在于将交互、视觉过渡处理的更加细腻，而且能够承载更多的信息，比如iOS动效、MD动效等。
许多大公司也将动效设计列入了 *** 要求当中， 可见动效在用户体验中的重要性，设计师应该快速学习动效设计，提升自身的核心竞争力。
如果重新审视10年前的网页和移动端应用的话，你会发现动效和动画在这个时期简直是犯规一般的存在：浏览器和硬件设备吃不消，它们根本无法成为设计更佳实践。
十年前你所能看到的动画和动效，通常是使用Flash实现，或者短暂的存在于弹出框和闪烁的按钮特效中。但是情况在最近的几年出现了巨大的转变，iOS和Android 设备的大规模普及，移动端芯片的性能提升，让设计师在移动端APP上实现多样的动画和动效，成为了可能，而今天， 动画和动效已经成为了如今UI和UX设计当中，最重要的组成部分之一。
动效设计，顾名思义即动态效果的设计，用户界面上所有运动的效果，也可以视其为界面设计（UI design）与动态设计（motion design）的交集。合理的动效可以帮助引导、取悦用户，减少等待时间，更能增加产品识别度。 让用户更爽的用产品。
首先要讲到motion graphic（动态图形设计），在长时间的历史演变中，MG常见的应用是**片头片尾，在TVC广告末尾的标志动画，以及电视包装当中常用的Logo演绎，ID呼号，角标等等。
而随着行业的不断发展，MG涉及的领域也开始细分，越来越多的从业人员从**、电视这些传统的领域向其他新媒体迁移，这其中就包括互联网行业。
作为多学科交集的界面动效，其设计者可以交互，也可以是UI，甚至很多时候是前端开发直接完成的。 很多比较完整的设计团队，专门招的动效设计师，除了做界面动效外，还会做与产品推广相关的motion graphi。
本质上， 动效设计（Motion Design）是因为整个用户体验行业的发展而细分出来的设计门类。
界面动效（UI motion）区别于motion graphic 更大的差别， 就是界面动效需要以用户体验与界面设计为大前提，来进行动效设计。
界面动效在设计师设计完成后，需要开发实现才能与用户见面。而不像MG动画，直接由设计师输出。
如何设计好Banner广告图
Banner广告无处不在。从网站首页页头的内容推荐到侧边栏,从文章内到图库列表中,你会在几乎所有内容存在的地方找到他们的影子。通常情况下,它们看起来漂亮,略显浮夸,还会蚕食你的 *** 浏览体验,尽管我们在想尽一切办法降低它们给用户的负面影响,但是坏名声总是不可避免地同它们绑定到了一起。
实际上,Banner广告对于用户的影响是巨大的,合理的运用,肯定是事半功倍的。那么到底要如何打造不让人生厌、转化率可观的优秀的的Banner广告呢
空泛的理论或许不够接地气,不妨从下面50个案例中,来学习Banner广告的设计技巧。
1、风格化的图文排版
这是DearMissModern所 *** 的一组Banner广告,每张在文本和素材上都保持了气质和风格上的一致性。字体的形式感和素材中图像和图形的搭配让整个广告Banner给人的感觉更加强烈。如果并非是这种强风格化的,而是更加微妙的话,应当采用更加经典、耐看的字体来进行搭配,道理是一样的。
2、营造层次
Visa的节日广告Banner就充分运用了层次结构的优势。照片的挑选就是有景深有层次的美食,让人之一时刻会被它吸引,而文字排版则覆盖在虚化的远景上,确保了可读性,也增加了一个层次,传递出信息,确保不会混乱。按钮的位置正好置于美食之上,文字之下,恰到好处地吸引人来点击。
3、使用相关图标
这个来自Google的广告Banner通过手绘的图标给人带来一种个人化的体验。
图中每一个手绘的图标都非常易于识别,虽不复杂,但是给人营造出一种仿若在世界中穿行的感觉。这种难以描述但是令人触动的感觉让这个广告不再只是一个广告。
4、增加出人意料的元素
一个 *** 广告应该怎么做谷歌的这个 *** 广告也算的上是出人意表了,没有高大上的说明和漂亮的妹子,而是用形同小区布告栏的手写小广告一样的涂鸦手写广告。这种广告不复杂,但是却出人意料,这种熟悉的感觉也足够令人触动。
5、加入插画
这个案例同样是谷歌的广告图,插画的加入让整个广告图充满了童真和趣味,加上扁平化的元素,整体看起来也比较统一。这种插画实现起来不难,看起来可能有点粗糙,但是确实很友好。插画和摄影不同,它能赋予设计以后者无法企及的气质,当然,你得用好才行。
6、布局适配
FatCow的这个广告图是由EnvatoStudio所设计的,为了适配不同的广告位,整个广告 *** 了多个不同尺寸的版本。将最常用的广告图设计出来之后,将其中的元素进行二次编辑, *** 成能够适配其他广告位的尺寸,其中某些元素需要调整,移除或者新增,这样就可以实现了。
7、使用绚丽的色彩
这个GoogleMusic的广告采用了活力十足的粉色,搭配的是同样高饱和度的蓝色,两者形成鲜明的对比,也给人留下深刻的影响。和普通单色调为主的Banner相比,这种色彩绚丽的多色搭配更加抓人眼球,不过使用的时候需要多加注意,确保可读性和协调性。
8、保持简约
如果说有可口可乐有什么做的非常突出,那么保持简约的设计绝对是诸多优点之中最值得学习的一个。这个可口可乐的广告Banner设计很好的延续了这一传统:产品图LOGO宣传语标志性配色。虽然内容不多,但是效果很赞。
一个塞满全部信息的Banner广告图对你而言不会有啥好处,因为用户压根不会去看。将最重要的信息呈现出来,这就够了。
9、关注潮流
关注流行文化和正在风靡的趋势,对你设计banner广告而言,非常有用。Campbell就是这样,它很好的利用了星球大战**这个IP,推出相关主体的产品,吸引星球大战的粉丝前来购买产品。合理的借助正在流行的趋势和话题来宣传对应的产品,绝对事半功倍。
10、使用纹理
Campbell的这个广告是运用纹理提升质感的典范。笔刷式参差的边缘让整个广告的视觉效果更加微妙,广告图中其他的元素谈不上有多突出,但是纹理的加入如同点睛之笔,使得整体的效果都提升上去了。
11、借助利基
利基是指针对企业的优势细分出来的市场。广告通常需要针对目标人群来投放,这样才能达到更好的效果。
Target的婴幼儿系列产品的广告主要是针对母亲们投放的,那么还有什么比一个粉色的、可爱的场景更容易吸引到她们呢
12、用图展示,而非语言
Zarbee的维生素广告banner在的使用技巧上就相当突出,水果来置换维生素,强化概念,而非用语言来描述,巧妙而直观。
13、清晰的聚焦点
当广告有明确清晰的聚焦点之后,品牌和用户之间的沟通就更加直接了。这个Banner广告图也是为Target设计的,品牌LOGO从位置到颜色都足够显眼,加上美女的姿势在结构上的引导,Target的品牌LOGO无疑是整个广告图的焦点。
14、使用意象做引导
麦当劳的这个广告就是很典型的使用意象替代文字来传递信息,咖啡这一单词被相应的所替代,传递信息的同时,还让整个广告图不再单调,变成图文混排。单纯的文字和都能够传递出信息,但是混合使用则显得更加有趣,走心。
15、让产品发声
在这个广告图当中,麦当劳的McFlurry无疑是核心,不论是意义上的,还是视觉上的。灰色的背景让色彩鲜艳的MacFlurry主体显得足够醒目。让产品本身在广告中突出展现,可以让整个Banner表现力和针对性都更强。
16、创造角度
奥迪的这个广告图通过分割空间来呈现不同的信息,但是最引人瞩目的是小幅扭转的角度给人带来的独特视觉体验。这种调整让特定的信息更加瞩目,配合中车体本身的角度,使得整个广告图更加富有活力。
17、使用遮盖
使用特定色彩的半透明层来遮盖背景图,可以让前景的文字内容信息脱颖而出。这种设计手法现在并不鲜见,它让背景信息从遮盖中透出,同时让文本内容可读性更强,整体层次感增强。
18、设置场景
Tiffany&Co珠宝的广告图的设计,称得上是有趣好玩,旋转的鸡尾酒杯和漂亮的珠宝组合暗示出它们经常同时出现在同一场景,营造出高雅、精致的感觉。通过相关的物品组合从而暗示用户,让他们自行脑补出场景。
19、创意字体
好的排版能够吸引用户的注意力,而Nike的这个广告尤其突出,它在字体上的设计富有创意,这些被肢解的字体同样具备强大的识别度,但是这样的设计让它们看起来更加轻盈,也更富有科技感。这种视觉上的强化,让广告和产品更加吸引人了。
20、使用风格化的插画
插画可以简约,同样也可以细节满满。风格化的插画可以通过细节和风格来增加信息的厚度,讲述故事,传递感受。这种插画力量感十足,充满能量,和Nike的品牌气质相当符合。
21、使用多种元素
虽然有风险,但是合理的将多种不同的元素搭配在一个广告图中,可以产生不错的形式感,就像这个ebay的广告图这样。漂亮的产品图,标准字体,手写字体和插画元素,协调地组合成一个广告图。当然,每个元素的存在都是有理由的,各司其职,并非随机搭配,请务必记住这一点。
22、成为流行风向标
将潮流和趋势融入到Banner的设计当中来,让它成为广告和用户之间的纽带。这个来自ebay的广告就是这么做的。将“HotlineBling”替换成“HauteLineBling”之后更好地解读了时下流行的这种文化,从而吸引更多关注这一时尚的用户。
23、自由舒展
并不是每一个广告Banner都必须借助栅格,让每个元素都精准地对齐排列,自由舒展的设计同样有效。Yoplait的广告就是这样设计的,这样显得更加有趣、富有童真。当然,这样的设计是否合适要看它的产品的气质和特色。
24、创建联系
在设计的过程中,让你的广告图中的和文字之间保持足够的关联是非常重要的。Talbots的广告图中和文字的气质就非常接近。
25、制造对比
对比是吸引用户注意力的有效手段,而ESPN的这个广告Banner的设计就是深谙这一技巧。深红色的背景下,白色的文字就显得相当突出了。字体挑选的也是锐利而轻盈的类型,这样一来,信息的传递有效度就更高了。
26、对称设计
对称式的设计可以很好地平衡广告中的元素,设计师们可能经历了深入的思考才有此设计,但是输出却是非常迅速的。这则来自苹果的广告也不复杂,黑白的音乐家照片基本上围绕着AppleMusic呈轴对称,同时保持了一定的错落美。这种简约的设计简单但是主次分明,走心。
27、目标用户的生活指南
就像Chegg这个广告一样,如果你想吸引特定的用户群体,不妨站在他们的立场,在广告中注入针对他们的生活方式指南。站在特定用户的立场上来表述、展现产品,能够更容易获得共鸣,从而得到更多的点击。
28、使用动效
在静态的页面中,最容易吸引人注意力的无疑是的元素。如果使用动效来呈现你要表现的广告内容,可以让你的内容更快被用户获取到。当然,前提是设计要足够简洁明了,这样可以避免内容琐碎,更容易被用户Get到。
29、锋锐而鲜明
吉列剃须刀的广告在视觉上称得上是锋锐而鲜明的典范,锐利的角度,深色背景上鲜明的剃须刀,棱角分明的字体和强对比的配色方案,这一切都让这个广告图在视觉上足够清晰醒目,令人欲罢不能。
30、制造视觉深度
Honda的这个广告图设计并不复杂,它的特色在于背景上的线条笔触。原本仿佛悬浮于空中的汽车在线条的衬托下仿佛落在地面之上。并不需要太过复杂的设计,就可以为广告图制造视觉深度,让人留下印象。
31、使用独特的字体
在广告Banner图当中使用个性化十足的字体也同样可以有效地吸引用户的注意力。百事的这个广告所用的字体富有个性的同时,还清晰可读,给人玩闹有趣的感觉,又不影响信息的传达。
32、使用多样漂亮的排版
对于漂亮的文字排版,绝大多数的用户还是很吃这一套的。这个CaliforniaPizzaKitchen的广告就是是McGrathCreative为他们精心设计的,不止排版设计颇为精致,而且富有创意地同Pizza本身结合起来。
33、使用简单的
简约直观的在网站上非常实用,它们通常会更为高效地展现内容,让广告Banner的信息传递的跟加直观。目前设计师们通常会使用扁平风的简约插画来衬托主体、增加信息量,就想Coda的这个广告图。
34、使用纹理增加视觉深度
阿迪达斯的广告图在视觉上非常有意思,背景的纹理并不繁复,但是规律而富有科技感的线条不仅增加了视觉深度,而且营造出和品牌气质贴合的速度感。
35、使用品牌色
如果广告banner中没有使用PayPal标志性的蓝色,仅是图中的并不会让你留下深刻的印象,但是恰恰是品牌色的使用,让和品牌绑定到了一起,互相促进,令你记住。
36、不要只想着促销宣传
广告Banner图是用来促销的,这没问题,但是有的时候并不需要做的那么明显。这个来自FreePeople的广告鼓励用户不要只是买买买,而是多看多逛多对比,虽然这样同样可以促进销售,但是看起来更像是站在用户角度来提建议。
37、使用大胆的色彩
I,Anna的广告图配色称得上是大胆而饱满,红色充满活力而醒目,而的加入,则让整个配色更加协调,更容易吸引用户的注意力。
38、来个简单的插图
有的时候,精致的插画并不一定符合你的品牌或者想要表达的东西,星巴克的这个广告就是这种情况下诞生的,细腻精致的图并不符合他们的需求,反而是扁平而略显拙稚的插图来的更加简单到位。它呈现出新款饮品的成份构成,这个广告图让你仿佛有身在星巴克看着菜单的感觉。
39、引入动效
这个来自星巴克的广告图,在小小的一块区域当中展现了相当引人注意的元素。波纹从中央出发,向外发散,当用户看到这个广告图的时候,会不由自主地被它吸引到。
40、完全动起来
如果你对于动效的运用足够熟练,不妨让整个广告Banner中的元素都运动起来,这样更容易脱颖而出。设计师将应用在平板当中的使用流程借助动效完全展现出来,短短几秒让你获取到静态Banner图所无法企及的信息量,体验优秀。
41、使用几何纹理
Corona的这个广告图很好地将之前所流行的Low-Poly元素运用到橙子这个意象当中,这种几何纹理赋予橙子以一种冰爽剔透的感觉,让你不由得对Corona的啤酒产生兴趣。
42、用有趣的图形分割空间
Brightgreen的这个个广告图使用菱形割裂为两个不同的空间,这样使得广告图形成了自然的两个层次,留白的部分承载文字信息,而绿色部分则承载着,让整个主次分明,又充满质感。
43、加入阴影
长阴影是之前流行过很长一段时间的设计趋势,而Webduckdesign所创造的这个广告则是相当不错的一个使用案例。如果没有阴影,那么整个会显得相当单调,长阴影的加入让它看起来不在那么扁平,拥有了层次。
44、将图案作为纹理
和微妙细腻的图案不同,将特定的图案作为纹理叠加在背景上,可以营造出特定的氛围。AnneSophieHostert所设计的这个广告图利用雪糕和菠萝的图案纹理给人营造出夏天的感觉。
45、使用色块分割
如果你不想将手头的仅仅只是用到广告图中作为背景,那么不妨将它分割成不同的部分,同单 *** 块结合到一起使用,整个广告图的形式感显得更强了。
46、使用线条装饰
广告图绝大多数时候都是和文字组成的,但是适当的加入一些装饰会让广告图看起来更加饱满。相比于各种高光,线条的装饰性也不弱,而且更加自由,效果也颇为不错。
47、讲述故事
广告的终极目标是卖出产品,而最有效的方式还是讲述真实用户的使用体验。这个广告是为亚马逊的饮品电子书APPAudible所设计的,中的场景旨在宣传他们的产品在许多场景下都能无干扰的使用。
48、幽默一点
幽默的展示通常会比强势的推销更有效果,他们更愿意看到引人发笑的内容。
49、使用简单的字体搭配
不用进行繁复的排版设计,将几种风格一致、简单易于识别的字体搭配到一起,就像必胜客的这个广告一下,同样可以达到增加信息量、令人愉悦的效果。
50、使用简单的图形来强调
盘点banner设计组成要素/类型/风格/设计步骤大全banner对于一个设计师来说,肯定不是一个陌生的词语啦,在目前的各个行业领域中基本都涉及到banner的需求,不管是web端还是移动端我们处处都能看到banner的影子,所以掌握banner的设计是我们每一个设计师必备的技能啦!
banner(及横幅广告)是 *** 广告最早采用的形式,也是目前最常见的形式。横幅广告又称旗帜广告,它是横跨于网页上的矩形公告牌,当用户点击这些横幅的时候,通常可以链接到广告主的网页。是表现商家广告内容的,放置在广告商的页面上,是互联网广告中最基本的广告形式!
下面我们会从这几个方面讲解banner:
一:banner的组成要素
二:banner的类型
三:banner的风格选择
四:banner的设计步骤
一:banner的组成要素
banner的主要组成要素我这里简单的总结了几点:
以及banner主要的元素是:文案+元素+背景
元素又可以细分为:元素=商品+模特+logo+点缀(这里的元素是需要根据banner的实际情况选择要素,可有可无)
如图:
(来源于花瓣)
二:banner的类型
banner的类型我这里总结的主要分为:
01:产品宣传类banner(新产品、热销产品)
02:活动类banner(节日活动促销、产品促销)
这里简单的将banner分为了两种类型,因为对于不一样的banner需要实现的效果和目的是不一样的,所以我们需要设计出不一样的风格的banner
对于产品宣传的banner我们最主要的就是要突出产品的特征,所以我们对于banner的设计,需要的最主要的元素就一定是产品,以及简短的文案介绍,至于点缀的元素我们也可以根据实际产品的特征选择合适的元素,也可以不用元素的点缀,背景肯定也是必不可少的!
01:产品宣传类banner:
产品+文案+背景
例如:
(来源于花瓣)
上面的案例都是对于产品宣传类的banner的设计样式,他们有一个共同的特征就是产品放大放大再放大,尽显产品的特点,简洁的文案介绍和大量的留白更加凸显产品的特征,使用户的目光不由自主的被产品本身所吸引
产品宣传banner:
产品+文案+元素+背景
例如:
(来源于花瓣)
这类banner的特点就是除了产品本身外,都添加了一些其它的元素作为banner的一个点缀效果,使画面显得更加饱和,或使画面带有动感的效果!
那么问题来了
什么情况下产品banner设计添加元素好什么情况下不添加元素好呢
之一:对于需要极度显示产品的特征的时候我们更好选择不添加元素干扰产品,
第二:对于简约产品,我们更好也不要添加元素做装饰,大量的留白更加适合简约产品的风格,
02:活动类banner
产品+文案+元素+背景
例如:
(来源于花瓣)
对于活动类的banner设计我们大多数都会选择颜色鲜艳多彩的,并且画面饱和具有冲击力的,营造出一种热闹的氛围,对于元素的添加也是必不可少的一点,因为对于活动类的banner设计,画面越热闹活动力度就会显得越大,才会更加吸引用户,对于活动的标题也要尽量的凸显!
二:banner的风格选择
对于banner的风格也是多种多样的,但是对于不同性质的banner选择的风格肯定也是不一样的,不同的banner搭配不同的风格给人的视觉效果是完全不一样的,合适的搭配才能使banner更好的表现其特征和目的
例如:
01:简约产品家居banner的宣传banner,就比较适合简约大气干净的风格
(来源于花瓣)
02:高端科技产品banner,就选择具有科技感气质的风格
(通过科技感的图形和颜色等来体现)
(来源于花瓣)
03:时尚服饰类的banner,就适合选择时尚画面的风格
(通过独特的造型和风格图形以及色彩等来体现)
(来源于花瓣)
04:高端奢侈品牌类banner,就适合高端大气的风格搭配
(通过高档色彩黑红配,黑金配等来体现)
(来源于花瓣)
05:少女\儿童可爱风banner,就适合可爱风元素搭配的选择
(通过可爱元素:插画、线条、气球、爱心、圆润的字体、活力的色彩等来体现)
(来源于花瓣)
06:国风/文化/节日类banner,就比较适合选择带有文化气质的元素搭配
(通过中国风毛笔字、中国古有的元素:印章,中国山水画,墨迹,扇面,剪纸,园林窗格,古纹样,祥云,京剧,卷轴等等)
(来源于花瓣)
二:banner的设计步骤
01:了解和确定banner的设计需求
02:明确banner设计的目的
03:根据得到的banner设计需求确定banner的设计风格
04:选择合适的banner设计版式结构
05:选择匹配的元素装饰banner的整体效果(根据实际需求添加)
06:色彩搭配选择
01:了解和确定banner的设计需求
对于这了解设计需求一点来说,不管是做什么设计的前提都是必不可少的一步,也是最关键的一步,如果你连设计的需求都不明确那么做出来的设计结果肯定就不会符合实际的需求
那么对于banner的设计需求我们具体需要明确那一些呢
之一点:确定banner设计文案
文案对于设计师来说也是一个很重要的点,设计师可以根据文案信息从中找到设计灵感,并且也可以知道大致的设计风格的走向
之一点:确定banner设计尺寸和投放平台
文案确定后我们还需要知道banner的投放平台和位置,尺寸大小,以及是否需要适配各个平台的展示,
02:明确banner设计的目的
对于设计一张banner,肯定是想要达到某一种目的才会设计这一张banner,所以在设计banner之前一定要了解清楚这一张banner设计的目的是什么,例如:是想要宣传产品还是想要促销产品,两者的性质是完全不一样的,
03:根据得到的banner设计需求确定banner的设计风格
banner的设计风格我们可以从banner文案需求中找到关键词进行定位,比如:全语音智能操作的车载支架A5
从这一句主题文案中我们能够提出的关键词就有:全语言、智能
对于这样的关键词的理解我们肯定之一就会想到科技感智能化时代的画面,所以这里的风格我们也就有所选择啦!
04:选择合适的banner设计版式结构
banner的设计版式结构我们可以大致分为:
居中结构、左对齐结构、右对齐结构
不同需求banner的结构就需要根据实际情况选择啦!
05:选择匹配的元素装饰banner的整体效果(根据实际需求添加)
对于banner的装饰元素我们也是需要根据实际情况和产品banner的特征采取合适的选择,比如简约产品的banner就不需要装饰元素更好,而活动类banner或少女儿童等可爱类的banner设计就需要选择装饰元素更加适合,并且不同形状banner的装饰元素选择也是不同的(前面做了简单的介绍,这里就不再重复啦)
06:色彩搭配选择
色彩的选择也是很关键的,不同性质的banner选择的颜色搭配也是不一样的,适当的颜色搭配会使产品更加凸显或者使画面更加显眼突出,并且给人的感觉也是不同的,
例如:
黑金配和黑红配就会给人一种高级感
蓝,黑色,紫等冷色搭配,画面给人硬朗,空间感,速度和力量的感觉更加适合科技感
红、橙、黄、紫搭配,就会营造出一种热烈的氛围,更加适合时尚和活动类
黑、白、灰的搭配就会给人一种高冷不宜接近的感觉,更加适合大牌的风格选择
白、灰的搭配会给人一种宁静、文艺、气质、素雅的感觉,更加适合简约产品的选择
用AE，建议把AE好好学一下，可以做动画1，色彩舒适度
一个之一眼看上去就杂七杂八色彩，或者完全没有主次之分的简洁，或者看上去就没有视觉舒适度的饱和度或者明暗度不搭调的色彩，我想它已经没法继续长久看下去了。因为人之一眼看到的，就是一个事物的颜色，才是形状。
2，文字的主次
任何设计作品都要传达信息传达思想，如果一套设计中字体乱啪啪，文字大小和文字粗细，间距行距都没有一个“主次逻辑”，我很难挖掘到自己想要的信息，不论设计是酷炫复杂的还是简洁清爽的，光能展现信息时远远不够的，信息文字的每一个细节，都决定了一个设计要传达的思想主次，记住，你是要引导别人去看，而不是别人引导你去设计。
这世上没有一个真正定死的文字标准，但是最基本的，至少让别人看清你的文字是写的什么吧，所以，文字之间的不同色彩，也是能让文字主次突出的方面。
3，信息可读性
有了文字基础，处理好每个模块的布局，色块，插图，背景等方面，会让你的信息有较强的可读性。
别跟着你的爱好走：我喜欢酷炫，我喜欢简洁，我喜欢优雅，我喜欢二货。把设计作品中你最想传达的信息传达出去，就算某些信息被别人忽略了，你依然是成功的。
如果用户连看都不想看，连最基本的信息都没法传达，那作品的任何风格，都只是口头吹嘘。你要定好你的目标用户，你想吃遍全中国乃至全世界，全行业？除非，没有除非了。
想具体学习文本的处理 *** ，右戳：《经验分享！超实用的文本处理技巧》
4，ui识别性
这一点在图标上味道非常浓，不论你设计的是扁平化还是拟物化还是梵高风格，不一定要3秒看出图标的意思，也要让人欣赏这个图标美感的同时，大概“心里知道”，这个图标要传达个什么。
一个网站banner的设计，一个页面的导航设计，都要考虑到识别性，你想传达这个图像的什么内涵？你这个图形的意图是什么？都是设计者需要考虑的。
5、交互性与易用性
上面的工作都做得差不多了，剩下的就是使用了。不论是手机主题还是网站设计还是app还是游戏，要让别人快速上手，能玩，能用，甚至用的简单，玩的简单，就算你采用银河系都没有的酷炫交互，或者采用地球上已经濒临灭绝的土逼设计，达到方便使用的优良品质，你的作品再牛逼到没法看，也有牛逼的地方能看。
6，思想，生活的传达
作品是什么样，一般能从另一个层面看出一些设计师对生活对工作对感情的态度和状态，所以别小看一个作品的力量，它可能就是传达你自己真实内心的一个媒介，可能你并未发现，但是旁观者已经发现你了。
所以说，融入生活得设计是比较难的，同时，也是最容易的，你是否把你最粗心最让人厌倦的一面暴露到设计作品中？是否把你最细致入微最耐人寻味的一面传达到用户心里？一张图就可以看出（当然这不代表全部啊，某些设计师的作品看几天你也看不出他是什么人过着什么生活的）
我也不知道什么才算是公认的评价标准，这里我就自己的想法做一个归总，不仅仅是评价别人的ui设计作品，同时也是对自己的ui设计作品的思考与评价。仅供参考，希望对喜欢设计，喜欢ui，重视细节的童鞋有一定的作用。
一套完整的ui设计其实是比较复杂的，从需求分析到市场定位，从草稿到拟方案，从创意元素的组合到想法沉淀，从设计规范到突破传统，从纸上到电脑上，从个人到团队，或者从团队到个人，从素材收集到素材处理，从0思路到偶然，等等。
其实设计一个东西真的真的会碰到太多太多的问题，这么复杂的过程，做出来的东西，其实别人看到的都只是“表面”，设计者也不会将自己内心真正的东西暴露出来，因此大多数人不能完完全全理解一个作品真正想要表达的东西。
所以，不要把一个作品的好坏完全依赖于别人的评价，也不要依赖于自我评价。当然，好坏还是有一些基本前提的，有了这些前提，作品是好还是坏，萝卜各有所爱罢了。
如果没有一些前提，只是个半吊子而已了，就算自己怎么再说自己的风格，其实在别人眼里是一个小小的笑话，有点倔强的逃避而已。
下面就说下一些个人认为的小标准，这些都是自己概括的，不是什么专家理论或者 *** 理论，慎重参考哦，我归纳了8点：
1，色彩舒适度
一个之一眼看上去就杂七杂八色彩，或者完全没有主次之分的简洁，或者看上去就没有视觉舒适度的饱和度或者明暗度不搭调的色彩，我想它已经没法继续长久看下去了。因为人之一眼看到的，就是一个事物的颜色，才是形状。
2，文字的主次
任何设计作品都要传达信息传达思想，如果一套设计中字体乱啪啪，文字大小和文字粗细，间距行距都没有一个“主次逻辑”，我很难挖掘到自己想要的信息，不论设计是酷炫复杂的还是简洁清爽的，光能展现信息时远远不够的，信息文字的每一个细节，都决定了一个设计要传达的思想主次，记住，你是要引导别人去看，而不是别人引导你去设计。
这世上没有一个真正定死的文字标准，但是最基本的，至少让别人看清你的文字是写的什么吧，所以，文字之间的不同色彩，也是能让文字主次突出的方面。
3，信息可读性
有了文字基础，处理好每个模块的布局，色块，插图，背景等方面，会让你的信息有较强的可读性。
别跟着你的爱好走：我喜欢酷炫，我喜欢简洁，我喜欢优雅，我喜欢二货。把设计作品中你最想传达的信息传达出去，就算某些信息被别人忽略了，你依然是成功的。
如果用户连看都不想看，连最基本的信息都没法传达，那作品的任何风格，都只是口头吹嘘。你要定好你的目标用户，你想吃遍全中国乃至全世界，全行业？除非，没有除非了。
想具体学习文本的处理 *** ，右戳：《经验分享！超实用的文本处理技巧》
4，ui识别性
这一点在图标上味道非常浓，不论你设计的是扁平化还是拟物化还是梵高风格，不一定要3秒看出图标的意思，也要让人欣赏这个图标美感的同时，大概“心里知道”，这个图标要传达个什么。
一个网站banner的设计，一个页面的导航设计，都要考虑到识别性，你想传达这个图像的什么内涵？你这个图形的意图是什么？都是设计者需要考虑的。
5、交互性与易用性
上面的工作都做得差不多了，剩下的就是使用了。不论是手机主题还是网站设计还是app还是游戏，要让别人快速上手，能玩，能用，甚至用的简单，玩的简单，就算你采用银河系都没有的酷炫交互，或者采用地球上已经濒临灭绝的土逼设计，达到方便使用的优良品质，你的作品再牛逼到没法看，也有牛逼的地方能看。
6，思想，生活的传达
作品是什么样，一般能从另一个层面看出一些设计师对生活对工作对感情的态度和状态，所以别小看一个作品的力量，它可能就是传达你自己真实内心的一个媒介，可能你并未发现，但是旁观者已经发现你了。
所以说，融入生活得设计是比较难的，同时，也是最容易的，你是否把你最粗心最让人厌倦的一面暴露到设计作品中？是否把你最细致入微最耐人寻味的一面传达到用户心里？一张图就可以看出（当然这不代表全部啊，某些设计师的作品看几天你也看不出他是什么人过着什么生活的）
7，微小的细节和微小的创意
别说这个东西就是你创造的，因为上帝比你创造的还早。ui设计中一根线，一像素，色彩饱和度的细微差别，一个小渐变，一个字体的选择，画布的大小，用笔的粗细，这些小细节，虽然不是人人都能说得出，但是能之一眼“看在心里，感觉到骨子里”，所以就算不说，细节也是能让任何人之一时间感觉到的，别忽视每一个小细节，它说不定就是你成功的堡垒，也是一有机会就让你失败的利箭。
细节中，你就能诞生一些微小的创意，小创意创造大创意，没有细节，何谈创意？那就只是纸上谈兵，口说无凭。
8，生活中表现手法的引用
一个简单的视差，一个简单的坠落，一个简单的玻璃破碎，一个简单的树叶飘落，一张纸简单的角度摆设，一盆植物简单的远近拍摄，这些东西，都能创造你无穷的表现手法，当然，这也是比较难的，能将生活融入设计，是需要积攒的，不是一两天能体会到的。
如果还想要更多的概括，那么暂时没有了，因为我现在的水平只能感觉到这么多，还无法感知到更多，说不定以后可以感知更多，哈哈。
如何设计一个好用的App软件
设计需要学习的软件分为4款，分别有PS，AI，AE，ARP，外加两个辅助插件如思维导图， 马克鳗等软件，这些都是一名UI设计必需要掌握好的软件。
Adobe Photoshop CC 2018简称PSCC2018
Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。
2018年12月推出的Adobe 为市场最新版本。
PS可以用来从事，平面设计，网页设计，UI设计等多种设计工作。
在UI设计中PS的使用率在90%以上，所以作为一个合格的UI设计师。PS是肯定得掌握的。
PS可以在UI设计中，绘制界面设计，图标设计等。
Adobe Illustrator CC 2018简称AICC2018
Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件，作为一款非常好的矢量图形处理工具，Adobe Illustrator广泛应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的设计等
2017年12月推出的Adobe 为市场最新版本。
AI可以用来从事，平面设计，网页设计，UI设计等多种设计工作。在UI设计中AI的使用率也是非常高的，主要可以用来绘制图标，界面等设计。
Adobe After Effects CC 2018简称AECC2018
Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件，适用于从事设计和视频特技的机构，包括电视台、动画设计公司、个人后期设计工作室以及多媒体工作室。属于层类型后期软件。
2017年12月推出的Adobe After Effects CC2018为市场最新版本。
AE可以用来从事影视后期， 平面设计，UI设计等多种设计工作。
在UI设计中PS主要用设计交互动效图。
Axure RP Pro 70简称ARP
Axure RP是一个专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国Axure公司；RP则是Rapid Prototyping（快速原型）的缩写。
Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等，另外，架构师、程序开发工程师也在使用Axure。
在UI设计中ARP主要用设计交互原型图。
