---
title: 网站设计之怎样突出网页的主要内容
date: 2015-01-11T16:00:00Z
modified: 2024-07-04T08:18:22Z
permalink: "https://www.tmogroup.com.cn/insights/other-21235/"
type: post
status: publish
excerpt: ""
wpid: 100806
categories:
  - 其他资讯
  - 电商开发
tags:
  - 其他资讯
  - 电商开发
  - 网站建设
  - 网站开发
featured_image: "https://www.tmogroup.com.cn/wp-content/uploads/2024/07/网页设计怎样才能引导用户点击-2.png"
timestamp: 2024-07-04T08:18:22Z
---

在网站建设中，最重要的一环就是[网页设计](https://www.tmogroup.com.cn/wp-content/uploads/wp-mfa-exports/page/home.md)，要做好一个网站，每个网页的设计都是很有讲究的，你的网站做的什么服务，你就要在网站中展现出来，让你的服务或者产品清晰，也就是要在网站上突出我们做的主要内容，那么如何突出呢？从对照、色彩、字体、留白等方面帮大家将最主要的内容涌现出来，文末还附上一个特别有效果的检测方法，一眼就能看出你的网站是否合格，那我们一起来看下吧！

#### 网站设计之怎样突出网页的主要内容

## **一、对照：引发兴趣**

为了更好地理解对照在网页设计中的作用，我们先解释下什么是对照。对照就是在一个相对封闭的环境里发生的某种元素间的一种关系，这些元素可以是颜色、纹理、形状、方向和大小。

只是稍稍对字号大小进行调整，或对色彩进行更改，就会马上更动整个界面的视觉效果。例如，当你看到下面这个网页时，把浅色的背景换为深色，首页引人注目的“try it free”的重要按钮马上在视觉重大性上降级，而最下方的“call us”就会升级为重要的按钮。

再来看看下图中，颜色和大小是怎样影响我们的界面视觉的。例如，很多人在第一眼扫视而过时，不 会仅仅就看到了两个圆。事实上，他们在看这两个圆时，已经获得了这样的信号“一个黑色的大圆和一个红色的小圆”。也就是说，对照关系已经可以在第一时间就 进入人们的大脑中，形成强烈的印象。

## **二、商业工具：颜色，大小和形状**

当我们刚开始设计一个页面的时刻，一定不要忘记了运用这几个壮大的视觉工具：颜色，大小和空间。设计师Alex Bigman就相信颜色和大小在管理着我们的视觉注意，而空间则辅助管理视觉元素间的关系。

### **颜色**

简单说，亮色可以在柔和的色彩中凸显出来。这是自不待言的，而更为重大的是，在设计中，你就可以运用这一关系去吸引用户的注意。另外，特定的色彩也能辅助营造网站的整体氛围（例如，蓝色代表宁静，红色显得张扬和富有攻击性等）。

上面这个网站采用的是视觉体系中的Z模式，在此模式下，他们运用色彩的技巧是异常巧妙的。水蓝色的背景立刻将重要目的按钮凸显在了顶部，这些目的按钮的色彩可以与“get active”的色彩搭配，暗示这一系列的按钮的相干性。而下方的两个大的矩形区域由于形状的相象又相连，因此也暗示着它们之间的相象性。

### **大小**

说到大小，我们通常在说的其实也就是网页字体的大小。在传统的从左到右自上而下的阅读模式中，这就已经是个很壮大的元素了。这意味着，大号字体或段落的右下角通常是读者最先阅读的地方。因此，字号大一点发扬的就是一种强调作用。

讲到这一点，不得不提到，知名的网页设计名博Smashing Magazine对50个风行的网页界面进行调查，他们发明这些网站通常都是采用标题字号18~29px，与此匹配的文章主体字号采用12~14px，只 是这项调查针对的是英文字体，而中文字体相对来说应该字号会大一些易于辨认。当然，这也只是一个大概的调查，并无确定。可是，你可以从中获知更多关于字号比例的排版设计的知识。

### **留白**

网页设计的目的什么？简单讲，就是创作一个漂亮的页面。那么，你将一切的漂亮的元素全部堆叠在 网页中就漂亮吗？无节制的增加吸引的元素是快速毁掉自己的设计方法之一。一个网页中有可以呼吸的空间是异常重大的，也就是我们总是爱说的留白。减少“视觉 噪音”会让页面显得更有重点。

Usaura的开创人Dmitry就已经指出，适当的留白能增强对网页内容的理解。2004 年，一些钻研小组就调查过，适当的留白能让人们对网站内容理解水平增长20%。虽然用户并不会直接对留白的页面做些什么，但它却能影响到用户的满足和体 验。大家可以看看上图的页面设计。在每一个主体内容，都保留大批留白，用户的视线流得到了维护，让观者专注内容，才是最好的体验。

## **三、网页设计视觉体系的测试：模糊法**

就我所知，有人曾提出这样一个方法来检测自己的网站。尤其是当你的网站有特别要强调的内容时，异常适用。将自己的网站首页，放在PS里模糊5~10个像素，这样来断定那些你想强调的内容是否仍然能吸引到注意。

上图的网站通过模糊法测试后，我们会发明那些注册按钮和产品特性仍然是很抢眼。这样的元素安排对我们来说就是合理的。如果你也想测试你的网站的内容是否已经突出，就用以上方法试试吧，行动起来吧！

**以上就是我们分享的关于如何突出网站主要内容的介绍，你的网站是否已经突出了主要内容呢？你的网站客户的体验度是否良好呢，通过以上介绍，相信你会比之前清晰许多，[TMO探谋网络科技](https://www.tmogroup.com.cn/wp-content/uploads/wp-mfa-exports/page/home.md)专注[电子商务网站建设](https://www.tmogroup.com.cn/wp-content/uploads/wp-mfa-exports/page/home.md)，国际化的团队，一流的建站技术，高效的项目管理（这不是吹牛，是真的实实在在的存在），找我们准没错。**