设计师转化!电商设计如何进化成UI设计师

分享到:更多 ()

实例说明,电商设计如何进化成UI设计师,适合想转型做UI设计的人,初级版,经验丰富者可以绕道,写好了好几个晚上,谢谢大家支持

             

 

注:可能很多人不会称之为电商设计师,个人称呼罢了,请勿见怪

 

        这个其实要从我自己说起,我做过电商也做过UI,深刻明白其中需要提升层面,说白了就是父与子关系 ,电商只是UI的一部分,下面给想转型的设计师们一些个人的建议和经验分享,一些仍徘徊在要不要转型做UI设计师的疑惑,防止大家盲目跟风。

        先从电商案例开始说起,我做电商说久不久,说短也不短,我用案例来说明我走过的路,明白电商的工作和需要哪些技能,我是12年开始做电商,做到14年底吧,两年时间,做出了很多作品,从我第一个作品开始,进入正题。

 

 

电商设计师

 

   电商设计可以称之为视觉营销,让人第一时间看到他就想买的冲动,让人一看就是自己需要的,需要把产品用图文结合的方式去传达给消费者,让消费者的脑中浮现这个产品的样子,知道这是自己要的,说句简单的就是卖图片,图片的好坏决定转化率(当然这只是重要点之一),当然一个好的运营起着决定性因素,可以掠你,也可以提升你。

 

 

        按道理来说,英文排版更排的出所谓的“高大上”的感觉,当然这是我第一份工作的第一份设计,也不算是电商吧,但算是详情页,大家可以很肯定的看出问题所在。

1,构图问题:居中不居中的样子,逼死很多强迫症。

 

2,字体选择:字体粗细一样,没有层次感。

 

3,颜色:颜色没有规范,没有思考读者是否能看清楚。

 

4,产品修图:只能说是抠图。

 

5,排版:毫无版式可言,完全没法看,参差不齐

 

……

 

        严格的来说,毫无设计感可言,当时的我还觉得做的挺不错的,说实话我都不好意思拿出来,问我为什么保存下来,呵呵,宝宝心里苦,被掠的不要不要的,所以不要问我那来的勇气出来展示,我也说不出,只想给你们一些思路,请勿打脸!解决方案:有问题就需要解决,其实很多刚入门的设计师都会遇到这种问题,怎么修图,怎么做出感觉,怎么怎么样的,但是说白了,人家有经验的设计师未必会和你说这些,因为对于他们来说,更多的是经验之谈,初级就会纳闷了,你示范一次或者你给个源文件呗,不装B会死啊,我想说真没空!很多东西都是需要自己去观察,自己去理解,为什么要这样做,做的理由,人家为什么可以做的这么好,慢慢学,一步一步去了解,不是人家多牛逼,而是人家多了一双比你更善于观察的眼和脑,所以多看好的案例,自然就区分了哪些做的好哪些做的差,然后提升自己,不要想着一步登天。

 

 

 

 

        这是过了一年后做出来的,很多人也问我要了源文件,问怎么怎么做的,其实对于现在的我,真的很容易,所以我分享下,这是一张详情页开头的海报,我之前写过一篇关于详情页怎么做的文章,大家也可以看看。首先我们分析这张海报有什么,主题,产品,颜色,字体,装饰性用词这些,在黑色环境下的光感,白色和黑色背景下的区别,怎么样去突出他们的质感。产品很重要,意味着产品拍摄角度和修图很重要(不是渲染的,是实物拍摄后期修图),这张图的难点就在这,我之前附上了一张修图过程和制作海报的过程gif(在我作品集里面),希望大家有所帮助,整个详情页也可以移步到一年前的作品集里面去看,用时3天,包括前期拍摄,抠图,后期修图,整个详情页买点整理过程,以及营销图,实物拍摄等,一套下来你需要有很强的思路,下步该怎么做,之前公司没有文案,没摄影师,没有修图师,只有设计师,那怎么办,全部我一个人做,通宵赶稿(当然不提倡,所以我做的很杂)这就是电商的部分工作,再来下是店铺装修,用到的又不要一样。

        店铺装修,这也是电商设计师工作之一,好比一个官网首页,但是却又区分于官网,为什么这样说,电商大多带营销性质,所以更多带来的是需要转化率,为什么要放在首页,因为更快捷方便让消费者购买,有种冲动消费的感觉,在视觉上要做到很出色,以及融合度,氛围感,到时做完你需要切图,在做的时候一定要考虑到切图,不然就嘿嘿了,因为需要添加热点,你还需要代码,来生成各种板式,直接去网购一淘宝天猫的代码生成器就好了,改改数据即可,所以不用太担心。

                      

 

 

