面向开发人员的设计工作流程教程：按时交付更好的 UI/UX

编者注： Lubos Volkov 是一位经验丰富的设计师，他在整个职业生涯中与众多开发人员进行了远程合作。 作为 Toptal 的产品设计师，Lubos 每天与来自工程、社区和内容等多个部门的团队成员进行互动。 他是一位才华横溢的设计师，他的沟通技巧促成了他的成功。 在本教程中，Lubos 分享了他优化设计师-开发人员 UI 和 UX 工作流程的经验和方法，从而在截止日期之前或之前交付高质量的产品。

与优秀的设计师或设计团队合作对任何团队来说都是一笔宝贵的财富。 通过清晰的沟通渠道和畅通无阻的合作，设计师应该为您提供所需的一切，以加快构建过程并尽可能减少问题和困惑。

作为 UX 开发人员，您可以做些什么来确保您构建的产品在不牺牲用户界面和用户体验质量的情况下及时交付？

我的回答：让你的设计师从第一天就参与进来，并让他们参与整个 UI/UX 开发过程。 确保在开发人员和设计人员之间建立清晰的沟通渠道和一致的消息传递。

你有你需要的一切吗？

在任何 UI 的实现过程中可能发生的最糟糕的事情是__设计师和开发人员之间缺乏沟通__（除非他们是同一个人）。 一些设计师认为，一旦 PSD 发送过来，他们的工作就完成了。 但是，那是错误的！ 您必须创建一个始终在线的通信工作流，该工作流持续超过 PSD 的交付。

在许多情况下，设计师需要一段时间才能看到实际的 UI/UX 设计实现。 令他们惊讶的是，构建通常与初始提交完全不同。 （这不止一次发生在我身上。我已经发送了包含完整描述和交互原型的源文件，但是当我终于看到这个项目时，几个月后，它有不同的布局，不同的颜色，并且没有任何交互。）

一些设计师可能会因此而讨厌我，因为这个设计工作流程需要他们做大量的“额外”工作。 但是，以有组织的方式创建和交付完整的资产和信息，对项目和整个团队都有好处。

如果开发人员面前有他们需要的一切，它将加快这个过程。 一个干净的 PSD 是不够的。

您需要什么才能有效且高效地完成工作？

这些是开发人员应该期望设计师将 UI/UX 设计带入实施的资产：

• 资源文件- 设计者应该将应用程序的每个元素放在一个文件中。 此文件应包含按钮、复选框、标题样式、字体、颜色等。基本上，基于此文件中的信息，开发人员应该能够从头开始重新创建任何界面。 开发人员从单个 PSD 导出任何元素比在多个文件中搜索要容易得多。

• 资产- 确保开发人员获得所有必需的资产，因为不应再触及源文件。

• 交互原型——“静态屏幕”的日子已经一去不复返了。 使用智能交互和动画来平滑 UX 设计工作流程和实施，是现在的一种常见做法。 但是，您不能只对开发人员说“这会从左侧滑入”。 设计师应该创建该交互的实际原型。 原型应包括速度、速度等信息，并且设计人员应指定这些值中的每一个。

• 命名约定- 请求文件命名结构以保持事物井井有条。 这将使你们俩更容易浏览文件。 （没有人喜欢将东西隐藏在背景文件夹中。）

• HDPI 资源- 我们生活在“困难时期”，屏幕密度巨大。 确保设计师将提供所有所需分辨率的图像，这样您的应用程序在任何地方都会看起来很清晰。 注意：使用尽可能多的向量； 它会对你有很大帮助（svg）。

如果您在实施过程中确实发现了其他缺失，请不要害怕； ping设计师并要求它。 永远不要跳过，永远不要吝啬！ 你们是同一个团队的成员，你们的工作是提供最好的产品。 如果设计师失败了，你也会失败。

工作正在进行中

在 UI/UX 开发过程中利用您的设计师。 不要让他们袖手旁观，期望他们只是“推动像素”。 设计人员甚至在实施开始之前就看到了可能的创新。 要利用这一点，请将它们保持在循环中。 为他们提供查看和测试正在进行的工作的权限。 我很清楚没有人喜欢分享未完成的项目。 但是，在构建过程中进行更改比在最后进行更改要容易得多。 这样做可以节省您的时间并避免不必要的工作。 一旦你给设计师一个测试项目的机会，请他编制一份问题和解决方案列表，并提出改进建议。

当开发人员有一个可以改变应用程序外观的想法时该怎么办？ 与设计师讨论，绝不允许开发人员在未咨询设计师的情况下修改设计。 此设计工作流程将确保构建保持在正轨上。 一个伟大的设计师对屏幕上的每个元素都有理由。 在不了解它为什么存在的情况下取出单个部件可能会破坏产品的用户体验。

UI/UX 设计项目管理

设计师认为开发人员可以在一天甚至一小时内将设计变为现实。 但是，就像伟大的设计一样，伟大的发展需要时间和精力。 通过让他看到构建的进度，让你焦虑的设计师远离他。 使用外部项目管理软件来确保每个修订都得到考虑，这是确保您不会错过电子邮件对话或 Skype 会话中讨论的重要信息的好方法。 老实说：有时变化和活动在发生之前甚至不会被传达。

