年度总结/设计有道

March 24th, 2012 | Tags: , , , , , | 5,055

首页专题3

去年五一从云南到深圳后,开始将近一年的“设计”生涯,这一年,见证了淘宝设计行业的飞速成长,有幸能全身心地投入视觉设计工作中,尽管非专业出身,但是凭借非凡的山寨功力和还算不差的审美功底,勉强没给这份头衔抹黑。一年时光,不长,也不短,收获很多,曾经生活中的一些伏笔都在这一年时间里陆续抛头露面,颇感意外,为了对得住这一年的摸爬滚打,起早贪黑,记下那些印象深刻的片段,不仅为了分享,也是为了自己。

 

一、宝贝描述模板


记得刚开始专职设计工作,急需改善宝贝描述模板上新,起初担心得更多的是自己设计得不好看怎么办,后来发现实际情况需要考虑的因素太多,以至于对于美观的顾虑反而变得次要,因为设计工作的流程除了美观还要考虑很多:

  1. 模板的简便性和可维护性:模板制作出来,人员太少,没有专职上新人员,需要所有团队人员一起合作,涉及到模板的使用培训,要求模板简便易于操作,同时后期更新升级也要容易维护。
  2. 模板的通用性和扩展性:由于平台的多样性,淘宝B店,C店,阿里巴巴批发平台,拍拍店等,每个平台的尺寸和使用规则上的不同,要求模板能尽可能适用于所有平台,否则,单独制作的维护成本会超出预期。
  3. 模板的美观度和UI统一性:真正的设计环节是在以上的实际需求基础上才开始的,前期的准备不充分,后期的更改成本肯定很高。因为每个人对于审美的标准不同,设计人员的风格不同,势必不能让所有人满意,所以模板的风格需要尽可能让更多的人认同,同时还要考虑网店的整体风格和品牌的UI是否统一。

所以根据以上考虑的一些因素,第一次处理宝贝描述时做成以下样式:

宝贝描述模板5

宝贝描述模板1

整体的框架基本如此,只是一个个内容模块的叠加而已,比如模特图,细节图等模块,为了让每个上新的同事能方便上手,模板不是用PSD切片的方式,而是HTML的方式,需要内容填充文字或图片的地方全都可以在淘宝助理里添加,通过淘宝助理上传错误可以实现图片的自动上传和本地地址与网络地址的替换,这将节省大量的图片换址工作。。

为了适应各种不同宽度的平台,有颜色的地方全都是用填充表格背景的方式,表格则是按照100%自适应的宽度设置,基本照顾了各方的需求,不算好看,但实用,要说一点的是,这个模板的分类标题横条纹还是抄的“永久C”家的,也就是从那个时候开始关注淘宝上各具特色的网店,比如七格格步履不停米墨D2CSince1984O.SAUNIQLO百武西⋯⋯

后来换到伊华欧秀/EVAOUXIU,品牌logo色调换成金色,黑色和白色,于是做了个新的模板重新开始:

宝贝描述模板4

宝贝描述模板3

宝贝描述模板2

功能性方便增加了搭配推荐和同类推荐,其他基本一致,依然是一切从简。

专题排版9

 

二、导航栏/店铺分类

 

导航栏需要优化的前提是店内产品整体分类的调整,所以只要认真把这个工作做一遍,基本上就是把整个店铺的产品熟悉了一遍,所以后来招新同事进来首先安排的工作都是让其熟悉并更新产品分类,一方面让她熟悉产品,另外考察工作能力,看是否有新的想法融入其中,当然,这是后话,并不一定对,经验之谈而已。

同样是参考其他的店铺之后,根据我们店铺的实际情况,进行合适的调整:

  1. 在尽可能梳理产品线的同时,还要保证用户浏览是时的用户体验,不能有的分类需要翻好多页,有的分类里一两个产品,需要删除的,需要拆分的都要重新调整;
  2. 分类完善好之后将为首页的整体布局定好框架,店铺框架将从分类里找到原型,而且店铺各处的链接均要更新,同时还要考虑以后新增产品类别时,尽量不要影响现有的分类,以免再次大量返工。
  3. 另外,调整过后,会发现真正合适的分类往往都会向淘宝官方的分类靠,这是淘宝的整理所得,也含有一定的关键词和广告资源因素,所以真正有用靠谱的方案往往都会以淘宝官方的分类为标准。

