初进UI领域——如何快速融入公司工作流程

新公司入职篇（我将带头冲锋）

当你刚入职一家新公司，新公司所谓的就是从0-1开始定位自己的产品、后续开发产品，以及最终使用产品，帮助公司产品完成一个由无到有的上线过程；

进入新公司，你将会有一个完整的工作流程体系：产品—UI设计师—开发（多数公司把这个团队归属于开发部门）

而身为UI设计师的你也需要做一些准备：

熟悉产品

一个产品的诞生都是依赖于最初产品的定位和分析。刚入职的你，你可能会觉得产品分析只是产品经理的事情，你只是一个做后期的，只要把UI设计图做完美就行，但事实证明，如果UI设计师没有对产品有足够的认识，后续做图会十分吃力，会对产品产生陌生感。所以前期产品分析你会和产品经理一起去做，你会发现时不时的会有需求会，需求会就是大家一起讨论产品，最后从会议里讨论出结果。虽然你没有很大的把握去敲定最后的会议结果，但是有你的参与，也会让他们保留下实质性的意见，也能让你更熟悉产品的概念

原型图输出

产品定位做好了，你的产品经理这边会开始着手于原型图的输出。原型图的制作可能很多新手会说就是简单的排版，但其实身经百战的UI设计师就知道，原型图它是有一定的操作逻辑的，一个界面的内容里面都会有跳转的，比如你点击了某个按钮，它是会跳转到另外一个界面，所以产品前期的交互思维都是在原型图上定义的，原型图有错误，后面的流程也会受到影响。当然，有时产品经理也会叫你一起参与原型图制作的，就比如内容的一个版块如何去摆放，所以你也要时刻准备着。

制作UI设计图

界面尺寸规范

每个公司制作UI图都会有一个机型规范的，比如IOS和Android两种机型，现在大多数公司以IOS端为准的，但是也有少数公司以Android端的界面为准，设计UI设计图之前可以询问一下产品经理，公司机型的规范是以哪个为准；现在大多数公司流行于制作iPhone6/7/8（375*667pt）、IPhoneX/XS/11pro（375*812pt）、Android手机（360*640pt）尺寸的界面。

定义产品品牌色

当到了制作UI设计图的环节时，也是你的本职工作。从最初的制作开始来说，你需要定义一个主题色，主题色就是产品的品牌色，这要从你的产品来定义，你做的是怎样一款产品，那么它定义的属性颜色就是什么，就比如金融类产品，我们一想到的就是蓝色，母婴类产品一想到的就是粉色。颜色跟其他事物一样，使用需要恰到好处；一般来说UI配色最多使用三种基色是最好的，这样你将获得更好的效果，颜色使用多了，就越难保持色彩平衡的。配色我们可以参考十二色环图的配色原则。

外边距

在设计过程中，我们常用的外边距有32px、30px、24px、20px等。一般是4的倍数，边距数值大小可以根据页面内容紧凑度来决定，页面内容简洁的可以留大一些，内容密集的可以留小一些。

规范制图、保持统一

制作UI设计图的时候，往往会有相同的模块出现，就比如二级页面导航栏里往往会有一个标题和一个箭头，这个标题的字号需要在你制作每个二级页面的时候保持统一，返回箭头也是一样，需要保持它的尺寸大小。所以在制作相同模块的时候可以记录一下它们的尺寸规范，也可以设定一个组件，方便快捷使用。

交给开发工程师的UI设计稿

开发部门都是有一个完整的工作流程：产品经理—UI设计师—开发；你的UI设计图是按照产品经理提供的原型图制作的，所以UI设计图必须和原型图保持一致，，因为开发工程师也是通过原型图的交互说明进行开发的。如果开发工程师正在编程中的时候，发现原型图和UI设计图不一致的时候，那么前面的编程也会受到很大的影响，甚至导致开发工程师返工。

当然在UI设计过程中，开发工程师这边也会给你一些必要的规范：

1.按钮规范

像一些UI设计师在设计UI图中的过程中，按钮就是随便建立一个矩形输入文字，但这其实是新手的做法。在按钮给到开发工程师那边编程时，开发工程师那边需要设置一个padding值；padding值是什么，在按钮当中，通俗的理解Padding就是文字与按钮之间的间距。

错误padding按钮示例中padding值不相同，在实际工作中，这样会使自己设计的按钮与开发实际还原的按钮差距很大，从而视觉上就会有很大的变化，为什么说错误示例的规范实现不了，因为对于开发工程师而言，Padding通常都是统一且固定的，只会根据按钮文字长度进行相应的调整，我举的错误例子，其实在开发工程师面前这类设计是不能够被共用，而且对开发工程师项目会变得越来越不能维护，所以按钮设计应该更规划。

那么对于如何保持统一，真的需要去实现两个文字按钮长度和四个字的一样怎么办：

假设两个字的按钮文字字号是24px，它一边的padding是20px；那么适配一个4个字的按钮长度就是：24px*4个字+左右两边的padding值（20*2）=136px，所以4个字的按钮宽度就可以设置为136px。