亲爱的设计师，
这封信已经酝酿了很多年，并且它的部分内容已经通过口头或书面形式交付给了各种设计师。
然而，我总犹豫是否发布它，因为它可能会牵连到正和我对接的设计师或是我正为之服务的客户。所以在此之前，我想强调一下，我并不是针对谁（^_^ 我是说在座的各位），而是泛指这 18 年所有的分歧。
我们已经在一起工作了近二十年了，你发给我的每个 PSD 文件或多或少存在相同的问题。以下，我想阐述下我个人的见解，如有不礼貌的地方，还请原谅。
我不打算和你探讨图形或美学，也不会深入到排版、可读性或使用留白之类的。
相反，我想谈谈你设计的文件该如何对接给我。
我想让你了解，前端是如何像素级还原设计的网页。我想告诉你如何将你的设计文件用于文档，以及你如何确定创建的图像所使用的技术，并做到保证可扩展性和性能的基础水平。
另外，我想展示什么样的设计可以快速、轻松的实现，而什么会产生额外开发成本，会拖延项目进度。
但最重要的是，你现在创造的画面将被实现成包含互动和响应的产品，上千不同人在上面交流，需要教会他们如何使用，并且是以最轻松的方式。
设计文档
首先，我想提醒你，生成的 PSD 文件不仅是为了输出图片，供客户确认，它们也是开发人员的技术文档和源材料。因此，请保持你的图层和组整齐，并且有设计及命名规范。（图层 520 副本副本 这层不要了）
亲爱的设计师，你发给我的每个 PSD 文件或多或少存在相同的问题
注释你的设计。无论是你单独新建一个文件，或是把他们注释在一个独立的隐藏图层上。
告诉我你使用了什么字体，使用了哪种颜色，间距以及上下文。我需要知道。
我还需要知道那些特定功能进行交互后的内容。
其实我想说的是：如果可能的话，请为你设计的产品创建一个简短的设计说明。
举个例子，当添加标准文本块如标题时，在其后添加一个矩形以指示其周围的间距，这能保证你每次规范统一地使用它们。如果这是太多的工作，至少指示文档中的哪个示例能说明。
我真不好意思说，我经常发现有的设计师标题是通过眼睛放置的，所以他们只要觉得看起来位置合适，就会随意放置。当我测量时，每个标题都有它自己的单独间距（我整个人都斯巴达了）。
内容块也是如此，如果你有不同内容块的列表，请确保他们的间距一致。
更多事例我会在“为内容设计”章节中讲解，比如请不要假定你的标题只有一行的情况。
我们继续来聊标题，字体大小 22px 和行高 92px，这些设置应该是对应的，即使在导出的文件中不能明显看出来。
技术设计
这里有两方面要将：什么能被实现和什么是适合的方法。
虽然我们已经到达了，在技术上很多都能实现的时代（我仍然可以使用 Canvas 逐像素绘制），但是，很多这些解决方案不是为了产品准备的。
事实上，你发现了一个例子，人们成功地将 WebGL 3D 与 CSS 模糊以及滤镜同时应用在 Demo 页面，并不意味着你应该在单页面的应用程序中使用他们作为全屏视差面板。
如果你真的想尝试尚存风险的前沿技术，请在提交设计批准之前咨询你的开发商。否则，很容易造成客户成本增加。
如果你真的对前沿技术感兴趣并想测试他们，请私底下与我联系。我也像你一样喜欢创造这样的东西。只是不要把这些东西放进一个含预算的产品项目中。
除了注意以上几点之外，你还要清楚的意识到：
你不是一个图形艺术家；你是一个设计师。
你不仅要考虑采用什么设计方法，你还必须考虑它如何运行，它的交互方式是怎样。
常言道：如果没有人可以坐在那里，那么椅子再华丽又有啥用呢？
你必须在设计中考虑加载速度，执行速度和易用性，使其成为产品而不是图片。
尽量只使用 HTML 和 CSS 来实现。
避免使用只能在 Photoshop 中展现的花哨功能。不要在没合并的图层中使用混合选项！不要使用仿粗体和仿斜体。
除非你打算将控件转成图片，否则不要使用滤镜，除了最简单的阴影。
如果你使用了混合颜色填充，不要让我计算或选择颜色。请不要使用图层混合中的叠加模式来伪造透明图像（提交源文件前请合并）；我需要一个真正透明的图像。
如果我们使用一个前端框架，如 Bootstrap，很多问题都已经提前解决了，所以你要了解它的工作方式以及如何修改它。不要设计一些用不上的东西。
如果你的设计不符合框架，你的设计是无法被实现的。不然的话，如果一半是框架内的，一半是框架以外的，那么工作负载是加倍，而不是减半。
最后，在网站上不要使用三种以上的字体或字体变体。如果你需要使用六个不同的粗细，每个都有自己的常规和斜体变体，那不是在为网络设计。
交互设计
下面谈的是重点，这封信最初是为这个主题而写的。你真的需要了解掌握用户和功能交互的所有方式。
让我们从最简单的事情说起：链接。
链接不只有两个状态。
在我收到的导航设计文件中，你总是只提供链接和 active 链接的设计。
而其他控件，你通常只提供基本和悬停状态。
如果你想对注重细节的用户友好，你应该设计不同的悬停和焦点状态。同理，导航、链接和 active 链接也应具有这些状态。
哦对了，别改控件各状态的布局（仅限改变边框宽度，填充等）。
由于我们要在移动设备上使用它，请确保在每个控件之间有足够的间距，并且每个点击区域都足够大。我认为每个长宽至少有 42px。绘制一个隐藏的矩形来表示点击区域，请确保它们不重叠，以确保用户交互是明确的。
上述问题如果出现在表单设计里，那么问题就更大了。
要说最常见的还是单选按钮和复选框的问题。标准的确实是丑啊！所以，你自己设计了一套，也不知道检查没检查，并且还觉得自己已经完成了。
然而，对于复选框，存在全部状态的多维表，并且每个都应该明确的展示给用户。
我们有以下状态：
- 已选中/未选中
- 悬停/未悬停
- 聚焦/未聚焦
- 启用/禁用
- 错误/非错误
每一个状态又可以与其他状态关联。
我们最终有 16 个启用和 4 个禁用状态，总共至少有 20 个不同的状态。
也许其他控件没有 选中/未选中 状态，但可能存在 空/不为空（显示占位符文本）的状态。它们还可能具有更复杂的状态，像是 错误/非错误 或像是 一般/警告/错误/成功。
除此之外，你应该有必填或可选的提示，以及标签、输入提示和错误提示的设计。
而且，如果你真的想让产品变得友好，你需要设置错误警告，提示用户没有填写数据，或数据已经存储过了，或更改后尚未存储。
如果你想改变单选按钮的外观，设计上注意需要明显区分出已选和未选。
关于设计交互性的一个最后一点：一种交互控件不要出现多种含义。
内容设计
每个填充了虚构文本的理想化布局的图片，足以获得客户对视觉风格的批准。但是，设计还没结束。
你设计的内容布局只是个大概的样子，请别忘了内容是动态的。
你必须检查是否设计了另外两种情况：
- 如果有内容太多的话怎么办？
- 如果内容太少了（或者内容为空）怎么办？
检查如果标题是极短或超长，会发生什么。如果关键元素出错没显示，内容块会是什么样子？如果没有图片怎么办？
如果页面某部分没有内容，我们会删除整个版块（标题，容器和全部）；或者保留该部分，并显示以下内容：“没有文章，稍后再查看？” 或更好的“您希望有新内容时收到通知吗？请注册我们的消息提醒！“
做出决定！然后设计那些东西！
如果你要设计从外部或动态来源加载的 Feed 或内容，请不要忘记包含所有错误提示和通知。
避免使用固定宽度的按钮和固定高度的文本块。不要认为它总是一行文本！立即检查一下，用最佳的方式设计多行时的样式。
确保相同的内容具有相同的结构。
如果同级标题在多个地方出现，请不要在一个案例中加粗一个字，而在其他地方不加粗。
不要在一个位置手动断行，而在另一个位置是自动断行。其实，根本不应该手动断行！
手动断行可能会使你的设计更好看，但请记住，内容很可能是通过后台输入，输入的人不能直观看到哪里应该断行，直到发布，并且甚至可能后台就没有手动断行的功能。
设计应该提供字数限制并确保统一，最终，文本内容是宽度固定并且自动换行的。如果它看起来丑，只能说明设计不行（这锅甩的漂亮）。
响应式设计
响应式设计越来越多的被使用，尤其是在移动端上。有一些简单的原则，你必须知道。
首先，移动端和网页端不是相互独立的页面，它们是同一页面的两种展现形式。
简单地说，它就像左对齐的段落文本。句子不会改变单词或字母的顺序，只是因为你把它放在一个较小的容器中。
此外，内容组的布局应是一致的，并确保内容组相互之间的列间距是一致的。
再说一个，对于不同宽度的页面，都应遵循相同的结构。这意味着，如果两个组件在网页端上看起来相同，它们在移动设备上应该也是相同的。
哦对了，如果你想要视差效果，请提供一个比静态展示更大的图片来确保能做出移动效果。如果你提供了裁剪后的图片，它只是在你的设计文件里合适，然而在实际页面中是无法移动的。
很高兴你咬牙读完了这封信，下一次我们一起工作时你应该试着想起这些提示。 我希望它们对你的工作有帮助。 我想让你明白我们的关系对我很重要，我不是为了打击你，而是为了使我们的关系更好。此致
敬礼！
你的前端程序员
来源：To Designers With Love (A Letter From a Front-end Developer)
译者：SketchU&I（很惭愧，发一个微小的广告）
