兔课网——9种基本原则教你如何做好网页设计！

1、优先(引导眼睛)好的Web设计，甚至可能比其他类型的设计更多的是关于信息的。在你的武器库中，其中一个最大的工具就是优先...当浏览一个好的设计时，用户应该由设计者带领在屏幕周围。我称之为优先权，它是关于设计中不同部分的视觉重量。优先级的一个简单例子是，在大多数站点中，您首先看到的是徽标。这通常是因为它很大，并且在研究中表明它是人们首先看的地方(左上角)。他的是一件好事，因为你可能希望用户立即知道他们正在查看的网站。但优先权应该更进一步。您应该引导用户的眼睛通过一系列的步骤。例如，您可能希望您的用户从徽标/品牌转到主定位语句，旁边是一个有冲击力的图像(以赋予站点的个性)，然后是主体文本，导航和侧边栏在序列中占据次要位置。你的用户应该看什么是由你，网页设计师，找出。为了获得优先权，您可以使用许多工具：位置-页面上某物的位置明显影响用户看到它的顺序。颜色-使用粗体和微妙的颜色是一种简单的方式来告诉你的用户在哪里看。反差-与众不同使事情变得突出，而同样的情况则使它们处于次要地位。大小-大优先于小(除非一切都很大，在这种情况下，由于对比，几乎没有什么能脱颖而出)设计要素-如果有一个巨大的箭头指向某物，猜猜用户会看哪里？

3、间距当我第一次开始设计的时候，我想把所有可用的空间都填满。空旷的空间似乎是浪费的。事实上，事实恰恰相反。间隔使事情更清晰。在Web设计中，您应该考虑空间的三个方面：行距在布局文本时，行之间的空格直接影响到它的可读性。空间太小使你的眼睛很容易从一行延伸到另一行，太大的空间意味着当你完成一行文字并转到下一行时，你的眼睛可能会迷路。所以你需要找到一个快乐的媒介。您可以用“线高”选择器控制CSS中的行间距。一般来说，我发现默认值通常是间隔太小。行距在技术上称为先导(发音为“Ledding”)，它源于打印机在过去的日子里用来分隔文本行的过程--在线条之间放置铅条。填充物一般来说，文本不应触及其他要素。例如，图像不应该触及文本，边框或表格也不应该。填充是元素和文本之间的空格。这里的简单规则是你应该总在那里有空间。当然也有例外，特别是如果文本是某种标题/图形。空白首先，空白不需要是白色的。这个术语仅仅是指页面上的空空间(或者有时称为负空间)。空白是用来给出平衡，比例和对比的一页。大量的空白往往会使事物看起来更加优雅和高档，因此，例如，如果您选择一个昂贵的建筑工地你几乎总能看到很多地方。如果你想学习如何有效地使用空格，请浏览一本杂志，看看广告的布局。大型品牌的手表和汽车等广告往往会有大量的空白空间作为设计元素。

5、建筑设计自从Web设计人员过渡到CSS布局以来，生活变得轻松多了，但是即使是现在，当你还在Photoshop的时候，思考如何构建一个站点仍然是很重要的。考虑如下：真的能做到吗？你可能已经为你的身体副本选择了一个很棒的字体，但是它实际上是一个标准的HTML字体吗？您可能有一个设计，看起来很漂亮，但是1100 px宽，并将产生一个水平滚动为大多数用户。重要的是要知道什么可以做什么不能做，这就是为什么我相信所有的网站设计师也应该建立网站，至少有时如此。当屏幕调整大小时会发生什么？你需要重复背景吗？它们将如何工作？设计是以设计为中心还是以左对齐？你做了什么技术上困难的事吗？即使使用CSS定位，一些东西，如垂直对齐仍然有点痛苦，有时最好避免。你的设计中的小改动能大大简化你如何构建它吗？有时，在设计中移动对象会对以后编写CSS代码的方式产生很大影响。特别是，当设计元素相互交叉时，它为构建增加了一些复杂性。因此，如果您的设计有三个元素，并且每个元素是完全独立的，那么构建起来就非常容易。另一方面，如果这三者相互重叠，它可能仍然很容易，但可能会更复杂一些。您应该在看起来好的和可以简化您的构建的小更改之间找到一个平衡。特别是对于大型网站，你能简化吗？有一段时间，我经常为我的网站制作图像按钮。例如，如果有一个下载按钮，我会制作一个下载图像。在过去的一年左右，我已经切换到使用CSS来做我的按钮，从来没有回头。当然，这意味着我的按钮并不总是有我想要的灵活性，但是不用制作几十个按钮图像可以节省构建时间。

