网页设计的五条规则

简介：你知道网页设计有相应的规则吗？以下是小编整理的网页设计五大法则，欢迎参考阅读！

平衡

很难获得平衡感。网页上有两种平衡——对称和不对称。我们都习惯于看对称的画面，就像我们小时候剪纸花一样，我们会把两面剪在一起，这样开口就是对称的。这种对称的平衡很容易识别（反正都是镜像的），但在不对称的构图中很难实现平衡。

下面是两个示例：

图1

不对称平衡

图 1 说明了几个地方不对称平衡背后的一些重要原理。你看，狗狗的图片是主要的，狗狗身上的黑色都压在画面的左侧，然后图片的右侧出现了一个X，看似是随机的灰色X，却是平衡画面的关键因素！这样，您的眼睛就会被吸引到图片的中间。除了图表之外，在网页的标题中也是如此，其中菜单栏的大小和颜色相对较重。然后在logo中，应用黑白背景，然后在其中添加一条黑线，使顶部和底部相对平衡。

图 2：苹果

对称平衡

苹果是现代网页中对称和平衡的一个很好的例子。如图2所示苏州网站定制，每个元素都排列在中轴线的两侧，营造出视觉和谐的场景。

比较

对于网页元素来说，不仅仅是看得清楚，或者文本有多长，它的排列方式与网页的平衡有很大关系。

例如，当你浏览一个两栏的网页时，你通常会发现右边的框比左边的框大，并且其中放置了一些关键信息。这是由人们的视觉习惯决定的——即使文本框放在左边，目录等元数据放在右边，他们也会不自觉地向右看。因此，元数据占用右侧空间并不是很科学。有些人喜欢每列宽度相同的网格布局，如图 1 所示，而另一些人可能更喜欢黄金比例，即右侧框的 1.62 倍于左侧框。

有些网页的设计仅按重要性程度按比例设计

尾

在此页面上，元素的比例得到了很好的控制。不仅视觉层次很好，而且感官层次也很好。从产品标志（1）开始，然后引导用户的行为（2），然后转到文字密集的介绍（3），布局合理。图像和文字混合的区域，标题的权重与文字分开，与左侧图标的关系非常重要。当你看到这个页面时，你也会觉得整个事情非常和谐。

节奏

这

网页上的节奏感非常重要，甚至比数据更重要。对于具有大量数据和长页面的页面尤其如此。例如，这个名为 Digg 的网站在页面上有一个双目录，但它也遵循一些节奏原则。

迪格

Digg 从该部分的水平导航栏开始网站SEO，然后跳转到主要内容部分，每篇文章依次列出。这给读者一种连续性的感觉，并且会向下滑动。而这个技巧也用在了右边的前10篇文章排列中。

我们可以用音乐来理解这种视觉上的节奏感。每个页面都需要一些视觉上的停顿，这取决于你是想让读者快速浏览信息，插入有趣的图像，还是引导读者按下下载按钮。

如果所有元素在页面上的权重都一样，那么节奏就太一致了，这样读者就不会觉得无聊（想想那些唾液歌）不想再读了，更不用说看你想让他们看到的东西了？

如果页面上有太多的更改，它看起来会很乱。这违反了身份原则（更多内容见下文）。最重要的是保持网页某些部分的一致性。

每个部分的韵律感是由每个部分的不同需求决定的，就像Digg一样，但整体也需要通过颜色或形状保持一致。

强调

说到设计，没有比圆圈更迷人的图案了，尤其是在充斥着四边形的网页设计领域。一个圆圈不需要上色或留空，光是靠它的形状特征就能轻松吸引用户的注意力。这就是为什么你的目光总是被最近流行的标志所吸引，但“圆形”最大的魅力其实在标志上。

图 4a：拆分列表

如图 4a 所示，A List Apart 使用多组“圆圈”来突出其徽标，而不是一个，而是使用多组。您不仅可以通过带有问题代码的徽标 （1） 注意到它，还可以通过右侧较小的徽标来注意到它。

您也可以使用“空白”或“颜色”来强调。它们适用于图形，但您通常不必全部使用它们，只需使用一两个。同时使用这三个元素会产生过度的吸引力，使用户难以关注页面的其他部分无锡网页制作，尤其是主要内容。

图4b

同时，“留白”和“色彩”两大动作，刷出临场感。色彩鲜艳的标志和它周围的大片白色区域总是立即吸引你的眼球。这不仅强化了徽标，还使您的视线自然地从左向右移动：您的视线可以准确地找到搜索输入框，并自然地移动到右侧的主搜索键。能够为用户提供最高质量的搜索结果的成功因素之一恰恰是使用基本的视觉技术为网页创造了极大的易用性。

整体感

整体感是一种意见的概念，一种“合而为一”的感觉。没有什么不符合设计的情绪和感觉。

奥基·戴夫

整体感的一个重要例子是戴夫的作品集。每一页都包含网站手稿、图钉和其他杂项，他将这些物品放在一起，营造出一种整体感。没有一个元素太突兀，也没有一个非常不同的整体风格。

【网页设计的五条规则】相关文章：

网页设计的五大技巧09-25

优化网页界面网页设计的10条规则10-04

网页设计字体组合的黄金法则09-23

网页设计字体组合的 10 条黄金法则10-03

响应式网页设计的 7 种排版规则 09-28

网页设计设计 09-27

网页设计小贴士 09-15

网页设计禁忌 11-17

网页设计简历 11-14