gui设计（UI设计师在项目各阶段中）

讲解对象：处于中小型公司项目的UI设计师（目前现状：相比起大厂的设计师来言缺乏流程和规范，也不懂系统的工作方法，容易陷入无人带+无人指导+无标准流程的尴尬境地，不知道如何在项目中体现出自己更大的价值，设计也没有自己的一套可支撑的体系，在项目实施过程中永远处于被动方）

注明：此次只分享一些大的方向，并不会具体讲解哪一块如何去实行，在一些重要的部分会稍微提一下，因为涉及的内容太多所以只能以后分块面来分享给大家。

OK，废话不多说，进入正题：

首先梳理了一个简化版的中小型公司项目流程与角色分工表（表格注明：一般中小型公司是没有交互设计师与用研的，交互设计的活儿都是交给产品经理来做，所以交互设计角色我把它归为产品经理；视觉设计会在后面重点强调所以简化说明；开发测试这一块与我讲解的内容关联不大所以也给简化说明了，但是在开发测试阶段会有更重要的任务让我们设计师去做，后面我会详细讲解）。

从上图中可以看出UI设计在项目中主要就是进行视觉设计这一块，但真的是这样吗？其实并不是，一位出色的UI设计师在项目的各个阶段都应该体现出自己的价值，特别是对于中小型公司，公司想要的是如何生存下去，就更需要团队里的每一个人在产品中创造更多的价值，而不是像流水线工人一样做完自己的事就什么都不管了，这样的团队是活不下去的，正因为这样，这也是我们设计师证明自己价值的一个机会，那么我们在项目各阶段该做些什么呢？

产品立项+交互设计阶段

因为主要讲解中小型公司，所以我把产品立项与交互设计放在一个阶段来讲，虽然这一阶段没有任何视觉可视化设计，但要体现设计师的价值这一阶段就是重要前提，那么我们怎么做呢？

1. 查看迭代的产品文档，实时了解产品信息

（一般中小型公司的产品立项已经成立，直接开始进入交互设计阶段）

目的：设计前提就是了解产品，这一点是最基本的。延展：有助于后面协助UE“部分内容”的分析。重点：着重了解这三大块：市场调研与客户需求分析；需求文档；产品特性概览及概要描述。

2. 主动协助产品完成UE的“部分内容”

“部分内容”包含：市场分析/用户画像/痛点/竞品分析/使用场景（因为中小型公司的项目都比较赶，有些产品经理做UE这块内容的时候可能没考虑太多细节，有些内容没有去做，所以这时就可以协助产品主动去完成这些分析文档）

目的：有利于做视觉分析时提供更好的思路与决策，减少走弯路，减少不必要的沟通成本。

延展：对产品信息进行文字提炼，做一个有利于视觉团队理解的表格文档，方便做视觉稿时能直观的看到产品分析，也为了后期有UI新成员加入时更快的熟悉产品提供必要的文档。（表格没必要做的多好，简单直观才是最重要，后期再根据视觉风格统一优化）

表格示例：

重点：协助UE内容重点不在于帮助产品经理更细化的分析产品，重点是在此过程中能更好的拓展自己的知识面，提升自我的分析能力，为后期的视觉稿提供更好的理论支撑，以及对自己的岗位转型也具有很大帮助。

3. 输出关于设计的竞品分析文档（协助完成UE内容后）

目的：作为视觉规范/界面视觉的参考，让自己的设计更具有说服力。

延展：如果有足够多的时间可以细化更多内容，进行对比分析，以便于后面做视觉稿时能快速进行布局决策。

重点：可以形成一套属于自己的竞品分析文档，以后可以套用到其他项目中，我个人的设计竞品分析文档是从4个层面/3种表现形式来进行分析的。4个层面为：表现层/框架层/结构层/范围层；3种表现形式为：分析列表；思维导图；图文结合。

给大家举三个不同形式的例子：

表现层+分析列表形式：

结构层+思维导图形式：

范围层+图文结合形式：

视觉设计阶段

