header_v1.7.40

关于黑五运营设计的一些思考和总结

48天前发布

原创文章 / UI / 教程
蛋挞妹妹 原创,如需商业用途或转载请与蛋挞妹妹联系,谢谢配合。

UI运营设计 视觉设计

关于产品UI和运营UI

随着ui行业的日益成熟,越来越多的ui设计师的工作不仅仅局限于做界面,产品上线后,大量的运营和视觉设计工作也需要我们去承担,由于最近工作中的运营需求比较多,借此想分享下一些运营设计的心得。在ui行业,我也是个新人,如有说的不对或是可能优化改进的地方,欢迎大家多多批评指正,谢谢!


关于产品ui和运营ui,个人认为还是有很大差距的,甚至在很多大公司里,这完全是2个不同的岗位。产品ui注重于界面逻辑,交互,icon设计和视觉规范的制定等。而运营设计师,就是平面设计师的一个分支,担任这产品宣传推广的工作,运营设计师必须要有非常敏锐的配色基础,字体设计功底,手绘排版功底。 总结起来一句话,产品ui的产出物就是给人用的,运营ui的产出物绝大部分是给人看的。

很多小伙伴。在拿到产品和运营的原型图后,就马上打开ps画,如果公司的规模较大,流程也比较规范,产品运营思路也比较清楚,那么最后出来的视觉稿基本不会有太多的偏差。但是在中小公司,前期和产品运营的需求分析和沟通就显得额外重要,(尤其是产品运营经验不是很丰富的情况下),有些运营上游没有多少经验,只是随手丢个原型给你,说先做出来看看效果,这种工作方式是非常不可取的,往往造成的结果就是视觉设计师做出初稿之后,效果不好或是没有达到运营产品想要的效果,从而造成反复加班改稿,效率低下,苦不堪言。


所以我们在拿到运营上游的需求时,一定要了解和分析需求,如活动的背景时间和定位人群,以及考虑到视觉设计中的一些文字需要转化形状再进行设计,所以某些重要的文案一定要尽早确认。最后确认好排期之后,你的工作效率和节点计划也会变得非常有效率。


需求分析

最近接到的项目需求,公司主营做跨境电商,每年年底会有黑五促销的活动,所以这次的需求是做一个关于黑五的WAP的落地页, 页面的主要功能是让用户抢红包的同时,能够通过微信和微博还有QQ等平台将页面分享给好友,助力一起拆红包。同时在页面的里面放入公司移动端的下载入口,增加转化率和产品活跃度。由于公司的产品运营妹子没有多少经验,所以当时我收到的邮件和原型图是这样的,


前面说过,沟通必不可少。所以前期我拿到交互稿的第一件事情,就是找运营同学抽时间开了个简短的小会,把交互稿PUSH给他们重新画,包括按钮的点击交互链接,首屏显示多少内容,哪些模块是让前端写死的,哪些是模块内容是后期活动时候运营同学自动配的。


通过沟通,我们和产品运营同学重新梳理了活动的逻辑架构,做这次活动的主要目的是通过拆红包增强产品活跃度,增加用户下载量和转化率,考虑到无论用户是否为注册用户,都会有红包失效过期或者被拆完的情况,为了增加用户粘性,我们在页面尾部都加上了去APP华黑五主会场的入口。


经过讨论,下面是重新绘制过的交互稿,为了增加用户粘性和留存,同样我们在活动页面上增加了黑五独家活动和海外商家活动这2大模块,在活动期间,运营同学是第一手可以获取海外商家信息的团队,他们可以每天在此模块编辑和推送最新商家的优惠活动,吸引用户和提高页面转化率。而下方模块,根据产品经理的要求放置了产品的购物使用流程,保障和使用方法等文案(这里其实我和产品同学意见不一致而讨论了很久,我的观点偏向从设计和视觉上考虑,认为页面模块过多,用户一般的行为是价格吸引大于平台吸引,活动页面应该置入更对的电商优惠促销信息,而不是增加产品介绍模块。而产品运营的出发点是公司的产品和平台刚刚上线不久,应该要向更多的用户诠释产品的使用流程和安全性。)


在红包领取成功的页面,我们在页面中加入了分享按钮强化分享功能,(微信的头部分享不够明显),在红包弹窗页面也考虑到红包有可能有抢光和失效的状态,所以在原型中也加入了抢完了的页面设计,并给予用户前往黑五主会场的入口,增加产品的导流转化率。




逻辑原型确认之后,最后就是视觉风格的确定。这次活动的背景是国外黑五促销节,设计定位是偏向中高端收入的白领群体,时间是黑五前一周,我们在页面的主色调上选用了紫黑色渐变的配色,黑色和紫色代表了高端,大气,贵族,呼应了前面的活动时间的背景和推广目标人群的定位。 而在电商活动常用的配色中,中国人本身就喜欢红色,所以红色更适用于国内的电商品牌,如天猫和京东,而刚刚过完双十一用户的审美会逐渐疲劳,所以红色不太符合这次的活动定位。而黄色,更多代表这食物和食欲的寓意,多适用于O2O和运动类产品,故也不符合这次的需求定位。



