许多年前,马力教师在一次给某软件公司的培训中,开篇就运用《巴黎圣母院》中的男主人公「钟楼怪人」来比方 UI 规划以及 UI 规划师的作业。

【入门】干货|UI设计师的工作内容与工作流程

当时首要传达的信息在于,一款产品功用的好,不能经过优异的界面规划以及良好的用户体会去表达出来,那么很简单被用户或购买者从表层疏忽掉。

随着互联网职业的开展,全体职业中关于 UI 规划的认知和首要的作业规模,也在不断地发生变化,不仅仅在于视觉层面,而会包括更多的内核在其间。

【入门】干货|UI设计师的工作内容与工作流程

UI规划师的作业内容

======================

依据个人的阅历和领会总结,UI 规划师的作业内容,由表及里会逐渐深化到五个层面上:

  • 界面视觉效果的保护

  • 界面视觉效果的输出

  • 解决问题和信息整合

  • 要点研讨用户需求

  • 推动互联网产品的开展

这五个方面,从 UI 规划师的才能开展轨迹来看,是递进开展逐渐深化的,可是在实践的作业过程中,实践上又是交叉并且平行的,仅仅随着 UI 规划师的才能逐渐进步,才会有愈加明晰的知道。

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

1. 界面视觉效果的保护

这部分的作业内容,一般状况下是新入行的 UI 规划师投入到详细作业中要做的作业,而现已有一定阅历的 UI 规划师也相同脱离不开相关的作业内容。

首要是针关于已有的产品界面规划需求的保护,比如说以下的几个情形:

现有产品的规划,修正界面中的文字样式;

关于新增功用,增加图标规划,或关于原有图标的修正;

运营相关的作业,输出 Banner 图片或许海报规划;

产品中输出的内容需求增加图片或许配图等。

这仅仅一部分比如,能够看到,一般状况下视觉规划师所做的类似作业是需求应用规划流程和规划理论的,可是相关于全体产品来说,会比较细微。

【入门】干货|UI设计师的工作内容与工作流程

而大多数状况下,看起来貌似是修修补补,或许是针关于运营需求进行增加相关的规划方案。

但这其实是 UI 规划师日常需求完结的重要作业,也会是规划师需求合作全体产品团队的作业内容。

在职业开展前期,UI 规划师被冠以「美工」这一一切从业者都不太喜欢的名号,首要是由于当时的团队中分工不行明晰,以为 UI 规划师仅能完结以上作业内容有很大的关系。

当然了,再次申明这部分作业相同重要,越是细节的内容,越能体现出来规划师的个人才能。

2. 界面视觉效果的输出

这是一部分十分完好的,需求 UI 规划师主导并侧重完结的作业。

一般状况下,当 UI 规划师拿到了详细的需求后,从一开始的需求剖析着手,然后再到界面的视觉规划方案输出,敲定方案后会完结界面的视觉规划细化,以及相关元素输出等作业,终究将完好的规划方案输出给相关的开发人员,界面完结后参加测验,终究推动产品的上线。

【入门】干货|UI设计师的工作内容与工作流程

这其间还包括了针关于用户的研讨、竞品剖析、市场剖析、盛行趋势剖析和神态图版制造等等,这是一个杂乱而又耗费脑力的过程。之后还要经过绵长的考虑,不断推翻自己的方案,才能够终究得到一次满足的规划输出。

规划输出有或许是几个要害界面,也有或许仅仅一张描述出来规划思路的效果图。拿着这些物料,规划师要快速跟团队成员进行交流,看看是否能够承认下来详细的方向。

假如方向承认,那么接下来便是细化效果图,输出图标规划、动效规划和一些状况展现等等,以及批量输出一切的界面规划。

在与产品经理和开发人员一起承认了界面规划的一切输出后,接下来还要给后续的开发人员相关的支撑。有些团队会输出切图和坐标标示 ( Layout ),有些团队配备专门的前端人物( Builder ),因而只要输出 PSD 或 Sketch 源文件就能够了。

【入门】干货|UI设计师的工作内容与工作流程

蓝湖、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 规划的?他是否以为 UI 规划便是做图的呢?)

基本的流程如下图,接下来要详细说一下每一个流程包括的作业都有哪些。

【入门】干货|UI设计师的工作内容与工作流程

1. 了解需求


在拿到需求后,首要要做的作业便是要去了解这份需求。

这时分,咱们拿到的需求有或许十分详细,是交互规划师加工过的详细的需求文档,其间包括完好的交互规划原型。

这个时分,咱们要点去了解交互规划的输出,检查产品运用的每一个流程以及每一个界面的详细细节,其间包括功用、操作、反应以及信息出现逻辑等。

【入门】干货|UI设计师的工作内容与工作流程

而大多数团队中,或许就没有交互规划师这样的人物,而是产品经理或许老板直接下达的需求,需求的精细程度也会存在十分大的差异,这个时分其实就会比较杂乱。

规划师此刻需求站在用户的视点,化身为以用户为中心的原点,去了解需求以及将需求进行拆分。

