很多年前，马力老师在一次给某软件公司的培训中，开篇就使用《巴黎圣母院》中的男主人公「钟楼怪人」来比喻 UI 设计以及 UI 设计师的工作。

当时主要传达的信息在于，一款产品功能的好，不能通过优秀的界面设计以及良好的用户体验去表达出来，那么很容易被用户或购买者从表层忽略掉。随着互联网行业的发展，整体行业中对于 UI 设计的认知和主要的工作范围，也在不断地发生变化，不仅仅在于视觉层面，而会包含更多的内核在其中。

UI设计师的工作内容

根据个人的经验和体会总结，UI 设计师的工作内容，由表及里会逐渐深入到五个层面上：

• 界面视觉效果的维护

• 界面视觉效果的输出

• 解决问题和信息整合

• 重点研究用户需求

• 推动互联网产品的发展

这五个方面，从 UI 设计师的能力发展轨迹来看，是递进发展逐步深入的，但是在实际的工作过程中，实际上又是交叉并且平行的，只是随着 UI 设计师的能力逐步提升，才会有更加明确的认识。

接下来要分述一下这五个方面是什么，以及主要的工作内容有哪些。

 1. 界面视觉效果的维护 

这部分的工作内容，一般情况下是新入行的 UI 设计师投入到具体工作中要做的事情，而已经有一定经验的 UI 设计师也同样脱离不开相关的工作内容。主要是针对于已有的产品界面设计需求的维护，比如说以下的几个情景：现有产品的设计，修改界面中的文字样式；对于新增功能，增加图标设计，或对于原有图标的修改；运营相关的工作，输出 Banner 图片或者海报设计；产品中输出的内容需要增加图片或者配图等。这只是一部分例子，可以看到，一般情况下视觉设计师所做的类似工作是需要应用设计流程和设计理论的，但是相对于整体产品来说，会比较细微。

而大多数情况下，看起来貌似是修修补补，或者是针对于运营需求进行添加相关的设计方案。但这其实是 UI 设计师日常需要完成的重要工作，也会是设计师需要配合整体产品团队的工作内容。在行业发展早期，UI 设计师被冠以「美工」这一所有从业者都不太喜欢的名号，主要是因为当时的团队中分工不够明确，认为 UI 设计师仅能完成以上工作内容有很大的关系。当然了，再次申明这部分工作同样重要，越是细节的内容，越能体现出来设计师的个人能力。

 2. 界面视觉效果的输出 

这是一部分非常完整的，需要 UI 设计师主导并着重完成的工作。一般情况下，当 UI 设计师拿到了具体的需求后，从一开始的需求分析着手，然后再到界面的视觉设计方案输出，敲定方案后会完成界面的视觉设计细化，以及相关元素输出等工作，最终将完整的设计方案输出给相关的开发人员，界面实现后参与测试，最终推动产品的上线。

这其中还包括了针对于用户的研究、竞品分析、市场分析、流行趋势分析和情态图版制作等等，这是一个复杂而又耗费脑力的过程。之后还要经过漫长的思考，不断推翻自己的方案，才能够最终得到一次满意的设计输出。设计输出有可能是几个关键界面，也有可能只是一张描述出来设计思路的效果图。拿着这些物料，设计师要快速跟团队成员进行沟通，看看是否能够确定下来具体的方向。如果方向确定，那么接下来就是细化效果图，输出图标设计、动效设计和一些状态展示等等，以及批量输出所有的界面设计。在与产品经理和开发人员共同确定了界面设计的所有输出后，接下来还要给后续的开发人员相关的支持。有些团队会输出切图和坐标标注 ( Layout )，有些团队配备专门的前端角色（ Builder ），因此只要输出 PSD 或 Sketch 源文件就可以了。

蓝湖、Sketch、以及 PS 的各种插件，这些工具的出现，正在缩短 UI 设计师与开发人员的对接时间，提高整体工作的效率。在开发人员完成了所有的工作内容以后，就进入了一个非常痛苦的阶段。UI 设计师要对着开发人员实现的界面效果，参与到测试中去，以精确到像素的标准，来核查开发实现对于设计的还原度。这个事情非常考验开发人员对于 UI 设计的理解程度和 UI 设计师的沟通技巧，如果双方都不给力，那么就会出现反复修改的情况。当完成以上的工作后， UI 设计师的工作内容基本上可以说是画上一个句号。接下来就可以收集用户的反馈，以及迎接下次需求所带来的各种挑战。

 3. 解决问题和信息整合 