最后定下分类之后,再开始排版,因为是要让用户更方便的浏览整个店铺的产品,增加各个页面间的关系网络,所以导航栏不用太花哨,但要耐看耐用,最好能和网店和公司的UI有所统一,于是有了下面这个方案。

OMANOR

有同事很有意见,认为难看。的确,也不知道怎么处理得华丽,只好简洁处理,但自认为还不至于难看,有时这种审美角度的差异,完全不是能靠解释能解决的问题,就像一个人喜欢吃A蔬菜和另一个人喜欢吃B蔬菜,但最终只能买一样,这时矛盾凸显,要么一方强势另一方妥协,或者干脆两边都不满足,随便找个第三方,选择是什么就是什么。

后来,去了伊华欧秀/EVAOUXIU,针对新的环境重新优化了导航栏,尝试过几种方案:

横版导航栏2

这种直观吸引眼球,点击率高,但是展示的分类有限,占用版本大,而且定期更换工作量大,最开始用过一段时间就不再使用了。

横版导航栏6

借鉴其他店铺的导航栏制作的导航,采用切片的方式加链接,同样是维护麻烦,如果要定期更换每次都要用Photoshop改图,切片,导出,上传,更换图片,稍大的改动,工作量几何倍数递增,弃之,不过这个版本的导航后来在页头的改版中用到:

页头00

经过几个版本的演变,最终参考淘宝商城首页底部的分类样式重新改版,定稿为下面这个版本:

横版导航栏3

/ 底部的页尾,每个页面都可以看到这个导航。/

采用表格的框架,文字部分均为文本加链接,易于更改,图片是一张大的背景图,一次性加载,这个方案综合起来效果最好,其实也有考虑过其他店铺的那种纵向分类排版的导航,个人感觉不合适,一直没尝试过。

 

三、顶部导航栏/页头


顶部导航栏的变动纠结过很多次,走了不少弯路,最终形成现在这个最合适的结构,也是摸爬滚打一步一步走过来的,这一路的成长与变化只有亲身经历过才深有体会。

起初单纯的品牌展示,简单的logo和主题背景搭配色的设计,只想保持品牌的简洁大气,但功能方面很弱,对于增加客户浏览量和销量毫无益处。比如:

页头0

然后尝试将页头与定期的首页主题活动结合起来,这样使整个店铺活动的结合度更好,而且更加突出表达活动主题,但一旦店铺的活动多起来,页头板块明显承载不了更多的信息量。

页头1

于是采用新的思路,把页头与主题活动分开,为了将页头的“每个页面都能显示”这一绝佳店铺广告特性充分利用起来,我们将近一段时间的活动和常驻的信息展示糅合在页头的logo边上,这样一方面能展示品牌,同时能更快速的传达给用户近期活动,常驻活动,以及店铺特色。但是这样一来,页头的信息量过多,采用的色块排版使页头比较乱,而且品牌形象的传达有影响,所以这个方案也只尝试了一段时间。

页头5

也就是在这时,将页头充分利用起来还体现在将旺旺模块移植到页头logo底部,取代了之前的页头导航,同时增加了一个滚动字幕信息栏,主要是为了简要说明近期的活动公告,同时有特别事项也方便及时公布,避免了在首页公告时,从详情页和列表页进来的用户看不到。

EVAOUXIU伊华欧秀

