编写程序和设计美学需要一些非常不同的技能。因此，一些前端开发者并没有能够很好地再现设计人员的意图，忽略了设计美学以及易用性的一些细节。这篇文章旨在给前端开发人员提供一些实用的前端设计原则。
一、遵循设计而不是尝试挑战它
前端开发者应该集中精力在设计图的实现上-- 不要花太多精力考改进设计，这样会使你分心。
二、字体非常重要
字体对整体设计的影响非常大。字体并不是随意选择的。如果你需要自己选择字体，查找一下字体匹配（font pairing）相关的知识，在google font上选择合适的字体。通常，无衬线字体被用于标题，因为它更加显眼；有衬线字体被用于副标题和正文，因为它更适合阅读长段文字。
三、关系和层级
注意设计中元素的层级关系。标题和正文的间距有多近？它们离上一个正文有多远？设计师如何表明哪些元素、标题、文字内容是联系一起的，还是不是？通常它们会将相关的东西打包在一起，通过使用不同的空白，使用相近或对比的颜色去表现相关/不相关 关系。
四、注意空白和对齐
确保空白被正确地使用。如果一个设计的空白是20个单位的倍数，（20，40，60 ... ）那么它在整个设计中通常都是这样的。此外，确保你的元素准确地对齐到像素，间距一致或者是某个基数的整数倍。
使用长度可变的内容去检查实现是否能够适应所有情况。
五、像素精确非常重要
你应该尽量做到pixel-perfect（像素精确）。
六、前端设计要做全局考虑
在增添新的组件和内容的时候，先观察一下目前的页面。看看新增的内容会影响多少原本的设计，是否能够融入设计，是否需要调整其他内容。注意设计是许多要素一起得到一个整体的印象。
七、如果你不知道你该增加什么，少加一点
少即是多。让设计尽量简练。
八、时间愚弄了我们
设计师花了很多时间去扔掉那些不好的设计。设计可能有很多版本，它们看起来都不错。但是过了一段时间之后重新再看它们，它们之间的好坏便显露出来。因此花些时间去审视设计以及实现。
九、获取反馈
你应该找专业设计师去获得反馈。
十、学会使用一个图像处理软件
在一些场合下，设计师没能够提供所有的页面内容，这时候前端开发者就需要承担这部分的工作。你可以使用Photoshop或者Sketch，后者是专门用做前端界面的设计工具，因此即使是非专业设计人员也能很快上手。
总结
以下是一个列表总结了本文谈到的给前端开发者的设计要点：
- 按照设计图纸进行编程。尊重原来的设计，不要马上尝试去改进它。
- 字体非常重要。你应该花很多时间去确保它的效果正确。
- 理解组件的关系和层级，这样你才能更好地实现他们。
- 空白和对齐非常重要。尽量使他们准确，对所有你加入的东西都保持一致。
- 考虑到全局效果。不要太多地强调一个部分。
- 如果你对你的设计技能不是非常自信，尽量少加入你的个人设计。
- 花时间审视结果。过一段时间来再看看自己的设计。
- 尽量做到像素精准。
- 敢于向有经验的设计师请教。
- 学习使用图像处理软件进行设计。不要使用代码设计，即使是很小的一部分。
网友评论