用户体验工程

什么是 UX 工程师？

设计系统

UXE 做什么？

UXE 职位的资格

面试流程

相关的 UXE 文章和招聘信息

结论

几个月前，我被 LogMeIn 正式录用为“用户体验工程师”（UXE），兴奋不已。我本来有机会构建设计系统！但兴奋过后，我很快意识到 UXE 这个职位的定义有多么模糊。我试着在谷歌上搜索这个职位，却一无所获。

虽然像谷歌和 Etsy 这样的一些公司开始招聘用户体验工程师 (UXE)，但不同公司之间的职位差异很大。
因此，经过对该领域的深入研究，我相信我最终确定了用户体验工程师 (UXE) 的职责范围、成功所需的技能以及职责。

请注意，此职位不仅基于我已完成的所有研究，还结合了我的个人经验。如果您正在考虑 UXE 职位，请与您的潜在雇主确认该职位的要求。

什么是 UX 工程师？

UX 工程师 (UXE) 是跨职能设计团队中的前端工程师，帮助促进设计和工程之间的协作。

UXE 拥有前端工程师的技能，并精通 UX 设计原则。他们的主要领域侧重于应用程序的设计/UI 组件层，而非前端和后端开发之间的中间件层。

UXE 在流程中扮演什么角色？

UXE 位于设计和前端工程之间。

他们的技能与前端工程师有何不同？

由于 UXE 的核心是前端工程师，因此他们之间应该有重叠，但 UXE 采用设计技能，并且更专注于 UI 而不是中间件层。

设计系统

一般来说，UXE 致力于构建设计系统，所以让我们花点时间来定义什么是设计系统。

设计系统是一套指南和资源，用于在多个旗舰产品或应用程序中传达身份认同感。它由三部分组成：设计语言、组件库和样式指南。

设计语言

创建系统所需的视觉设计资源和品牌指南。以下是一些您可能会看到的品牌指南示例。

• 调色板
• 无障碍指南
• 排版比例
• 动画库

组件库

用于将设计语言变为现实的编码组件。这些组件使用 HTML、CSS 和 JavaScript 构建。一些最流行的设计系统使用以下 JavaScript 库和框架，但也可能包含原生（vanilla JS）Web 组件：

• 反应
• Vue.js
• 角度
• 聚合物

风格指南

该网站记录并封装了设计语言和组件库。IBM Carbon是一个很棒的风格指南，我推荐你去看看。

UXE 做什么？

这是一个不同公司之间存在很大差异的领域，但 UXE 的几个主要工作职责如下：

• 将设计语言转变为使用流行的 JavaScript 框架或库编码的活生生的组件库。
• 使用组件库将低保真设计原型转化为高保真原型。
• 努力改善设计团队和工程团队之间的协作和沟通。
• 在整个组织内推广设计系统的价值和采用。
• 为设计系统构建样式指南网站。

UXE 职位的资格

UXE 的资格因公司而异，但主要包括前端开发技能和少量用户体验知识。

用户体验设计技能

以下是 UXE 可能需要了解的 UX 设计知识的一些示例：

• 能够观察组件并理解其组合方式。为什么文本要左对齐（文本应该根据目标受众的阅读方向进行对齐。由于世界上大多数人都是从左到右阅读的，所以当文本块超过三行时，最好将文本左对齐。）
• 为什么每段不应超过 50-70 个字符（行宽越长，用户的眼睛就越疲劳。）
• 为什么将深色文本放在浅色背景上比反之更好（这种组合的对比度更加鲜明）。
• 为什么永远不要在没有背景覆盖、阴影或降低图像对比度或不透明度的情况下将文本放置在背景图像上（文本，无论是黑白还是彩色，都会融入图像的不同色调中；如果我们在图像上放置白色文本，它将在图像的较暗区域中清晰地脱颖而出，并逐渐消失在图像较亮部分的背景中。）

UI设计技能

您可能还需要熟悉设计团队使用的一些工具。这些工具可能包括以下内容。

• 草图
• Adobe Creative Suite
• Figma

通常，如果您有使用其中一种工具的经验，那么一般技能就可以转移到其他工具上；Sketch 和 Figma 是最容易学习的工具。