经过双11前后一段时间的连续活动刺激,页面的更新跟着活动的节奏快速转变,双12的过后准备圣诞活动,页头演变成四个主要活动主推加简单的分类导航,同时将旺旺模块分离出来,用升级的左右浮动模块代替掉了。一方面保证所有页面都能方便的查看并点击左侧浮动旺旺模块咨询,另外右侧的信息栏,可以用图文的方式展示最热门最吸引人的广告信息,将整店的活动氛围烘托得更彻底,保证即便是一个新用户来到店铺也能知晓所有活动信息。如图:

淘宝商城

当时的时尚星女郎联合活动组织得很失败,完全是拿钱打水漂,10家店铺各出15万买淘宝在双12和圣诞节之间一段时间的流量资源,从组织服装拍摄,活动的策划,后期的跟进,页面的制作等等方面都比较业余,淘宝官方的支持也有限,最终效果可想而知,权当品牌推广了,不过也就是从那时开始,店铺的整体状况从双11单日50万的高潮过后的低迷期恢复过来。

页头2

圣诞节前改版的页头导航栏的功能性和逻辑性都得到比较合理的平衡,从美观和实用性方便都相比之前提高许多,至今店铺所有的活动都在这个版本基础上变化发着展,单从销量角度来看,成效斐然。

页头3

相比其他店铺的页头,四个常驻活动区,让整店的活动有效串联起来,买家不用到处找活动链接,只要看页头即可,同时,和当前店铺的活动数量以及活动进度相匹配,而且维护成本比较低,易于改版保持各种活动的交替进行。

以上所提到的无论是描述模板还是页面导航都是整个店铺框架的优化,真正涉及到内容的填充,也就是定期的活动专题以及产品信息的展示才是最重要也是最耗费精力的地方。

 

四、首页主题活动


整个店铺的设计装修过程中,最头疼的要数首页主题活动的构思和制作,开始最怕丢丑的就是在这个环节,好在淘宝上的专题案例足够多,也足够我抄,所以照搬一个还算不错的创意还是比较简单的,在不算差的审美把控下,大多首页主题活动制作得还可以,至少清楚自己每次都已经尽力,我也在不断学习不断成长中。

只是刚开始没有规划的制作进度,每天两三个的首页轮播图制作的更新,一度让我抓狂,接连不断的活动要求,绞尽脑汁也出不了几个像样的作品,比如:

轮播图5

2011.5

轮播图

2011.5

黑白T

2011.6

2

2011.6

轮播图-720-2

2011.7,风骚体文案专题,貌似效果还挺好,点击率很高。

950-400-5

2011.7

OMANOR-2011-夏装

2011.7

首页专题1

2011.8 EVAOUXIU的第一个专题。

由于文案和选款环节脱节,人员不足,很多事情都只能一手包办,与在上海的小打小闹实在天壤之别,专攻于设计的热情和害死人的完美主义情节,每次细微的调整都会耗费掉我大把大把的时间,所以加班成了我挽救工作效率低下的唯一办法。

起初,为了制作标准的工作配合机制,建立标准的制作需求文档,效果不大明显,因为同事的配合意识很弱,后来接连不断的钻展制作需求,热情完全湮灭在泥潭里。后来到在EVAOUXIU,视觉事宜亲自操刀,虽然累了些,但操作起来得心应手,杂七杂八的干扰因素都可以PASS掉了。

首页专题10

2011.10 国庆假期活动

首页专题8

2011.10 线下EVA花园店开幕

首页专题11

2011.11

首页专题5

2011.11

首页专题7

2011.12 双12,全民疯抢

在一步步的摸索中,找到适合我们的工作方式——配合淘宝官方活动进行店铺活动的开展,而且也实现之前预想的有目的性的规划好活动整个过程前后的细节问题,借助完善的帮助中心和制作的售后服务卡,实现全场自助购物,降低了客服的咨询压力,还提高了服务效率,另外,即便是周末无人值班时也能照常营业。

活动策划2

这样一来,策划的活动有5-10天的持续期,有效降低了活动制作压力,可以更好的做精每个活动细节,另外也让每个活动充分发挥效果,加上团队的整体配合以及淘宝官方的支持,活动的效果日渐明显,从起初的不见反应,到后来一个店内活动也能做到日销10万以上的成绩,遇到大型活动提前制作,标签页提前保存好,到时间即可立即发布,整体运营上做到从容不迫,即便遇到突发状况也能快速反应。

