开发人员的十大前端设计规则

本文概述

• 在图形程序中做事
• 匹配设计, 不要试图击败它
• 排版使一切都不同
• 前端设计不能容忍隧道视觉
• 关系和层次结构
• 留意空白和对齐
• 如果你不知道自己在做什么, 那就少做些
• 时间使我们所有人愚弄
• 像素问题
• 得到反馈
• 总结

作为前端开发人员, 我们的工作实质上是通过代码将设计变为现实。了解并胜任设计是其中的重要组成部分。不幸的是, 真正理解前端设计说起来容易做起来难。编码和美学设计需要一些完全不同的技能。因此, 一些前端开发人员不具备应有的设计能力, 结果使他们的工作遭受损失。

我的目标是为你提供一些易于遵循的规则和概念, 从一个前端开发人员到另一个前端开发人员, 这些规则和概念将帮助你从项目的开始到完成, 而不会弄乱你的设计师所做的努力(或者可能甚至允许你设计出效果不错的项目)。

当然, 这些规则不会使你在阅读一篇文章时从糟到糟, 但是如果将它们应用于你的工作, 它们将产生很大的变化。

在图形程序中做事

你完成一个项目, 并从头到尾地完成设计文件中的每一个美学变化, 这确实是很少见的。而且, 不幸的是, 设计师并不总是四处寻找快速修复的方法。

因此, 在任何前端工作中总会有一个要点, 即你最终不得不进行一些与美学相关的调整。无论是选中复选框时显示选中标记, 还是制作PSD丢失的页面布局, 前端处理程序通常最终都会处理这些看似很小的任务。自然, 在理想世界中并非如此, 但是我还没有找到一个理想世界, 因此我们需要保持灵活性。

一个好的前端开发人员必须使用专业的图形工具。不接受替代品。

鸣叫

对于这些情况, 你应始终使用图形程序进行模型设计。我不在乎你选择哪种工具：Photoshop, Illustrator, Fireworks, GIMP等。只是不要仅仅尝试根据你的代码进行设计。花一点时间启动一个真实的图形程序, 弄清楚它的外观, 然后转到代码并实现它。你可能不是专家设计师, 但最终仍会获得更好的结果。

匹配设计, 不要试图击败它

你的工作不是要打勾标记的独特性。你的工作就是将其与设计的其余部分匹配。

那些没有太多设计经验的人很容易被诱使他们在项目上留下看似很小的细节。请把它留给设计师。

开发人员必须尽可能接近原始的前端设计。

鸣叫

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

你的焦点应该始终放在设计上, 而不是试图超越设计。

排版使一切都不同

你会惊讶地知道设计的外观在很大程度上受到排版的影响。得知设计师花了多少时间, 你也会感到惊讶。这不是”即取即走”的工作, 需要花费大量时间和精力。

如果你最终不得不选择版式, 那么应该花很多时间。上网并研究良好的字体配对。花几个小时尝试这些配对, 并确保最终获得该项目的最佳排版。

该字体适合你的项目吗？如有疑问, 请咨询设计师。

鸣叫

如果你使用的是设计, 请确保遵循设计师的字体选择。这也不仅仅意味着选择字体。注意行间距, 字母间距等。不要忽略匹配设计字体的重要性。

另外, 请确保在正确的位置使用正确的字体。如果设计人员仅将Georgia用于标题, 将Open Sans用于主体, 则不应将Georgia用于主体, 将Open Sans用于标题。排版可以轻松地使美学成败。花足够的时间来确保你与设计师的字体匹配。这将是度过的美好时光。

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

你可能会在整体设计中占很小的一部分。

隧道视觉是前端开发人员的常见陷阱。不要只关注单个细节, 而要着眼全局。

鸣叫

我正在处理的一个示例是为包含自定义复选框的设计打勾, 而未将其选中。请务必记住, 你制作的零件只是整体设计的一小部分。使你的检查与页面上的复选标记一样重要, 一点也不要少。不要对你的一小部分有任何洞察力, 而应将其变成不应该的。