6、排版文字是设计中最常见的元素，所以对它进行大量的思考也就不足为奇了。重要的是要考虑这样的事情：字体选择-不同类型的字体对设计有不同的看法。有些看上去很现代，有些看起来很复古。确保你在工作中使用了正确的工具。字体大小-几年前，使用非常小的文本是一种时髦的做法。令人高兴的是，现在人们已经开始意识到，文本是用来阅读的，而不仅仅是阅读。确保你的文本大小是一致的，足够大，可以阅读，并按比例，以便标题和副标题突出适当。间隔-如前所述，行与远离其他对象之间的间隔是很重要的考虑因素。您还应该考虑字母之间的间隔，尽管在Web上这一点不太重要，因为您没有太多的控制能力。线长-没有硬性的规则，但一般来说，你的文字行不应该太长。他们越长，他们就越难阅读。小栏目的文字效果要好得多(想想报纸是如何布置文本的)。颜色-我最坏的习惯之一就是做低对比度的文字。它看上去不错，但读得不太好，不幸的是。尽管如此，我似乎对我做过的每一个网站设计都是这样做的。分段-在我开始设计之前，我喜欢在每件事上证明这篇文章是正确的。它在我的段落两边都有很好的边缘。不幸的是，正确的文本往往会在单词之间造成奇怪的空白。当你阅读的时候，这对你的眼睛不太好，所以，除非你碰巧有一个神奇的文本身体，恰好是完美的空间，否则就坚持左对齐。

8、对齐在网页设计和印刷设计中，保持整齐是同样重要的。这并不是说一切应该是一条直线，但你应该通过，并试图保持在一页上一致的东西。调整使您的设计更有序和可消化，以及使它看起来更抛光。您也可能希望将您的设计建立在特定的网格上。我必须承认，我并没有意识到这一点--尽管很明显，像Psdtuts+这样的站点确实有一个非常牢固的网格结构。今年，我看到了一些关于网格设计的非常好的文章，包括SmashingMagazine的基于网格的设计方法一份分开的清单网格外思维...事实上，如果您对网格设计感兴趣，一定要访问DesignByGrid.com无所不包的家。

10、一致性一致性意味着使一切都匹配。标题大小，字体选择，颜色，按钮样式，间距，设计元素，插图样式，照片选择等等。所有的东西都应该是主题，以使你的设计在页面之间和页面上保持一致。保持你的设计一致是关于专业的。设计中的不一致就像文章中的拼写错误。他们只是降低了对质量的感知。不管你的设计是什么样子，保持它的一致性总是会使你的设计提高一个档次。即使这是一个糟糕的设计，至少让它成为一个一致的，糟糕的设计。保持一致性的最简单的方法是尽早做出决定并坚持下去。然而，有了一个非常大的站点，设计过程中的事情就会发生变化。当我设计FlashDen例如，这个过程花了几个月的时间，到最后，我对按钮和图像的一些想法已经改变了，所以我不得不回去修改以前的页面，以便与后面的页面完全匹配。拥有一组很好的CSS样式表也可以帮助您进行一致的设计。尝试定义诸如<h1>和<p>这样的核心标记，以便使您的缺省值正确匹配，并避免始终记住特定的类名。