春暖花开

2012.2 开年第一波活动,店铺渐渐恢复年前状态

幸福情人节

2012.2.14 情人节专题

淘金币活动

2012.2 淘金币专场

风尚之旅

2012.3 淘宝官方策划的旅行专题活动

女人花

2012.3.8 妇女节专题活动

周年庆

2012.3.15 店铺周年庆活动

夏装发布

2012.3 夏装发布

其实活动做到如此,还差重要的一步:数据反馈和及时反应在下次活动中等方面的优化,我们做得还不成体系,全都凭感觉在估量,一方面精力不够,另外也是能力有限,尝试招过策划专员,后来招来一个不合适,不仅没起到预期的效果,还增加了内耗,内部沟通折腾得够呛,无奈只好辞退。这一路也算是跌跌撞撞过来,人员有时在整体运作过程中真的极为重要,深刻体会到人才难得一觅,有时我们向外提起我们的团队人数只是别人的几分之一时可以炫耀一把,其实也确实是找不到合适的人选,本身都忙不过来,招聘更别提有精力去弄了。

一直想把公司的线下品牌形象统一起来,俗称企业UI的统一,可是除了能在品牌推广部找到一些有限的比如logo之类的资料之外,很多产品相关的信息都没了踪影,加上公司整体对于电子商务的不理解和不擅长,导致电子商务整个部门处于公司的边缘,任由自生自灭,这也是我们很想把这一块做得更好但是受限于公司环境制约而变得越来越被动的缘故,试图找过管事的,但不是找不到,就是不管事,她们总是以线下的标准来衡量电子商务的发展,而却忽略了互联网产品的除产品本身以外另一个重要因素——视觉!我始终认为,网络产品,特别是涉及到设计和材质展示方面的产品,服装尤甚,产品的拍摄,视觉表达,文案描述等相关因素比产品本身更为重要,淘宝上不乏产品一般但展示出色而热卖的爆款,然而公司的上层在对电子商务的执行力环节上实在不给力。

其实不光如此,库存环节和设计环节的不独立也是传统行业发展电子商务的致命伤,经过这一年也大致看清传统行业在发展电商时的保守心态都是处于商人的唯利是图层面——清库存,真正能全力投入电子商务的企业太少了。淘宝上真正做出成绩的传统品牌,基本都是全身心投入进去的,比如UNIQLOGXG等等,由于两种销售形态的差别注定了两种营运模式上的天壤之别,因此,所谓的传统行业试水电商,如果不是用新的思路转变,电子商务永远也在这些企业看不到未来,这也是后来决意离职的一个重要原因。

 

五、专题活动/标签页


扯远了,回到专题的制作上,一年下来,对于淘宝官方各种活动报名略知一二,各种尺寸的广告图制作,比如钻站、直通车、聚划算等等,都是吃力不讨好的力气活,每次活动出来都要剪裁排版各种不同尺寸的广告图,还要控制广告图的大小等等,相当坑爹。

钻展

曾经做过的钻展,点击单价低的比2毛还少,高的比2块还多。

为了让广告投放得到比较好的转化,考虑得多肯定是将专题活动的风格统一,主题图确定后,相应的服装专题展示,颜色,文案,风格都需要统筹规划,这些也都是从无序杂乱制作中一点点摸索出来的经验,否则也不会有起初的那些风格迥异的专题。

活动策划过程中最难的地方在于创意的获取,有时设计素材,活动文案,团队协作都准备好的情况下,如果找不到有效的方式组织在一起是件很痛苦的事情,所以创意灵感的积累,设计流程的优化,设计素材的分类管理等等对于平面设计效率的提升有很大的帮助,同时PSD的统筹管理也会提高后续的更新效率。总之,做一个有脑的设计师很重要,且不只是会点头脑风暴,会点关键词萃取,做做图片,更重要的是还要懂得图片数据的反馈和分析,及时更新设计方向和重点,把握一定的大局观。

