开发者的十大前端设计规则

作为前端开发人员，我们的工作本质上是通过代码将设计变为现实。 理解并胜任设计是其中的重要组成部分。 不幸的是，真正理解前端设计说起来容易做起来难。 编码和美学设计需要一些完全不同的技能。 正因为如此，一些前端开发人员在设计方面没有达到应有的水平，因此，他们的工作受到了影响。

我的目标是为您提供一些易于遵循的规则和概念，从一个前端开发人员到另一个前端开发人员，这将帮助您从头到尾完成一个项目，而不会弄乱您的设计师如此努力的工作（或者可能甚至允许您设计自己的项目并取得不错的结果）。

当然，这些规则不会让你在阅读一篇文章的时间里从糟糕到出色，但如果你将它们应用到你的工作中，它们应该会产生很大的不同。

在图形程序中做事

完成一个项目并从头到尾同时保持设计文件中的每一个美学变化的情况确实很少见。 而且，不幸的是，设计师并不总是到处跑来快速解决问题。

因此，在任何前端工作中总会有一个点，您最终不得不进行一些与美学相关的调整。 无论是选中复选框时显示的复选标记，还是制作 PSD 遗漏的页面布局，前端人员通常最终都会处理这些看似微不足道的任务。 当然，在一个完美的世界中不会这样，但我还没有找到一个完美的世界，因此我们需要灵活。

对于这些情况，您应该始终使用图形程序来制作模型。 我不在乎您选择哪种工具：Photoshop、Illustrator、Fireworks、GIMP 等等。 只是不要试图从您的代码中进行设计。 花一分钟时间启动一个真正的图形程序并弄清楚它应该是什么样子，然后转到代码并实现它。 您可能不是专家设计师，但您仍然会得到更好的结果。

匹配设计，不要试图打败它

你的工作不是让你的复选标记的独特性给人留下深刻印象； 您的工作是将其与设计的其余部分相匹配。

那些没有太多设计经验的人很容易被诱惑在项目上留下看似微不足道的细节。 请把它留给设计师。

而不是问“我的复选标记看起来很棒吗？” 您应该问：“我的复选标记与设计的匹配程度如何？”

您的重点应该始终放在设计上，而不是试图超越它。

排版使一切变得不同

你会惊讶地知道设计的最终外观有多少受到排版的影响。 你会惊讶地发现设计师花了多少时间在上面。 这不是“一劳永逸”的努力，需要投入大量的时间和精力。

如果你最终不得不选择排版，你应该花很多时间来做这件事。 上网并研究好的字体配对。 花几个小时尝试这些配对，并确保您最终获得项目的最佳排版。

如果您正在使用设计，请确保遵循设计师的排版选择。 这也不仅仅意味着选择字体。 注意行距、字母间距等。 不要忽视与设计的排版相匹配的重要性。

另外，请确保在正确的位置使用正确的字体。 如果设计人员仅将 Georgia 用于标题，而将 Open Sans 用于正文，那么您不应该将 Georgia 用于正文，将 Open Sans 用于标题。 排版可以很容易地创造或破坏美学。 花足够的时间确保您与设计师的排版相匹配。 这将是美好的时光。

前端设计不能容忍隧道视觉

您可能会制作整体设计的一小部分。

我一直在使用的一个示例是对包含自定义复选框的设计进行复选标记，而不显示它们已选中。 重要的是要记住，您正在制作的零件只是整体设计的一小部分。 使您的检查与页面上的复选标记一样重要，看起来不多也不少。 不要对你的一小部分有狭隘的看法，让它成为不应该的东西。

事实上，这样做的一个好方法是截取到目前为止的程序或设计文件的屏幕截图，并在其中设计，在将要使用的上下文中。 这样，您就可以真正看到它如何影响页面上的其他设计元素，以及它是否适合其角色。

关系和层次结构

特别注意设计如何与层次结构一起工作。 标题与正文的距离有多近？ 它们与上面的文字相距多远？ 设计师似乎是如何指示哪些元素/标题/文本主体相关而哪些不相关？ 他们通常会通过将相关内容组合在一起、使用不同的空白来指示关系、使用相似或对比色来指示相关/不相关内容等来完成这些事情。

您的工作是确保您认识到设计实现关系和层次结构的方式，并确保这些概念反映在最终产品中（包括非专门设计的内容和/或动态内容）。 这是另一个领域（如排版），需要额外的时间来确保你做得很好。

对空白和对齐保持挑剔

这是改进您的设计和/或更好地实施其他设计的一个很好的提示：如果设计似乎使用 20 个单位、40 个单位等的间距，那么请确保每个间距都是 20 个单位的倍数。

对于没有审美眼光的人来说，这是一种非常简单的方法，可以快速做出重大改进。 确保您的元素向下对齐到像素，并且每个元素的每个边缘周围的间距尽可能均匀。 在您不能这样做的地方（例如需要额外空间来指示层次结构的地方），使它们与您在其他地方使用的间距完全相同，例如两倍于您的默认值以创建一些分隔，三倍以创建更多， 等等。

许多开发人员针对设计文件中的特定内容实现了这一点，但是当涉及到添加/编辑内容或实现动态内容时，间距可能会遍布整个地方，因为他们并不真正了解他们所实现的内容。

尽力了解设计师如何使用空格并在构建中遵循这些概念。 是的，花时间在这上面。 一旦您认为您的工作已经完成，请返回并测量间距以确保您已尽可能对齐并均匀间隔所有内容，然后尝试具有大量不同内容的代码以确保其灵活。

如果你不知道自己在做什么，那就少做点

