在HashiCorp，我们通过编码来实践版本控制，即所有过程都应该被编写、版本化和共享。这并不是严格意义上的工程思维，我们的设计师也在这样做。本着这种精神，我们将分享我们如何更新HashiCorp consult的Web用户界面（请阅读该版本的博客文章）。consurwebui已经为用户提供了很好的服务，但是应该进行更新。HashiCorp一直致力于UI开发，为我们的其他产品创建具有直观体验的现代设计库，我们希望consur UI也采用相同的视觉语言。»目标»改进现有功能在这次重新设计中，我们没有添加很多新功能。这是一个深思熟虑的选择，只将新功能限制在我们认为必要的功能上。我们希望改进现有的功能，并为将来更无缝地添加功能铺平道路。»一致性是关键，但不是不惜一切代价consur应该尽可能与我们的其他HashiCorp产品保持一致。对于习惯我们其他产品的人，领事应该感到熟悉。这种设计的一致性也将使我们的设计操作更加高效。然而，我们采取了一种务实的方法，并保持了一致性——我们在执政官内部找到了独特的机会，可以用不同的方式来做事情。任何不一致都是故意的，不是偶然的。»编码前测试设计在HashiCorp，我们的用户与我们合作。我们的工程师通常是在他们以前的雇主那里使用我们的产品的人。在设计用户体验和视觉设计时，我们非常依赖他们的意见，因为他们非常了解我们用户的需求。但是，随着这一重大变化，我们的目标是与外部客户一起进行用户测试，并在将产品交付代码之前对其进行验证。这是一个最佳实践，我们期待着更多地这样做。»过程»RFCs：我们的协作工具在我们的产品开发周期的中间，存在着RFC（征求意见文档），在这里工程师们提出了解决产品挑战的技术解决方案。RFC的目的是表达意图，收集反馈，并维护产品演化的书面历史。对于工程师来说，RFC是一种橡皮回避的形式，它提供了一个重新检查假设的机会，并作为发布作者或未来工程师的历史记录。HashiCorp的产品设计师通过根据需要提供模型和原型来参与RFC过程。这个项目是一个独特的例子，因为设计是RFC的重点，而不是附录。因此，我们分三个阶段收集反馈：第一轮：用户流和线框。这让人觉得有足够的信息值得一看，但仍然不够逼真（结构和布局）来保持它的敏捷和精益。第二轮：模型和原型。在一轮反馈之后，我们更新了RFC（在"归档"部分添加了被推翻的想法）。在这一阶段，包括原型帮助了我的评审人员（他们在世界各地远程工作）异步地了解流程，而不需要与我进行实时评审。第三轮：最终原型。在用户测试之后，我们用更新的原型回复RFC组，这样每个人都会知道我们在哪里着陆。任何最终的想法都可以在前端工程师开始编码之前添加。RFC过程引发了大量的讨论，促进了思想共享，并为我们在坚持敏捷设计方法的同时记录我们的设计过程提供了一个出口。从长远来看，编写RFC文档为我们节省了大量时间，并确保我们走在正确的轨道上（而且在这一点上也是一样的）。»调查我们在Twitter、Facebook和LinkedIn上发布了一份关于领事用户界面使用情况的调查。超过110人在一周内回复，其中86%的人表示愿意与我们一起做用户测试。我们还收集了consur使用范围的信息。对于设计来说，更重要的是，我们收到了关于人们对我们UI的感受的数据。一半的用户只能在浏览器中使用consur作为最后手段，或者根本不使用。我们想改变这种状况。如果实现得好，consur的客户机接口将在处理服务发现和健康检查方面有很大的潜力。更不用说它对我们的路线图上一些令人敬畏的、面向视觉的特性的潜力了。»用户测试随着RFC过程中我们的设计变得更加清晰，我们的用户测试计划也变得更加清晰。这个项目是我们在HashiCorp的第一个"官方"用户测试，我们希望能做得更多。我们的目标是4-6名来自不同领域和不同情感的参与者。以下是我们与之交谈的参与者的构成：参与者6是HashiCorp的一名色盲员工。请阅读下面的更多信息。我们从用户测试中学到了很多东西。服务标签的依赖程度超过了我们的预期。因为我们要实现功能对等，但是我们将在UI中留出空间，以便将来构建它。用户更喜欢通过首先看到最不健康的节点来分析节点运行状况，并尽可能多地将这些节点调整到一个视图中（无需滚动或分页）。像复制IP地址和失败输出这样的快速操作将节省时间。对于第一次使用HCL格式编写acl是一个学习曲线，因此我们可以通过从表单输入链接到HCL文档来帮助您。旧UI中的kv太容易被意外地破坏/编辑。我们可以通过使它们默认为只读并添加确认消息来销毁操作来提供帮助。KV商店还将受益于使用breadcrumbs，允许用户深入和跨层的KV导航。高达8%的用户可能是色盲，因此确保成功失败状态在没有红绿视力的情况下可读是很重要的。»最终设计»用户流示例»列表布局对于列表，我们的目标是让人感觉简单的信息密度，以及不具有压倒性选择的快速过滤。»仪表板布局为了显示各种节点的健康信息，我们采用了卡片布局。我们的目标是在不压倒用户的情况下显示相当多的信息，并通过快速、直观的筛选选项使他们能够简化视图。»视觉设计»颜色我们选择了一个主要的品红基于一些考虑：它需要足够暗以避免柔和的粉红色，但足够亮仍然是品红--而不是紫色。我们还必须以一种不会与red竞争太多的方式来实现它，red在整个工具中用于指示失败状态。所以，我们选择了品红600从我们的品牌样本作为主要的网络颜色，并使用相同的蓝色行动颜色，我们已经在我们的其他产品。»图标我们在设计状态图标时考虑到了色盲用户。这个集合提供了三个启示，或者关于一个物体代表什么或者如何使用它的线索。不仅是颜色，还有背景形状和图标本身都有助于区分每个状态符号，帮助每个人轻松扫描仪表板上的警报。图标通过一个绿盲/双盲色盲模拟器。»卡与表格布局不同，卡片可以显示列出的每个项目的独特信息，并且可以通过有趣的方式进行优化，以便于扫描。与传统的桌子布局相比，卡片还为每个物品提供了更灵活的空间。»下一步行动我们的工程师为consul1.1版本实现了重新设计的样式，其中可视更新可以通过opt-in获得。您将在旧UI中看到此弃用警告。对于consur1.2，新样式将是默认样式。别忘了——我们随时欢迎通过Github问题对consur用户界面的反馈。谢谢你的阅读！