从垃圾设计到CRAP设计

有一个缩写词被用作网页设计的指南。CRAP（不幸的是，它在计算机科学中也有另一种用途）。它代表着对比、重复、对齐、接近。这只是在设计任何类型的界面时需要记住的四个基本要素。即使对于非设计人员来说，当你需要为你正在进行的任何项目设计一个基本的网页时，这也会有所帮助。

对比

对比的意思是使事物相互之间显得突出。你可能注意到，本节的标题 "对比 "是大而粗的。这使它与较小、较轻的正文形成对比。你也可以通过使文字变得强烈或强调来使其形成对比。链接通过不同的颜色（通常是蓝色）进行对比。本页的文字通过使用相反的颜色（白色和黑色）与背景形成对比。它有两个不同的东西，它们应该看起来不同。

如果你想让读者关注一个真正的大东西，那么就要让它与页面的其他部分形成对比。考虑一下下面这两页。

在左边，你很难立即分辨出你需要关注的是什么。在右边，最大的元素是标题，它让人非常清楚地知道会议是什么。接下来最重要的事情是后勤，也就是日期和时间。这就是为什么那是第二大的。这里的具体细节不太重要，所以我们可以把它做得更小。

重复性

当然，如果你写的是应该按顺序阅读的文字，比如小说，那么你就不需要太多的对比。你不希望在不需要对比的情况下用对比来打断读者的阅读。如果你想让人读完整篇文章，那么平淡一点也没关系。

重复也可以用于将相关的想法联系在一起。想象一下，如果这篇文章的所有段落都是不同的颜色。这将是一个非常刺耳的体验。你不会知道是否有任何段落是相互关联的。

导航系统也应该是重复的。用户不希望为每一个页面都学习如何使用一个全新的系统。事实上，你网站的所有页面应该看起来非常相似，因为这是同一个网站。这包括任何标识、颜色方案、排版和布局。

对齐

你的页面的所有元素都应该相互排成一排。这些元素可以在左边、右边和中间对齐。通常情况下，你不希望混合排列。你要选择一种并坚持下去。

很多非设计人员在这方面有困难。把所有的文字放在不同的地方来炫耀是很诱人的，但这看起来很糟糕。最容易使用的对齐方式是居中，因为它很好，而且是对称的。虽然，大多数人都习惯于左对齐。

另外，请不要撞到边缘。每当你想移动到下一行时，这对眼睛来说是很烦人的。

接近性

如果两个项目是相关的，它们应该是靠近的。靠近的元素看起来是相关的。避免因分离而使你的元素成为孤儿。

这张图片看起来与文本有关，因为它离文本很近。这张截图并不能完全说明问题，但相信我，这很有效。如果图片相隔几百个像素，读者可能会认为图片与文字没有关系。

使用正确的接近度有助于给页面带来结构。部分主页被分成不同的部分（双关语不是故意的）。每个部分都说明了一个不同的观点。如果上面的图片说的是谁在使用它，那么把它放在离上面的文字这么近的地方就没有意义了。

结论

重要的是要注意，你可以打破其中的一些规则，仍然有一个看起来很体面的网站。看看 "名词试验场"吧。

这比三种颜色要多得多，但它仍然有效（也许。 也许一些色彩理论家会为此来骂我）。这些颜色实际上有些相似。它们中的大多数都有一个略微明亮，但又沉闷的外观。

不过在大多数情况下，这四个规则是你应该坚持的。如果你是一个需要网站的非设计人员，这对你应该是非常有用的。

如果你想看看这篇文章中的一些例子的CodePen，给你。实际上，我是在做完所有的例子之后才做的这个CodePen。如果有些字不一样，这就是原因。