设计网事

August 31st, 2013 | Tags: , , , , | 2,999

提醒:本文多图,加载较慢,手机用户请注意控制流量!

概要:1、Banner广告(30图),2、活动专题(10图),3、设计规范(7图),4、写在最后。


2012年年初曾整理过设计工作中的一些心得体会(点击查看),收获颇多!

2013年,转瞬即逝,从开始的不确定到适应到现在的融合,很自然的过度着,环境熟悉得越多,发现的问题越深入,不断尝试用新的思路处理不同的设计问题,最后在各种方案中沉淀相对更好的那个,渐渐形成自己的风格。

之前维护天猫店铺负责的东西涵盖方方面面,不仅要策划活动、制作推广页面,还需要制作相关的直通车及钻展广告素材。人员配置不齐的缘故,各种前端的调试也得亲力亲为,招不到合适的人,什么活都得自己干,那时只要做活动,从策划整理文案开始到各种素材的准备,以及页面的代码化,活动效果的跟踪等等,一条龙操作下来好几天都要加班过凌晨。

来到1号店UED感受最明显的区别是分工明确了,活动策划文案审核有推广同事跟进,活动Demo制作有产品经理负责,视觉设计后续有前端工程师对接,于是,我彻底解放出来,有更多精力投入到设计工作中。

 

1、Banner广告(以790 * 265尺寸为例)


日常的工作以Banner和专题活动为主,刚开始拿Banner练手,尺寸不比以前少,遍布网站的各个角落,很久才找到感觉,设计的广告素材还保留有以前做淘宝时的影子。

 

1.1

1mall轮播位完整-宽屏-790-265-4

起初经常提供好几个方案以供选择,往往自认为好看的都被Pass掉,与某些人的审美差别实在太大,以至于无法用文字来弥补这个鸿沟。

 

1.2

日百大促 Banner 790-265 1

类似淘宝年中大促的50%风格也不被看好,同事认为太过平庸,必须要清楚写出折扣“5折”,不是“五折”更不是“50%”,而且要放大再放大!

 

1.3

寻找美食之旅-Banner-790-265-5

为了迎合他们的需求,把折扣尽可能突出,但是整体上还是比较克制,尽量收敛,以突出产品本身。

 

1.4

你旅游-我免单-Banner-790-265-2

渐渐开始加大力度,字体大小粗细等夸张效果越来越明显,但并不是突出了就有好的点击,因为各个类目的差别实在太大,而且不同的文案也对用户点击效果有直接的影响。

 

1.5

日百大促-Banner-790-265 3

开始尝试立体字,习惯的老办法,Ctrl+Shift+Alt+T组合键来实现,步骤繁琐,如果某个头脑发热的需求方突然要改文案,那就悲剧了,因为那意味着全盘返工,也就是从这时渐渐发现之前的工作流程问题很大,经常性的变动需求,而且不是意外因素,完全是活动策划不严谨造成的,但是公司对此完全没有任何惩罚措施加以限制或警告。

 

1.6

名品特卖-Banner-790-265

后来发现新版的Photoshop里自带3D立体功能,突然整个世界都轻松了好多。

 

1.7

百日大促-第三套-首页轮播-Banner-790-265

然后开始尝试场景搭建,效果还不错,只是这种Banner的制作需要大量抠图的产品素材准备。

 

1.8

3月家居类目活动-Banner-790-265

从场景搭建方案里开始注意光影的修饰,往往一些辅助的光影能让图片增色不少。

 

1.9

家电清仓活动-Banner-790-265

省事点的话,可以采用背景化的场景,但是选图,找图片素材这个工作量也不轻,一张好的广告Banner制作有时并不比做一个专题轻松。

 

1.10

四月水果促销-Banner-790-265

水果专题的色彩方案,显得有些凌乱,而且各种复杂图形的叠加导致图片太大,压缩到系统要求的大小时,图片已相当模糊,之后做Banner都尽可能将背景简化。

 

1.11

四月出游活动-Banner-790-265

字体变形方案的尝试,类目线同事拿去把文案改得面目全非。

 

1.12

