使用开发者工具改进 UX 设计到开发流程

我想告诉大家我如何看待代码和设计之间的交叉和相互支持。 具体来说，我想介绍设计师如何在日常工作中使用代码。 我提出这个建议，不是因为它是一项必备技能，而是因为即使是对编码有基本的了解，也能使设计变得更好，并将设计到开发的交付过程变得更加顺畅。

作为一名 UX 设计师，我一直在寻找好的方法来探索我的 UX 设计问题，并将最终设计传达给他人。 在过去的 30 年里，我的工作始终与开发人员并肩合作，但通常情况下，我的工作和开发人员的工作之间存在着 巨大的鸿沟。

我可以在基本层面上编写代码。 例如，当我还是研究生时，我曾帮助本科生教授 C 语言。 我曾致力于 Oracle 集成开发环境 (IDE) JDeveloper 的可用性。 我还曾短暂地致力于简化 WordPress 内容管理环境的 UX，使其对技术水平较低的用户更易于使用。 这需要对 HTML 和 CSS 有很好的理解。 我还自愿参与了 PHP 网站的设计，并不得不了解 Web 开发的后端。

但即使有了这些经验，我从真正意义上来说也不是一名开发人员。 如果我碰巧在看代码，那也是在“及时”学习的模式下——我查找我需要的内容，然后对其进行修改直到它能工作。 这种学习方式经常被人不以为然，有点像没上过课就学开车。 你会养成一些不良的开发习惯，但也许这对我所做的工作来说是可以接受的。

所以，我不开发或编写代码。 我的日常工作主要花在绘图、沟通和收集需求上。 就设计而言，我会先在笔记本上或使用 Balsamiq 绘制概念草图。 然后，我使用 Axure、Adobe XD、InVision Studio、Figma 和 Sketch 等工具绘制 UX 线框图和原型。 当我准备好将交付成果移交给开发团队时，所有视觉资产和文档都已定义并传达。 但我不会越界进入代码开发领域。 那不是我的专业领域。

那么，为什么设计师需要了解代码呢？

我们已经确定我不是开发人员，但我最近成为了设计师了解设计和代码交互的倡导者。

事实上，我将其称为“玩代码”。 我当然不是建议 UX 设计师成为开发人员，但至少我认为设计师可以通过对 CSS 的当前可能性以及 HTML 的最佳实践有基本的了解而受益。

实验是设计工作的重要组成部分。 代码只是另一种我们可以用来实验和构建美丽解决方案的媒介。 因此，我们将研究设计师如何用代码进行实验的一些方法，即使他们对代码的了解不多。 我们在这里介绍的内容对于开发人员来说可能是显而易见的，但有很多设计师从未尝试过使用代码，他们将第一次看到这些内容。

因此，为了他们（以及也许是对你的复习），我们将看看以下浏览器工具。

开发者工具：终极代码游乐场

UX 设计师可能担心的问题之一是，设计在浏览器中显示的效果如何。 颜色是否准确？ 字体在整个页面中是否清晰易读？ 元素在各种设备上的响应如何？ 我的灰色悬停状态在实际应用中是否会与应用程序网格上的白色/灰色斑马条纹一起工作？ 这些是在我们移交开发工作时设计师考虑的一些样式和交互问题。

这就是开发者工具可以成为设计师的最佳朋友的地方。 每个浏览器都有自己的开发者工具版本。 你可能之前已经玩过这些工具了。 那就是在屏幕上右键单击时出现的那个小“检查”选项。

开发者工具如此出色的原因在于，它提供了一种无需设置开发环境即可操作实时网站或 Web 应用程序代码的方法。 而且它是可丢弃的。 你所做的任何编辑都仅供你本人查看，并在浏览器刷新那一刻即被清除。

此外，开发者工具可以模拟其他设备。

而且，如果你还没有看到，Firefox 发布了一个 很棒的新形状路径编辑器，它对于探索有趣的设计非常有价值。

在过去的几个月里，我一直在开发一个针对企业级应用程序的复杂 Web 客户端。 上个冲刺，我的 UX 设计故事是探索 Web 应用程序入口页面的外观以及如何引入新的配色方案。 很难想象我所做的更改将如何影响整个工具，因为我正在更改的一些组件在整个产品中都有使用。

有一天，在讨论一个设计决策时，其中一位开发人员使用浏览器中的最新开发者工具测试了我建议的组件更改。 我惊讶地发现，自从我上次使用它以来，开发者工具已经发展壮大，扩展了许多。 我可以立即看到该更改对整个 Web 应用程序的影响，以及不同的设计决策如何与现有设计交互。 我开始自己尝试使用开发者工具，并且能够预览和实验我自己的简单 CSS 组件更改将如何影响整个 Web 应用程序。 太有帮助了！

然而，无法存储我的实验和更改以供将来参考也让人有点沮丧。 因此，我开始探索是否有其他工具可以支持我的设计流程。

Chrome 浏览器扩展程序

开发者工具本身就非常棒，但当浏览器扩展程序加入其中时，代码实验会变得更加令人惊叹。 Chrome 特别是有一些我非常喜欢的扩展程序。

