亲爱的设计师,

这封信酝酿已久. 在很长一段时间里，它的一部分以演讲和书面形式传递给了各种设计师.

然而，我总是害怕发布它，因为我担心它会牵连到我现在的设计师或客户. 因此，在我继续之前，我想强调的是，这不是一个具体的不满，而是18年来分歧的逐项清单.

我们一起工作了近二十年, 你发给我的每个PSD文件(或多或少)都有同样的问题. 那就原谅我不礼貌地教你怎么工作吧.

我并不打算教你图像或美学. 我不会深入研究排版、易读性或空白的使用.

相反，我想解释一下你们的劳动成果是如何影响到我的.

我想提醒你什么是需要重现设计作为像素完美的网页. 我想告诉你，你的设计文件将如何用于文档，以及你创建的图像如何决定所使用的技术——直到最基本的可扩展性和性能水平.

也, 我想演示什么可以快速轻松地完成，什么会产生开销，将整个生产拖到爬行.

最重要的是，我想提醒你们 picture 你现在正在创造的东西会变成一个有生命的东西，它会相互作用并做出反应, 它与成千上万个不同的个体进行交流, 这需要教会他们, 以最轻松的方式向他们学习. 既为它，也为他们.

为文档设计

首先, 我想提醒你，你正在制作的PSD文件不仅仅是供客户批准的图片来源, 他们也 技术文档 和 源材料 为开发人员. 因此，请保留您的图层和组 整洁、有条理、有名字.

注释你的设计. 或者用您使用过的约定创建一个单独的文件, 或者在一个单独的隐藏层中记录它们.

告诉我你用了什么字体. 让我知道要使用哪些颜色、间距和上下文. 我需要知道.

我还需要知道如果没有针对特定功能进行设计，可以推断出什么.

我想我想说的是:如果可能的话 创建一个简短的风格指南 对于你正在设计的产品.

为了我们俩好, 在添加标准文本块(如标题)时，在它们后面添加一个矩形，以指示它们周围的间距. 这应该使您每次都能始终如一地放置它们. 如果这是太多的工作，至少指出文档中的哪个例子是经典的.

我不能告诉你我经常发现标题是通过眼睛放置的，所以它们在视觉上适合它们被放置的单个实例, 但是当测量的时候, 揭示每个都有自己的单独间隔.

内容块也是如此. 如果您有一个不同内容块的列表，请将它们一致地分开.

我会告诉你更多的 内容设计 section, 但是请不要假设你的标题总是在一行中, 然后在文件中使用这些信息.

我经常遇到字体大小为22px，行高为92px的标题(显然是从主页标题复制粘贴过来的). 您选择的设置是相关的，即使它们不会在视觉上改变导出的文件.

技术设计

这有两个方面:什么 可以做到的 和 什么是合适的? 对于媒介而言.

虽然我们正在迅速达到一个点，一切都将是技术上可能的网站开发(如果没有别的, 我仍然可以用画布一个像素一个像素地画出来)很多解决方案都是这样 不 生产就绪.

事实上，你发现了一个例子，有人成功地将网络GL 3D与CSS模糊加滤镜蒙版结合在一起用于演示页面，但这并不意味着你可以在单页应用程序中使用它作为全窗口视差面板.

如果你真的想走在前沿，请咨询你的开发者 之前 提交设计方案审批. 否则，很难让客户接受更低的价格.

如果你真的想测试边缘, 虽然, 如果你想试试好玩的话, 私下联系我. 我和你一样喜欢创造这样的东西. 只是不要把这些东西放到预算制作项目中.

超越这些事情——超越测试我们所能做到的极限, 试着对……保持敏感和理智 应该做什么?.

You’re 不 a graphics artist; You’re more than that, you’re a 设计er.

你不仅要把它设计成某种样子，你还要把它设计成 运行 某种程度上， 沟通 和 的行为 在某种程度上.

去寻找世界各地设计师熟悉的陈词滥调: 如果没有人可以坐，那漂亮的椅子又有什么用呢?