【入门】干货|UI设计师的工作内容与工作流程

针关于需求的每一个细节,需求规划师深化进行考虑,关于缺失的部分,或许存在不合理的部分,需求回过头来和提出需求的人详细交流,一起讨论以及解决问题。

在这儿引荐一个针关于需求梳理的考虑东西——「用户旅程」。经过「用户旅程」这一办法,能够梳理出用户运用产品的情形、操作以及详细的心思状况,便于规划师站在用户的视角去了解和剖析需求。

2. 明晰规划方针

规划方针,直接会联系到产品方针、运营方针以及用户方针等。

【入门】干货|UI设计师的工作内容与工作流程

在了解到详细的需求细节今后,要明晰本次规划在整个项目中的定位是什么,经过规划需求带来的收益以及用户关于规划的诉求有多大。

别的在规划过程中,还要明晰的是规划方针最核心的点在哪里,这样的话就能够针对规划内容的输出要点方向有所了解。

也利于咱们做一些权衡:有时美观的规划是需求牺牲一些信息密度、信息传达性等;规划页面类型是什么,是偏展现性的,还是偏功用性的,展现性的规划空间会大些,功用性的要考虑开发完结要做的组件化一些;

别的,针关于规划的页面详细有哪些,优先级何如,以及使命的拆解,规划方针都会有所影响。

3. 拟定方案

包括时刻方案和执行方案

规划师最重要的一个才能便是针关于使命的评价,将一个完好链条的使命拆解成为小段,然后再比较每一段使命的优先级,高优先级的先完结,低优先级的后完结,因而也直接衍生出时刻方案的编排。

【入门】干货|UI设计师的工作内容与工作流程

别的,还要在每一个时刻节点和里程碑,承认对接交流的人物,以及要输出的物料有哪些。这项作业就要有阅历的规划师进行决策,或许团队中有阅历的规划师带领咱们一起来完结。

时刻节点和里程碑是作业进度的外在体现,详细能够运用的东西其实蛮多,可是最基本的是全体团队关于规划进度要达到一致,承认在那个时刻点上,咱们能够有什么样的预期——看到的内容和听到的定论等。

4. 进入剖析阶段

此刻关于需求现已了解过,明晰自己作业的含义所在以及拟定了相应的方案,那么就要进入到详细的剖析阶段。

剖析阶段会包括三个首要的部分:市场剖析、竞品剖析和用户需求剖析。

【入门】干货|UI设计师的工作内容与工作流程

市场剖析会决议了你的规划要在哪方面与对手进行抗衡,合作产品在市场中的重要定位,规划需求做哪些内容。

而竞品剖析是一种取长补短的思路,经过学习对手产品的优点,躲避它的缺陷,让自己的规划变得更完美。

用户需求剖析,这个不得不说,是以用户为中心的规划,那就还是要深化开掘用户需求背面的东西。比如说,经典段子「用户想要一批更快的马」,实践上背面的诉求是用户想要的是「速度」。

5. 界说视觉风格

此刻,做完了剖析,那么就能够来界说视觉风格,包括规划元素的大方向。

【入门】干货|UI设计师的工作内容与工作流程

颜色规模、质感、细节、突出信息、图标规划方案、插画规划思路以及动效等,这些都能够在界说视觉风格的阶段进行考虑,并有所定论。

全体性是十分必要的,以及和其他产品的差异化,也相同是视觉风格会涵盖其间的。一般状况下,咱们在做详细的视觉风格界说时,是经过一些要害界面或许要害操作来决议的。

有的团队或许项目的某些阶段是能够不必界说风格,由于有规范能够继承或许延续,这个要就详细的项目状况而定。

界说视觉风格是经过开会、报告终究敲定下来的,基本上是全体团队齐心协力的作业,而不应该由规划师自己完结。

6. 批量输出界面

在承认了规划方向今后,那么就能够批量输出详细的界面。

【入门】干货|UI设计师的工作内容与工作流程

以及补充规划规范或许UI KIT,针关于一些规划公司,还要补充规划说明等。

7. 开发支撑

接下来就要进入开发支撑的阶段,输出切图和 Layout ,并且此刻要跟开发同事坚持十分频频的交流,在他们完结规划方案后,要给出对应的走查,找到开发成果关于规划的复原程度达不到100%的位置。

【入门】干货|UI设计师的工作内容与工作流程

此刻交流真的很重要,咱们团队之前合作的许多开发,都是那种输出了切图和 Layout 底子不看的人物,然后完结出来的姿态和咱们的规划千差万别,基本上让咱们的规划师就地石化。

规划师与开发人员的交流也是需求长期磨合才能越来越好的。总之规划师勤于交流,关于自己的优点会十分多。

8. 搜集反应

产品进入测验阶段,以及到后边的上线,规划师就要抽出一部分精力重视一下自己的规划在市场上或许用户那里的反应。

假如规划的问题很大,那么就要随时准备好,有或许要修正规划。