Chrome 扩展程序 1：用户 CSS

用户 CSS 是一款 Chrome 浏览器扩展程序，允许你将你在开发者工具中所做的更改保存到一个可编辑的 CSS 代码选项卡中。 如果启用了用户 CSS，则这些 CSS 更改会自动应用于该页面。 这意味着你可以为 Web 上的任何页面设置 CSS 覆盖，稍后查看它们，并与他人共享。 当例如在发布之前对暂存站点进行设计审查时，或者对在浏览器中可查看的任何 Web 应用程序或网站进行任何设计探索时，这都是一个非常棒的工具。

我使用用户 CSS 的第一步是在 Chrome 元素面板中进行更改。 然后，在进行的过程中，我只需将 CSS 更改从 Chrome 的开发者工具复制粘贴到用户 CSS 代码选项卡中。 此视频详细展示了在 Chrome 开发者工具中编辑 CSS、HTML 和 Javascript 的不同方法以及我如何使用 UserCSS。

用户 CSS 具有一个不错的内置代码编辑器，因此我的代码始终格式良好，并且包括语法高亮显示，因此我不必担心这类问题。 我特别喜欢能够立即执行覆盖，以便你可以实时查看更改。 它还有一个有用的开关，允许你启用或禁用你的覆盖。 这使得向团队演示一组更改变得非常简单。 此扩展程序使我能够轻松地呈现现有页面设计和建议更改之间的比较。 我甚至用它制作了一个简单的视频来演示建议的设计更改。

在此视频中，我对我的网页进行了一些简单的编辑，然后展示了如何通过简单地单击用户 CSS 上的开/关按钮来启用或禁用这些编辑。

如果你只需要编辑 CSS，尤其是需要进行一些非常简单的设计更改并希望这些更改能够持久保存，那么这个扩展程序非常完美。但是，随着设计复杂度的增加，我发现自己想要一次保存多个代码片段。在用户 CSS 编辑器中复制粘贴代码变得很麻烦。我想要一个更灵活、更自由地进行实验的东西。我还希望能够查看 Web 应用程序 HTML 的简单更改，甚至可以玩一些 JavaScript。

这就是下一个扩展程序发挥作用的地方。

Chrome 扩展程序 2：Web Overrides

我找到的第二个 Chrome 扩展程序叫做 Web Override，它提供了一种覆盖 HTML、CSS *和* JavaScript 的方法。所有这些！它以三个选项卡的形式呈现，与 CodePen 非常相似，这使其成为创建粗略工作设计原型的一个非常强大的工具。

Web Overrides 还允许你保存多个文件，以便你可以在不同的组合中启用或禁用设计的不同部分。它还可以快速地在不同的选项之间切换，以展示不同的设计概念。

此视频展示了我是如何在页面中添加 HTML 元素并使用一些基本 CSS 编辑新元素的。

使用 HTML 选项卡可以编辑页面上的任何元素，例如替换徽标、删除不必要的元素或添加新元素。JavaScript 选项卡与此类似，我可以进行简单的更改，例如将其他文本注入到网站标题中，以便测试动态更改如何影响布局——这对于测试不同的场景很有用，例如国际化方面的差异。

从编码的角度来看，这些编辑可能微不足道，但它们使我能够在更短的时间内以更低的风险探索数百种替代设计，而不是在设计应用程序中四处移动像素。使用我传统的 UX 原型设计工具，我实际上无法像使用这个扩展程序那样快速地探索如此多的想法。

而且，更重要的是，我和我的团队都对设计交付成果充满信心，因为我们在浏览器中尽早测试了它们。即使是最完美的 Photoshop 文件，在设计进入浏览器后也可能会丢失，因为它实际上只是设计在静态状态下的快照。使用这些扩展程序在浏览器中首先测试设计证明了我们设计的内容是可行的。

另一方面，你可能想查看 Jon Kantner 如何使用类似的浏览器扩展程序来禁用 CSS 作为审核各种网站语义标记的一种方式。它与设计无关，但了解这些工具如何具有不同的用例很有趣。

我到目前为止的收获

自从深入研究 DevTools 和浏览器扩展程序以来，我对我的收获感到兴奋。我相信我的设计因此变得好多了。我还发现自己能够与开发人员进行更有成效的沟通，因为我们现在有了一种良好的沟通方式。快速原型设计中设计和代码之间的共同点确实有助于促进讨论。而且，因为我正在玩真正的代码，所以我对底层代码最终将如何编写有了更好的理解，并且可以更多地体会开发人员的工作——以及我如何在过程中使他们的工作更轻松。

它还在我的团队中创造了一种协作式快速原型设计的文化，这是一个完全不同的故事。

玩代码激发了新的想法，并鼓励我将我的工作适应 Web 的上下文。有人说，在设计过程的早期进入浏览器是理想的，而这些正是允许我（以及你）做到这一点的工具！

你还有其他工具或流程用于促进设计和代码之间的协作吗？请在评论中分享它们！