粽情中意-Banner-790-265-3 

复古风格,没找到很好的粽子素材,Banner最终效果打了些折扣。如果是自家产品也许还可以自己拍摄或者外包制作合适的素材,平台网站做设计只能到处找素材,往往所用的素材有可能侵犯了版权。

 

1.13

考试季-Banner-790-265

模拟纸张纹理效果,注重更多细节的处理。

 

1.14

6月无线大促-轮播Banner---最后2天

折纸效果,手机端Banner广告,为了更醒目,类目线同事普遍偏爱西红柿炒蛋的配色。

 

1.15

银联活动-Banner-790-265

起初是很反感产品堆砌,后来发现面对多品类甚至全品类的Banner制作时,不得不做这样的选择,能做的就是尽量让产品堆在一起更合理更好看。

 

1.16

红6月-Banner-790-265

红6月活动是对之前工作的一次检阅,曾经练习过的要点均在此次案例中得到应用,开始关注光影氛围的制作,这也是第一次从实物金字塔堆形状里获取到灵感应用在设计中。

 

1.17

家居790-265

紧接着的5周年庆,整个活动安排得相当不满意,设计毫无条理,无奈,还是得配合给各个类目做各种不同版本的推广Banner。

 

1.18

美护珠宝-Banner2-790-265

采用简单渐变背景效果,突出促销信息和产品本身。

 

1.19

服装第二波-Banner-790-265-3

五周年庆并没有想象中忙碌,反而有时间空出来想想更多的品牌墙背景方案,上面是六边形品牌墙背景方案

 

1.20

服装第二波-Banner4 790-265 

圆圈品牌墙背景方案,文字风格上应用浮雕效果,显得立体圆润。

 

1.21

家居母婴第二波2-Banner-790-265-2 

彩圈品牌墙背景方案。

 

1.22 

8月全品类大清仓-Banner-790-265

简单粗暴的信息排版和菱形元素背景加彩纸飞散

 

1.23

秋上新活动-Banner-790_265-4

天猫风格的文字排版和品牌背景墙风格

 

1.24

家居母婴第二波6-Banner-790-265 33

为了让类目线有替补的推广素材,开始考虑制定Banner模板,简单固定的信息结构,左边文本,右边产品堆图+引流单品名称及价格,背景采用颜色相匹配的场景图模糊处理,虽然步骤不算复杂,但是对于类目同事操作起来难度还是较大,自助化还需要进一步努力。

 

1.25

七夕爱在一起-790-265

卡通风格,七夕食品活动页面。

 

1.26

8月开学季活动-Banner-790-265 

学习易迅的线条方案,适用于家电箱包家居等抠图方便的品类产品,也可作为Banner模板替换文本、产品和背景色加以重复利用。

 

1.27

家居百货清仓页头-Banner-790-265

此Banner在轮播第三和第五帧时均有高于1%的点击,当期最佳,感觉也并非Banner有多么成功,更多还是促销文案的吸引,毕竟清仓只要3块钱、7块钱,还是有很多人愿意买账的,所以,这也牵连出一个问题,Banner的点击究竟主要考虑哪些因素?设计师的方案?文案的吸引程度?还有当期以及前几期等相关因素的影响多大?以及更多其他的影响因素?这是从进1号店以来一直困扰我的问题,目前的处理方案是为了点击不顾一切,人为的把控标准,只要点击不好就改设计,放大折扣信息,全然不综合考虑各种因素的影响。

 

1.28

8月美护活动-Banner-790-265-3

色块拼接方案 

 

1.29

9月母婴活动-Banner-上线-790-265 0

简洁明了的叠字方案也能达到不错的效果

 

1.30

9月母婴活动-Banner-预热-790-265

……