五模特2

2011.6

活动策划7

2011.8 全国店铺总览

首页专题2

2011.9 天天上新

裙装

2011.9 裙装专题

unamed1332499086

2011.9 内搭专题

活动策划5

2011.9 搭配套餐专题

unamed1332499253

2011.10 外套专题

活动策划8

2011.10 免费退换货活动

活动策划9

2011.11 每周特惠活动

不过也正是因为刚开始的风格不确定,才被迫不断尝试,尝试各种风格,最终形成现在的体系也是起初那些不合格品被不断淘汰渐渐沉淀下来的结果,整个过程中各种参考维度不断变化着:

最开始只是想通过这种不同的板块通过产品分类展现出来,但库存产品的限制导致产品数量和质量不能得到保证,偶尔能找到一些卖相不错的产品,库存数量却很有限,所以初期展示很简单,纯粹挑选一些看好的款式拼凑在一起,组合到首页通过不同的分类来吸引顾客购买,而这专题不是从产品的设计理念出发,也不是以服装的款式特点,面料特性等方面来进行区分,因为我们都不甚懂服装,完全凭感觉,从排版颜色以及审美的角度来筛选,所以很长一段时间首页什么内容都有可能出现,整体很散。

直到双11,大流量的引入,逼我们必须采取更为有效的分类和更加统一的整体形象,于是借连续几次活动重大版面改版,达到不错的效果。改版更新的过程相当费劲,不过这些麻烦为之后的维护打下坚实的基础,不光是品牌形象的统一和提升,而且还使整体条理梳理得更加清晰,更新升级能发挥一定的积累效应,每个版本的更新可以在之前的版本基础上改进,这样活动版面会越来越合理,更加有利于活动的全面释放,同时细微的渐进,让老用户也更容易接受和过度。

专题排版8

2011.11 双11产品墙

专题排版2

2011.11 新品上新,模板统一的开始

专题排版7

2011.12 每周热卖榜单

专题排版3

2011.12 排版升级,融合上新、折扣和赠品活动

unamed1332553737

2012.1 春节不打烊活动,春节期间新品春装权限舞着,全场自助购物。

活动策划1

2012.2 搭配套餐五折,采用滚动轮播的方式

淘金币

2012.2 淘金币专场

品牌特卖20款-实物2

2012.3 品牌特卖

专题排版4

2012.2 风尚之旅专题

三月我们提前半个月完成指标,提前其他店铺将近一个月发布夏季产品,同样是杂乱的产品体系,排版时没有重点,采用瀑布留的版面,参考过淘宝官方的发现宝贝美丽说蘑菇街等等比较成熟的瀑布流网站,普遍淡灰底白色四列无序排列的基础版面,尝试过将店铺的底色也改成淡灰,但是之前的很多专题都是用白色为间隔,这样一来会让那些间隔看起来很杂乱,无奈妥协,使用白底、边框分隔的版面折中方案:表格布局,没使用DIV+CSS,一来维护起来不方便,毕竟淘宝限制比较多,不能实现读取数据库动态填充内容,从手工增删数据方面看,还是用表格更直观方便,有时不光要考虑效果呈现,也要考虑后期的维护成本,不能盲目的取舍。

原本怕参差不齐的感觉容易太乱,整体页面出来后,发现挺清爽,还不错,边框间距字体大小等细节都控制得比较好,貌似这些小细节能注意到,同时,熟练使用“蒙版”、“曲线”和“ctrl+点图层建立选区”这三个功能基本就可以出师了,万变不离其宗,学PS推荐大师之路。补充一句,不管做什么工作,细节都是魔鬼,好的设计师不应该容忍任何一个像素的错位或任何微小的不悦目的细节,用户不是傻子,真正用心的作品,用户肯定能感受得到,即便他们是外行。

评价+热卖件数112

