编码就是敲出来设计

设计师和开发人员为了一个共同的目标而合作——打造客户想要或需要的产品和体验。他们的共同目的是为他们的用户服务。 

为了实现这一共同目标并有效协作，设计师和开发人员应该了解对方的纪律。设计师不必成为编码员，但了解代码的基础知识及其局限性是非常有益的。

就像建筑师必须了解建筑材料才能设计结构一样，UX 设计师需要HTML、CSS 和一点点 Javascript 等前端代码的基础知识——产品设计的基石！

对了解代码的设计师的好处

学习代码的设计师没有什么可失去的，也没有什么可得到的。好处远远超过了低头学习新技能所需的时间。

与开发人员更好的协作

当设计人员对代码有基本的了解时，他们可以与开发人员进行更好的沟通。他们还将赢得开发人员的尊重，他们反过来可能会更加努力地理解设计。

设计师、产品团队和工程师之间的设计交接总是很棘手。为什么？因为他们说不同的语言有不同的限制。通过学习编码，或者至少是基础知识，设计人员可以更好地理解代码的约束和限制，从而更容易与工程师协作解决问题。

了解开发限制

当设计人员知道如何编码时，就更容易理解限制和解决问题，尤其是在移交后的质量保证 (QA) 期间。例如，如果浏览器中的某些内容看起来不正确，设计人员可以使用浏览器的开发人员工具来检查元素的 HTML 和 CSS。

了解技术限制还可以在设计过程中为设计人员节省大量时间，因为他们知道什么是可能的，什么是不可能的——避免超出技术限制的设计决策。

改进原型设计

基于图像的设计和原型制作工具不提供编码产品的保真度或功能。限制设计人员在设计过程中可以做的测试和解决问题。

了解 HTML 和 CSS 的设计师可以构建功能原型，其性能优于基于图像的设计工具。

增加你的价值

科技行业是一个令人兴奋的领域，新的角色和机会不断涌现。通过学习编码，用户体验设计师可以承担更大的角色，过渡到新的职业，并增加他们对潜在客户或雇主的价值。

设计师应该学习哪些编程语言？

学习 HTML（超文本标记语言）和 CSS（层叠样式表）对于想要学习代码的设计师来说是一个很好的起点。您可以将 HTML 描述为互联网的线框，而 HTML 和 CSS 的组合相当于设计模型——除了具有更高程度的保真度和功能。

设计工具中的大多数属性面板都是 CSS 大小、颜色、间距、排版、网格、阴影等。因此，了解该语言将帮助您在代码中可视化和理解您的设计。另外，您可以与开发人员更好地沟通。

设计师通常停留在 HTML 和 CSS 上，因为这是构建大多数模型和原型所需的全部内容。但是 Javascript 将允许您将事情提升到一个新的水平。

超越基础

Javascript 是另一种优秀的前端语言。学习起来更具挑战性，但可以让您显着增强基本的 HTML 和 CSS 原型。这就是为什么大多数前端开发人员建议设计人员学习 HTML、CSS 和一些 Javascript。

Javascript 也是有益的，因为它是许多流行的前端框架（如React、Vue、Angular等）的基础。学习前端框架更具挑战性和耗时，因此设计师不需要走这条路，除非他们真正享受编码体验。

同一团队的两个部分

首先，让我们看一下两个开发最佳实践及其等效设计。

1）创建模块化代码以提高效率

就像设计师致力于基于组件的设计一样，程序员应用可重用元素和高效使用 CSS。用于开发的乐高积木方法的扩展性非常好（尤其是对于复杂产品）。

考虑这种情况：客户有一个联系表并想要添加一个反馈表。如果开发人员已经为通用表单创建了一个类，那么添加一个新的类并不是什么大问题。由于开发人员天生就是以这种方式思考的——他们不可避免地意识到用户界面或应用程序的不同方面可以在功能或 UI 方面被重用或重新分配的想法。

2) 为可扩展性创建灵活的代码

就像设计师构建能够在不断增长的产品套件中生存的设计语言一样，开发人员寻求编写不需要完全重写即可进行重大更改的代码。

改变一个元素，更新无处不在。

模块化方法是相同的——只是表达方式不同。

开发人员逻辑如何加强设计技能

当然，并不是所有的设计师都需要编码。在今天的敏捷团队中，我们应该拥抱专业化的力量。

话虽如此，精通代码的设计师倾向于更好地理解技术含义（对企业产品尤其有用）。他们还获得了一个更有条理的解决问题的框架。我说这是从开发人员转为设计师的个人经验。

在研究生院学习编码让我有机会从事入门级的 Web 开发工作，这导致了编程角色，最终发展成为 UX 职业。

我们的开发经验使我的设计过程与众不同。编码让我们看到了新的思维方式，并解开了创作过程中隐藏的部分。在编码参数范围内进行逻辑思考可以使设计问题成为焦点。

例如，在最近一个数据分析产品项目开始时，我面临的唯一要求是“重塑我们的界面，激励我们的公司，并在市场上脱颖而出”。

需求如此不明确，我需要将设计思维和代码思维融合为三个部分。

1) 将这种情况确定为非传统的探索活动

首先，我认真地听着。客户端主要关心用户界面吗？不是这样，在这种情况下。当然，他们的界面需要更新，但更深层次的问题是以一种有意义的方式呈现数据，而不是图标和颜色。

2) 重构最初的想法

作为一名开发人员，我过去曾通过布置数据模型来支持更丰富的体验来解决类似的问题。我将同样的理解应用于客户对这个项目的需求。当客户说他们想在特定屏幕上显示特定的数据时，我理解得更多。他们本质上是在这条数据的重要性与相邻组件之间建立联系。此外，我现在了解到，两个特定的数据组合在一起更强大，并且能够找到机会在整个应用程序中实现这种类型的“设计关系”。

客户的问题比“我们需要一个新设计”要深得多。为了支持如此复杂的产品，他们必须为高度的协作和灵活性做好准备。

根据我过去的开发经验，我知道随着我们的进展，客户端会显示更多的数据和功能。他们只是忙于工作太多，无法在传统的“需求收集”阶段同时传达所有内容。

因此，我重新构建了自己的想法：必须将整个设计过程视为持续的需求收集。每个人都需要在工作中保持灵活性，否则项目就会分崩离析。

简而言之，Photoshop、Adobe XD或Figma不会削减它！

3) 创建一个可持续的框架

这种分割界面的方法是代码思维在起作用。

在进行界面开发项目时，开发人员通常从创建一个框架开始：概括地说，定义较小的部分将存在的区域，并以有意义的方式对这些较小的部分进行分组。

如果在开始深入研究细节（例如特定的 CSS 实现和较小的组件）之前该组织不存在，则开发人员的工作会变得复杂。

同样，我首先勾勒出一个“UI 框架”来为设计问题指定一些广泛的用户目标。当我们深入研究特定交互时，我们通过概述一般原则来保持外观和感觉的一致性。

在进入原型设计时，我能够投入必要的时间来完善 UI 组件，因为整体愿景很清晰。由于原型元素被视为模块，因此从视觉到详细制作的过渡要容易得多。

结论

编码是设计过程的重要组成部分，是模块化和可扩展思维的启动板，或者是有价值的设计工具。

为确保代码思考是设计过程的一部分，请考虑以下事项：

在项目规划和设计活动期间，在不同的检查点包括一两个开发人员。

与开发人员就原型技术进行合作，这将使手头的项目受益。

与开发团队讨论模块化方法，以了解零碎信息如何对设计产生积极影响。