UI设计的整个工作流程

做UI设计大概接近三年，今天跟大家分享一下UI设计的整个工作流程是怎样的。

从图中可以看出一个完美的APP的呈现需要三大部分的综合才能完成，并且需要每个部门的每个岗位相互协同合作配合才能完成。

一般一个正常运营的互联网公司会有几个部门组成：1.产品部门（产品经理，产品专员）2.设计部门（UI设计师，前端工程师）3.研发部门（构架工程师，程序开发师）

4.测试部门（测试专员）5.市场部门（销售，品牌等）6.运营部门（客服，维护等）。但是一般比较小的互联网公司并没有分的怎么清楚，可能并没有专门的测试部门和运营维护部门，当APP出现问题的时候，前端工程师和程序开发师也是能够去测试和运维的。

每个部门的工作职责也是不一样的。

产品部门：负责产品调研，产品方案策划，原型图设计，与技术开发对接，以及后续与运营部门对接。如果没有专门的运营部门就是直接跟技术开发对接的。

设计部门：主要负责产品视觉设计，交互设计，前端布局。像目前我所在的公司就是把前端划分到设计部门的，因为虽然说前端的工作和程序开发一样，都是写代码，但是前端的代码实现和后台的程序开发所运用的技术是不一样的，实现的功能和效果也是不一样的，所以把前端和设计部门放到一起是比较合理的。

研发部门：负责产品构架设计，数据库设计，前后台编码设计，后期运维，网络安全等。

测试部门：测试程序中的bug等（可能还会有其它的相关工作，例如：测试用例，测试报告等，因目前我所在公司并没有单独的测试部门，所以对此不做过多介绍）。

市场部门：促销活动的策划及组织，品牌规划和品牌形象建设，市场广告和推广活动等。

运营部门：SEO/SEM优化推广，平台活动策划，广告投放。客户关系管理，数据分析等。

设计部门的岗位划分一般有UI设计师，交互设计师，前端工程师，但是小型互联网公司不会划分的怎么完善，像目前我所在公司就会把交互设计师的工作交给产品部门来完成。

图上也展示了UI设计师参与和需要完成的相关流程。

一.需求梳理，分析。

在产品开发前，会进行一个市场定位和市场需求分析，因此在前期的产品需求分析会议中，UI设计师和技术工程师都会参与。在此UI设计师可以清晰的了解用户定位，产品定位，为后期素材收集和风格做好准备。因此产品经理会根据这些资料做出一张思维导图或者功能列表。

二.关键界面原型图。

在产品初步的功能需求梳理清楚之后，产品经理会选出有关键性和代表性的做细化线框图，在此要确定关键界面里的UI元素和布局，以及全局的布局排版风格。

三.关键界面视觉设计。

在此环节UI设计师会做关键界面的整体视觉设计，用不同颜色的搭配和不同风格，UI元素的运用，最终确定产品的视觉视觉风格。

四.全部界面原型图

产品经理完成交互和流程的全部界面原型图（为交互功能添加释义和说明）设计并确认。

五.全部界面视觉设计

UI设计师做出全部界面的视觉设计图，并确认。

六.界面标注，切图。

在确认全部界面视觉稿以后，UI设计师要对每个页面进行标注，标注图打包给前端工程师。这里切图标注软件我在之前的文章里有写过，不清楚的可以去看看。

到这里UI的工作流程才算是完成，但是想现实的项目中，很多环节是一个不断修改和优化，也包括整个流程进入到开发以后，也是随时需要UI设计师的协同合作的。

所以UI设计的工作不仅仅是画图，前面也包括用户定位，线框绘制，流程梳理等，后面包括前端布局，很多环节都需要UI设计师参与进来。只有多方面多角度了解项目，了解各岗位的工作流程，才能完成出一个优质的产品，一个符号用户需求的产品。