网页 设计 的原则与要求

设计者在设计网页时应该明确网站的类别，例如是企业网站、政府网站还是个人网页等等，因为不同类型的网页具有不同的主题与风格。下面介绍网页设计的原则与要求，希望对您有帮助。

【资料图】

一、网页设计的基本原则

⒈符合受众心理与社会心理需求

懂得不同的受众以及不同社会层面的不同心理需求，是网页设计者应掌握的一项基本原则。在网页设计创作之前，设计者要对所表达对象的文化背景、审美心理以及审美感知等作一系列相应的了解。对不同的地方，设计者还要进行一定区域民俗文化现象的了解与学习。只有这样，设计出的网页作品才能与设计对象产生紧密联系，达到读者与作品的心连心、面与面的交流。

⒉分析用户需求，注意内容布局

设计者在设计网页时应该明确网站的类别，例如是企业网站、政府网站还是个人网页等等。因为不同类型的网页具有不同的主题与风格，设计网页时不能喧宾夺主，也不能主题与网站类别属性相矛盾，在图片、文字、色彩使用上要合理选择。所以，网页设计的第一步应该以用户需求和网站的类别为导向，所有的设计工作都应该围绕这个前提，正确定位，不能脱离主题。

⒊设计主题定位准确

网页设计是一种按照一定需要，有目的进行的一种计划与预定。其突出特点就是具有相当的制约性和约束力，即受到设计主题的限制和约束。网页设计作品应有自己鲜明主题，主题目标的鲜明性决定了设计的鲜明个性特征。设计主题定位要求准确，这是设计原则中的首要问题。网页主题是设计传递内容的主要信息，设计者应该充分运用所要传达的特定信息，调动画面中所有的视觉因素，使之发挥出最大的视觉效果，设计的定位要始终牢牢地把握住设计主题。

⒋网页下载的时间不能过长

为了保证网站有不断增长的点击率，除了有吸引人的内容之外，还要有较快的下载速度。网页加载速度对于一个网站而言是十分重要的，它直接影响用户的访问体验和满意度。如果2030秒还不能打开一个网页，一般人就会没有耐心。至少应该确保主页速度尽可能快，如没有必要，最好不要用大的图片，或者对图片进行压缩使用。

⒌网页对不同操作系统、浏览器的兼容

通常情况下，人们所设计的网页都在一种操作系统和浏览器中进行调试。在互联网中，有各式各样的操作系统和浏览器，网页中的一些技术、插件在不同的操作系统和浏览器中的效果是不同的，有的甚至根本无法兼容，因此要充分考虑网页的兼容性。比较常见的办法是在不同的操作系统和浏览器中做测试，保证最大的兼容性。⒍经常进行调试及数据更新为吸引更多用户，网站中的信息必须经常更新，如新闻、图片资料等。同时，由于网站要经常进行修改更新，网页之间的链接有时会出现断开现象，因此，要经常做网站的调试，检查是否有链接出错的地方并进行修复，以维护网站的正常运行。

二、网页界面设计的要求

⒈导航清晰，标题具有可读性

在设计页面时，要做一个层次分明的导航条，尽量使用户知道自己所处的位置，同时，链接层次不要太多，尽量使用户能够用较短的时间找到所需的资料。一个网站的内容主题要突出、明了，尤其是大段文字的使用，必须要易于用户阅读，在文字的安排上除了可以采用横向分栏之外，也可将页面纵向分割，或利用标题和副标题将文档分段。为所有标题和副标题设置同一字体，并将标题字体加大一号，所有标题和副标题都采用粗体，这样便于识别标题和副标题，使用户一眼就可以看到要点，以便找出并继续阅读有兴趣的内容[4]。另外，也可以将整句采用不同的颜色或用粗体突出主要内容，字体的选择上要和主题风格相统一，字体和背景的颜色要能区别开，以便于识别。

⒉风格统一，色彩和谐，重点突出