半年时间说长不长,说短也不短,一路尝试一路成长,渐渐融入工作环境,可以自如地根据不同需求方的要求产出合适的广告素材。但是,不管采用何种方案,都会涉及到点击率与美感的平衡问题,是保持一定的品牌形象弱化促销,还是采用通俗的折扣促销方案?公司的价值导向将决定设计的走向,如果注重品质感,那么直接明显的折扣清仓信息将会有所收敛,同时有可能降低点击;如果注重促销点击,那一切均以突出促销信息为导向,尽可能刺激广告的点击。问题偏偏出在,用户点进去之后没办法跟踪,至于用户会不会觉得被骗,或者点进去之后是立马离开还是继续浏览,目前公司还没有配套的后台统计工具。所以每次活动的前后都是断裂的,还不如淘宝店铺的后台统计分析工具。

按照同事的说法就是开发和研究这些数据需要配备庞大的数据分析团队,不关自己事,而且数据分析未必能从复杂的应用环境里得到靠谱的数据,所以没办法做……对于这种答复大多人持默认支持的态度,我表示很无奈也很无语。

不管别人如何消极应对,自己的本分工作还是得努力做好,Banner的各种基本样式也大致摸清,曾经喜欢各种背景融合,懒到尽可能规避抠图。如今抠图已成常态,有更多的机会尝试以抠图为基础的设计方案,文字居中或者居左的各种排版大同小异,区别只是在于重点突出什么?产品是什么?背景需要怎样的方案融合?大致如此。

开始考虑制作Banner模板,因为类目线同事认为提审设计需求流程太慢来不及变化,经常直接找商家做图备用,为了保证设计质量,统一设计风格,需要有基本的模板以供修改更新,而且申请设计需求时如果有一定的模板参考也可以一定程度上避免漫无目的的提需求。但是目前UED的模板储备为零,而且建立相关素材模板库的意识也才刚起步,很多事情都要慢慢完善。也许以后还要在公司内部开展Photoshop的基础教程培训,已经有很多同事有能力也有迫切需要去学习和梳理常用实用的PS技能,毕竟模板开发好如何利用如何修改也需要公司整体PS水平的提升,同时也能借助培训让更多的同事理解设计工作,便于相互之间的沟通,我想现在才刚刚起步,这里是个起点。

 

2、活动专题(所有专题均为截取拼接,并非完整版,仅供参考)

 

2.1、入职面试试题[家电3C]

output-003

点击图片可查看100%大图

当时在Macbook上生疏完成的作品,朋友看了半天,摇摇头,说马马虎虎,— —b,不过通过这个测试拿到了这份视觉设计工作。

 

2.2、水果专题[食品]

output-008

点击图片可查看100%大图

各种水果的拼接,融合各种果园元素。起初想把页头弄成泡泡龙的场景效果,碍于高度限制和素材的缺失,没能实现。

 

2.3、四月出游活动[服装+虚拟旅游]

output-007

点击图片可查看100%大图

接触比较早的一个专题,服装与虚拟旅游的联合活动,首次尝试字体变形方案,搭配动态的飞机和女装模特效果。

 

2.4、粽情中意[食品]

output-009

点击图片可查看100%大图

粽子专题,融合水墨卷轴风格,中文书法复古氛围。

 

2.5、518家电大促[家电3C]

output-002

点击图片可查看100%大图

家电类目线狙击京东6月大促的一次活动,整体风格采用了色块拼接、立体字、高光渲染等效果,这一版产品的排版之后多次重复应用家电3C类活动中。

 

2.6、红6月活动[家居]

output-004

点击图片可查看100%大图

周年庆前最大的一次联合活动,头部创意来自埃及金字塔群,文字和背景着重光影细节修饰,可调整不同的背景色应用在不同的类目场景里,楼层模块采用半设计半系统调用的方式。

 

2.7、周年庆家居母婴分会场第一波[家居母婴]

output-006

点击图片可查看100%大图

周年庆家居母婴品类联合大促页面,整体细节是所有主分会场里最好最复杂的一个,页头是没有统筹规划之前的旧版本,问题不少(本章节尾部有详细说明)。页面排版渐渐形成体系有相应的一套规范,跟前端配合也越来越顺。

 

2.8、家居百货清仓[家居]

output-005

点击图片可查看100%大图

周年庆后的清仓主题活动,模仿学习易迅天猫的线条风格。

 

2.9、奶粉联合专题[母婴]

output-001

点击图片可查看100%大图