你必须考虑装载的速度, 在你的设计中，执行的速度和使用的便利性使它成为一个 设计 而是一张图片.

尽量只用HTML和CSS实现尽可能多的目标. 避免使用Photoshop中可用的漂亮功能. 不要混合! 不要使用假粗体和假斜体.

除非您打算将元素作为图像, 不要使用滤镜——除了最简单的阴影.

不要让我计算或选择颜色，因为你已经使用混合颜色填充. Please don’t fake transparent images by using overlay blending; I actually need a transparent image on site.

如果我们使用前端框架，比如 引导，这些问题中的许多都已经解决了，所以要了解它是如何完成的以及如何修改它. 不要随便设计一些不相关的东西.

如果您的设计与框架的功能不一致, 那么实现它就不是实现设计. 相反，我们最终选择性地覆盖了框架, 所以它不会扰乱我们的设计，然后从头开始实现它. 工作量翻倍而不是减半.

最后，不要在网站上使用超过三种字体或字体变体. 如果你需要6种不同的重量, 每个都有自己的规则和斜体变体, 你不再是为网页设计.

交互性设计

这是一个巨大的问题. 这封信最初是专门为这个话题写的. 你必须了解和理解用户和功能交互的所有方式.

让我们从最简单的东西开始:链接.

链接并非只有两种状态.

在我收到的导航中，您总是为我提供设计 链接 和一个 积极的联系 (当前页).

在其他情况下，您通常提供 base 和 徘徊 州.

如果你想要用户友好，你应该有不同的设计 基地,悬停 和 焦点 州(参观了 和 活跃的 对于用户体验来说也很不错). 对于导航，链接和活动链接都有 以上所有的状态.

Oh, 不要在状态之间改变链接布局(改变边框宽度), 填充, 诸如此类).

类似地，如果它看起来不像按钮，它就没有背景. 期. 填充内联文本元素是一种混乱，没有填充的文本背景永远不会这样做.

因为我们要在手机上使用它, 确保在独立的交互元素之间有足够的空白, 并且每个hitbox都足够大. 我认为每个轴上最小的42px是标准的.

画一个不可见的矩形, or a hidden layer showing hitboxes; make sure they don’t overlap 和 that user interactions are unambiguous.

表单元素更糟糕.

我看到的最常见的情况是单选按钮和复选框. 标准的很丑! 所以，你设计你自己的，给我一个检查和一个未检查的状态，并认为你完成了.

然而, 复选框有一个完整的多维状态表, 每一个都应该直观地显示给用户.

我们有以下状态:

• 已检查或未检查
• 悬停与否
• 是否专注
• 启用或禁用
• 错误与否

它们中的每一个都可以与其他的结合.

Disabled阻止了一些组合(在禁用时悬停和焦点通常是不相关的)，但不是全部(checked-disabled-error是复选框的一个完全有效的信息状态)。. 因此，我们最终得到16个启用状态和4个禁用状态，总共至少有20个不同的状态. 例如, 在这个设置中，你通常给我的状态是checked-不-不-enabled-不和unchecked-不-不-enabled-不.

其他表单元素可能没有选中-未选中状态，但可以为空或不为空(显示占位符文本)。. 它们还可以具有更复杂的信息状态，因此错误或不错误的情况可以像neutral-warning-error-success一样复杂.

然后, 最重要的是, 您应该有强制性或可选的指示符，以及明确定义的标签布局和设计, 输入帮助, 错误文本.

和, 如果你真的想要用户友好, 你需要原始集脏状态, 表明用户从未提供过数据, 或者数据已经存储, 或者已更改但未存储, 然而,.

我想说的是:设计交互性是很困难的. 如果你想改变单选按钮的样子，不要轻易地用两种状态.

关于交互性设计的最后一点:决定交互是什么样子的. 意义, 决定要为交互元素使用什么约定, 别用在其他地方.

No, 你不允许使用你的主要品牌颜色来表示链接, 特别是如果你用同样的方法来强调重要的内容!

内容设计

理想的布局用每个元素填充 lipsum 内容足够好，可以向客户展示图片，以获得视觉风格的批准. 但内容设计既不是开始，也不是结束.