网站中各个页面要保持统一风格，不要在不同的网页中使用不同的主题风格，风格统一有助于加深用户对网站的印象。要实现风格的统一，不一定要把每个栏目做得一模一样。例如，用户可以尝试让导航条样式统一，各个栏目采用不同的色彩搭配，在保持风格统一的同时再为网站增加一些变化。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美观的页面。从设计的技法上来说，重点突出某个色彩因素，可以打破整体色调的单调和沉闷，再将一部分的色彩施以强烈醒目的色彩，能使画面产生凝聚力和一张一弛的表现力，从而刺激视觉引起兴趣，产生生动的色彩形象感。在具体设计中，要注意重点色的作用，需要应用巧妙而不能过度，到处重点就无所谓强调重点了，其结果只能导致整体的混乱。

⒊界面清爽，设计避免“一般化”

页面设计整洁、清爽有着不可忽视的作用，它是进行艺术表现的重要手段。设计者要吸引用户长时间停留在你的网站，千万不能让用户第一眼就感觉压抑。大量的文字内容要使用和谐的背景色，前景文字和背景之间要对比鲜明。如果背景含有图像，对比度要弱些，可把背景图片透明度适当降低，这样用户浏览时眼睛才不至于疲劳。

网站导航设计原则

导航菜单包含但不限于导航条和汉堡菜单。

导航菜单的重要性已经不言而喻，我们平时遇到的每一个网站或软件中都有它的存在;但并不是所有的导航菜单都设计得准确无误。我们也常发现用户因导航设计不当而感到困惑、难以操作，或者连导航在哪儿都不知道。

下面的设计原则，可以避免导航菜单出错。

导航菜单要清晰可见

1. 大屏中的导航菜单不要太小。如果空间足够，不要将菜单隐藏。

2. 把导航菜单放在用户熟悉的位置。通常用户会希望在浏览过的网站或app中的类似位置(譬如网站顶部、左侧等)中找到他们想要的UI元素。

3. 让菜单链接看起来有互动感。如果菜单选项看起来不可点击，用户未必能认出它是导航。如果我们的导航设计融入太重的图形、或太过追崇扁平化设计风格，会使它们看起来更像是装饰性图片或标题。

4. 确保导航菜单拥有足够的视觉吸引力。很多导航菜单的周围会留有一点空白区域以从视觉上突显它。但当网站UI元素比较拥挤时，如果导航菜单视觉比重太弱就会在各色图形、促销广告、标题里迷失，不易被用户识别。

5. 菜单选项的颜色要与网站背景色对比鲜明。令人惊讶的是，有非常多的设计师都忽视了“对比原则”。

即便是熟悉以上规则的设计师设计出来的导航菜单也有可能会被用户忽视，因为他们很难客观地评价自己的作品——尤其是碰上比较主观的设计标准时，比如哪个UI元素应该拥有更明显的视觉效果。如果你知道你的导航菜单在哪儿，自然能一看看到它，因为这是你设计的。因此，让用户参与验证十分必要。

告诉用户其当前位置

6. 告诉用户当前所处什么位置。用户成功导航的一个最基本的标准是他自己能发现：“我在哪儿?” 通常被选中的菜单选项在视觉上与其他选项是有差异的，这可以帮助用户明确自己的当前所在位置(或者通过面包屑导航定位)。如果没有让用户明确所在位置、导致他们迷路，那么就犯了网站设计最基本的错误。讽刺的是用户不总是通过首页到达目的页，所以导航菜单对于用户来说意义重大。

导航菜单要与用户任务协调一致

7. 使用易懂的链接标签。清楚用户要找的是什么，使用相似且相关的类别标签。要记住导航菜单并不是拿自造词和行话去忽悠人的。请使用可以准确描述网站内容和特征的术语。

8. 链接标签要容易阅读。减少用户阅读菜单具体内容的时间，如使用左对齐的垂直菜单、或将关键词前置。

9. 对于大型网站来说，让用户通过导航菜单预览子级内容。对于喜欢挖掘网站各层级内容的典型用户来说，下拉菜单可以让用户快速浏览、节省时间。

10. 为息息相关的内容提供本地导航。如果用户喜欢对一些同类商品频繁对比、或在某个场景里完成多个任务，可以将这些临近页面做成本地导航菜单，这样用户就不需要在复杂的路径里“上蹿下跳”了。

