UI设计师在项目各阶段该做些什么，才能体现自己的价值？

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

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

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

首先梳理了一个简化版的中小型公司项目流程与角色分工表（表格注明：一般中小型公司是没有交互设计师与用研的，交互设计的活儿都是交给产品经理f ! * 4 a来做，所以交D p 8 } , t #互3 } B A设计角色我把它归为产品经理；视觉设计会在后面重点强调所以b ^ E ! j T r U简化说明；开发V y M 2 Z测试这一块与我讲解的内容关联不大所以也给` y : M 5 e e简化说明了，但是在开发测试阶段会有更重要的任务让我们设计师去做，后面我会详细讲解）。

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

产品立项+交互M Q S E i G设计阶段

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

1. 查看迭代的2 * { w B I @产品文档，实时了解产品信息

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

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

2. 主动协5 ( r ; : %助产品完成UE的“部分内容”

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

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

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

表格示例：

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

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

目的：作为视觉规范/界面视觉的参考，( M b T m ) Q让自己的设计更具有说服力。

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

重点：可以形成一u E 8 g M u套属于自己的竞品分析文档，以后可以套用到其他项目中，^ _ U ] ; J x我个人的设计竞品分析文档是从4个层面/3种表现形式来进行分析的。4个层面为：表现层/框架层/结构层/范围层；3种表现形式e J A % L h为：分析列表；思维导图；图文结合。

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

表现层+分析列N , D ) r表形式：

结构层+思维导图形式：

范围层+图文结合形式：

视觉设计阶段

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

第一步：根据产品文档与设计竞品分析文档确定4 m r u 1 3视觉风格，根据视觉风格做出视觉概念稿（建议3版），确定好视觉概念稿后主视觉设计师针P } m &对主要功能界面设计风格定位稿。（设计风格定位稿必须要结合竞品分析文档来做，让自己V D ] K y S的每一块设计区域都q O W Q 8有据可循）

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

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

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

示例：

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

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

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

第四步：规范设计流程

根据每个项目不同I S U . ./每个公司不同设计流程都有些不同变化，规* D 范设计流程包含这三块：设计组交付流程；产品交付流程；前端W I V t g T f t o交付流程。

目的：直接减少了因时间有限导致的设计误? N – w差及衍生的研发返工，为项目的高质量交付奠s : k 5 T : [定了基础。

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

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

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

开发V f _ h t z p测试阶段

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

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

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

2. 重点：总结输k N r 5 b } 2 P f出设计文档（定稿设计规范/定稿竞品分析文档）

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

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

定稿竞品分析文档（设计类）第一版：把项目中所有的竞品分析文档归类1 , L & ] ; k I，以及因时间问题a g Y P U c /某f . # 4 I { _些板块未做的竞品分析加入迭代，综合输出最终档。

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

上线阶段

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

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

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

欢迎关注作者微信公众号：「黑狮力」