618作为电商活动一年中力度较大的一次，很多商家、平台、app都会不遗余力做一些活动，争取在下半年的各种大促打好前站、奠定好店铺的销售基础。作为设计师的我们，面对时间紧任务重，想要做出让人眼前一亮、同时能够为店铺和平台实现高销售转化的页面还是有比较大的难度的。不少同学不免抓耳挠腮不知如何下手，趁着马上就要接到运营的设计需求，先给大家分享一批优秀设计稿，希望这篇文章能够帮助大家找到灵感思路！
霓虹灯风格
1.配色方面：
暗色调场景（暗蓝色、深棕色等）、洋红 蓝色的亮灯效果、黄色灯泡等，其实就是饱和度较高的颜色做发光效果或者标题的创意设计。要注意的是，控制画面高饱和色的比例，再需要着重突出的信息部分作为高亮显示，可以有效吸睛。
2. 元素方面：
各种颜色的灯管、灯泡、射灯、电线、舞台、墙面、金属钢架、金属风格的一些元素及肌理等，大家去找参考的时候也可以参考一些舞美和舞台设计。
3. 氛围营造：
使用烟雾增加画面氛围/使用小几何形或小图形元素/使用射灯光效/使用冷暖光对比。
4.标题设计：
结合几何形状（常见三角形、圆形）作为主标题外轮廓/笔画重设计（连接、断开等）/图形图案点缀/添加动效
设计要点
各种图层样式叠加制作霓虹光效：【描边】制作文字轮廓，【斜面和浮雕】表现圆灯管的立体感，内发光 外发光制作发光效果，【投影】模拟物体的投影效果；
注意画面整体光感和氛围的营造，光源的统一和逻辑性，色彩明度和饱和度的调整及分布。
霓虹灯效 清爽配色 镜面反射细节
上图是易果生鲜的一个运营海报头图，主题是海鲜相关的618促销活动，因此在色调上选择了清爽的青蓝色调，感官上给人带来夏季的清爽感，同时也会有食材新鲜的感觉，当然暖色调（橙色、红色）的食物主体在大氛围的冷色中视觉突出。接下来看看整体场景氛围的搭建，使用几何空间，富有玻璃质感的元素使用，食物和文字在右侧墙壁的镜面反射的投影细节处理的很到位。主题文字的编排用到了我们上面说到的方法，使用圆形作为轮廓的托底讲信息打组成整体，断开处理给这个标题组多一点灵活透气，头部使用寿司和大虾的概括图形对标题点缀，丰富了海鲜主题。下面的利益点说明区和产品推荐区也是贯穿圆角矩形的灯管，整体前后呼应，一气呵成。
灵活多变的线条小图形 文字重设计（断开、连接） 多色相灯光调和氛围
上图使用了墙面的肌理作为海报背景，使用大面积红色作为主色调，比较多的几何和线条元素来丰富画面氛围，在保持明度统一的前提下，改变他们的色相，让整体画面显得鲜活生动起来，同时使用黑色电线连接起各个元素。这里元素中的断开处理大家要学习下，毕竟灯管很难连接很长并复杂的弯曲，另外断开的处理也会显得有呼吸感哦~
霓虹灯标题效果应用 人物光效处理
这个标题的设计出了前面案例说到的连接断开处理等，富有特色的使用了渐变色调，整体看起来色彩更丰富更酷炫，这也符合这档节目酷炫个性的调性。大家借鉴这张海报创意的话，比较有难度的在于对人物或者产品擦边光效的绘制，色调调整等等，需要有一定的合成基础，总之就是调整主体的色调光影等，让主体的存在理所当然不突兀就是了。
添加动效，让你的视觉灵动起来！
记住：动起来总比静止的物体更吸引注意，所以让你的一些灯光或者小元素动起来吧！那么不禁有同学要问到，这样的动效要怎么做出来呢，其实使用PhotoshopAE是可以做出这样的动图哦，感兴趣的同学可以搜索关键词“PS制作Gif动图”查找相关教程。下面我们看看有哪些鲜活的动效可以学习滴~
下面这个案例中，作者将标题部分做成了霓虹灯管效果，局部做了动效。
可以是局部电流特效 屏幕的故障风效果 灯光强弱的变换
可以是开关灯和元素有规律的显现隐藏
可以是呼吸灯效果，灯光缓慢的变强变弱就像呼吸一样。
下面给大家分享一些霓虹灯案例
结合时下热门事件或节目
蹭热度去进行页面设计的不失为一个比较好的方向，当然店铺或者做运营推广都不会放过这大好“机会”引流量。通常情况下大家都喜欢根据实现流行的热词金句、网络新闻、热门节日或事件，综艺节目或热播影视剧等，总之就是竭尽所能“赶时髦”。去年的618恰逢世界杯赛事，很多的商家都就此话题进行了专题营销，当然大家也是要根据产品的可结合性，比如说男性产品、酒水零食等等就能很好结合下。下面简单举两个例子，抛砖引玉~
去年的618刚好遇见世界杯
很多店铺结合世界杯话题热点进行思维发散，设计的页面格外出彩，相信消费者会有一定的好感度和吸引力。
百威啤酒618和世界杯结合，看世界杯怎么少得了一打打的啤酒助兴！红色的页面激情四射，几何元素和啤酒底座的设计搭建起海报构图的骨骼，整体构图采用居中式构图，文案使用居中发散式的排版，同时做了透视处理，具有很强的聚焦感和冲击力。整体从背景到产品的红色深浅变化，层次感很强。
下面给大家分享一些世界杯案例
家电类的产品当然不会错过618和世界杯的双重热点，球员的夸张激动的表情，还有后面火焰热烈的场景，整体真的是燃爆了~
Hisense电视的618选择世界杯现场观众嗨翻躁动的情景，也是表现了电视的身临其境的体验感。
无穷食品店618时结合世界杯，选择室内看球赛的场景，大口喝酒大口吃肉当然爽，这里对人物的卡通化的喜感十足，光效的处理自然舒服。
选择球场的场景，将球衣和产品作为拟人化的结合，整体视觉聚焦~
这就是街舞第二季
随着最近“这就是街舞第二季”的开播，相信在视觉设计方面能借鉴一波。易烊千玺、罗志祥、韩庚、吴建豪四位明星队长，在各自的街道展开毛巾争夺战，第一期的节目众多大神亮相，可以说是很燃很炸裂了！那么除了欣赏煮饭舞台的舞技，有什么是可以我们能应用到设计中的点呢？下面我们来一起看看吧~
设计建议：
场景方面其实和霓虹灯的风格接近，在搭建时可以考虑夜晚的街道、斑马线、霓虹灯、射灯、油漆桶等等工业风元素，色调方面可以借鉴节目中的篮字色调，注意整体空间透视和光感处理。
上面是第二季开播四位队长的官宣海报，可以看到logo的设计相较于第一季，继续沿用了第一季蓝色 枚红色配色，依然是油漆字的风格，在笔画的处理上更圆润些，第一季的笔锋较为方正，整体的感觉更加简洁流畅。
这就是街舞第一季-logo
天猫国际和第一季选手联合营销海报
喜欢这种放荡不羁的飞白毛笔字，苍劲有力，人物动感的舞姿和文字前后穿插，段落文字倾斜处理动感十足，其中人物的轮廓光可以参考哦。这样一组风格我们可以借鉴到男装类目、潮牌或者部分3C数码产品海报设计中。
下面是我找到的一些相近风格海报，大家可以参考下：
这款海报的主标题的肌理和色调处理的还是不错的，在标题处理时可以参考。
画面整体的空间层次很棒，霓虹光效和标题的切斜处理显得画面很热闹，模特和物体的长投影的细节处理也很细腻，总之这张图在光影和标题处理方面，我们可以有比较多的参考哦。
Nokia的这张banner富有空间感的背景，主标题参考街舞logo做视觉设计，整体色调也很贴近街舞感觉。
这张海报是去年第一季某店铺的海报，文案的字体和特效设计参考了街舞第一季风格，使用街道大场景，烟雾的使用给画面气氛润色不少。当然如果人物和产品能根据环境做下色调和光影的调整会更协调。
上面的这两个例子只是给大家一个思路，可以看看自己服务的产品有什么可以结合的事件去碰撞一下~
复古国潮风
国潮即国内本土潮流品牌，最近一次牵动国人神经，是年初登上纽约国际时装周的中国体育品牌李宁。“潮”这个字是多少当代大学生和年轻人追寻的执念？想要穿出自己的风格，想要与众不同，不想千篇一律，这就是潮流所带给所有人的精神解毒剂！以往潮流品牌都偏向于日潮和美潮，这是两种不同的风格，一种偏向于肃静，而另一种偏向于狂野和嘻哈。设计师们从博大精深的中国传统文化汲取设计灵感，用时尚前卫的视角引领着一股东方韵味的潮流风尚。
1.配色方面：
既然是中国的潮流风尚，banner设计的配色方面我们当然可以从各类古风建筑、服饰、摄影作品中汲取灵感。常见的色彩有：朱红色、黄色、丹青色等，总之就是饱和度略低，更质朴稳重的颜色。
2. 元素方面：
祥云、龙、狮子、仙鹤、梅花、折扇、汉字笔画的拆解、中国传统底纹等，总之就是和中国传统相关的元素，可以借鉴故宫文化、民国复古等方面寻找灵感。
3. 氛围营造：
祥云是个好东西，可以多结合试用下~
4.标题设计：
使用具有文化历史气质的字体，比如宋体、隶书、毛笔字等，以比较有笔触感的大毛笔字作为大标题使用为佳，当然如果排版需要可以添加汉语拼音丰富细节。
设计要点
- 大标题使用毛笔字配合强劲的飞白笔触，文案和产品以穿插叠加等形式形成层次感；
- 标题可以尝试加入拼音丰富排版；
- 使用富有中国风的元素丰富画面的调性；
使用祥云和龙的元素，大标题的毛笔字和人物跳跃（加了动感模糊，更富动感）的姿势相互映衬，动感十足~
端午节的一个海报，副标题的圆形轮廓和祥云的线稿形式可以借鉴
百雀羚国货护肤品中的佼佼者，页面的都很有东方韵味，在元素选用和细节的处理方面可以借鉴哦~
使用类似剪纸风格的效果，通过投影的前后叠加塑造画面的层次感
标题中使用了汉语拼音的形式，给版式上丰富了细节
美的家族的插画海报，用了比较多的中国传统元素：丝带、铜币、祥云海浪、舞狮头、金元宝等，色调上使用的传统的红黄经典色，文字处理同样应用了汉语拼音
天猫“国潮来了”系列开屏广告
复古的大字报风格，色调怀旧，文案很个性。
立体空间/特殊视角类
立体空间风格的设计，在总体设计中也是占有比较大的份额。目前主要有PS绘制和C4D建模两个途径。整体风格就是视觉空间感强，空间和产品有比较高的契合度。使用PS绘制需要设计师有强大的合成能力，对于材质、透视、光影有比较扎实的功底；使用C4D建模相对更简单，但是前期需要学习一门新的软件技能。不管什么途径，如果可以驾驭这种风格的设计师还是可以在618中大展拳脚，设计出一个大放光彩的页面。
特殊视角类是区别于我们常规的正视角度，通过夸张的透视角度能够给人以强大的视觉冲击力，大家可以从下面的案例中感受到这一变化。
设计要点
- 正确的透视关系、材质和光影细节处理到位
- 可以将618作为视觉主体进行立体字的设计，将产品和立体空间融合
- 选择非常规视角，可以让画面的视觉冲击力很强大
将汉字的笔画拆解搭建出来一个空间，618和产品穿插其中，光影处理的很赞！
插画风格
插画风格已经不是什么新鲜招式，近几年无论平台、店铺还是启动页开屏、UI、运营插画等各方面均有广泛应用。插画的创作和形式相对摄影素材等制约性更小，同时插画更有亲和力，容易引起观者的情感共鸣，所以也有越来越多的设计师逐步掌握这项技能。
1.插画风格：
噪点插画、矢量插画、描边风格插画、漫画风、写实风格、古风插画等等，当然更多细分大家可以自行了解下。
2.配色方面：
配色方面没有特定规律，主要看绘画的风格和主题。可以是儿童插画的高明度、色调柔和；可以是潮流插画的撞色和高饱和色；可以是古风插画的质朴自然色；可以是清新系的等等，大家根据产品和想要传达的感觉选择就可以了。
将人物形象的比例进行卡通化处理，产品和小元素使用手绘风格，整体可爱活泼。
平台大促风格
我这里说到的平台大促风格，通常是大的电商平台在大型促销的首页和各个分会场的设计风格。因为会场和二级页数量庞大，加之类目属性不同，因此设计上使用抽象的图形元素和高饱和促销感的色彩搭配，通过修改不同类目会场的色调和产品，即可保证不同会场的视觉差异化，同时整体的设计标准和系列元素应用又让不同会场和谐统一。
1.色彩搭配：
色彩饱和度较高，使用邻近色、对比色、互补色等情况较多，在颜色搭配方面通常为如下情况：红色 橙色 黄色； 红色 蓝色； 蓝色 黄色；紫色 黄色等，局部微渐变（同色相/多色相）处理增加色彩细节。
2.构图形式：
通常大标题和产品以组合的形式，呈现居中式构图，这种构图的好处是视觉更聚焦，也避免了没有产品作为主体的问题。
3.产品处理：
产品通常围绕主标题环绕摆放或成发散式，不同的产品在色调上需要和环境色协调统一，使用色相调整或渐变映射，可以快速统一产品的色调不统一问题。
4.元素应用：
可以使用平台对应的吉祥物，比如天猫经常在大促的logo和视觉中结合猫头进行设计，京东使用京狗作为吉祥物表达画面，苏宁易购运营logo的狮子头图形元素进行延展等。
丰富画面背景和氛围的元素，通常有同心圆或者漂浮的圆球 / 年货节时的祥云、烟花、铜币等中国风元素 / 抽象的渐变流体 / 几何元素 / 短线、曲线等
大标题设计类
以文字作为视觉焦点进行设计，将618设计成立体字的效果
FUI未来科技风
未来科技风格,就是未来的、科幻的，在设计中应用数据化界面表现形式，通常在军事、医疗器械界面、瞄准器等方面可以参考。比如在复仇者联盟的系列电影中经常可以看见这种风格。
1.元素选择：
空间站场景、飞船机舱、射线、仪器表盘、激光、电子屏幕等
2.配色方面：
具有科技感的配色，常用的有蓝色，当然也可以是红色紫色等，关键整体环境色调合理，建议以暗色调空间为主，这样局部的光效和数据界面会更出彩。
3.适用场景：
具有高科技属性的鞋服，比如功能衣和跑鞋等；3C数码类产品；家电电器类目等
《钢铁侠》中的FUI
霓虹灯技法实例分享
动图效果展示
首先录入文字内容，注意文字的大小对比
进一步调整背景底纹的效果，同时调整文字排版的细节，然后为文字和图形添加描边效果。
描边的效果制作：使用图层样式中【描边】，注意调整大小和颜色，大小控制的是霓虹灯光的粗细，大家根据需要调整数值（这里切记不要过粗，会影响文字的识别性；当然也不要过，否则霓虹等的效果不明显）
断开处理：给文字和图形添加断开的效果，同时注意断开的地方用蒙版修整下，让线条的截面是圆角会更好哦~
给各个元素添加霓虹灯效，这里主要是利用多种图层样式的叠加来实现效果。
下面是各个图层样式的设置情况，这里提醒大家的是不要死记数值，根据自己设计的效果边观察边调整，找到适合的效果数值就可以啦~
【斜面和浮雕】添加圆形灯管的立体感
【内发光】设置灯管发光的颜色
【内阴影】设置灯管的厚度
【外发光】模拟灯光的颜色，注意颜色选取临近的色相，改为滤色模式
【投影】添加灯管的投影效果，让其更加有立体感
Dang~ Dang~ Dang~ Dang！
最后在周围添加一些小的元素来丰富下氛围，就完成啦~
当然，最后还可以添加一点动效，让你的画面鲜活起来。我这里给哈派设计做了色相变化的动效处理，主要用到了PS里的时间轴动画功能，我们把色相调整每20个做递减，盖印几张图层，每张图作为一个关键帧，然后创建帧动画就可以了！这里可以根据自己需要，调整下每帧的展示时间，就可以得到不懂的闪动速度和效果啦~
好啦今天的分享就先到这里了，同学们在学习中有任何问题都可以在后台留言。我们下期见~
文章来源：哈派小新
EN