实际上, 执行此操作的一种好方法是截取到目前为止的程序或设计文件的屏幕快照, 并在要使用它的上下文中在其中进行设计。这样, 你便可以真正看到它如何影响页面上的其他设计元素, 以及它是否适合自己的角色。

关系和层次结构

特别注意设计如何与层次结构一起使用。标题与正文之间的距离有多近？它们与上方的文字有多远？设计者似乎如何指示哪些元素/标题/文本正文是相关的, 哪些不相关？他们通常会通过将相关内容装箱在一起, 使用不同的空白空间来表示关系, 使用相似或对比色来指示相关/不相关的内容, 等等, 来完成这些操作。

一个好的前端开发人员将尊重设计关系和层次结构。优秀的开发人员会理解它们。

鸣叫

你的工作是确保你了解设计完成关系和层次结构的方式, 并确保这些概念反映在最终产品中(包括非专门设计的内容和/或动态内容)。这是另一个领域(例如印刷术), 需要花费额外的时间来确保你做得很好。

留意空白和对齐

这是改善你的设计和/或更好地实施其他设计的一个很好的技巧：如果设计似乎使用20个单位, 40个单位等的间距, 则请确保每个间距都是20个单位的倍数。

对于那些不注重美学的人来说, 这是一种简陋的简单方法, 可以迅速做出重大改进。确保元素向下对齐像素, 并且每个元素的每个边缘周围的间距应尽可能均匀。在你无法执行此操作的地方(例如需要额外空间来指示层次结构的地方), 请使其精确地等于你在其他位置使用的间距的倍数, 例如默认值的两倍以创建一些分隔, 三倍的以创建更多的分隔, 等等。

尽最大努力了解设计师如何使用空白, 并在前端构建中遵循这些概念。

鸣叫

许多开发人员都针对设计文件中的特定内容实现了这一目标, 但是当涉及添加/编辑内容或实现动态内容时, 由于他们并没有真正了解自己正在实现的内容, 因此可能会无处不在。

尽力了解设计师如何使用空白并在构建中遵循这些概念。是的, 花点时间在这上面。一旦你认为自己的工作已经完成, 请返回并测量间距, 以确保所有内容都尽可能对齐并均匀地隔开, 然后尝试使用包含多种内容的代码, 以确保其灵活。

如果你不知道自己在做什么, 那就少做些

我不是那些认为每个项目都应该使用简约设计的人, 但是如果你对设计不满意, 并且需要添加一些东西, 那就少了。

少即是多。如果你的设计师在开始时做得很好, 则应该避免注入自己的设计思想。

鸣叫

设计师负责主要工作。你只需要做少量填充物。如果你不是很擅长设计, 那么最好的办法就是尽量减少使用该元素。这样一来, 你就可以将自己的设计减少到设计师的作品中, 并尽可能少地对其产生影响。

让设计师的作品占据中心位置, 让你的作品成为后座。

时间使我们所有人愚弄

我会告诉你一个关于设计师的秘密：他们实际放在纸或Photoshop画布上的90％(或更多)并不是那么好。

他们丢弃的垃圾比你看到的要多得多。通常需要进行多次修改并摆弄一个设计, 以使他们甚至可以让下一个隔间的人看到他们的工作, 而不必理会真正的客户。通常, 你通常不会一步一步地从一块空白的画布转到好的设计；之间有很多迭代。人们很少会做好工作, 直到他们了解并在工作中允许这样做为止。

如果你认为可以改进设计, 请咨询你的设计师。他们可能已经尝试过类似的方法, 但决定反对。

鸣叫

那么如何实现呢？一种重要的方法是在版本之间花费时间。工作直到看起来像你喜欢的东西, 然后将其收起来。给它几个小时(让它过夜更好), 然后再次打开并看一看。你会惊讶地发现它与众不同的外观。你将快速选择需要改进的地方。他们会非常清楚, 你会首先想知道你是如何错过他们的。

实际上, 我认识的一位更好的设计师将这一想法推了很多。他将从进行三种不同的设计开始。然后, 他将至少等待24小时, 再看一遍, 将它们全部扔掉, 然后从头开始。接下来, 他会在每次迭代之间留出一天的时间, 因为它越来越好。只有当他在一个早晨打开它, 并且非常开心, 或者至少像设计师变得完全开心时, 他才会将其发送给客户。这是他在制作每个设计时都使用的过程, 对他非常有用。

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

