使用DevTools将UX设计改进开发过程

本文探讨了代码和设计的交集，重点是设计师如何利用基本编码知识来增强其工作流程并改善与开发人员的沟通。作者是一位具有一些编码经验的UX设计师，认为即使对代码的基本理解也会显着受益于设计过程。

虽然不主张设计师成为开发人员，但作者强调了“使用代码”的价值 - 尝试CSS和HTML以完善设计并确保浏览器兼容性。他们建议，这种方法弥合了设计和开发之间通常存在的差距。

作者的典型设计过程涉及草图，线帧（使用轴，Adobe XD，Invision Studio，Figma和Sketch等工具）以及创建视觉资产。但是，他们发现与代码的直接互动可以改善设计的忠诚度，并减少在交接过程中的误解。

DevTools：设计师的操场

作者将浏览器Devtools作为宝贵的资源。 DevTools允许设计人员实时操纵网站代码，测试颜色准确性，字体可读性，跨设备的响应能力以及不需要开发环境的交互元素。变化是暂时的，使其成为无风险的实验空间。作者指出，DevTools最近的改进，包括Firefox的Shape Path Editor。个人轶事说明了DevTools如何使作者能够快速可视化设计变化对复杂Web应用程序的影响。

Chrome扩展：增强DevTools功能

作者建议两个镀铬扩展，以进一步增强设计代码的交互：

• 用户CSS：此扩展名为DevTools CSS更改，使设计人员可以重新访问并共享其编辑。作者描述了其在设计评论中的用途，并创建了建议更改的演示。内置的代码编辑器和ON/OFF开关被突出显示为特别有用的功能。

• Web替代：这种更全面的扩展可以覆盖HTML，CSS和JavaScript，为创建原型和测试各种设计方案提供了更大的灵活性。作者演示了其在添加HTML元素，编辑CSS和注入JavaScript进行动态布局测试中的用途。

这些扩展可以快速原型制作和探索众多设计选项，超过了传统设计工具的功能。作者强调直接在浏览器中测试设计的价值，以确保准确性并避免开发过程中的翻译问题。

关键要点和结论

作者得出的结论是，将DevTools和浏览器扩展程序纳入其工作流程已大大改善了他们的设计，并与开发人员建立了更好的合作。使用实际代码创建快速原型的能力增强了通信，并可以更深入地了解开发过程。作者鼓励设计师探索这些工具并分享自己的经验。

以上是使用DevTools将UX设计改进开发过程的详细内容。更多信息请关注PHP中文网其他相关文章！