页头大标题采用叠字效果,融合场景和标题,整体温馨风格。

 

2.10、其他专题汇总

专题汇总

至今大大小小的专题将近三四十个,每个专题都已尽力做到最快最好,所以这半年足够充实,也很感谢公司能有这样一个环境让我在如此多的项目中练手,还能顺便拿工资,对我而言已是很满足的事情。

当然,项目多伴随的沟通问题也会很多,基本上每个专题的前期沟通到初稿到定稿之间改动频繁,这点跟产品经理的专业度有直接关系。

有些同事发过来的Demo稿简洁干净详实,各种说明一目了然,接到制作需求自然会加倍用心制作,而且对接的同事大多都比较谦和,沟通时会尽量听取设计意见,所以每次做设计自然会顺手不少。

重点是反面教材:Demo制作混乱不堪,需求方内部迟迟不能把活动主题定好,相关文案和规则一改再改,当面沟通时对着Demo稿说不要按这个来,要怎么怎么弄,还没开始设计就已经口头上胡改一气,感觉策划活动完全看心情一般,各方面的不严谨,导致Demo稿形同虚设,然后是提要求,要么死活不提,说没有要求,等到最后要求一大堆,这种最业余。要么就是要求模棱两可,无法确定具体需求,而且最后的初稿即便达到对接负责人的要求,类目线的老大还是会指手画脚,提些不着边的意见,感觉设计改动跟上市场买菜一样随便挑随便选,不止一次因为此类的业余状况导致矛盾不断,始终也没办法从根本上解决,因为公司的等级制度让最终拍板的人不与设计人员直接对接,对接人员在中间传话左右不讨好,所以经常有产品经理因为各种缘由被逼无奈而离职。

整理下出现类似现状的几个重要原因,大致就能看出一二:

a、公司的整体环境对于设计的追求太低,没有相关的激励措施改进设计体验,一直停留在原始阶段,凑合用就行。

b、设计人员本身能力不够,没有足够自信承担起责任,不能用好的作品让人闭嘴!

c、公司内部数据分析能力太差,设计人员不重视,没有匹配的数据分析专员跟进活动效果,也就没数据支撑设计的改进升级。

公司对设计的不重视,UED老大也将设计部门定位于依附于产品之上,不想与业绩等相关指标沾半点关系,没有更多更高的追求,迫使设计人员一直只能被动让人指手画脚,即便产品经理是刚入职的菜鸟,审美一塌糊涂,依旧还是得按照他们的意见修改,因为总有句话拿出来当挡箭牌:“产品经理要背业绩,如果活动做得不好,效果不如预期,我们也没配合修改,最后责任怪到我们头上怎么办?……“

设计虽然不与业绩直接挂钩,但是也存在一定比例的关系,不努力去争取,而一味的回避躲让完全解决不了问题,而且即便坚持我们的设计最后活动效果不如预期,也是有多种因素影响的啊,为什么不想办法甄别哪种影响最大呢?每次遇到类似问题首先想到的是结果不好怪设计怎么办,那也太没自信了吧,除非东西做得实在太烂,成天只想混日子,没底气坚持。

骨子里的懦弱,不敢承担责任也不想管更多事,呆一天是一天的心态造成了UED部门如今被动的处境,我想任何一个对设计还有点追求的人都会努力寻找突破口解决这些问题,而不是只是简单的回避。

好的设计作品在公司内部肯定会有人能认同,大不了投票就是,看看究竟是设计不好还是活动本身不行,总会有个得票多少,如果设计普遍不被看好,那正好借此继续改进,如果设计师不合适这个环境,对彼此都是好事,不是么?或者让用户发声,参与调查评价活动本身和设计本身,都是办法,不努力想办法解决,还没开始就说不行,实在无语。