像素问题

你应该尽一切力量匹配最终程序中的原始设计, 直到最后一个像素。

前端开发人员应尝试将原始设计缩小到最后一个像素。

鸣叫

在某些领域, 你可能并不完美。例如, 你对字母间距的控制可能不如设计者那样精确, 并且CSS阴影可能与Photoshop阴影不完全匹配, 但你仍应尝试尽可能地接近。在设计的许多方面, 你确实可以获得像素完美的精度。这样做可以在最终结果中产生很大的不同。到处都是一个像素, 看起来似乎不多, 但它加起来并影响整体美观, 远超出你的想象。因此, 请密切注意。

有很多[工具]可以帮助你将原始设计与最终结果进行比较, 或者你可以截取屏幕截图并将其粘贴到设计文件中以尽可能地比较每个元素。只需将屏幕截图放在设计上, 并使其半透明即可看到差异。然后, 你知道必须进行多大的调整才能发现它。

得到反馈

很难获得”设计眼”。独自做就更难了。你应该征询其他人的意见, 以真正了解如何进行改进。

我并不是建议你抓住邻居并寻求建议, 而是要咨询真正的设计师, 并让他们批评你的工作并提供建议。

让设计师批评你的作品。充分利用他们的批评, 不要与他们对抗。

鸣叫

这样做需要一定的勇气, 但最终, 这是你可以在短期内改善项目并从长远来看提高技能水平的最有力的事情之一。

即使你只需要微调一个简单的对勾, 也有很多人愿意为你提供帮助。无论是设计师朋友还是在线论坛, 都要寻找合格的人并获得他们的反馈。

与你的设计师建立长期, 富有成效的关系。这对于获得有用的反馈, 质量和执行至关重要。

鸣叫

这听起来可能很耗时, 并且可能会引起你与设计师之间的摩擦, 但是从大范围来看, 这是值得的。优秀的前端开发人员依靠设计师的宝贵意见, 即使他们不喜欢听到这些意见。

因此, 与你的设计师建立并维持建设性关系至关重要。你们都在同一条船上, 因此, 要获得最佳结果, 你必须进行协作和交流每一步。与你的设计师建立联系的投资是值得的, 因为它将帮助每个人做得更好, 并按时执行所有操作。

总结

总结一下, 这是为前端开发人员设计的简短提示列表：

• 在图形程序中进行设计。不要用代码设计, 甚至不要用小东西。
• 匹配设计。请注意原始设计, 不要尝试对其进行改进, 只需对其进行匹配即可。
• 字体很大。你花费在确保正确性上的时间应该反映出它的重要性。
• 避免视野开阔。确保你添加的内容仅在应有的范围内突出。它们并不仅仅因为你设计了它们就更重要。
• 关系和层次结构：了解它们在设计中的工作方式, 以便你可以正确地实现它们。
• 空格和对齐方式很重要。使它们精确到像素, 并使它们在添加的所有内容中均匀分布。
• 如果你对自己的技能不满意, 那么请尽可能减少样式。
• 在两次修订之间需要时间。稍后再回来, 以崭新的眼光看你的设计作品。
• 尽可能完美地实现像素非常重要。
• 勇敢起来。寻找经验丰富的设计师来批评你的作品。

并非每个前端开发人员都将成为出色的设计师, 但每个前端开发人员至少应在设计方面胜任。

你需要对设计概念有足够的了解, 以识别正在发生的事情, 并将设计正确应用于最终产品。有时候, 如果你有一个全面的设计师(并且你的细节定位足以完全逐像素复制), 则可以避免盲目复制。

但是, 为了使大型项目能够在内容的多种变化中脱颖而出, 你需要对设计师的想法有所了解。你不仅需要查看设计的外观, 还需要知道外观的外观, 并因此可以留意会影响你工作的技术和美学限制。

因此, 即使作为前端开发人员, 你定期进行自我完善的一部分也应始终包括对设计的更多了解。

相关：设计原理：层次结构简介