一款需要用户滑动数千次才找到他们想要的东西的应用，或者一个导航混乱的网站，都给人们带来糟糕的用户体验。当然，我们不再需要使用命令行界面来与软件交互。但这并不意味着每个现代数字产品都是用户体验设计的顶点。
一个网站或应用程序，无论功能多么强大，都需要让用户能够理解。如果你想要创造一个具有良好用户体验的数字产品，你就不能跳过深入的研究、深入学习了解你的用户，以及图形界面设计的过程。这些过程需要设计师来管理。在本文，我们将了解创建相关体验的人：用户体验（UX）和用户界面（UI）设计师。此外，我们还将找出他们每个人在用户体验设计过程中的角色。
01
界面设计，该从什么开始？
**那么，什么是好的用户体验？** 著名的用户体验设计师Steve Krug给它下了一个简洁的定义： “不要让我思考！” 这句话成为了他那本关于web开发中用户体验的书的标题。这意味着最好的用户体验就是最直观的用户体验。
用户体验设计趋势是不断变化的，但主要原则一直不变。信息架构师Peter Morville将良好的用户体验定义为 有用的、可用的、可取的、可查找的、可访问的、可信的和有价值的。他用一个用户体验蜂巢模型来说明这一点。
用户体验蜂巢图片来源：Semantic Studios
当你开始构建一个新的数字产品或计划重新设计一个网站时，首先你必须要理解你的用户，填满这个蜂巢中的所有孔洞。然后，你需要一个规划。用户体验设计本身就是规划未来产品的过程，而UI则是把这些想法付诸到用户界面中。用户体验设计和用户界面设计经常被混淆，或者被认为是同一件事。但事实并非如此，让我们把它们弄清楚。
什么是用户体验设计——产品的为什么
用户体验设计是创造产品的过程，为用户提供有意义的和目的明确的体验。它需要对所有与客户相关的信息进行研究和分析，组织内容，并进行分类，让用户能够快速、轻松地找到他们想要的东西。用户体验设计的目标是创造一个让用户感到舒适的数字产品。这包括产品的功能和用户操作它的方式：内容架构层次、清晰的导航和视觉元素的功能。 但最重要的是，所有这些都有助于解决用户的问题。 另外，设计必须符合技术和商业规范。
什么是UI设计——产品的怎么做
UI设计是制作软件或计算机化设备界面的过程，重点在于外观和风格。因为用户体验设计师的创造力，UI设计让用户目标实现的过程具有具有美感。所以，我们可以将UI视为用户体验中不可或缺的一部分。但用户界面设计主要是以用户体验设计的“how”为导向。
Peter Morville说过：“为什么与怎么做是不可分割的。” 所以我们有两个有着界限的过程，但它们都有同一个目标： 以最舒适和愉快的方式将内容呈现给用户。
在就业市场上，我们经常看到“UX/UI设计师”的招聘广告。公司更喜欢雇佣那些能够完成产品整体设计的专业人士，使产品有用且在视觉上能够吸引用户。出现这种情况的部分原因是公司想要更少的成本就能完成所有东西，还有部分原因是一些人不明白用户体验设计设计包含哪些阶段和工作任务。事实上，UI设计师用户体验设计的一个阶段。我们将探讨这一过程以及这两种设计师的工作内容和可交付成果。
用户体验与用户界面设计师
02
用户体验设计的工作内容和可交付的成果
用户体验设计的整个过程旨在消除信息负荷来创造最佳的用户体验。它由两部分组成：1）定义一个用户问题2）找到解决问题的方法和途径
第一部分是用户体验设计师的职责，理解用户和他们的需求，思考如何引导用户实现特定的目标。 用户体验设计师是用户的向导。
第二部分主要由UI设计师负责，用视觉元素铺设实现目标道路。在下图，你可以看到UX/UI设计流程的基本阶段顺序、参与者和可交付成果。然而，根据项目的不同，设计流程可能会有所不同。
UX/UI设计流程
在设计网页、pc端或移动端产品时，一个以用户体验为导向的团队必须始终牢记用户为什么需要这个或那个元素。用户是这个故事的主角，所以好的用户体验设计必须以用户为中心，并且富有情感：用户体验设计的第一阶段有很大一部分致力于探索用户。
用户研究与分析
主要角色： 业务分析员、用户体验专家
在这个阶段，每个人的目标都是理解用户和他们的痛点。这时，用户体验设计师会与业务分析员一起进行市场调研、竞品分析、进行用户和利益相关者访谈、记录/观察用户，并定义用户旅程阶段。
_主要的交付成果：_ 用户体验研究、竞品分析、用户旅程图、用户画像如果需要的话，用户体验设计师是可以与业务分析员（BA）合作的人。当业务分析师从利益相关者和潜在用户那里收集需求并将其写入软件文档时，用户体验专家会将其转化为产品的信息架构。在许多情况下，业务分析员的角色由用户体验专家承担，或者他们合作完成共同的可交付成果。用户体验设计师从竞品分析开始，定义未来产品的一般特性。
竞品分析。 在这个阶段用户体验设计师会分析最好的和最差的竞品案例，以及在类似产品中使用的常见模式。在此基础上，团队可以将竞品应用或网站的最佳功能整合到自己的应用中，优化这些功能，发现用户在使用同类产品时遇到的问题，并着眼于解决这些问题。下一阶段则是用户体验研究，旨在更深入地分析用户。
用户体验研究 旨在通过各种定性和定量的方法从用户那里收集信息，包括用户访谈、背景调查、日志研究、用户画像、卡片分类法和可用性测试。用户体验研究有助于团队理解用户以及改善他们的体验。
最多人用和最重要的用户体验方法之一是卡片分类法。这些信息、项目或功能的名称被写在卡片上，然后将一组卡片交给用户让他们进行分类。卡片分类的结果将在之后的网站地图或应用地图中使用。这是一种快速有效的研究方法，因为它有助于理解目标受众的常规逻辑，然后对信息和功能进行分类。
基于用户体验研究的数据，设计师可以构建信息架构。接下来我们将探讨用户画像和用户旅程。
用户画像 是一份说明与产品交互的人的原型模型，它代表的是一个用户群体。通常，这个人的名字是假的，但个人资料中的信息是基于用户访谈的一般化信息。它包含以下基本信息:
- 人口统计学信息
- 目标和需求
- 痛点
- 行为
- 引语（这通常来自真实用户）
用户画像示例
图片来源：Keep it usable
用户旅程图或用户流程图 是一个强大的用户体验工具，它能够直观地说明用户使用产品的整体步骤的用户体验。它由用户体验设计师绘制，描述了新用户或老用户在开始使用产品之前和使用过程中的一系列操作。用户旅程可以用文本和箭头或故事板的形式来说明。下面你可以看到我们为澳大利亚共享汽车公司Niftie创建的用户流程图。
Niftie的用户流程
这些交付成果塑造了用户体验，因为它们定义了用户的目标、需求和行为，所以团队可以创造一个具有令人满意的功能的产品。在这个阶段收集的数据是用户体验设计下一阶段的基础。
信息架构
_主要角色：_ 用户体验设计师
根据用户体验研究的结果，设计师可以创建数字产品的完整结构。信息架构是用户体验的一切，它的主要目标是以用户能够理解的方式对内容进行分类，让用户能够轻松地找到他们需要的内容。根据卡片分类的结果，用户体验设计师可以构建网站或应用的内容。信息分类有以下几种模式：
- 按重要等级——从最重要的到最不重要的
- 按顺序——一步一步的，所有项目都相互依存
- 按矩阵——这是一种内容组织方式，允许用户自己决定如何安排内容
- 按字母顺序
- 按关系——根据项目的角色与之间的关系
_主要交付成果：_ 网站地图、思维导图、导航、标签系统
产品结构的基本架构以网站地图或思维导图的形式来表示。
网站地图。 它以层次结构的方式表示页面与内容之间的关系。!Image网站地图图片来源：UX.Stackexchange
根据数字产品不同对象之间的关系，设计师可以利用 思维导图 来构建信息架构。下面你可以看到一个思维导图的例子，是我们在帮助Cornerstone Information Systems构建企业差旅管理解决方案时创建的。!ImageCornerstone information systems网站和iOS应用
准备好架构之后，设计师还可以标记类别并创建界面导航。
标签系统。 标签是显示在界面上的大类别的简称。
导航 是一个引导用户浏览内容的产品界面元素。它由网站地图定义，由主导航、服务导航、页脚或总体导航组成。
最后，用户体验设计师有了个一个基本的内容结构作为下一阶段的基础。有了这个结构，用户体验设计师可以开发产品的框架。
原型设计
用户体验设计的这一部分在开发中扮演着重要的角色，因为可交付成果要经过用户的测试和展示给利益相关者。设计师创建线框图、模型和原型。这些东西代表页面布局，虽然看起来相似，但执行不同的功能：它们代表了用户体验/用户界面设计不同开发阶段的产品。
_主要交付成果：_ 线框图、模型、可交互原型
线框图 是创建设计布局的开始。它可以说是一个提纲，显示了主要的内容和界面的一般特征。它包含灰色方框、行、按钮和示例文本。线框图的目的是在忽略图形细节的情况下勾勒出界面的工作方式，让团队能够尽早评估用户交互的基本情况。此外，线框图的简单性让设计师能够重新设计布局某些功能。线框图可以是静态的，也可以是交互式的。静态线框图可以直接绘制在纸上，而交互式线框图就可以让用户点击并测试功能。
_关键角色：_ 用户体验专家模型 更详细地展示了设计和产品界面的外观。它是线框图和原型的中间点，有颜色、标志、图片，通常还有文字，但不是真实的内容。模型的目的是展示产品的外观，它可以是低保真和高保真的（低保真和高保真原型的区别在于界面的细节程度）、静态的或可交互的、单页的或多页的。!ImageFoursquare的高保真模型图片来源：Namika Hamasaki
_关键角色：_ UI专家
可交互原型 是产品的最终模型。与模型不同，原型具有所有的视觉和功能元素及内容，并且可以像最终产品一样运作，例如，你可以点击按钮，进行输入等等。因此，设计师、利益相关者和用户可以测试它，模拟真实的交互。
线框图、模型和原型可以使用开源或付费的原型工具来创建。以下是其中一些：
- Sketch：一个基于Mac端的矢量设计/原型工具
- InVision Studio：一个免费的动画原型制作工具，兼容所有类型的设备
- Figma：一个在线UI设计、原型设计和测试工具
- MockFlow：一个用户体验设计平台，用户体验设计师可以创建线框图、风格指南和网站地图
- Moqups：一个在线UI原型设计、线框图、模型和图表创建工具。
- Lucidchart：一个图表和线框图创建工具
- Balsamiq：一个线框图和模型创建工具，有web应用和pc端应用
- Wireframe：一个在线线框图和模型创建工具
对于那些喜欢纸质线框图和模型的人来说，还有纸质模板。
原型设计是用户体验设计的一个阶段，由UI设计师和用户体验设计师共同完成。有些人说创建线框图和模型是用户体验设计师的职责，而UI设计师负责制作原型。但UI设计师还是负责着界面的视觉部分工作，并在原型中实现它。让我们看看这个阶段包括什么内容。
_关键角色：_ 用户体验专家
UI设计系统
_关键角色：_ UI设计师、前端开发团队
当最终布局确定好后，设计师就可以进行图形设计了。线框图和模型是数字产品的骨架，而图形则是数字产品的血肉。在这个阶段，UI设计师开始设计数字产品的图形界面，需要绘制图标、选择字体和调色板，以及设定UI指南。
_可交付成果：_ 情绪板、UI风格指南
在设计师真正开始设计界面之前，他/她需要一些灵感。 情绪板 是一个很好的工具，它可以让设计师找到视觉设计的灵感。它由不同的图片组成，激发设计师确定最终的调色板和界面的整体风格。!Image巴黎地铁票箱界面的情绪板这是一个例子。如果你去过巴黎，你可能就会知道买地铁票不是一件愉快的事。用户体验设计师Greg Jeanneau创建了一个巴黎地铁票箱界面来简化用户的生活。Greg使用巴黎的景色和RATP（巴黎公共交通运营商）的标志作为调色板的灵感，并将巴黎地铁站的字体作为用户界面元素。!Image巴黎地铁票箱的用户界面图片来源：Greg Jeanneau所有关于视觉设计的决策都记录在UI风格指南中。
UI风格指南 是一个集合了你的品牌视觉风格的所有元素的文档。这份文档的主要目的是保持设计的一致性，方便设计人员和前端开发人员的工作。风格指南规范了网格系统、布局、调色板、字体、图标、logo、图像，并考虑了设计的可访问性。!ImageAirbnb UI 工具包图片来源：Derek Bradley当所有这些可交付成果都准备好时，前端开发团队可以在图形界面的原型中实现结果，然后对其进行测试。在开发人员实现设计功能的同时，UI设计师会跟进这个过程。
可用性测试
_关键角色：_ 用户体验设计师、前端开发团队、UI设计师
第一个原型做好后，团队就可以测试其可用性。可用性测试不同于QA测试或A/B测试，它的主要目标是从产品的真实用户那里获得反馈，了解界面的直观性以及用户是否可以通过该产品实现他们的目标。
在这一阶段，用户体验设计师负责记录并分析测试结果。可用性测试有几种不同的类型：
- 比较性可用性测试 用于比较不同产品，例如竞品或类似于A/B测试，即比较一个设计中的两个版本并从中选出最佳的一个。
- 探索性可用性测试 通常在产品发布前进行。它的重点是发现产品设计中的盲点和漏洞，这些盲点和漏洞以前没有被发现，但被用户观察到了。这种测试有助于在产品上市前对其进行改进。
- 可用性评估 是在产品发布和所有必要的改进之后进行的。这时，产品会再次进行测试，确保改进能够提供良好直观的用户体验。
在用户测试之后，设计师可以在UI或UX设计中加入必要的改进，然后将产品设计分配给开发人员团队进行实现。但是UI和用户体验设计师的工作并没有在产品发布后就停止。他们会一直关注产品。
支持和进一步开发
一个产品发布后用户解决它很好用并不意味着不再需要UI和用户体验设计师。他们仍然会继续致用户体验/UI设计工作，根据既定的设计系统和UI风格指南不断更新产品。
进一步的测试和评估。 新的内容和功能通常需要对界面进行修改，从而改善关键性能指标。这意味着团队会重新进行可用性评估，建议对某些界面的进行额外的设计，通过A/B测试来定选出最佳版本。
改进和新功能。 用户体验设计师必须了解用户需要哪些新功能，并决定如何将它们加入到现有的设计中。UI设计师根据新的需求修改设计，并跟进A/B或多变量测试。
重新设计。 如果产品需要重新设计，团队会从头开始重复整个过程：进行新的用户体验调研，创建新的网站地图和线框图，同时UI设计师制作模型和原型等等。虽然我们所描述的阶段和交付成果是最常见的，但是创建用户体验/UI的方法是不同的。例如，我们最近讨论了Google Ventures的Design Sprint方法，这是一个有时间限制的过程，包括做出初始假设，创建原型，以及与真实用户进行测试。有时，为了缩短设计周期，会省略各种交付成果。
03
结语：一个人可以兼任用户体验/UI设计师吗？
UI和用户体验是不可分割的。但这是否意味着你可以一个兼任用户体验/UI的设计师，一个能够从头到尾完成整个用户体验设计过程的人？用户体验和UI设计是一个整体的一部分，将整个过程分配给一个人似乎是合理的。但问题是，用户体验设计需要更综合的技能和更多的经验，而不仅仅是平面设计。虽然用户体验设计师可能能够创建原型并与UI团队合作， 但UI设计师必须具备进行彻底的用户行为和市场调研的技能，具有用户同理心，才能创建一个具有直观界面的产品，让用户喜欢并使用。
ABOUT US
参考文章：
作者：AltexSoft Inc
译者：太上老菌
为尊重版权和译者
转载请联系我们