这还没谈及设计师前期参与活动策划的问题,起初刚进公司时每天只看邮件里的需求做设计,连活动的来龙去脉都不清楚就要开始做设计,夸张到离谱,说是等到大型活动时才参与,小活动没时间参与前期策划。等到五周年庆七月大促到来,设计师照样没有参与活动规划,还是照样被动接受那些天马行空的产品经理提出的方案而已,而UED部门内部更是没有一次讨论过具体某个活动本身该有怎样的设计思路,该如何延续,需要有那些规范等等,依旧一个人单枪匹马的做,做出来的连部门内部都没办法达成统一就交付给其他部门,最后折腾了一两个星期被管事的脑袋一热Pass掉了目前的设计稿,要求重新规划统一的页头,他们都怨声载道,而我却暗自庆幸,还好有这么个外行能及时纠正我们,要不然活动上线后我都不好意思说曾经参与过这个活动的制作。

归根结底,就是UED话语权的缺失,没人重视,更重要的是不能齐心拿出有说服力的作品,这点最让人遗憾。尝试跟他们沟通改进,效果甚微,有点志不同道不合不相为谋的感觉。

如果改变不了他们,那就改变自己吧,努力让自己变得更强大,做的设计让更多人信服,因此,要从基础开始,逐步建立各种设计规范,等时机成熟再扩展到更多方面,影响更多人,这条路还很长!

 

3、设计规范

 

类目线同事做页面Demo没有参考,每次提供过来的Demo稿都是全新的样式,期间他们也曾反馈如果有模板可供选择,做Demo会更统一高效,而且能与设计师配合更好,所以我们从产品的排版样式整理入手,为后续的设计规范打好基础。

3.1

产品展示模板整理-640

以场景背景和纯白背景,1像素边框分隔和多像素边框分隔为区分整理出平时最常见的几种排版样式,以一行4个或5个为例,各种排版的风格有差别却也有共通之处,使用场景根据不同类目的需要以及页面整体背景色的不同来选择。

期间其他几位设计师的也整理了意见,汇总到一起后,我们太过跳跃地讨论起细节问题,比如价格符号和价格标签的样式问题等等,大家不能达成共识,却发现讨论并没有找到一些共通性的规范,反而发现更多问题,我自己也被搅晕,我们究竟需要怎样的规范标准才能让大家都没有意见的支持并遵守执行?

 

3.2

排版规范-注释640

点击图片可查看100%大图

七月大促需求方案一改再改,借此想清楚产品排版的规范可以从间距和长宽上切入,每个不同的场景,在页面宽度固定的前提下,均分的排版方式往往只有有限的几种,很容易找到几套固定的数值,每次在新页面排版时都要算出每一行产品展示区域的宽度和间隔,重复计算麻烦不说,前端工程师做页面每次的数据都不一样导致以前的数据模板不能重复利用,所以这一方案的整理汇总得到了所有人的认同和支持,统一了所有满页面宽度排版时各种宽度和间距的规范。

 

3.3 

1、楼层模板制作规范-卧室640

然后是商家店铺模板制作规范,这个是商家作图反馈过程中出现各种匪夷所思的问题被迫做出的改进,尽可能将各种说明和注意事项标注出来,加强产品经理的审核力度后商家作图反馈质量明显提高,不再出现无故的偏移、更改、缺失,最终活动页面整体效果也比我来之前好了很多。

 

3.4

文字链

产品调用模块和专题页面底部的文字链是我认为最需要花心思调整样式的板块,因为用户基本上在每个页面都会看到类似的导航或产品调用信息板块,但是这些板块却少有人改进,一直杂乱无需的穿插在各个活动页面,后来实在看不下去就按照Table格式更新了模板,间隔透明,背景采用整张大图的方式方便加载和更新,文字链接与灰色色块边界的间距也进行了微调,只是产品模块的系统调用部分没权限进行更新,一直搁置,半年都毫无变化……

 

3.5 

近期活动串联整体预览

管事的头脑发热看到易迅底部有这样的近期活动串联的板块,想模仿做个类似的,可是设计完成后没人对这些图片怎样修改有疑问,我也不清楚究竟该给谁发邮件告知使用方法,于是简单处理后便匆忙上线。后来问题越来越多,颜色肆意改动得越来越乱,有人才想起来需要制作规范文档说明,其实早在设计之前就应该把此版块的需求详细规划好,而不应该等问题出现了再补救。

 

3.6 

开学季EDM640