假如反应不错,那么要想到自己接下来的进步在哪里,以及产品下一个版别的迭代应该做到哪些规划来补偿本次的缺乏。

以上便是规划师在拿到需求后要考虑以及接下来要做的作业。

【入门】干货|UI设计师的工作内容与工作流程
UI 规划师在作业中的要害才能

在日常的作业中,有一些技术关于 UI 规划师来说是十分要害的。具有这些才能,才能够更顺滑地推动日常作业的执行,并且在输入和输出方面,进步效率。

1. 用户需求及调研才能


这儿首要说的便是一个咱们没太提到的一个才能:用户需求调研才能。

为了避免与公司的核心事务脱节,现在的规划师所承当的作业内容越来靠近事务,越来越需求规划师去亲自了解需求、发掘需求。经过深化的调研作业辅导规划师进行规划作业,这样愈加科学和高效。

调研、搜集需求的办法有许多,咱们这儿能够把它们大致分成两类:定量调研和定性调研。

两种调研办法也适用于不同的调研目标:

  • 定性调研

调研文化背景和生活习气、人们的阅历和习气、探究人们行为背面的原因。

常见的定性调研办法有:用户访谈、实地调查等。

  • 定量调研

举个比如,当咱们研讨厕所海报对人们行为的影响的时分,独立变量便是规划师规划的海报,有依赖的变量便是洗手的人数,其他变量便是年龄、性别甚至还包括宗教信仰等等。

【入门】干货|UI设计师的工作内容与工作流程

通常,咱们在实际中面临的问题都会比较杂乱,这两类办法会在调研的不同阶段结合运用,比如下面的这个案例便是定量调研和定性调研的办法结合运用来发掘这个购物行为背面的需求。

【入门】干货|UI设计师的工作内容与工作流程

2. 发掘需求的才能

一般来说,规划师需求发掘的需求来自商业和用户。

发掘对应的需求能够帮助规划师更好的平衡规划的商业价值和用户体会。

  • 发掘商业需求

发掘商业上的需求,首要是了解咱们的方针用户,他们或许为咱们的规划买单、资源的好坏、商业愿景和产品愿景等。

  • 发掘用户需求

发掘用户的需求首要是要了解咱们的用户是谁,以及他们的痛点、需求是什么,已有的解决方案和等待的解决方案是什么等等。

常见的调研办法有问卷调查、用户访谈等等。

规划师能够依据自己的调研的目标挑选适宜的办法,一起也要注意躲避一些错误的提问,比如避免设置一些引导性过强的提问、运用一些情感颜色比较浓重的言语等。

3. 用户剖析才能

用户剖析是咱们经过对用户行为的调查、研讨来辅导规划。为了保证咱们的规划对用户来说是有价值的,咱们需求对咱们的方针用户进行用户剖析。

这儿介绍用户剖析的几个常用的办法:

  • 用户旅程地图(User Journey map)

⽤户旅程地图(User Journey Map)是和⽤户画像(persona)相得益彰的⼯具,persona代表的是详细的族群,⽽体会地图是剖析这个族群为了完结某个⽬标⽽阅历的过程的可视化出现⼯具。它⽤于了解和解决客户需求和痛点,在这个过程中⽤户或许会使⽤多个设备和渠道(例如⽹站,⼿机app,社交媒体,电话,线下客服等等)

为搭地铁去作业的孕妇制造的用户旅程图:

【入门】干货|UI设计师的工作内容与工作流程

  • 用户体会故事,又叫故事板(UX Story&Story Board)

故事板开始是源⾃于电影⾏业,早在20世纪20年代的时分,迪⼠尼⼯作室内就常常⽤故事板来勾勒故事草图。

产品的使⽤场景,⽤户的交互流程,也能够借由⼀系列接连的插画故事化地出现出来。

⽤户体会故事(UX story)是从⽤户的⻆度对事件进⾏说明的⽅式, 故事中的事件展现了⽤户中个体会的转变。

【入门】干货|UI设计师的工作内容与工作流程

  • 用户建模(User Modeling)

⽤户建模是⼀种帮助咱们「根据研讨」中搜集的数据概括整合出「若⼲个」有相似⾏为、

⽬标、动机和需求的「半虚拟⽤户」的⽅法,从⽽更好的帮助咱们了解⽬标⽤户。

用户建模的常用办法:

  • Persona(⽤户画像)

  • Empathy Map(同理⼼地图)

  • Affinity Diagram(亲和图)

  • User Profile canvas(价值建议画布)

总结

UI 规划师、交互规划师并不是一个轻松的作业,不是简简单单能画几个 icon,能出一些界面,就算是优异的规划师。

真实重要的,是规划背面的考虑,能解决真切的事务问题。哪怕是一个按钮上的文案,也要从事务和用户体会场景去考虑和完善,而非一个作图的机器。

真实的水平不错的、实战阅历丰富的、坚持进步和学习的规划师,一向都是稀缺的。作为在互联网从业的规划师,应该多充电,多打磨自己,让自己的有更强的竞争力。

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