一旦你对内容布局有了一个粗略的想法, 请记住，您正在处理动态内容. 有两种情况你必须检查每条内容:

• 如果它太多了怎么办?
• 如果它太少(或者完全缺失)怎么办??

检查一下如果标题短得离谱或长得不正常会发生什么. 如果缺少关键元素，内容块应该是什么样子? 如果有b无图呢?

如果页面部分没有内容, 我们是否要删除整个章节标题, 容器和所有，或者我们保留这部分, 并展示一些类似这样的东西:“还没有文章, 稍后再来查看?甚至更好:“您是否希望在此内容到达时收到通知?? 注册我们的时事通讯!”

做决定! 然后 设计这些东西!

如果您正在设计从外部或动态源加载的提要或内容, 不要忘记包括所有的错误和通知. 事实上, 设计页面通知元内容以全局显示它的样子, 然后坚持这些设计惯例，以便在出现问题时通知用户.

避免固定宽度的按钮和固定高度的文本块. 如果我之前没说过， 如果你认为总是只有一行文字，那你就错了! 现在，去看看把它做成多线的最佳方法.

确保相同的内容具有相同的结构.

如果同一个标题在多个地方可见, 不要在一个地方加粗一个词，在另一个地方加粗另一个词!

事实上，尽量避免在标题中使用格式结构. 同样地，不要在一个地方手动打断文本，而是在另一个地方用不同的方式打断. 事实上，不要手动打断文本!

这些东西可能会使你的设计更好, 但请记住，内容很可能是通过CMS输入的, 输入它的人可能在它发布之前看不到它是什么样子, 或者可能甚至没有工具来手动破坏, 或者格式化文本.

设计与最终内容将具有相同的限制-固定宽度的文本容器和自动换行. 如果那样看起来很丑，那么这个设计就不好.

响应性设计

这方面最近取得了很大进展. 至少在那些手机设计的案例中. 我们越来越多地让bootstrap来解决这个问题，然后在裂缝上贴上创可贴.

无论如何，有一些简单的原则你必须知道.

首先，移动版和桌面版不是单独的页面. 我知道你知道. 它们只是同一页的回流.

简单地说，这与处理左对齐的文本相同. 这个句子不会因为你把它放在一个更小的容器里而改变单词或字母的顺序.

此外，内容组应该在所有布局中共享. 添加列时，请确保列的分隔符是一致的.

此外，对于不同版本的页面，约定应该遵循相同的结构. 这意味着, 如果两个元素在桌面上看起来相同, 它们在移动设备上也应该是相同的.

如果你想要视差，请提供一张大到可以移动的图片. 如果你适合, 或者裁剪图片，使其在你要展示给客户的文件上看起来正确, 那我就没东西可动了.

设计异常

当然，例外总是可能的. 此外，它们对于产品看起来有吸引力和有效是必要的. 但是，不要在第一次传递时逐个添加它们.

如果你发现自己一遍又一遍地解决同样的设计问题，这就行不通了, 特别是当你在每个实例中使用不同的解决方案时.

一旦你完成了以上所有的步骤, 你应该得到一个有效的, 稳定的, 和一致的(如果有些沉闷)设计. 现在是时候给事情加点料了. 从整体上看一页, 和客户谈谈，确定哪些项目能让他们的钱花得最值.

我们已经 一起工作 多年来，我们的客户一直对最终结果感到满意.

当然，如果你遗漏了这些要点，我就会插话, 当使用一个复杂的设计是合理的, 如果需要，我将用JavaScript编写呈现逻辑.

如果有必要，我会介入并向客户证明额外工作的合理性. 真见鬼, 多年来，我一直在设计基于已有设计的形式和交互性, 所以这不是问题.

我只是希望, 读完这篇文章，下次我们一起工作时，你会记住这些提示. 我希望它们能对你的工作有所帮助，并在你不知道该怎么做的时候提供指导. 我想让你明白我们的关系对我来说很重要我写这封信不是为了伤害你, 而是为了让我们的关系更好.

与爱,

前端开发人员