电商UI养成-小白UI要懂的必要知识

又到了年度跳槽高峰期，一部分人开始跳槽，一部分人开始转行。我身边就有很多人从各行各业陆续转到ui这行来。或多或少都知道ui做些啥，但苦于没有实践过，不知道ui的工作流程。所以，今天讲一讲，UI设计师的工作流程。

很多人对于设计，其实大多是停留在淘宝美工阶段的。当然，ui设计在有些时候也是需要做一些类似淘宝美工的事情，所以，我在第一次写课件的时候说，我理解的ui更像是美工的升级旗舰版设计师。其实，ui设计师在日常工作中，要做的事情还挺多的。

举几个例子，

1.手机端，pc端界面设计，标注尺寸。

2.手机端设计需要切图给开发。

3.启动图标，引导图标，说明图标，错误提示图标，各种杂七杂八的图标设计。

4.启动页设计。

5.需要对接的各平台的推广图片，自己平台的促销图片，活动页面，等等一大堆各种尺寸，横屏竖屏的一些图片。

6.展会海报，易拉宝等等一些少量平面

7.可能还需要懂一些产品的知识，人手不够的时候需要画个原型图，交互稿之类的。

UI设计师需要会很多，才能独当一面。中国现阶段对于设计人员的要求也是一专多职，可能大公司会分的细一些，只需要会其中的几项。所以，让自己的专业技能丰富起来，才能继续在混迹在设计圈里。

明白ui要做啥之后，接下来讲如何和各部门配合工作。

讲一讲我经历过的一些配合吧。可能不同公司有各种各样的配合模式，就和都是夫妻也有各种各样的相处模式啪啪方式，找到适合自己的最重要啦。

一种是产品初创，啥啥都没有，一切都是崭新的，可能连所有人的脑子都是崭新的，所有人呈现出一副欣欣然天真烂漫美好的憧憬未来的激情中。这时候基本上除了老板是真老板，其他人都得想象自己是假老板，假产品，假运营，着眼于以同公司同呼吸共命运的最高眼光来思考工作。

废话不多说，低头干正事。

第一步立项。

产品带着设计，开发（前端，程序，后台，测试）和老板一起沟通下，产品经理把要做的产品详细的用交互原型展示出来。包括产品的定位，主打的卖点，产品性质和各种功能模块，跳转逻辑都演示一下。让配合的各部门都先心里对要做的事情心里有数。

然后评估一下完成时间，画个像样的甘特图，各部门协调配合，好说好商量。如果你遇到的是这样的团队，你就嫁给他吧。很多团队设计师连产品都不了解，产品经理在所谓的“核心成员”讨论后直接扔给你一个demo，告诉你，画吧.....

第二步，干活啦！

讨论完了干嘛？ 产品是不是给了你原型图，然后去自己的电脑上，新建个文件夹 ，在项目设计之初，要养成一个归档整理的习惯，不然后期项目做多了，找起来就像大海捞针了。

里面的文件夹我一般是这么归类的

你们可以找到最适合自己的归类方法，把各个文件夹都明确命名。总之就是不要把做的这些文件，找的那些素材，都乱七八糟的堆在一起，养成个爱归档的好习惯吧。交接的时候，上下游的同事看到你这么清晰的文件，也会在心里默默给你点赞的啦。

文件都建好了，打开或者开始干活吧。

如果你是用sketch做，可以用375*667的尺寸。这个尺寸最重要的好处就是方便开发的小伙伴，可以直接使用里面的数值，不用再做换算。

拿iPhone自带的这个通话界面举个例子，下图是一个参考线的模板，设置的参考线距离一般都是固定的，左右的参考线可以根据自身的项目自己做决定。12px(24px）是我看一个作者是BAT_LCK写的一篇文章里说，他通过国内国外的APP做了对比，12px(24px）不宽不窄最合适。

如果你是用PS做，我建议是做成750*1334的。主要是PS 不是矢量软件，做小了放大就糊了。750的尺寸就是375的一倍，截图的数字太小，如果看不清就自行换算一下。

主打安卓平台的产品

如果想一稿适配ios，那就新建720×1280  分辨率72，像素/英寸。

如果单独设计安卓MD新规范的，那就新建1080×1920  分辨率72，像素/英寸。

APP 的设计尺寸，除了整个屏幕的尺寸，和状态栏的尺寸是固定的尺寸，其他的尺寸都可以根据你自身产品决定。

（啥是状态栏？

这个就是状态栏）

第三步 活干完了要标注和切图

先说标注，推荐一个插件

看图应该就都明白了吧。这5项可以用于静态标注。导出规范用于导出HTML网页标注。

网页标注使用起来就更为方便，标注出来的效果图如下。

工程师可以根据不同需要选择不同的分辨率

没有mac电脑的在标注的时候 ，要注意标注的一些内容，

1.文字需要提供文字大小，颜色。

2.顶部标题栏的背景色值，透明度

3.一些分割线的颜色色值

4.内容显示区域的背景色，投影的颜色等

5.图标的大小，间距等

下面举得例子里是大概要标注的内容，没有全部标注。

标注完成，切图。

我看网上有好多关于讲切图的文章，里面有讲原理的，有讲切图软件的。都讲的很详细了。我就不多说了。如果还是不知道怎么切，就用软件切一次，在手动切一张试试看，尺寸能不能对的上。这样对照一次，就应该明白要怎么切图了。

sketch的界面图标切图  选中@2x和@3x导出（界面为375px宽时）。PS的界面图标切图

另外的一些特殊尺寸，启动图标尺寸，启动页尺寸。可以和开发沟通，他们会给你适合他们开发的尺寸。

以下提供一些默认尺寸给你们。

IOS启动图标：1024x1024 一般方形无圆角。然后使用IconTemplate自动切图一套图标给程序员就行了

IOS引导页：引导页需要单独设计多套（640x1136   750x1334    1242x2208 )

Android启动图标：1024x1024 安卓对图标没有要求，一般是方形无圆角。

Android引导页：同样需要设计多套（480x800   720x1280   1080x1920 )

这些都弄完之后，要记得走查。看最终实现的效果等。把自己做的东西要自己对他负责起来，做完有时间多总结，总结设计技法，沟通过程等等吧。

还有一种就是已经有了一定的规模，可能你去的是一个成熟的APP 公司，（这里讲电商公司，我目前的经历都是电商公司）运营型的电商公司，APP 的产品迭代已经比较缓慢，如果有大的改动会出现在一些页面的改版，一般不会修改交互逻辑。在这种公司的UI 主要的工作职能除了偶尔做一些产品的迭代工作，更多的工作重心会放在APP的运营，配合运营人员做活动页面，促销banner，等等一些根据自身需要做的一些广告图片。这种岗位的UI更倾向于美工的角色。这种角色研究深了又可以细分出一个小的分类。根据不同的类目，图片也有不同的风格，各种公司老板喜欢的风格也不尽相同，多思考，多动手。希望你们都能找到一个喜欢的工作。