11. 利用视觉的传达力。图像、颜色等元素可以帮助用户理解菜单选项，但也要确保这些图形起的是积极作用(至少不能让操作变得更难)。

导航菜单要易于操作

12. 菜单选项要够大、方便点击。如果导航菜单的选项过小或者彼此靠得太近，会给移动用户造成很大的困扰;大屏网站中导航菜单选项如果也设计成这样，那就会很难操作。

13. 确保下拉菜单不会太大或太小。鼠标悬停触发的下拉菜单呈现时间太过短暂会给用户带来挫败感，因为用户还没来得及点击菜单里的某个链接的时候，下拉菜单就消失了。另外，太长的垂直导航菜单也不利于底部选项的点击，除非滚动屏幕。最后，鼠标悬停触发的下拉菜单不能太宽，否则会让用户误以为是新页面、并且好奇为什么自己还没点击就出现了新的“页面”?

14. 当页面内容很长时，可以考虑悬浮吸顶(或固底)菜单。已浏览到页面底部的用户要想回到首屏需要一次又一次地回滚鼠标(移动端则是不断向上划动屏幕);如果导航可以悬浮吸顶，用户就可以很方便地进行其他菜单选项的切换。这很适合小屏幕场景。

15. 尽可能缩短导航菜单最常用操作的物理距离。下拉菜单内容比较多时，将用户最常点击的链接放到离鼠标悬停的选项最近的地方可以减少鼠标移动的距离(移动端也类似)。最近一些app中流行的饼状菜单则将所有菜单选项成圆(有的是半圆)状围绕在菜单周围，这样每一个选项链接的物理点击距离都是最短的。

用新颖有趣的交互方式去惊艳用户?

实际上……答案是“不”。

炫酷的效果并非我们的首要目标。对于用户来说，最能打动他们的还是网站的精彩内容、以及熟悉且操作简单的导航菜单。

当然，有的时候一些创新型菜单的确可以提升用户体验(下拉菜单就是一个例子)。在某些场景下，由于新技术的独特要求，这15条原则也未必使用——举个例子，第4条 “确保导航菜单拥有足够的视觉吸引力” 就不适用于语音识别。但大多数情况下，这15条都是我们需要考虑的指导原则，因为它们会大大提高导航菜单的易用性。

网站中心内容在网页设计中的重要性

对于一个网页来说，其必须具有一个中心内容。然后，其周围的内容再一次围绕着中心思想进行运转。那么，中心内容该如何确立?在确立过程中又该如何提高自身的网站吸引度?本文将从网页设计出发，围绕中心内容这一思想，进行探讨。

网页设计一定要围绕网站中心内容,至少包括这四个方面：

一、从网站的整个诉求来讲，网页上需要放置哪些信息才能更好的实现网站的诉求?哪些信息是需要保留的?而哪些信息是需要放置在其他页面甚至干脆舍弃掉的?

二、对于已经确定放置于页面的信息，如何更好的撰写文字、挑选图片才能达成功能性和视觉上美观的完美统一?

三、区分信息的重要程度，哪些是重要的，需要着重表现的?而哪些是次要一些的信息?

四、区分出信息的主次后，在布局、色彩、尺寸上，即在视觉上如何更好的突出和表现?

这四个部分的每一部分几乎都有讨论不完的话题，那么在这篇文章中我只就第四个方面，也就是网页上核心内容和视觉表现的关系来梳理和概括一下自己在这方面的一些理解，尽量的将我所考虑到的内容都写出来，同时举一些具体的案例来说明我的观点，便于大家更好地理解。

一、核心内容对于页面布局的影响

例如WordPress网站建设的公司，在它的主页上从上到下可以看到这样几部分信息：导航、Logo、口号、作品展示、选择我们的理由、联系表单、日志列表、邮件订阅、Twitter信息以及版权信息。其中的第一视觉无疑是公司的口号和作品展示，这就是此网站主页上的核心内容。因为作为一个网站建设公司来讲，直观的让客户知道你是干什么的?干的怎么样?应该是客户最想要了解的内容。那么对于核心内容，在视觉上做了哪些考虑呢?