我不是那种认为每个项目都应该使用极简设计的人，但如果你对自己的设计能力没有信心并且需要添加一些东西，那么少即是多。

设计师负责主要的东西； 你只需要做一些小的填充物。 如果你不是很擅长设计，那么最好的办法是尽可能少地完成该元素的工作。 这样一来，您就可以在设计师的作品中注入更少的自己的设计，并尽可能少地影响它。

让设计师的工作占据中心位置，让您的工作处于次要地位。

时间使我们所有人都成为傻瓜

我要告诉你一个关于设计师的秘密：90%（或更多）他们实际写在纸上或 Photoshop 画布上的东西并不是那么好。

他们丢弃的东西比你看到的要多得多。 通常需要对设计进行多次修改和摆弄，才能让他们甚至让隔壁隔间里的人看到他们的工作，更不用说真正的客户了。 您通常不会一步一步从空白画布变成好的设计； 中间有一堆迭代。 在他们理解这一点并在他们的过程中允许它之前，人们很少会做出好的工作。

那么如何实现呢？ 一种重要的方法是在版本之间花费时间。 工作直到它看起来像你喜欢的东西，然后把它收起来。 给它几个小时（让它过夜更好），然后再次打开并查看。 你会惊讶于它与新鲜的眼睛看起来有多么不同。 你会很快挑选出需要改进的地方。 他们会很清楚，你会想知道你怎么可能一开始就错过了他们。

事实上，我认识的一位更好的设计师将这个想法更进一步。 他将从制作三种不同的设计开始。 然后，他会等待至少 24 小时，再次查看它们，然后将它们全部扔掉，然后从头开始第四次。 接下来，他会在每次迭代之间留出一天，因为它会越来越好。 只有当他有一天早上打开它，并且非常高兴，或者至少，像设计师一样接近完全高兴时，他才会将它发送给客户。 这是他用于他所做的每一个设计的过程，这对他很有帮助。

我不希望你能走得那么远，但它确实突出了没有“关注设计”的时间是多么有用。 它是设计过程中不可或缺的一部分，可以实现跨越式的改进。

像素很重要

你应该尽你所能在你完成的程序中匹配原始设计，直到最后一个像素。

在某些方面，你不可能做到完美。 例如，您对字母间距的控制可能不如设计师的精确，CSS 阴影可能与 Photoshop 的阴影不完全匹配，但您仍应尝试尽可能接近。 对于设计的许多方面，您确实可以获得像素级的精确度。 这样做可以对最终结果产生很大影响。 一个像素在这里和那里似乎并不多，但它加起来并比你想象的更影响整体美感。 所以请密切关注。

有许多 [工具] 可以帮助您将原始设计与最终结果进行比较，或者您可以截取屏幕截图并将其粘贴到设计文件中，以尽可能接近地比较每个元素。 只需将屏幕截图放在设计上并使其半透明，以便您可以看到差异。 然后你就知道你需要做多少调整才能让它正确。

得到反馈

很难获得“设计之眼”。 自己做就更难了。 您应该寻求他人的意见，以真正了解如何进行改进。

我不是建议你找你的邻居征求意见，我的意思是你应该咨询真正的设计师，让他们批评你的工作并提供建议。

这样做需要一些勇气，但归根结底，这是你可以做的最有力的事情之一，可以在短期内改进项目，从长远来看提高你的技能水平。

即使您只需要微调一个简单的复选标记，也有很多人愿意帮助您。 无论是设计师朋友，还是在线论坛，寻找合格的人并获得他们的反馈。

这可能听起来很耗时，并且可能会在您和您的设计师之间造成摩擦，但从大的计划来看，这是值得的。 优秀的前端开发人员依赖于设计师的宝贵意见，即使这不是他们喜欢听到的。

因此，与您的设计师建立并保持建设性的关系至关重要。 你们都在同一条船上，所以为了获得最好的结果，你必须在每一步进行协作和沟通。 与您的设计师建立联系的投资是非常值得的，因为它将帮助每个人做得更好并按时执行一切。

结论

总而言之，这里是前端开发人员的设计技巧的简短列表：

• 在图形程序中设计。 不要从代码设计，即使是小东西。
• 匹配设计。 注意原始设计，不要试图改进它，只需匹配它。
• 排版很大。 你花在确保它正确上的时间应该反映它的重要性。
• 避免隧道视野。 确保您添加的内容尽可能突出。 它们并不因为你设计它们而更重要。
• 关系和层次结构：了解它们在设计中的工作方式，以便您可以正确实施它们。
• 空白和对齐很重要。 使它们精确到像素，并使它们均匀地分布在您添加的任何内容中。
• 如果您对自己的技能没有信心，请尽可能减少添加的样式。
• 在修订之间花点时间。 稍后再回来以全新的眼光看待您的设计作品。
• 尽可能实现像素完美是很重要的。
• 勇敢起来。 寻找有经验的设计师来评论你的作品。

不是每个前端开发人员都会成为出色的设计师，但每个前端开发人员至少应该在设计方面胜任。

您需要对设计概念有足够的了解，才能确定正在发生的事情，并将设计正确地应用于您的最终产品。 有时，如果你有一个彻底的设计师（并且如果你足够注重细节以真正逐个像素地复制它），你可以避免盲目复制。

然而，为了使大型项目在内容的多种变化中大放异彩，您需要对设计师的想法有所了解。 您不仅需要查看设计的外观，还需要知道为什么它看起来会这样，这样您就可以注意会影响您的工作的技术和美学限制。

因此，即使作为前端开发人员，您定期自我提升的一部分也应该始终包括学习更多关于设计的知识。