肯定有争议,只是个人观点,只是希望给大家在某个程度上有自己的定位,哪些不足,多弥补,这里的研究是只给产品的定位,是卖屌丝还是白领,老板,土豪,针对不不同的人群,多研究他们喜欢什么样的。掌握好买家的心里也很重要,第一屏放什么第二屏放什么,直接能吸引到顾客,其他3点我不多说明,自己能明白。

1,抠图修图:

外行人当然觉得简单,却不知道他的难度,一张商业用的产品图,认真修好每一个细节1小时一张已经算是速度了,而不是你说的扣好了这么简单,总有些人就认为太简单了,我不知道他们是怎么想的。

 

2,直通车图(广告图):

用来吸引消费者点击或者有兴趣的人,但是被很多运营数据化了,看着哪个点击高就抄哪个,当然也有他的道理,但在设计师的眼里可不这样认为了,也许会要你抄个很丑的,然后说你看他的设计做的多好,点击率多高,他只是看到了一方面,抄谁都会,但是却不能深入的理解为什么点击高,直接就把责任给了设计师,我想这并不合理吧。

 

3,产品详情页:

是指用图文结合的方式把功能点一一展示给消费者,让消费者明白你是什么产品,怎么用,有哪些功能,外观是否符合他口味等一系列的问题描述,这里往往也是设计师和运营最容易撕逼的地方,设计师角度是想用图的视觉冲击来感染消费者,但是很多设计师却忽略了最重要的点,产品独有的卖点,消费的人群是哪类,是否每个功能都准确表达了正确的意思,简单易懂,确实很难做,很多设计师有这样的疑问,苹果能做成高大上我为嘛不能,人家不做广告都行,拿什么和人家比,那也不至于沦落到一看就是华强北的风格吧,其实都不能这样理解,主要看产品的定位了。

 

4,店铺装修:

是指就像实体店的门店一样,展示自己品牌的,突出风格,让消费者一进来就知道你卖什么的,当然也不只是这么简单,需要懂代码!

 

5,摄影基础:

摄影其实又是另外一门职业了,但是作为电商设计师需要理解,光影,相机的使用,而不是简单的快门一按就是摄影。

 

6,视觉效果的素材合成:

很多海报是又多种素材合成,字体设计和效果,怎么样使产品更好的融入到场景,达到效果统一。

 

 

 

UI设计师

 

        UI全称User Interface,也就是用户界面设计,我只讲移动端,一个好的UI设计师不单单只是做到视觉上的效果,还要考虑到用户层面,可操作性,是要把三者结合去解决问题,而不是去追求一味的视觉,有很多app界面让人觉得难以忍受,原因只有一个,太多的混乱元素,让用户感觉不够直观,没法集中注意力去观察我们要带给他的重点内容,在添加任何一个内容或者细节时,多思考问自己问什么这样做,如果忽略这方面,可想而知这个人一定是很糟糕的UI设计师。

                               

 

        以上几组图标是我日常的练习,请记住只是练习,这样也是你进UI培训的课程,说白了,你自己通过多加练习,知道光影效果,做出来是时间问题,一定要理解,而不是照抄,天天拿出你的本子有空多画画,才是重点,手绘基础一定要有,别光说不练,不懂装懂那才可怕,当然现在icon慢慢扁平化了,拟物的会很少,不代表你可以放弃,现在很多表现形式,你都需要掌握,去不断学习,才能称之为设计师,不然你顶多是美工。

        对原型图的理解,不是依葫芦画瓢,而是先思考后动手,理解产品经理或者UE的思路,为什么要这样做,这个页面需要哪些功能和按键,了解用户的阅读习惯,以及一些用户体验的基础知识,这些都是要通过时间去累计的经验,不是那么简单,所以很多从培训班出来的,都是拿些练习的视觉稿在给面试官看,讲不出所以然来,也许短暂的时间让你的设计能力提升上来,但是在思维模式上需要靠的是自己的理解和积累,是不可能速成的,一问便露馅。

                             

 

        也许你会收到一张这样的图(很多创业型公司不会招UE,会由产品经理来画),好的话你可以见到一张大概的初稿,不好的话,可能直接把写成一篇看不懂的需求文档丢你这(会很悲剧的),你需要再这个基础上去完善你的视觉稿,如果你拿着稿子就开始做或者按他的布局来一摸一样的做,那么说你这位设计师肯定是不合格的,因为没动脑子,我们需要合理去布局每一块位置,考虑怎么样可扩展等,我来说下个这个首页的思路,让大家知道我是怎么思考的,首先分析,这个里面有什么,

 

