电商设计师如何进化成ui设计师「电商和ui设计师哪个好」

今天给大家普及一下电商设计师如何进化成ui设计师「电商和ui设计师哪个好」相关知识，最近很多在问电商设计师如何进化成ui设计师「电商和ui设计师哪个好」，希望能帮助到您。

作者：三宅宇一生

地址：http://www.zcool.com.cn/article/ZNDA2NDI0.html

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

这个其实要从我自己说起，我做过电商也做过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有了一定的了解，希望能给到大家帮助，谢谢大家。

给大家推荐一个非常厉害的做科普的微信号，用一张图的形式讲专业的财经知识，简单易懂零门槛就能看懂，没事多跟着他们学一些理财知识和经济常识吧。你总要和钱打交道，多学点傍身技能是没错的。

凤凰财经王牌栏目

长按识别二维码关注

越努力，越幸运。

这里是庞门正道。