如果您希望获得 UXE 职位，我强烈推荐Sarah Drasner 撰写的《重构 UI》一书和《开发人员设计》课程。

前端开发技能

由于 UXE 的主要知识是前端开发，因此您应该熟悉基本的工程原理和前端开发技能。

在申请 UXE 职位之前，您可能需要掌握以下几项技能：

• HTML、CSS 和 JavaScript：不要把这些“基础知识”视为理所当然。学习有效且正确地运用这些技能并不难，但却极其重要。
• 构建工具：您需要有使用Webpack或Gulp的经验，因为这些组件的构建过程很重要。
• CSS 预处理器和工具：Sass或Less在 UI 框架和组件库中很常见，因此你应该能够很好地使用它们。此外，我建议学习一些命名架构，例如块元素修饰符(BEM) 或CSS 的可扩展模块化架构(SMACSS)。在使用上述工具时，它们会非常有用。
• 可访问性：您应该了解如何使用语义标记，以确保您的组件库符合W3C。
• 算法*：我给这项技能打了星号，因为正如我们将在本文的面试部分看到的那样，你需要对算法、算法的运行时间和优化技术有一定的了解。话虽如此，与开发团队中的前端工程师不同，你在日常工作中不太可能会用到那么多算法。
• 解决问题：您必须能够在组件库的构建中运用良好的解决问题的技能。
• 设计模式：了解一些设计模式（即构建组件的方式）可能会有所帮助。Addy Osmani 出版了一本关于设计模式的很棒的书，我强烈推荐。
• 响应式设计：您正在构建响应式 Web 组件，这些组件必须能够跨各种分辨率运行。因此，您必须了解响应式设计的原理。
• 测试和调试：熟悉测试组件。Jest是一种流行且易于学习的 JavaScript 测试技术。它通常与 Enzyme 一起使用来测试React 组件。Sentry.io是另一个学习调试和捕获组件错误的优秀工具。
• 版本控制：你必须熟练使用版本控制。Git是最流行的版本控制工具之一，所以一定要好好提升你的技能！
• 包和依赖管理器：您将致力于创建一个您的工程团队可以在其工作流程中利用的包，因此您应该了解npm和yarn。

软技能

作为用户体验工程师 (UXE)，你将与设计系统的利益相关者（设计团队、工程团队和产品管理团队）进行沟通。因此，你必须具备良好的沟通能力。 

以下是成为一名高效 UXE 所需的其他一些技能：

• 书面沟通：您将编写组件和样式指南文档
• 积极主动：作为一名用户体验工程师 (UXE)，你可能对日常工作或目标拥有更大的自主权。因此，你必须积极主动地寻找工作，并能够确定工作的优先顺序。
• 同理心：我们必须对用户有同理心。归根结底，他们是我们构建这些卓越应用程序的原因。

面试流程

由于UXE是一个新兴领域，面试流程目前还没有明确的定义。由于之前在LogMeIn工作，所以我没有参加过UXE的面试，所以过渡起来比较顺利。

要了解面试前应该掌握的技能，请参阅前面的部分：UXE 职位的资格。
一般来说，面试流程与前端工程师的面试流程大致相同，因此请提前学习算法和 JavaScript。

相关的 UXE 文章和招聘信息

有几家公司正在招聘用户体验工程师 (UXE)。以下是一些 UXE 的招聘信息，或许能帮助您更深入地了解该职位。

• Google 招聘
• 我的 Google UX 工程师面试
• 谁是 UX 工程师？
• 2019 年成为 UX 工程师所需的 20 项技能
• 十大用户体验工程师作品集

结论

用户体验工程给了我一份礼物；它让我能够将我对设计的热爱与开发的技术层面结合起来。我喜欢拥有与设计师和工程师有效沟通的技能。 

如果您认为 UXE 适合您，我鼓励您尝试一下；我从来没有在一个职位上感到如此快乐。

如果您找不到大量的 UXE 工作，请不要灰心；该领域仍处于起步阶段，并将继续发展。

我很高兴看到这条职业道路将带给我什么。