EDM的代码化是最为纳闷的事情,所有的产品陈列最终都会形成代码格式发出,可是制作流程却是先整体页面图片排版,然后切片,前端再转成代码,绕了一个大圈,为何不直接用代码排版好模板,跳过图片排版切片过程呢?省时省力的事情就是没人推进……后来制作好可视化的表格排版模板,跟上面的图示一样,手动修改价格信息,替换产品图片,即可完成EDM的更新工作,方便许多。

 

3.7

浮动导航汇总

浮动导航栏样式一般会跟专题活动的样式匹配,尽量在共有页面元素的基础上设计,所以从导航栏可以看出某个活动的大致风格,但实际情况往往比预期的麻烦,由于CMS后台的图片上传大小限制,迫使很多精彩的元素和想法没办法实现,因为在导出时如果PNG格式过大的话,上传不了,选择较小的GIF格式将会出现锯齿,所以每次制作都要把握美观度和输出大小之间的平衡。

尝试找开发部调整大小限制以及调整浮动位置,均因档期太满无法排期而一直拖延……

曾经把以上设计中出现的问题以及学习过程都整理到例会分享里,得到不错的反响,但也仅限于此,没人跟进,都没有改变的积极性,分享完,老样子还是老样子,设计规范这个词在他们观念里很飘渺,落实到执行层面,没几个人能认同且坚持下去,但是出现问题后又会抱怨不断,如此周而复始……

有时最痛恨的就是这种已经找到病因的问题,不积极去解决,还是碰壁依旧、矛盾依旧。

 

4、写在最后


来1号商城的第一次分享,聊的是设计的操作习惯,主要围绕分享PSD的可维护性和可编辑性,希望让每一个元素的变换都可逆,尽量使用无损的变换操作,便于后期维护更新,比如应用填充图层、图层样式、蒙版、智能对象等等,但是操作习惯的差异让改变很难,大家还是我行我素地增删图层元素,应用填充色块,随便堆砌图层不分组,添加各种不可编辑的效果……由于惰性和内部松散的工作机制让UED失去了共同进步的机会,这点尤为令人失望。

不久前服装类目有个Banner需求,按照邮件里的三点要求,如实设计修改,结果遭到服装老大的无理回复,对于某些人的态度我倒不大关心,郁闷的是我们连坚持自己的设计意见的机会都没有,始终要跟着那些门外汉的屁股后面走。我想争取设计的话语权,在我认定更改方案不合理时,有权利拒绝或者进行测试分析,但是内部沟通的意见竟然还是妥协,也不支持更换设计师,认为我们始终只是个支撑部门,服务与其他部门就好,不能要求更多。也许他们不想为自己的职业道路添堵,能忍则忍,但是作为一个有独立思想的设计人员,在遇到无理要求时要有站出来坚持自己观点的魄力才行,如果只想做一个安于现状的美工,那就无话可说了。

始终认为设计工作有其独特的魅力和职责,并不同于其他工作,设计的成效没办法简单量化而需要长期的量变才能引发质变。我曾以为加入UED设计团队,大家可以敞开心扉头脑风暴,互帮互助共同进步,可惜理想很美好,现实却很残酷。单凭一个人的力量无法左右什么,所以就像这里的人员流动一样,留下还是离开,每个人都会做出自己的选择。

不管怎样,我还是坚持以前的看法:对于色彩、设计、艺术的关注,是健康精神生活的重要组成部分,将来无论是否继续从事设计工作,依旧会投入更多的精力到设计学习中,无关工作,而关生活。

2012年以前我认为的视觉设计=素材融合+文字排版+阴影+渐变+蒙版+选取+曲线+灵感获取+……

2013年我认为的视觉设计=素材精选+层次分明+光影纹理+效果展示(色块、线条、折纸、立体字、模拟场景……)+设计规范+操作习惯+经验积累+……

因为之前的积累才让2013年有了更多新的机会、新的尝试,对设计的思考也潜移默化地转变着,至于以后会变成怎样,那将取决于会在哪个方向的努力更多更顺手,我满怀希望的期待着!

 

[完]

Comments are closed.