给开发人员的10个前端设计规则


/**
 * 谨献给可爱的毛球
 *
 * 原文出处:https://www.toptal.com/front-end/front-end-design-principles
 * @author dogstar.huang <chanzonghuang@gmail.com> 2016-05-01
 */

作为前端开发人员,我的工作本质上是通过代码把设计转变成现实。理解,并且能够胜任是设计的重要组成部分。不幸的是,确切地理解前端设计,说起来容易做起来难。编码与美学设计需要一些非同寻常的技能。正因如此,一些前端开发并没像他们应该那样精通于设计方面,结果他们工作得步履维艰。

我的目标是给你一些来自于这些前端开发的容易遵循的规则和概念,他们可以帮助你从开始一个项目到完成一个项目,而不至于把设计者如此努力工作的项目给搞砸(或者甚至可能允许你通过体面的结果设计自己的项目)。

当然,这些规则不会在阅读一篇文章的时间内就能让你马上蜕变,但如果你能把他们应用到工作中,他们应该会产生很大影响。

1、在图形程序中干活

你完成了一个项目,并且从头到尾保持了设计文件中每一个美学突变是非常罕见的。不幸的是,设计者并不总在身边以至于不能跑过来快速修复。

所以,在任何前端工作中总会有最终你不得不作出一些美学相关的调整的时候。不管是在选中复选框时制作复选标记,还是在制作页面布局时缺少了PSD,前端人员通常最终需要处理这些看似次要的任务。当然,在一个完美的世界里是不会这样的,但我还没找到这样一个完美的世界,所以我们需要灵活一些。

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

对于这些情况,你应该总是为样品使用图形程序。我不关心你选择哪个工具:Photoshop,Illustrator,Fireworks,GIMP,或者其他。千万千万不要尝试通过代码来设计。花一点时间装载一个真正的图形程序并且弄明白它应该长什么样,然后用代码实现它。可能你不是设计专家,但最终仍然可以得到更好的结果。

2、适配设计,而非评击

你的工作不是为了让你的复选标记独特得有多令人印象深刻;你的工作是把它和其他的设计匹配起来。

那些没有大量设计经验的人很容易倾向于通过看似次要的细节把标记留在项目上。请把这些留给设计者。

开发人员要尽可能贴近地匹配原始的前端设计。

你应该问,“我的复选标记与设计有多匹配?”,而不是问“我的复选标记看起来令人惊叹不?”

你的关注点应该总是与设计工作,而不是试图超越它。

3、差异源于排版

你会惊讶地知道有多少设计的最终外观受到排版的影响。你更会惊讶地学到设计者花费了多少时间在这上面。这不仅要“挑完就走”(pick-it-and-go)的努力,还要投入一些正八经的时间和精力。

如果你卡在实际上需要选择排版的情况时,你应该花适当的时间这样做。上网搜索好的字体配对。花几个小时尝试这些配对并且确保你最终找到最好的项目排版。

这种字体适合项目吗?有疑问时,请教设计人员。

如果你和设计一些工作,那么确保你遵循了设计人员的排版选择。这也不是意味着选择字体。留意行间距,字间距。不要忽视与设计的排版匹配是多么的重要。

同样,确保在合适的位置使用了正确的字体。如果设计人员只在header中用Georgia,并且body中用Open Sans,那么你就不应该把Georgia用在body而把Open Sans用在header。排版可以很容易产生美观,但也可以很容易破坏。花足够的时间以确保匹配设计人员的排版。这是值得的。

4、前端设计绝不容许隧道愿景

你很可能会从事整体设计的一小部分。

隧道愿景对于前端开发是一个常见的问题。不要只关注某个细节,而应总是看着大的蓝图。

我已经讲过的一个例子是为包含自定义复选框设计制作复选标记,而没有显示他们被选中。记住你正在制作的是整体设计的一小部分是很重要的。让你的选中和在页面应该显示的复选标记一样重要,不多,也不少。不要只获取关于你那一小部分的隧道愿景,然后让它狗头不对马嘴。