比较纯粹的 UI 设计师，实际上从设计思维上，更多的体现出这两件事：抓住问题的本质，去解决问题；信息的整合以及输出。前者实际上是设计的本质，通过解决问题，来满足用户的某些需求。我们常常会提到用户体验方面的经典段子：「用户想要的是一匹更快的马，而福特却给了他们一辆汽车」，实际上在说的就是抓住现象背后本质，然后给出一个彻底的解决方案。设计的过程，就是要不断地去参透到需求、痛点或用户所反馈问题的本质，然后给出一个从设计层面出发的解决方案。后者，是 UI 设计师所完成工作的重要组成部分。在《Pixel Perfect Precision 3》 这本书中给出一个很典型的例子，就是要把整块的信息展示成为分块的信息，这就是视觉设计要做的最基础、最直接、最容易阐述清楚工作指的案例。而设计师在完成这两项工作的过程中，还要具备的是「可用性」、「用户体验」、「前端开发」、「后端实现」以及对于业务流程方面深入的研究和学习等。只有综合了这些理论知识，并且能够灵活运用到实践中，才能够更清晰地达成目标。UI 设计师要获得这方面的提升，就要不断地思考，将自身投入到反复的设计实践中去，在此基础之上，还要不断地进行理论知识的学习，通过日积月累的叠加经验，才能够逐渐形成完整的设计洞察能力。

4. 重点研究用户需求 

UI 设计师，要时刻像产品经理一样，具备一颗同理心，站在用户的角度来看待界面设计，通过用户的视角来思考问题：用户能够接受的视觉风格应该是什么样的范围？用户对于什么样的图形载体会更加接受？用户所能够理解的视觉引导应该是什么样子？用户会在什么样的情景下使用产品？用户的界面操作诉求是怎么样的？有什么样的痛点？如何通过界面视觉设计提升用户的满意度?视觉设计怎样能够教会用户使用产品？视觉设计应该给用户带来什么样的情感共鸣？…….UI 设计师也要时刻的去思考用户，只有深入的了解到用户的情况，才能够输出最优秀的设计。因此，就要求 UI 设计师也要接触用户研究的工作，在需求分析的时候更深入的去探究用户的需求，以及多用产品，把自身也变成用户。如果一名 UI 设计师能够站在用户的立场上去看待产品，那么在整体的职业生涯中，以及能力范围内会超出图形设计专家的身份，而具备交互设计师和产品经理的气质。

5. 推动互联网产品的发展 

在具备了以上的素质后，UI 设计师更能做到的，就是推动产品的发展，而不仅仅是为产品修饰一张完美的面具。UI 设计师此时能够参与到功能的定义、产品运营策略、产品未来的发展和规划等工作，整体的输出情况更像是一名互联网产品人，会协助产品团队中的各个角色一同推动产品的正向发展。在一个产品团队中，每一名角色都明确目标是什么，以及都能够为产品的发展出谋划策，那么会非常有利于产品的快速前进，让产品在市场上更加具备竞争力。

UI设计师的工作流程 

一般情况下 UI 设计师拿到的需求是什么样的？其实这会直接决定了你的工作流程是怎样的。需求方可能有几种角色，而且需求的详细程度也会与个人有直接的关系。（提需求的人是怎样理解 UI 设计的？他是否认为 UI 设计就是做图的呢？）基本的流程如下图，接下来要详细说一下每一个流程包含的工作都有哪些。

 1. 理解需求 

在拿到需求后，首先要做的工作就是要去理解这份需求。这时候，我们拿到的需求有可能非常详细，是交互设计师加工过的具体的需求文档，其中包括完整的交互设计原型。这个时候，我们重点去理解交互设计的输出，查看产品使用的每一个流程以及每一个界面的具体细节，其中包括功能、操作、反馈以及信息呈现逻辑等。

而大多数团队中，可能就没有交互设计师这样的角色，而是产品经理或者老板直接下达的需求，需求的精细程度也会存在非常大的区别，这个时候其实就会比较复杂。设计师此时需要站在用户的角度，化身为以用户为中心的原点，去理解需求以及将需求进行拆分。

针对于需求的每一个细节，需要设计师深入进行思考，对于缺失的部分，或者存在不合理的部分，需要回过头来和提出需求的人详细沟通，共同讨论以及解决问题。在这里推荐一个针对于需求梳理的思考工具——「用户旅程」。通过「用户旅程」这一方法，可以梳理出用户使用产品的情景、操作以及具体的心理状态，便于设计师站在用户的视角去理解和分析需求。

 2. 明确设计目标 