我们可以看到，在宣传口号上设计师给”wordpress”这个词应用了非常大的文字尺寸，并且颜色上和其他文字区别开，使用了较深的灰色，强调本公司是建设专门以wordpress为后台的网站。在宣传口号的下方的作品展示图的尺寸很大，宽度达到了540像素，而整个的设计宽度是1000像素，在主页上这样大尺寸的展示图能够非常清晰而直接的让客户看到作品的原貌，从而对于公司的制作水准有了一个直观的印象。而这样的大尺寸的作品展示其实已经隐约的决定了整个网站的布局。

想想看，在屏幕的左上方区域摆放上一个宽540像素，高460像素的矩形之后，接下来的区域该放置哪些信息，其实就像是摆放积木一样，按照重要程度挨个放置就行了。当然这并非是唯一的布局方式，但是无论何种布局方式，我们的想法都应该在功能性的考虑的范围内进行。所以创意我们可以有，但是要明白和天马行空的纯创意的区别。

二、核心内容对于色彩方案的影响

Lofter是网易提供的轻博客服务，其中的信息类型主要有四类：即：图片、音乐、文字、视频。该模板通常是为了满足摄影用户，图片展示面积要够大，够爽;模板首页一屏能看多图;背景要暗，突显当前图片;边框的设计让图片更突出，或让图片更精美。”通过分析和理解此设计思路，我们能够发现，其中的图片展示面积要够大，也就是我们上面提到的布局方面的考虑，而背景要暗即是我们这里要讨论的对于色彩方案的影响。

所有的视觉设计都是围绕信息来做的，我们必须首先梳理好了信息的内容和结构，才能知道应该在哪里施以重墨，在哪里点到为止。反过来，很多的设计思路和想法可以说本身已经暗含在信息中了，比如我们上面提到的布局和色彩方案。只要提炼和优化好了信息，怎么来做其实在梳理信息的过程中就渐渐的明晰了。

怎么样?大家现在一定明白中心内容的重要性了吧?很简单，就像我们看选秀，中心还是确定是超级女声还是快乐男声。一旦偏离，就会闹出不少笑话。这也可以看出中心内容在整个网页设计中的重要性。因此，这里也要告诉各位网页设计者的，一定要着重对网页中心的定义和掌握，才能制作出一个比较好的网站。

网页制作中的设计细节

俗话说，细节决定成败。同样地，在网页设计师们奋斗的网页设计领域，这也是一个不变的定律。只有将网页设计的细节做好了，才可以更好地做好网页。那么，哪些细节值得我们去重视呢?本文我们将从六个方面来对其进行探讨。

一、合理使用渐变

渐变不要滥用，更不要把渐变弄的跟彩虹似的，否则你的网页作品看起来比较外行。总而言之，合理的使用渐变对于优秀网站设计是有帮助的。

二、留白

留白一词往往容易被误解从字面解释的空白。网页设计较为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它的。

“留白”对于网页设计是很重要的，留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题，他们在做设计的时候将整个页面放的满满的，没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题，如果内容放不下的话，他们可以借助浏览器的滚条来扩大页面的空间。

三、网格布局

网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象，从好的设计到生活中的交通网。

960和蓝图可能是两个最流行的网格布局。960网格布局简单、重点突出。你可以用任意对齐方式来安排你网站的元素，对齐在设计一个复杂的页面时，能使你的网站看起来比较精致、井然有序，并且你在网页布局里面添加任何模块内容时候都不用考虑其他的模块内容。

四、改善字体应用

字体应用困扰着大多数的设计师。如果要想提高你的设计水平，字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色，同时还可以增加设计作品的氛围。

五、明确而有效的导航

良好的导航对于网页设计来说很重要，如果浏览者不能快速、便捷的找到它，他们就很有可能去别的网站了。这是我们所不愿意看到的，同时我知道MyInkBlog进行了一些改进，并将在以后重新设计中进行彻底的改进。

六、使用漂亮实用的页脚

一开始我们就将页脚作为次要的内容，在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来越重要了，千万别错过好的页脚完成你设计。