2012.3 夏季新品发布

最基础的新品展示版面即是这样,同时规划了热卖产品的热销记录和用户评价体系,如下图:

评价+热卖件数11

2011.3 春装五折

其实还可以增加多颜色选项功能,只是懒于维护— —|||

在这样的基本框架下,可以根据排版需要实现错位或整齐的排版方式,只要选图时统一标准即可,最重要的是,这样一来,就可以将方便批量剪裁图片的Picasa,批量加水印和改尺寸的PhotoWorks,批量编辑代码的Dreamweaver,自动上传图片的淘宝助理,自由排版选款的默认Windows文件夹这几个提高工作效率的工具都利用起来了,甚至可以在不用Photoshop的基础上实现如今的排版需求,这也是考虑到我离开之后便于维护更新,不至于影响店铺整体的运作。

瀑布流2

/瀑布流排版/

最好是能把平面设计这块业务外包给摄影公司操作,虽然沟通成本和预期效果会有出入,但终究比没人维护的好,而且摄影公司也正好有意向和能力承接这一块业务。与摄影公司的衔接问题,目前已有ZW能承担下来,我这边也逐步放手之前负责的任务,尽量把更多的事情交接给其他同事,等离开后,也好继续,路还很远。

 

六、写在最后/心得体会


品牌有自身的固有色系,不同的店铺活动也有不同的色系来烘托气氛,最近几次节假日店铺整体的色调也在不断变化。

版本更替

从左到右,依次是2011.11[双十一],2011.12[圣诞],2012.2[时尚之旅],2012.3[夏装发布]四个时间段的首页。

由于不是专业设计出身,基础性的理论知识不扎实,只能跟着感觉走,到处抄袭四处借鉴,还好Photoshop CS5帮上大忙,比如很多颜色的选取都是出自PS默认的设计色板,原本对颜色很迟钝,如今算是入了一点门,有了一点心得,还在不断学习摸索中,期待更深的领悟。

色板

Photoshop无论作图还是后期真的很强大,想要精通某几个功能不付出成倍的努力是得不来的,比如曲线,滤镜,色阶,蒙版⋯⋯每一样东西都足够我们折腾,平时多留意在色板,自定义形状,渐变,填充图案,图层样式,笔刷等方面的积累,绝对是个明智的选择。

另外使用大显示器,最好双显示器对于工作效率的提升也有很大作用,近大半年的双屏工作状态,回到单屏会有些不习惯,比如使用笔记本下意识的感觉就不应该在这上面工作,单屏是为日常生活准备的,双屏才是为工作而生。

本想借色彩搭配延展到其他PS资源的共享,提供一些笔刷,色板,渐变,填充样式之类的资源下载,但是没找到合适的网络硬盘,无法提供靠谱的下载地址,无奈作罢,以后有机会再整理分享出来。

还有很多细节就不一一展开了,展开的话那又是小说了⋯⋯始终认为对于颜色,设计,审美,艺术的关注,是健康精神生活的重要组成部分,将来无论是否继续从事设计工作,依旧会投入更多的精力到设计学习中,无关工作,而关生活。

附上工作过的伊华欧秀/EVAOUXIU淘宝商城官方旗舰店网址:http://evaouxiu.tmall.com

活动策划

2011年8月至12月的更新进度可在网店的“一直在努力”标签页查看,当时想把一路走过的成长历程记录下来,等时间久了,用年为单位分页,然后放在店铺的某个角落,如果能让一些有心的用户发现,看我们曾经如何犯错,如何成长,那应该是一件有趣的事情⋯⋯

然而,因为某些原因,去年12月底没继续更新了,正好这篇日志将之前的工作重新梳理了一番,就当在这里补上吧!

这一年,很用心,也很辛苦,迷茫过,开心过,收获过,也郁闷过,苦恼过,无论环境如何变化,业绩如何攀升,人员如何变动,始终未变的是,我们,一直在努力!

[完]

  1. 1 trackbacks
Comments are closed.