设计目标，直接会联系到产品目标、运营目标以及用户目标等。

在了解到具体的需求细节以后，要明确本次设计在整个项目中的定位是什么，通过设计需要带来的收益以及用户对于设计的诉求有多大。另外在设计过程中，还要明确的是设计目标最核心的点在哪里，这样的话就可以针对设计内容的输出重点方向有所了解。也利于我们做一些权衡：有时好看的设计是需要牺牲一些信息密度、信息传达性等；设计页面类型是什么，是偏展示性的，还是偏功能性的，展示性的设计空间会大些，功能性的要考虑开发实现要做的组件化一些；另外，针对于设计的页面具体有哪些，优先级何如，以及任务的拆解，设计目标都会有所影响。

 3. 制定计划 

包括时间计划和执行计划。设计师最重要的一个能力就是针对于任务的评估，将一个完整链条的任务拆解成为小段，然后再比较每一段任务的优先级，高优先级的先完成，低优先级的后完成，因此也直接衍生出时间计划的编排。

另外，还要在每一个时间节点和里程碑，确认对接沟通的角色，以及要输出的物料有哪些。这项工作就要有经验的设计师进行决策，或者团队中有经验的设计师带领大家一起来完成。时间节点和里程碑是工作进度的外在表现，具体可以使用的工具其实蛮多，但是最基本的是整体团队对于设计进度要达成共识，确定在那个时间点上，大家能够有什么样的预期——看到的内容和听到的结论等。

 4. 进入分析阶段

此时对于需求已经了解过，明确自己工作的意义所在以及制定了相应的计划，那么就要进入到详细的分析阶段。分析阶段会包含三个主要的部分：市场分析、竞品分析和用户需求分析。

市场分析会决定了你的设计要在哪方面与对手进行抗衡，配合产品在市场中的重要定位，设计需要做哪些内容。而竞品分析是一种取长补短的思路，通过学习对手产品的优点，规避它的缺点，让自己的设计变得更完美。用户需求分析，这个不得不说，是以用户为中心的设计，那就还是要深入发掘用户需求背后的东西。比如说，经典段子「用户想要一批更快的马」，实际上背后的诉求是用户想要的是「速度」。

 5. 定义视觉风格

此时，做完了分析，那么就可以来定义视觉风格，包括设计元素的大方向。

色彩范围、质感、细节、突出信息、图标设计方案、插画设计思路以及动效等，这些都可以在定义视觉风格的阶段进行思考，并有所结论。整体性是非常必要的，以及和其他产品的差异化，也同样是视觉风格会涵盖其中的。一般情况下，我们在做具体的视觉风格定义时，是通过一些关键界面或者关键操作来决定的。有的团队或者项目的某些阶段是可以不用定义风格，因为有规范可以继承或者延续，这个要就具体的项目情况而定。定义视觉风格是通过开会、汇报最终敲定下来的，基本上是整体团队群策群力的事情，而不应该由设计师自己完成。

 6. 批量输出界面 

在确定了设计方向以后，那么就可以批量输出具体的界面。

以及补充设计规范或者UI KIT，针对于一些设计公司，还要补充设计说明等。

 7. 开发支持

接下来就要进入开发支持的阶段，输出切图和 Layout ，并且此时要跟开发同事保持非常频繁的沟通，在他们完成设计方案后，要给出对应的走查，找到开发成果对于设计的还原程度达不到100%的位置。

此时沟通真的很重要，我们团队之前合作的很多开发，都是那种输出了切图和 Layout 根本不看的角色，然后实现出来的样子和我们的设计千差万别，基本上让我们的设计师就地石化。设计师与开发人员的沟通也是需要长期磨合才能越来越好的。总之设计师勤于沟通，对于自己的好处会非常多。

 8. 收集反馈 

产品进入测试阶段，以及到后面的上线，设计师就要抽出一部分精力关注一下自己的设计在市场上或者用户那里的反馈。如果设计的问题很大，那么就要随时准备好，有可能要修改设计。如果反馈不错，那么要想到自己接下来的提高在哪里，以及产品下一个版本的迭代应该做到哪些设计来弥补本次的不足。以上就是设计师在拿到需求后要思考以及接下来要做的事情。

UI 设计师在工作中的关键能力