无论您使用哪种解决方案，请务必选择一个整个团队将采用并始终使用的工作流程。 在我们的团队中，我试图推动 Basecamp，因为我正在使用它，但我们的前端开发人员认为它的功能有限。 他们已经在使用其他项目管理软件来跟踪错误、进度等，例如 JIRA、GitHub 甚至 Evernote。 我明白项目跟踪和管理应该尽可能简单，所以我将我的 UI 设计工作流程迁移到 JIRA。 我想确保他们了解我的工作流程和进度，但我不希望他们觉得设计是另一回事。

以下是对项目管理工具的一些建议：

• Basecamp - 跟踪设计和开发相关任务的进度，并轻松让您导出任务。 它还有一个简单的移动客户端。
• JIRA - 一个完全可定制的平台，您可以轻松地为不同区域设置定制板。 例如，组织看板来跟踪后端、前端、设计等活动。我认为移动客户端有点弱，但它对于较大的团队来说是一个很好的解决方案，并且包含错​​误跟踪功能。
• 电子邮件 - 这非常适合建立对话或发送图像。 但是，如果您使用电子邮件进行反馈，请小心。 东西很容易丢失。

您也可以尝试 Trello 和其他项目管理软件，但我们行业中使用最广泛的是 Basecamp 和 JIRA。 同样，最重要的是找到一个每个人都可以一致使用的项目管理系统，否则这是一个有争议的问题。

UX设计和开发走到一起

设计师和开发人员是一个强大的组合。 确保尽可能频繁地一起集思广益 UI 和 UX。 开发人员应该愿意帮助设计师构思想法，而设计师应该至少对所使用的技术有基本的了解。

一起弄清楚设计工作流程。 不要只是盲目地实施你的设计师创造的东西。 积极主动，利用您的两种不同视角，创造出看起来漂亮且用户体验极佳的产品。 设计师跳出框框思考，看到疯狂的动画、创意、像素和按钮，而开发人员则看到技术、减速带和限制。

以我的经验，每个设计师都对像素和有趣的概念着迷。 但有时，当设计师有想法时，开发人员会回击说：“一旦实施，这将不会很好地工作。 会有性能消耗问题”。 最近，我希望实现一个背景模糊的模态窗口，但这种模糊导致加载时间过长。 为了解决这个问题，开发人员建议使用常规的全彩色覆盖，这样可以更快地加载并保持图像质量。 设计师，请注意：不要为设计妥协用户体验。

反馈回路

设计师的反馈至关重要，而且必须尽可能频繁地发生。 这可能是您将做的最耗费时间（和精力）的事情。 但是，您需要采用它才能提供完美的结果。 这里有几个关于如何使您的反馈完美的 UX 和 UI 设计工作流提示。

• 视觉化——反馈需要尽可能具体。 使其准确的最佳方法是截取一个简单的屏幕截图并突出显示您要修复的问题。 如果您有当前实现的图片与它的外观对比，那就更好了。 视觉交流将消除 50% 的问题。

• 描述性- 反馈应该是准确的。 你不能只说“向上移动这个按钮”。 设计者必须指定一个按钮应该移动多少像素，应该使用什么填充等等。总是包括对问题的解释，以及适当的解决方案。 这将花费很多时间，但这是值得的。

• 要有耐心——请记住，设计师和开发人员的关注点不同。 如果开发人员不完全理解设计师的想法，可能会导致混乱和错误的决定。 在任何情况下，双方都需要耐心并愿意帮助其他团队成员。 有时真的很难，但这是每个设计师和开发人员都应该学习的软技能。

很明显，需要将这些东西组合在一起以使它们成为合适的设计工作流程。 但是，什么工具可以真正帮助您提供反馈？

• 电子邮件——我敢说这仍然是最常见的提供反馈的平台。 如果您遵循几个简单的规则，使用它是完全可以的。
  • 首先，使用单个电子邮件线程来获取反馈。 不要将每个单独的调整都放在具有不同主题的新电子邮件中。
  • 其次，创建修复列表。 试着坐下来想想你注意到的每一个调整或修复。
  • 最后，不要一次发送大量列表。 尝试将其分解为较小的单个列表并逐个进行。

• Skype（环聊） - 语音是非常强大的反馈工具。 您可以立即提问和回答问题。 但是，请务必记笔记并在通话​​后通过后续消息（电子邮件）发送。

• 协作工具- 老实说，我不是协作工具的忠实粉丝。 但是，他们有一个很大的好处。 它们可以帮助您保持反馈到位。 提问和回答问题的速度很快，而且会一直存在。

以下是一些很棒的工具：

反馈注释：

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

协作工具：

• http://www.invisionapp.com/
• https://basecamp.com/

结论

建立一个系统和 UI/UX 设计工作流程，在整个设计和开发过程中保持沟通渠道畅通。 这将使您能够实施伟大的想法、预测潜在问题并确定重要问题的优先级。

开发者和设计师只要愿意团队合作，就可以共同创造伟大的事物。 互相学习，设计像这样的教程！