1,左上角菜单栏

2, banner

3,通知栏

4,内容区域

5,主菜单栏以iphone

      

       6的尺寸是1334x750px为例(图1),主菜单栏是98px,导航栏为88px,状态栏为40px,那么中间内容区域只剩下1334-98-88-40=1108px,所以再这个范围内容要规划好,他们的占比是多少,我设置的banner高度为320px,中间灰色间隔为20px(背景色为eeeeee),通知栏为60px,字体大小的选择,最小为20号苹方细体,均为描述性用语,重要的数字28号苹方中等,图2可以看到我做了规划,这里我不拿视觉稿说,可以见我之前的作品,如果出现按钮,点击状态的色值又是什么,在5尺寸下,显示到什么地方等一列要考虑到的问题,不是那么简单的,所以很多都是在考你解决问题的思路,好的设计师,在心中都有一套已成型的规范,不会犯常识性错误,所以做起来会事倍功半。怎么样认真对待你的设计,而不是敷衍了事,问你任何一个问题你能答上来,说出你的理由,而不是为了设计而设计,为工作而工作,要的是态度,以及你的思维的模式,视觉方面可以慢慢优化,我说的挺简单,但实际上却很难。以上我还只是初步的说,更深的东西我也需要去摸索和数据支撑再去设计,以上就是仅仅是我个人的思路,高手也可以给我点指导性意见,不胜感激。

                                                                                   

        H5的制作,H5的制作好比一个电商店铺装修,整个氛围要烘托出来,视觉感要强,吸引用户研究,有主有次,色彩分明,以及需要前端帮你达到怎么样的效果,都需要做出来,来告诉前端你要的效果,再来就是适配,H5要适配各种机型,所以你要考虑的就不只是这些,每个机型都要去看,是否达到自己的标准,久而久之就给自己一个定了规范,怎么样做符合标准的情况下快速出稿。图片大小当然是越小越好(不损失像素的前提下)一般全部存图的加起来大小为200-400k最好,当然按实际情况来,请大神自行绕道。

                                                   

 

        UI在设计上可能不像做电商那般“随性”,因为他的存是为了解决问题,提供用户方便使用而存在的,用户体验才是核心,我看有很多作品过于形式感,反而不是件好事,当然也要所突破才能更好的完善,这只是个人理解,所以UI的思路需要更贴近产品的思维,才能更好的走下去,如果你没有那也就只是做做图的吧,所以你是你看到这,是否对转型做UI有一定的衡量标准了。

ICON的设计:

用简单图形的方式表达字的意思,让人明白易懂,就像店铺的标示导航一样,起到识别作用,根据不同尺寸存取不同大小,具体可以去看规范。

界面设计:

根据原型图,搭配色彩,合理分配布局,主和次,用户习惯的操作等一系列操作,交互软件最好熟悉,很多设计师都是看着交互原形依葫芦画瓢,交互稿什么样视觉稿就什么样,没经过任何思考,只能被称之“美工”。

H5设计:

是指活动推广图,吸粉的重要途径之一

手绘基础:

必修项目,很多配图可以通过自己的手绘去实现,使其更加统一,更加有趣。

 

 综合上述所说,UI设计更偏向于产品,而电商设计师更偏向于运营这块,思考方式会有点区别,但是并不阻碍你转型,在你的设计基础上,加以学习,如交互,用户心理等,通过长时间的积累,也能成为一名出色的UI设计,短时间的培训只是让你明白一些基础的规范和制作一些图标,意义真的不大,多去阅读好的文章和学习别人作品,多去想想为什么这样做,写到这相信大家对转型做UI有了一定的了解,希望能给到大家帮助,谢谢大家。

 

 

 

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 设计师转化!电商设计如何进化成UI设计师

1
分享到:更多 ()