我讨厌开发人员“重新设计”我的设计，所以我学会了编码。设计人员学习编码的原因很多，其中最重要的是开发出来的东西与自己设计的东西完全不一样。更糟糕的是，用于设计或市场营销工作的JD上要求诸如“必须了解HTML，CSS，Javascript和WordPress”之类的东西。如今，设计师“应该”做的事情很多，而且越来越多的人从设计到用户体验再到产品管理，很难再重新学习这些基本的但是会为工作加分的真正技能。
这是一个来自一个从事设计和开发团队多年的人的观点，也是现在很热门的一个观点。
不，设计师不应该学习编码，但是设计师应该学习如何“交流式”编码。
有一个类似的场景：如果你要去国外游玩，这时候学会当地购买东西的简单短语（诸如：您好，X·People先生，我需要一个炸鸡饭，谢谢）会对你很有帮助。代码也是一样的，你不用很流利的将其描述出来，你只是需要能顺利的完成与开发的交流就可以了。原因如下：
想要流畅而又优雅的写代码需要几年时间的沉淀。对于大部分人来说，这并不是真正的附加技能。
作为一个设计，本职也是设计，那么你需要花费更多时间去磨练自己本职的手艺，产出更完美的设计作品，然后找到同样的需要设计的开发作为伙伴。一起完成这个项目。
就像学习一门外语中的一些关键短语一样，它可以帮助您去查阅文献，去那个国家旅游，并且也表示对所访问国家的尊重-学习代码中的一些关键词也是如此。
前端交流基础
您可以利用一些空闲的时间学习一些基本知识，以进行“交流式”编码
了解什么是“ Margin” 和 “ Padding”
“Margin”是指元素周围的那一块空间；“Padding”是指元素内部的那一块空间。使用这些术语，最好就是直接读出来，不要试图将其翻译成中文（像上面的小标题一样，这只是帮助你理解的），也不要将其换成什么诸如：“装订线”或者“空白块”这样的设计术语。
margin 是元素之间的空间，padding 是元素周围的空间
同样的，颜色描述为十六进制或RGB取决于您的开发人员的开发喜欢或您的设计规范手册。
了解如何使用浏览器的开发工具“检查器”
让我们打开Chrome浏览器使用一下。
在菜单栏中点击 “视图” > “开发者” > “开发者工具”
您正在查找的“CSS样式”可以在显示边距和填充的彩色框旁边找到。
在该区域的顶部有一个复选框，显示“全部显示” —将其打开，以便您可以看到影响设计的每种样式。
现在，这个列表确实很长，让人看得头有点大，充满了您可能不认输的东西（是不是虽然每个英文字母都认识，但是组合在一起可能就不认识了），没关系。这里面的大多数你都不需要知道。如果您已经开始阅读列表了，您可以看到很多对你有用的内容，例如有关字体的部分，如下图。
用设计师使用软件的思维看一下-您可以看到字体大小为13px，字体系列为系统字体。
到这里，想必您已经知道如何精确检查要查看的字体和大小，因此当您觉得网站开发的是 “ Arial ” 字体，而开发人员向您保证它是 “ Roboto ” 的时候，你就可以自己去看看是不是像开发说的一样。
更高级的内容：了解如何使用检查器更改CSS
使用开发者工具后，您可以直接在标签中输入内容以更改值并查看其外观。刚开始使用这个是会有点困的，但是这个很容易学习，只要你静下心来。相信我，这比学习编码做个开发容易多了。
您在这里所做的任何更改都只会发生在您的浏览器中。如果您重新加载页面，它会将所有内容重置为来自服务器重新传输过来的内容。随你乱搞，无论你怎么乱写，你不会影响到浏览器以外的任何事物。
这一次，我们不再关注整个页面的CSS，而是关注单个元素。
将鼠标悬停在该元素上，然后右键单击它。您将看到 “ 检查 ” 选项，然后选择该选项。
将鼠标悬停在元素上，单击鼠标右键，然后选择“检查”
现在，此元素是在“检查器”面板中显示的元素。
看到字体大小了吗？假设我们要使字体变大。您可以直接在面板中进行更改。
在这里，我将其设置为16px：
在浏览器中修改样式是进行细微调整然后返回给开发人员的最佳方法，然后说：“您将使字体大小为16px，颜色为：＃D71920 ” ，这比用 “ 使其变大并变大 ，颜色变红。”更好。
在检查器中，有一些很有用的小技巧：
进阶技巧1: 更改任何样式
“样式”部分的顶部框标记有个“ element.style ”，这是放置要测试的东西的最简单的位置。
是否在列表中找不到相应的字体标签来放大字体？在“ element.style ”模块处直接输入font-size：24px。
重要的是要知道，当您在此框中键入内容时，必须使用CSS语言格式。那就是“ property”，然后是一个冒号，然后是您想要元素执行的操作- “value”，然后以分号结尾。
在此示例中，“ font-size”是属性，“ 24px”是值。整个作品称为“声明”。学习这些内容的最佳方法是从“显示所有样式”中复制它们。您需要了解的内容会坚持存在。我还将在下面的“草图”那一部分中向您展示如何找到它们。
进阶技巧2: 完全隐藏内容
要完全隐藏某些内容，请使用以下声明：“ display：none; ” 。将其放在element.style部分中。
进阶技巧3: 覆盖样式
如果将样式放入element.style中，但没有任何反应，则意味着存在某些阻止样式使用的情况。这就是所谓的样式替代。通常，您可以通过在值标签中添加 “! important” 来覆盖它。（这个语句需要在分号前加入）
进阶技巧4: 更改文字
让我们看看如何更改文本；仍然是在检查器中，在“style”模块上的“html”部分中完成了此操作。
将鼠标悬停在要更改的文本上，然后右键单击并选择“检查器”。
这次，我们将编辑HTML而不是CSS。您右键单击的部分将在HTML中突出显示。您可以打开和关闭灰色箭头，以更深入地研究代码。
看到上面那个写着“图片”的地方了吗？假设我们想要有更多文本内容。我们可以双击并输入新内容。比如输入下我的博客网址：“ https://xpeople.design ”(字写的这么小，应该不算植入广告吧)
点击回车，look！你的新文本就出现在界面上了。
改完这些记得要截图，并将更改好的内容发送给开发小哥哥。
从设计工具中提取代码
在这段内容中，我们将以Sketch为事例，事实上所有的新一点的UI设计工具都具有这项功能。
我们先在Sketch中创建内容，然后右键单击该元素，然后选择“ 拷贝CSS属性”
现在，将此信息粘贴到某处，并查看所拥有的内容：
蓝色按钮的CSS属性
现在，你可以您可以了解这些与您的工作相关的样式。现在，为了好玩，您可以将这些样式粘贴到element.style中，如果您要进行一些调整并查看它的实时效果。
粘贴 CSS 到 element.style
请注意，在element.style部分中，我从Sketch粘贴了CSS属性后，添加padding-right：10px；padding-left：10px；padding-top：5px；padding-bottom：5px；来在按钮中的文本周围添加空间。
向开发发送更改
有很多办法可以做到这一点，这取决于你们的沟通方式。当然，当你的伙伴为了完善你的设计而放慢时间时，你需要保持礼貌，和对其保持尊重。我能学习这些代码知识并且拥有跨职能的能力，也是因为我在早期工作中和开发人员合作，细心了解他们，他们也很愿意解释他们在做什么，以及怎么做。
我更喜欢将我的所有更改都标记在一个并排的比较中，然后与开发人员修改后的进行比较。
一些设计人员/开发人员更喜欢屏幕共享并将像素推在一起。
无论做什么，都要确保对话与更改请求同步进行。这将帮助你学习，如果你在设计中做的事情，不能被实现，例如，代码中最小的单位是1px，所以如果你做0.25px分割线，开发实现不了你的设计。如果你使用的是正片叠底或者其他类似ps的叠加方式，这些东西也在代码里面是没办法实现的。
关于“交流式”编码总结
不，设计师不需要学习编码。
是的，设计师需要学习一些短语以进行“交流式”编码。
学习margin，padding和十六进制/ RGBA颜色的语言。
了解如何在浏览器上使用检查器（开发者工具）来测试更改。
通过在设计软件中复制CSS属性并理解它们来学习相关的CSS。
与开发人员紧密合作，以了解更多信息并共同创造更好的产品。
以上是“设计人员应该学习代码吗？”的全部内容