事实上,对此一个好的技术是截取目前为止程序或者设计文件的快照,然后在在它将会用到的上下文中设计。那样的话,你会看到它如何影响页面上的其他设计元素,以及它是否正确地符合角色。

5、关系与层次结构

特别注意设计如何与层次结构工作。标题与body的文本离得有多近?他们离文本的上面有多远?设计人员是如何表明哪些元素/标题/文本主体是相关的,哪些不是?他们一般会通过把相关的内容拼击在一起,使用不同的空格表示关系,使用相似或对比色表示相关/无关的内容等来做这些事情。

好的前端开发人员会尊重设计的关系与层次结构。伟大的开发人员则理解他们。

确保你识别了设计完成关系与层次结构的方式,以及确保这些概念反映在最终产品中是你的工作(包括没有特别设计,并且/或者动态的内容)。这是另一块需要花费大量时间以确保你正在很好工作的领域(像排版)。

6、要对空白与对齐挑剔

这是提高你的设计并且/或者更好地实现他人的设计的一个伟大的技巧:如果设计似乎使用20个单位,40个单位。。。这样的空格,那么确保每个空格都是20个单位的倍数。

这对于缺少美学的人来说绝对是一个非常简单却能明显快速提高的方式。确保你的元素与像素对齐,并且围绕每个元素边沿的空格都是尽可能的规格一致。在那些做不到的地方(例如需要额外空格表示层次结构的地方),让他们变成是你在其他地方使用的空间的几倍,例如用默认值的两倍来创建一些分割,用三倍创建更多等等。

尽最大努力理解设计人员如何使用空格并且在前端构建中遵循这些概念。

大量的开发为设计文件中指定的内容实现了这一点,但当需要添加/编辑内容,或者实现动态内容时,空格到处都是因为他们并没有真正理解他们正在实现了什么。

尽最大努力理解设计人员如何使用空格并且在前端构建中遵循这些概念。并且,花点时间在这上面。一旦认为你的工作完成了,回头测量间距以确保你已经尽可能对齐和均匀间隔所有一切,然后用大量各种各样的内容来测试你的代码以确保它是灵活的。

7、如果不知道在做什么,做少一点

我不是那些认为每一个项目都应该使用极简主义设计的人,但如果你对所设计的没有信心却要添加一些东西,那么少即是多。

少即是多。如果你的设计师做了很好的工作,你应该克制注入自己的设计想法。

设计师关心主要的事务;而你只需要做次要的过滤。如果你不是非常擅于设计,那么一个好的赌注是尽可能做最少量的事情让元素工作。那样的话,你会注入更少自己的设计到设计人员的工作,以及尽可能地影响小。

以设计人员的工作为主,以你的工作为辅。

8、时间让我们全部人都变成了傻瓜

我会告诉你关于设计人员的一个秘密:实际上他们放到纸上或者Photoshop画布上90%(或者更多)的东西,都不是杰出的。

他们丢弃的比你所看到过的要远远多得多。为了得到能甚至让在邻近隔间的家伙看到他们工作的设计,更别提实际的客户,通常需要多次修改和设计摆弄。你通常不会在一步内就从一张空白的画布跳到一个好的设计;这两者之间需要大量的迭代。人们很少能很好地工作直到他们在过程中明白并与之融合了。

如果觉得设计可以再提升,咨询你的设计师。很可能他们已经尝试了类似的途径但决定不用之。

那么你怎样实现这些?一个重要的方法是在版本之间留点时间。工作到它看起来像你喜欢的那样,然后把它放到一边。给它几个小时(过夜很好),然后再次打开它看一眼。你会惊讶地发现通过新鲜的眼睛它看起来是多么的不同。你会快速取得提升。这些是如此清晰明显以至你会怀疑怎么可能在最初的地方错过他们。

事实上,我知道的更好的设计师之一把这个主意更进了一步。他会以三种不同的设计开始。然后,他会等待至少24个小时,再看他们并且把他们全扔出去,开始第四次。接着当它越来越好时,每一次迭代之间会有一天时间。只有当他有一天早晨打开它,并且是完全满意,或者至少,接近作为一位设计师未曾有过的完全满意时,他才会把它送给客户。这就是他用来创造设计的过程,并且收益颇丰。

