设计师这个词在很多领域都被使用。在本文的背景下，它指的是UX（用户体验）设计师。
有一个问题被反复询问--设计师到底该不该编码？
在谷歌上搜索这个问题，你会看到许多由有影响力的人、从业者和大师们发布的关于这个长期下跌的辩论话题的不同理论。有些人建议，设计师不能只坐在他们的笔记本电脑前，想出花哨的原型，而是要知道如何用代码把它们变成现实。戴着多种帽子的专业人士总是受到公司的欢迎。同时，还有很多人可能认为，设计和开发是两个不同的领域，必须分开。设计师不应该过多地担心技术上的问题，因为这会限制他们的创造力，导致解决方案不尽如人意。
这些争论没有办法达到目的，因为设计和开发都是两个高度专业化的职业，每个人都需要几年和几个小时的练习来掌握非常专业的知识。甜蜜点，或者说共同理解，可能就在中间的某个地方。了解一点编码并不意味着设计师可以获得 "编码专家 "的称号，而是让他们理解开发者的观点，就像演员拥有电影摄影或导演的基本知识可以提高他们的表演艺术。
更好的问题是-- 设计师应该理解代码吗？
我们认为他们绝对应该。对技术的理解有助于设计师确定和实施解决方案，而不需要和开发者来回检查什么是可能的。让我们举一个假设的例子，一个设计师提出了一个在应用程序中更好的导航解决方案。开发者说，目前的应用程序的架构不支持这个解决方案。为了新的导航，是否值得重新构建整个应用？或者设计师应该想出一个替代的解决方案？开发者可能会提出另一个技术上可行的解决方案，而设计师可能不同意。这就造成了在争论、建议和迭代中的时间损失。如果设计师对编码有一定的了解，他就能更好地提出更好的解决方案。
了解技术基础（有助于提供无懈可击的设计）的设计师会使他们更令人印象深刻，更有价值，同时也会提升他们的职业前景。
那么，该从哪里开始呢？
从基础知识开始 - 学习HTML/CSS
HTML（超文本标记语言）是一种标准的标记语言，被网络浏览器用来确定各种元素的位置，如图像、文本等。 另一方面，CSS（层叠样式表）决定了如何对HTML元素进行样式设计，以美化页面，使其更方便用户使用。两者相辅相成，相对来说更容易理解，而且不涉及任何编程逻辑。比喻说，如果HTML是网页的骨架，那么CSS将描述其形状、高度、皮肤类型、头发颜色、眼睛颜色等。
根据Statista在2019年发布的一份报告，全球约有64%的开发人员用HTML/CSS编码，因为它是最容易学习和编码的语言之一。
另一个原因是，几乎所有的网页和网络应用都主要是HTML文档。这意味着，无论你使用哪种编码语言，所有东西最终都会转换回HTML/CSS。因此，对于设计师来说，熟悉最简单和最广泛使用的语言是有意义的。
HTML/CSS如何帮助用户体验设计师
了解媒介
让我们考虑一个建筑师的例子。建筑师的工作是创建建筑和结构的蓝图，并确保它们是美丽的、艺术的和有美感的。但是，设计所涉及的不仅仅是在一张纸上勾勒出一个计划。它包括确保所制定的计划的可行性，注意细节，如建筑材料、功能、结构安全、价格经济性，以及买家的具体需求。
同样地，设计师的工作是创造出对平台和用户友好的功能设计。而且，虽然有许多工具，如InVision Studio、Figma、Sketch等，可以简化和精简设计师的工作，但如果使用这些高端工具设计的原型不能给人以预期的外观和感觉，它们就没有用。
另一方面，了解媒介，即了解如何编码工作，可以帮助设计师利用这些工具来发挥其优势。了解基本的代码不仅可以给设计师一个新的设计视角，而且可以了解进一步的布局会发生什么，提供容易实现的解决方案，使设计变得像素般完美，为各种平台进行优化，并规避所有的来回奔波。
如果屏幕尺寸改变，如何映射设计的响应性？如果图片的加载时间过长怎么办？如何优化设计以保持更短的代码表？这些都是一些问题，设计师如果对编码有一定的了解，就能够自己回答。
更好的团队沟通和协作
沟通和协作是用户体验设计师工作的基础。从产品经理到利益相关者、客户和开发人员，他们需要与所有人合作，并根据项目需要创造有意义的设计。我们知道，良好的沟通会导致更好的合作。
设计师和开发人员负责同样的事情--创造和交付符合最终用户需求的惊人的产品。两个部门越是同步，他们就越能共同创造出更好的产品。如果设计师拥有必要的编码知识，这将有助于他们理解技术限制和问题，并确保设计中考虑到这些问题。他们也将能够大大减少开发人员的工作量，这不仅会使设计师成为开发人员的重要资产，也会加强他们的联系和相互信任。
轻松地进行设计交接
设计交到开发者手中是所有研究、头脑风暴、无数次迭代和初步测试在设计师一端的最终产物。
但是，如果最终的结果仍然与设计不一致怎么办？也许有一些网格的设计未能覆盖，一些测量结果不稳定，或者图像太小，不能按照预先定义的蓝图来适应实际的屏幕尺寸。在这种情况下，开发人员必须采取额外的步骤，编写一些额外的代码，纠正这些问题，并对齐有问题的设计。
然而，通过对代码的一些基本了解，设计师在最初阶段就能更好地发现技术限制。他们可以迅速做出必要的修正，甚至在QA阶段审查开发团队所做的工作，以确保推出高质量的产品。
具备基本编码知识的设计师可以为开发人员进行顺利的交接，简化他们原本复杂的工作。
使用先进的开发工具来促进设计过程
在敏捷开发过程中，快速失败是必须的。这意味着，需要花费大量的时间来解释想法，等待原型的设计、编码、审查或测试，但却发现产出很糟糕。它与最初起草的原型相差甚远。如何应对这种情况呢？使用开发工具直接在现场网站上测试想法。
对HTML/CSS有一定了解的设计师可以利用这些开发工具在现场网站上测试想法，并检查其可行性。轻松地改变任何页面元素的风格，编辑/编辑文本，修改图像大小，添加或删除空白，选择框架以适应设计，并测试最终输出在不同屏幕尺寸上的表现。这样的即兴分析消除了多次设计的反反复复，以及在开发人员那里花费的审查最终输出的时间。
除了这些内置的开发工具，还有大量的扩展和插件，具有HTML/CSS知识的设计师可以利用它们的优势。许多可视化的网站编辑器，如Webflow、Wix等，也可以方便地准备快速设计和手把手的审查。设计师还可以使用一些先进的功能，如VWO的A/B测试，以测试他们的设计，并检查哪些设计获得更多的牵引力。
总结
总而言之，编码不是设计师的核心工作。有一整个社区的专业开发人员具有丰富的编码知识，可以做到这一点。然而，这是关于学习，发展新技能，并为自己的优势增加一项资产。用HTML/CSS知识设计功能性创意，不仅仅是你所拥有的附加技能，而是一种减少工作量、加快流程、为健康的流程统一铺平道路的能力。
接下来的步骤
要开始你作为一个具有HTML/CSS知识的UX设计师的旅程，请浏览这个免费的在线资源列表，以供选择。
