初探 UX工程师 的世界
引言
UX Engineer（UXE）是一个最近我才经常听到的一个岗位名称，因为目前为止国内很少有招聘这个岗位的公司，身边更是没有朋友任职过这一岗位。通过名字来看就是 UX Designer 和 Engineer 的结合，可以说是创意全能型人才。
最近也开始看到国外的公司开始有这个岗位招聘，比如 Google 和 GitLab 都有这一岗位，这是他们的岗位介绍页面 [Google-why Google need ux engineer] [GitLab-UX Engneer]。
Medium上有一篇《What Does a UX Engineer Do, Exactly? A Little Bit of Everything》的文章就介绍了在谷歌从事该岗位的工程师的日常。
那么 UXE 到底是什么？其实这个岗位比较难以描述，因为它需要身兼数职、拥有各种知识背景和专业知识，他像是一个设计师和开发之间的桥梁，要会使用设计语言和编程语言。比如在以下工作场景中咨询 UXE 是最恰当不过的选择了：
- 是否需要在项目开发过程中构建一个支持 Figma 集成的新工具
- 是否需要研究一些新技术来确定可行性
- 是否需要开发一个用于用户测试的功能原型
- 使用新技术和新平台来构建前端的最佳实践
通过以上的例子我们可以大致了解这个岗位需要处理和完成的工作内容。
- 什么是 UX Engineer？
- UX（用户体验）与工程相结合的角色
- 在团队中的位置与职责
- 为什么这个岗位越来越重要？
UX Engineer 的角色与职责
UXE 是一个交流沟通的桥梁，也需要具备创造性的解决问题的能力。
他是介于设计师和开发者之间的角色，所有通常会有两个不同的视角来思考手里的工作。
作为设计师的角色会需要在设计评审中针对设计原型和方案提出建议，并尽可能的去预测可能出现的设计以及体验问题，这个时候就需要设计师的经验来帮助我们，设计师通常需要具备将用户或者客户的模糊需求转化为可行性方案的能力，并且通过与各相关方的讨论以及用户测试去验证可行性方案，最终输出设计给到开发者。
同时作为开发者的角色中我们又要保证代码的整洁清晰、尽量减少技术债务、合理结构，减少开发成本，并且基于目前最合适的软件工程最佳实践来开展开发工作。
就如前面文章提到的那位在谷歌担任这一职位的作者描述的一样，虽然他可能不会向所有人推荐成为 UX Engineer 的角色，但因为具备了更多的相关知识和同理心，更能轻松的和设计师、研发、项目经理合作，因此这个角色能够更好的在团队中发挥效力，并且更重要的是会成为 HR 眼中的独角兽。
在 GitLab 的 UE 岗位描述中我们可以了解不同职级的 UXE 的工作职责，通常包括以下内容：
- 改善产品用户体验和界面
- 开发设计系统组件并完善设计系统
- 在最小团队支持下，持续不断的迭代产品
- 了解并分享最新的 UI/UX 技术、工具和模式
成为 UX Engineer 的学习路径
首先要了解这个岗位的要求之后，我们才可以更好的去学习如何成为一个合格的 UXE。
下面的一段是 GitLab 对 UXE 的岗位要求：
- 精通 HTML、CSS 和 JavaScript 等前端编程语言。
- 具有使用 Vue.js 框架的专业经验。
- 具有深厚的设计系统知识、理解和实践。
- 对视觉设计、交互设计和可用性测试有深入的了解。
- 有使用 Git 和 Yarn 或 NPM 等包管理器的经验。
- 具有编写自动化测试的经验（例如 Jest、Karma、Jasmine、Mocha、AVA、tape）。
对于 senior 的 UXE 的要求还包括： - 需要深入了解产品知识
- 参与设计评审
- 要通过撰写博客、发表演讲等方式提升影响力
- 跨部门合作
- 带领指导团队成员和负责招聘
我们分为几个部分来看首先是设计基础，需要了解学习用户体验设计的基本原则，通常在设计师最早接触 UX 这个岗位时最多推荐的一本书就是经典的《About Face: The Essentials of Interaction Design》，虽然最早是1995年首次出版，但依然是 UX 设计领域中的权威著作之一。里面会介绍一系列的交互设计的基本原则，比如一致性、简洁性、可见性等。这些原则帮助设计师在设计时确保用户能顺利理解并使用界面。
如果你是经验丰富的开发者，那么对于 UX 的学习可能会快很多，这里推荐 tailwind css 的作者发布的一本书 《RefactoringUI》，通过一些例子来快速的提升产品的用户体验。
截图是书中给出的一些例子
针对设计师学习前端开发技能，需要掌握基本的比如 HTML、CSS 和 Javascript ，如果是新手小白非常推荐 w3school 和 codecademy
当了解了设计和开发的基础知识后就可以开始学习设计与代码的结合，可以通过一些开源的设计系统了解一些组件库的构建，这里非常推荐 GitLab 的 Pajamas 设计系统后，因为是开源的你可以通过文档以及代码了解它具体是如何实现的。
我的学习成长之路
先说一下我的背景，我是工业设计专业出身，并没有开发背景，在刚毕业的时候只有一些在开发作品网站的时候有过一些 webflow 还有 framer的使用经历，以上产品其实算不上真正的开发工具，只能是界面化的网页编辑工具，或者是我们通常说的 nocode 产品。
但在使用的过程中对于一些 css 调整以及自适应布局等基础概念有了实际上手操作的机会。
最近的两份工作经验中，一个是让我更熟悉了代码托管工具和 Git 相关的知识，另一个则是让我真正有了贡献开源项目代码的机会。
目前我们团队有一个开源在 GitHub 上的产品，前端是使用 Vue 和 tailwind 写的，因为项目人员有限并且时间紧张的关系，我们只能先解决有没有的问题，关于好不好用以及好不好看的问题只能排在第二优先级，但作为设计师看到自己的设计实现还原度失真还是很难接受，所以我就动了自己上手修改前端代码的想法。
在项目开始的时候我们使用了 element 作为我们的前端组件，原因是它对于大多数前端开发来讲都非常熟悉，而且有非常详尽的文档支持，但设计稿中却使用了 Untitled UI 来作为 design library。这就会一定程度上造成前端与设计稿不一致的问题。这是我遇到的一些困难和挑战。
但好在 tailwind 支持更改主题，在 config 文件中我们可以设定我们的 color、space以及其他的一些属性，好让我们看起来不那么 “element” 。
在这个过程中我将前端在代码中使用的 hex 色值替换为了 config css 中的 color token， 使用类似 text-gray-700 替换之前的 #344054 这样做的好处是，如果我们的客户希望将产品的主题色由蓝色修改为另外的颜色，我们就可以通过 config css中的 一行代码的修改来全局调整。关联代码变更：Csghub replace color design token by youngbeom-shin · Pull Request #702 · OpenCSGs/csghub
这像不像我们在 Figma 中使用 color library，其实这些工程化的东西思路都是大差不差的。
还有一些比如我们有一个页面中有大段文字页面，里面的内容是使用markdown渲染的，但是这里面的 text 还有 font weight 以及 text color 渲染效果都不尽如人意，那我们就可以通过修改 style sheet 目录中的 markdown.css 来优化渲染样式。关联代码变更：Csghub update markdown css by youngbeom-shin · Pull Request #615 · OpenCSGs/csghub
还有如果看到产品页面上元素位置异常，我们也可以直接在GitHub上创建一个修改分支，提交代码修改：#605
当然也可以选择从一些小页面开始将设计稿变成开发好的页面，下面的是一个404页面的代码修改：#539
以上都是一些通过实际项目积累开发经验的例子，在这里也非常感谢团队成员的帮助，一次在我遇到安装部署以及前后端server启动问题时给予的帮助。
借助 AI 开发工具
代码问答
在很多时候 AI 辅助编程也是一个离不开的好帮手，再遇到一些逻辑清楚但不知道如何修改的代码时，我都会将需求讲给 cursor ，让它给我一些代码建议或者直接补全代码。
生成提交信息
Cursor还有一些很方便的功能，比如自动生成 commit message， 在聊天窗口中输入 @ 之后选择 git，选择 commit（Diff of Working State）,然后输入下面图片中的 prompts，Cursor 就会根据当下分支中的代码变更输出合适的 commit message，这是一个非常实用的功能。
改写代码
Cursor有另外一个非常好用的功能就是改写代码，虽然我们在项目中大部分是使用的tailwind css来写的，但是有一些部分老旧页面还是试用 css 写法写的，所以为了快速统一，我会借助 cursor 快速帮我改写，我就需要参照它的改写来选择是否使用新代码替换老代码就可以。
代码评审
同时在我们团队内部也会使用自己开发的 StarShip 来助力我们的研发流程，产品支持代码生成、代码审查和代码问答，我个人最喜欢的功能就是代码评审，它会在代码仓库的合并请求中以 bot 机器人的形式，对修改的代码进行评审，并给出建议。结合 StarShip IDE 可以更好的提高代码质量优化软件开发周期，目前 IDE 插件已经支持了 jetbrains 和 vscode。
在实际接触代码变更的过程中会越来越多的发现可以着手处理的事情，比如在设计之初只考虑了一个pc端、iPad以及移动端的页面宽度，对于更大的屏幕兼容并不是很好，那这时候tailwind的 responsive-design 就可以帮助我们更好设定不同屏幕的宽度下的表现形式。
在tailwind css中还有很多的设定可以让我们的设计发挥出更好的效果，比如我们可以根据主题设定不同的字体：Customizing your theme
还有更方便的在 tailwind.config.js 中设定 深色模式，让用户在切换不同的颜色模式时能够更快速的应用在产品 UI 上。
结语
这个岗位目前国内还暂时没有大范围的应用，但我相信针对这种跨职能的岗位会在目前的就业形势中有更大的竞争力，毕竟谁会不喜欢和更了解自己工作的同事工作呢，真的会少了很多沟通的过程，能够能快的迭代产品，对于开发资源和设计资源的浪费是最少的。
其次给我的感觉是兴趣是一切学习的动力，真正的感兴趣才可以不觉得枯燥，才会有更大的动力去研究各种新鲜的技术。
另外，也有非常多的优秀设计师朋友在影响着我们，比如我的好朋友 JeeJee 会开发一些 Figma 插件 [Small image compressor]，帮助设计师更好的压缩导出设计资源，再早一些使用Sketch的朋友一定也用过 Utom 开发的 Sketch Measure，在我看来他们都可以称作是非常优秀的UXE。
除了插件这样的产品，现在越来越多的设计师也开始独立开发运营产品，包括之前设计师用的比较多的 Remix icon 的作者章萧醇也开始推出了一款app：~Somno 元气睡眠 - 一款 iOS 睡眠监测软件~
真的希望国内也能有更多更优秀的 UX Engineer 涌现出来，也希望我能将目前团队开源的这个产品的用户体验真正提升到优秀的水平，也让我通过项目提升更多的开发技能。