我并不是期望你现在就这样,但没有“眼睛在设计上”的时间真的是非常重要。它是设计过程的一个组成部分,可以取得突飞猛进的改善。

9、像素之争

在完成的程序中,你应该做一切力所能及的事情以匹配原始的设计,直到最后一个像素。

前端开发人员应该尝试匹配原始设计直到最后一个像素。

在某些领域中你不可能是完美的。例如,对于字母间距的控制可能没有像设计师那样精通,CSS阴影可能没有完全匹配Photoshop那个,但你还是应该尽可能尝试接近。对于设计的很多方面,你真的可以得到完美的像素精度。这样做可以使最终结果与众不同。这里一个像素,那里一个像素,看起来并不是很多,但加起来的话可以影响比你想象得多的整体的美学。所以请注意它。

这里有很多可以帮助你对比原始设计和最终产物的工具,或者你也可以截取快照然后粘贴到设计文件来尽可能近地比较每个元素。把快照放置在设计上,做成半透明以便你可以看到不同的地方。然后你会知道需要作出多少调整。

10、获取反馈

获得一个“设计之眼”很难。自己一个人做它甚至更难。你应该寻求他人的投入,真正了解如何作出改善。

我不是建议你抓住邻居问建议,我的意思是你应该咨询真正的设计师,让他们批判你的工作并提供建议。

让设计师批判你的工作。好好使用他们的批评,而非对抗。

这样做需要一些勇气,但最终它是你可以在短期内改善项目,在长期上提升技能水平的最有用的事情之一。

即使你全部要开口问的是简单的复选标记,也会有大量的人愿意帮助你。无论是设计师的朋友,还是在线的论坛,寻求有质量的人并获得他们的反馈。

和你的设计师建立一个长期的、能生产的关系。这对于有用的反馈、质量和执行至关重要。

这可能听起来费时,而且可能会导致你和设计师之间的摩擦,但从大局上看,这是值得的。好的前端开发人员依赖于来自设计人员的有价值的输入,即使它并不是他们喜欢听到的东西的时候。

所以,和你的设计人员建立和维护一个积极的关系是至关重要的。你们在同一条船上,所以为了得到最大可能的结果你不得不就沿途上的每一个步骤进行协作与沟通。对和设计人员建立纽带的投资是值得的,因为它会帮助每个人更好的工作并且及时执行每件事。

结论

总得来说,这里简短地列出了针对前端开发人员的技巧:

  • 在图形程序中设计。不要在代码中设计,即便是很小的东西。
  • 匹配设计。与原始设计保持一致,不要试图改善它,而是要匹配它。
  • 排版量超大。花费在确保它是正确的时间应该能反映其重要性。
  • 避免隧道愿景。确保你的添加是恰如其分的。他们不会因为是你设计的就会变得更重要。
  • 关系与层次结构:理解他们在设计中是如何 工作的,以便你可以正确地实现他们。
  • 空格与对齐是重要的。让他们精确到像素,并使其最后都体现在你添加的任何东西里。
  • 如果对你的技能没有信心,那么使添加尽可能的少。
  • 在版本之间留点时间。晚点再回来用新鲜的眼睛看你的设计工作。
  • 完美像素的实现是重要的。
  • 勇敢点。寻求有经验的设计师批判你的工作。

并不是每个前端开发都会成为超级棒的设计人员,但每个前端开发都应该至少能在设计方面胜任。

你需要足够理解设计概念,以明确发生了什么,并正确将设计应用到最终产品。有时候,你可以远离盲目复制,如果已经有了一位彻底的设计师(并且如果你是面向足够的细节,一个像素一个像素复制的话)。

然而,为了使大型项目横跨众多内容变化而闪耀,你需要对什么经过了设计师的大脑有一定的了解。你不仅需要看到设计看起来像什么,还需要知道为什么它看起来要这样 ,这样的话你可以留意到会影响你工作的技术和美学的限制。

所以,即使作为一名前端开发人员,定期的自我提升的部分应该包括更多地学习设计。

dogstar

一位喜欢翻译的开发人员,艾翻译创始人之一。

广州