在日常的工作中，有一些技能对于 UI 设计师来说是非常关键的。具备这些能力，才能够更顺滑地推进日常工作的执行，并且在输入和输出方面，提升效率。

 1. 用户需求及调研能力

这里首先说的就是一个大家没太提到的一个能力：用户需求调研能力。

为了避免与公司的核心业务脱节，现在的设计师所承担的工作内容越来贴近业务，越来越需要设计师去亲自了解需求、挖掘需求。通过深入的调研工作指导设计师进行设计工作，这样更加科学和高效。调研、收集需求的方法有很多，我们这里可以把它们大致分成两类：定量调研和定性调研。两种调研方式也适用于不同的调研对象：

• 定性调研

调研文化背景和生活习惯、人们的经验和习惯、探索人们行为背后的原因。
常见的定性调研方法有：用户访谈、实地观察等。

• 定量调研

举个例子，当我们研究厕所海报对人们行为的影响的时候，独立变量就是设计师设计的海报，有依赖的变量就是洗手的人数，其他变量就是年龄、性别甚至还包括宗教信仰等等。

通常，我们在现实中面临的问题都会比较复杂，这两类方法会在调研的不同阶段结合使用，比如下面的这个案例就是定量调研和定性调研的方法结合使用来挖掘这个购物行为背后的需求。

 2. 挖掘需求的能力

一般而言，设计师需要挖掘的需求来自商业和用户。挖掘对应的需求可以帮助设计师更好的平衡设计的商业价值和用户体验。

• 挖掘商业需求

挖掘商业上的需求，主要是了解我们的目标用户，他们可能为我们的设计买单、资源的优劣、商业愿景和产品愿景等。

• 挖掘用户需求

挖掘用户的需求主要是要了解我们的用户是谁，以及他们的痛点、需求是什么，已有的解决方案和期待的解决方案是什么等等。常见的调研方式有问卷调查、用户访谈等等。设计师可以根据自己的调研的对象选择合适的方式，同时也要注意规避一些错误的提问，比如避免设置一些引导性过强的提问、使用一些情感色彩比较浓重的话语等。

 3. 用户分析能力

用户分析是我们通过对用户行为的观察、研究来指导设计。为了保证我们的设计对用户来说是有价值的，我们需要对我们的目标用户进行用户分析。这里介绍用户分析的几个常用的方法：

• 用户旅程地图（User Journey map）

⽤户旅程地图（User Journey Map）是和⽤户画像（persona）相辅相成的⼯具，persona代表的是具体的族群，⽽体验地图是分析这个族群为了实现某个⽬标⽽经历的过程的可视化呈现⼯具。它⽤于了解和解决客户需求和痛点，在这个过程中⽤户可能会使⽤多个设备和渠道（例如⽹站，⼿机app，社交媒体，电话， 线下客服等等）为搭地铁去工作的孕妇制作的用户旅程图：

• 用户体验故事，又叫故事板（UX Story&Story Board）

故事板最初是源⾃于电影⾏业，早在20世纪20年代的时候，迪⼠尼⼯作室内就常常⽤故事板来勾勒故事草图。产品的使⽤场景，⽤户的交互流程，也可以借由⼀系列连续的插画故事化地呈现出来。⽤户体验故事（UX story）是从⽤户的⻆度对事件进⾏说明的⽅式， 故事中的事件展示了⽤户中个体验的转变。

• 用户建模（User Modeling）

⽤户建模是⼀种帮助我们「基于研究」中收集的数据归纳整合出「若⼲个」有相似⾏为、⽬标、动机和需求的「半虚构⽤户」的⽅法，从⽽更好的帮助我们理解⽬标⽤户。用户建模的常用方法：

• Persona（⽤户画像） 

• Empathy Map（同理⼼地图） 

• Affinity Diagram（亲和图） 

• User Profile canvas（价值主张画布）

总结 

UI 设计师、交互设计师并不是一个轻松的工作，不是简简单单能画几个 icon，能出一些界面，就算是优秀的设计师。真正重要的，是设计背后的思考，能解决真切的业务问题。哪怕是一个按钮上的文案，也要从业务和用户体验场景去思考和完善，而非一个作图的机器。真正的水平不错的、实战经验丰富的、保持进步和学习的设计师，一直都是稀缺的。作为在互联网从业的设计师，应该多充电，多打磨自己，让自己的有更强的竞争力。

本文内容为转载 仅供个人学习使用