这一阶段是设计师最熟悉的，也是很多设计师所痛心的，流程混乱会导致你做很多无用功，没有合理规范以至于进度提不上来，设计出的界面却说不出任何依据，也许我的一个设计思路能解决你们的难题。

第一步：根据产品文档与设计竞品分析文档确定视觉风格，根据视觉风格做出视觉概念稿（建议3版），确定好视觉概念稿后主视觉设计师针对主要功能界面设计风格定位稿。（设计风格定位稿必须要结合竞品分析文档来做，让自己的每一块设计区域都有据可循）

第二步：当出了定位稿后，就可以制定设计的周期节点（注：也可以制定周期后再确定风格定位稿，把定位稿归位节点内）

第三步：制定文件命名规范；确定设计规范（迭代）；建立组件库（迭代）

文件命名规范：为了提高内部交接效率，尽量使文档的命名与层级统一

示例：

确定设计规范：设计规范并不是一步就能做好的，项目前做基本的设计规范，项目中进行迭代，项目结束后再进行总结输出最终档。

那么我们现在要做的就是项目前的基本设计规范，前期建议这些规范是必须要的：统一设计环境/字体/行高/界面栅格/颜色/icon制作规范/输出规范/最小基础间距/按钮。（规范没必要一次性就想做的非常完美，在设计中都是要不断迭代的）

建立组件库：组件库是通过对功能及视觉表达中元素的拆解、归纳、重组；并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，将这些组件整理在一起，便形成组件库。简单来说就是可复用/节省产出时间/视觉统一，加快我们的设计步伐，让我们把更多时间用于专注于用户体验和对产品的创新。（注：组件库也是需要不断的迭代的，在项目完成后可以把组件库归位设计规范文档里面）

第四步：规范设计流程

根据每个项目不同/每个公司不同设计流程都有些不同变化，规范设计流程包含这三块：设计组交付流程；产品交付流程；前端交付流程。

目的：直接减少了因时间有限导致的设计误差及衍生的研发返工，为项目的高质量交付奠定了基础。

第五步：视觉稿设计+视觉稿交付

视觉稿设计：设计视觉稿是为了让自己的视觉稿有据可行，需要结合产品文档/竞品分析文档/设计理论这三大块来作为依据参考进行设计。

视觉稿交付：与开发商讨出最佳交付方案，统一输出规范。

开发测试阶段

这一阶段属于设计的一个空档期，很多设计师在这一阶段都开始了休闲时光，只是做一些查缺补漏的工作，其实这一阶段对于设计师来言是一个体现自我价值的重要阶段，那么我们应该怎么做呢？

1. 与前端工程师经常沟通，查查看写出的界面是否有偏差

因为有些情况下程序写出来的界面与你所做的界面有偏差，如果不经常沟通，那么他在做同样组件时也会犯同样错误，有问题及时纠正，免得来来回回耽误工作进度

2. 重点：总结输出设计文档（定稿设计规范/定稿竞品分析文档）

定稿设计规范第一版：包含设计过程中所有迭代的规范内容以及组件库

作用：对于设计师而言是展现业务能力的体现，对于整个团队而言是提升生产效率的重要工具。

定稿竞品分析文档（设计类）第一版：把项目中所有的竞品分析文档归类，以及因时间问题某些板块未做的竞品分析加入迭代，综合输出最终档。

作用：简单来说就是更快为设计提供具有可行性/有依据性的视觉稿。

上线阶段

作为最激动人心的阶段，为了避免上线后不必要的错误以及产品后期的迭代考虑，还是有许多工作需要做的。

交付物走查(排查交付给开发的文件，查看是否有图标/界面/提示信息等的遗漏)验收工作(界面是否与高保真原型图保持一致，图片是否正常显示，打开界面速度是否正常，动效是否达到预期等)后续延伸(因项目时间原因UI样式/交互/情感化设计还没做到更细致，可提上日程留至于下期改版)

以上是我总结的项目工作里设计师所要做的主要内容，里面的板块内容都没有去细化，例如：竞品分析/设计规范/设计组的设计流程（不同级别项目有不同的设计流程）等等，以后有机会再给大家分享，如果喜欢可以点个关注哦！

本文源自：黑狮力