Let's Begin 动手做

和运营同学邮件二次确认完毕后,接下来就是动手做的时候了。下图是我的花瓣主页的截图,设计元素和素材需要平时积累和收集,而不是接到需求后一头雾水的去百度搜索,这样既浪费时间,效率又低下。关于运营设计的素材,单独开了3个模块,分别是电商Banner,运营活动设计,和图片素材。里面包含了我平时大量的素材积累。



前面做了那么多需求分析功课之后,设计的本身所花的时间是非常短的,下面是活动主页面的视觉稿:



第一屏:设计时候以微信头部规范为准,留出了电池条和导航栏。页面背景,用黑紫压暗,头部的标题文案做了变形拉长处理,其中黑五来袭的字体设计做了现在比较流行的流体3D效果,在边缘用锐利的笔画表现,增加活动和节日气氛的冲击感。头部的物品元素,我们挑选了时下家海外电商平台卖的最好的一些产品(如化妆品和耳机等),经过抠图和调色,码放在下面的霓虹灯板上。而首屏最重要的输入框和按钮,布局在了靠近三分之二处(黄金分割的位置),拆红包的按钮,引用了和背景黑紫对比冲击感强烈的黄色,同时加入了高光投影等细节处理,增强用户的点击欲望。


第二屏:码放了活动的2大模块,独家活动为平台自营商品,同样用了发光的边框和字体文案凸显活动折扣。而海外商家活动则在单品图片上放置了紫色蒙板,前面说过方便运营同学每日更新和编辑活动单品和折扣价格。


第三和第四屏:页面的尾末则是按照产品经理的要求,以图文穿插的形式,介绍了产品的使用功能和优势。页面最后置入去黑五主会场的按钮,增加页面转化。



抢红包成功,红包弹窗,闪屏页设计稿:



红包领取成功的页面,前面说过强化请求好友拆红包的功能,但是后期在和产品沟通中发现,领取红包成功以后,去使用红包的优先级应该高于分享功能,所以在设计的时候,重点突出了用红包的按钮,引导用户来我们app的黑五主会场。


在红包弹窗的设计页面,我在上方绘制了一些彩带元素和发光的礼物盒,增加情感化设计,而红包已经抢完的页面状态,其实用相同的插图元素不太合适,原本是构想绘制一个空的礼物盒,但由于设计需求排期有限,没有来得及优化,这部分是做的不够好的。下次希望自己能改进。


最后为了配合活动的气氛,配合设计了APP的启动闪屏图,这种基佬紫的风格,我们老大真是爱不释手,调皮一下。



所有界面定稿展示:







工程文件整理打包,测试上线

所有视觉稿完成之后,psd文档里面的图层分组和打包也是非常关键和重要的,由于页面图层比较多,我从上至下将图层进行了分组,将部分带特效的图层删格化合并,方便前端大哥开发使用。由于运营设计和前端沟通这2个岗位是相互对接的,所以在工程文件的交付清晰,也是增加效率的必备条件之一,不可忽视。在重要的图层前,用眼睛标注了特定的颜色方便前端大哥切图和测量,所有页面的工作文件需整理打包上传工作盘,方便团队协作。



上线之前,需再次与前端在stage环境确认页面的效果,如有细节与设计稿不符的,及时沟通并优化,当然,公司开发大哥技术都比较牛逼,所以出来的效果基本与设计稿无差,手动点赞!

经过大家的努力,页面终于在黑五活动前上线,经过运营同学的推广,取得了很不错的转化率和用户活跃度,当然这一切离不开团队协作和大家的努力!



总结

随着ui行业的成熟饱和,市场上很多招聘企业公司对于ui设计师有了更高的要求。经常听到很多刚入行的小伙伴在群里抱怨,公司招我进来的title是ui设计师,可是工作了一段时间之后发现BOSS只要是公司里面关于美术方面的工作都会丢给自己做,大到公司楼下的易拉宝,小到部门经理的名片和产品宣传的PPT(这种情况在50人以下的小公司非常常见)。很多同学对此产生了烦躁焦虑甚至是不耐烦排斥的情绪(好好的一个帅气高大上做APP界面的ui设计师,怎么到头来进公司做名片去了?)



所以初入行的小伙伴一定要认识清楚自己的定位,设计的这个领域,很多面都是相通的,做ui,逃不出平面构成,平面构成逃不出色彩学,色彩学又可以运用到品牌设计和产品包装,产品包装又涉及到工业设计和建模,以此类推。所以我们在工作的前几年,一定要抱着多看,学想,学练习的态度,无论是什么领域,都要涉猎去看,相信这样,你的设计之路才会走的比别人更远,进步的也比别人更快。


如今市面上很多产品的ui和交互布局大同小异,这种情况在电商和O2O产品中特别明显,个人认为今后几年传统产品UI的岗位需求量会大大减少,而运营设计师的工作和地位会越来越重要,所以我们必须提升自己的创造力,让自己的设计更加具备和商业价值,相信你的设计之路会走的更远。


文章纯属原创,如需转载请表明出处。



33

    文章信息

    • 文章标签

    Hello PM 意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功