开发者的5项设计原则

设计是智能的可视化呈现。- Alina Wheeler，作者。
设计师的主要职责是设计应用/网站的前端视觉组件。他们的工作影响应用/网站的可用性和用户体验。

首先解决问题。然后，编写代码。- John Johnson
另一方面，开发者专注于编码思想和概念，以开发应用/网站的功能。

设计师和开发者是不同的人。在小公司中，他们的职责有重叠，在大公司中有时也会如此。开发者可以遵循几项原则来将产品推向生产。

CSS中的相对单位

利用em、rem和百分比有助于CSS样式在不同屏幕尺寸上的流畅性。

使用rem而不是像素作为单位。例如 section.hero {width: 90%; font-size: 1.5rem;} 而不是 section.hero {width: 900px; font-size: 16px;}

例如，如果你需要改变一个断点，你的宽度保持一致。你可以通过改变元素的字体大小来简单地改变任何元素的字体大小。

媒体查询和内容

内容决定了任何设备的断点，而不是设备宽度。

如果你考虑设备宽度，设备的发展速度呈指数级增长，作为开发者我们永远无法跟上。

我们需要为这个问题找到一个智能的解决方案，内容为我们提供了解决这个问题的机会。

@zomigi 第一个媒体查询实际上是对媒体查询不支持的缺失。— Bryan Rieger (@bryanrieger) 2011年12月1日

如果你感到有点迷茫，在决定行长时使用黄金比例字体计算器。

拥有内容断点的另一个重要方面是性能改进，因为一切看起来都运作良好，无需太多调试。

简洁是机智的灵魂。- Polonius

保持简短，保持简单。

首先列出功能

作为开发者，我们首先列出需要开发的功能。

大多数时候，当我们的工作与设计师重叠时，我们会迷失在视觉方面，而不是专注于手头的工作，即首先列出功能，然后处理其他方面。

你问自己的问题是你将产生什么类型输出的指标。

假设你问自己一个问题，"这应该向左还是向右浮动？"而不是"我可以通过哪些方式让用户感到舒适地使用应用？"

首先列出功能，然后设计。

线框图、设计、编码：按这个顺序

无论你做什么，首先在纸上或粗略线框图上做一个大致的草图。

然后进行带有配色方案、排版和视觉元素的设计。

最后一步是编码。

如果你遵循这个顺序，生产时间将会改进。

LT Browser - 响应式测试

你知道有一个浏览器可以测试应用或网站的响应式设计吗？它叫LT Browser（Lambda Test Browser）。

这是用于构建、测试和调试移动网站的下一代浏览器。

https://www.youtube.com/watch?v=RH95O9mOGoc

总结：

简而言之，作为开发者，这五项设计原则可以帮助你的网站或应用高效地运行，少去烦恼。