网页设计的构成要素
在视觉上，图像往往能首先吸引人的注意力，这是由于图像给人的视觉印象要比文字强烈的多，图片也可以大大美化页面。下面介绍网页设计的构成要素，希望可以帮助到大家。
[图片0]
网页的构成要素主要包括:文字、图像、Flash动画、色彩、版式等元素。
1、文字的设计与编排:文字是网页设计的主体，是网页设计中必不可少的元素。因此文字在网页设计中占据相当大的面积，同时由于文字所占的存储空间非常小，这样有利于浏览及搜索引擎采集。网页上文字的编排与设计，要与网站设计整体风格相吻合。最后还要注意对文字的把握，主要有两点。一是简洁、明了，能够让用户读得下去;二是数量的掌握，文字太少，会显得单调，文字多了，网页就会显得很乏味。
2、图像的创意与设计:在视觉上，图像往往能首先吸引人的注意力，这是由于图像给人的视觉印象要比文字强烈的多，图片也可以大大美化页面。善用图像，可以更加生动、形象、直观地表达网页的主题，增强网页的宣传力、感染力。网页设计时使用的图像必须符合网页的主题，并要加以创新和个性化。图片的位置、面积、数量、形式等直接关系到网页的视觉传达。在图文混排时，要注意统一、重点突出、赏心悦目，达到和谐统一。
3、网页版式设计与编排:有文字、有图片、有颜色，网页有这些就够了吗?No!光是这些，还不够，还需要有专业的排版技术，把这些要素整合起来，组成一个协调的页面。网页版式设计注重技术性与艺术性的高度统一，是视觉传达的重要手段，也是网页设计的重要组成部分之一。网页版式设计是指将文字、图像等视觉元素进行组合配置，使页面效果美观而且易浏览。
4、色彩的搭配，能体现出一个网页设计者的审美观，也会直接影响到浏览者的观感。网页的颜色不用很多，但是一定要搭配得当。一个网页一般会有一个主打色，用以配合网页的主题。其他的颜色，辅以调节的作用。网页设计也相当于艺术品设计，要求文字优美流畅，页面新颖、整洁，通过色彩的合理搭配，使页面更加生动具有吸引力。因此，色彩设计在网页设计中居于十分重要的地位。
5、多媒体元素的选择:有些网页为了博眼球，会放置音频、动画、视频等等，这些就是多媒体了。浏览者希望在网页上看到更具有创造性、吸引力的网页。多媒体元素正是实现这一目标的重要手段。但要注意的是，在一般的网页中存在大量多媒体并不好，这些会影响网页的打开速度，所以对于多媒体的放置需要量力而行。
制作网页的基本要素
网站的基本元素是网页，一个个的网页构成了一个完整的网站，网页也是可分的，构成网页的基本元素包括标题、网站LOGO、页眉、页脚、主体内容、功能区、导航区、广告栏等。这些元素在网页的位置安排，就是网页的整体布局。
标题
每个网页的最顶端都有一条信息，这条信息往往出现在浏览器的标题栏，而非网页中，但是这条信息也是网页布局中的一部分。这条信息是对这个网页中主要内容的提示，即标题。
网站LOGO
LOGO是网站所有者对外宣传自身形象的工具。LOGO集中体现了这个网站的文化内涵和内容定位。可以说，LOGO是一个网站的最为吸引人、最容易被人记住的标志。LOGO在网站中的位置都比较醒目，目的是要使其突出，容易被人识别与记忆。在二级网页中，页眉位置一般都留给LOGO。另外，LOGO往往被设计成为一种可以回到首页的超链接。
页眉
网页的上端即是这个页面的页眉。页眉并不是在所有的网页中都有，一些特殊的网页就没有明确划分出页眉。页眉往往在一个页面中相当重要的位置，容易引起浏览者的注意，所以很多网站都会在页眉中设置宣传本网站的内容，如网站宗旨、网站LOGO等，也有一些网站将这个“黄金地段”作为广告位出租。
主体内容
主体内容是网页中的最重要的元素。主体内容并不完整，往往由下一级内容的标题、内容提要、内容摘编的超链接构成。主体内容借助超链接，可以利用一个页面，高度概括几个页面所表达的内容，而首页的主体内容甚至能在一个页面中高度概括整个网站的内容。
主体内容一般均有图片和文档构成，现在的一些网站的主体内容中还加入了视频、音频等多媒体文件。由于人们的阅读习惯是由上至下、由左至右，所以主体内容的内容分布也是按照这个规律，依照重要到不重要的顺序安排内容，所以在主体内容中，左上方的内容是最重要的。
页脚
网页的最底端部分被称为页脚，页脚部分通常被用来介绍网站所有者的具体信息和联络方式，如名称、地址、联系方式、版权信息等。其中一些内容被做成标题式的超链接，引导浏览者进一步了解详细的内容。
功能区
功能区是网站主要功能的集中表现。一般位于网页的右上方或右侧边栏。功能区包括:电子邮件、信息发布、用户名注册、登陆网站等内容。有些网站使用了IP定位功能，定位浏览者所在地，然后可在功能区显示当地的天气、新闻等个性化信息。
导航区
如果说主体内容部分重要的话，导航区的重要性与其不相上下，甚至导航区的设计可以成为一种独立的设计，与网页布局设计分庭抗礼。之所以说导航区重要，是因为其所在位置左右着整个网页布局的设计。导航区一般分为4种位置，分别是左侧、右侧、顶部和底部。一般网站使用的导航区都是单一的，但是也有一些网站为了使网页更便于浏览者操作，增加可访问性，往往采用了多导航技术。
广告区
广告区是网站实现赢利或自我展示的区域。一般位于网页的页眉、右侧和底部。广告区内容以文字、图像、Flash动画为主。通过吸引浏览者点击链接的方式达成广告效果。广告区设置要达到明显、合理、引人注目，这对整个网站的布局很重要。
个人网站设计的要点
1、个人网站设计之构想
写下需要应用到的样式和元素，创立一个简易版的指南帮助你保持专注并避免偏离主线。对于我来说在坚持想法的同时对外界的反馈保持开放的心态是最重要的。
我的第一个想法是:网站整体要简洁，带着几分色彩和一些特殊的动效。听上去再平常不过了!
[图片1]
另外我还想把我的个人经历作为一个元素和我前些年与我所认识的最棒的UI设计师 Jürgen Hassler 共同创立的工作室合并在同一个模块中。
2、个人网站设计之网页架构
网页内容应该突出个人能力和经历。不过这个基本上不是很难，因为没有客户或者第三方的干涉，但是收集和编写这些东西得花上一些时间。
在我看来网页的导航栏应该是在任何时候都能看见和点击的。从这一点来一说汉堡包导航(Burger-navigation)对于桌面设备毫无疑问是不可行的。而在移动设备上，内容是可以通过滑动进行阅读的，所以更没有必要通过点击汉堡包图标(Burger-icon)来浏览整个网站。
个人网站设计展示什么项目对我来说不是很难—我就挑自己喜欢的那些。但我不是那种可以一下子写很多东西的人或是作家。所以在下班或是设计过程中我和一位文案一起修改文字部分。
3、绘制线框图
在开始绘制的时候先从导航部分下手不失为一个好方法。从这一点来说，尽管只是桌面设备的线框图，但不同设备都应该在考虑范围内。在个人网站设计的时候，往往会绘制线框图而感觉烦恼。其实大可不用。
版本1
很长时间以来我都习惯以出现在两侧或向上滑动的与访问者视线平齐的 off-canvas 导航来构建网页。第一个版本就用了这个想法，但很快就放弃了，因为虽然导航是可见的，与内容搭配也比较有冲击力，但并没有给出任何有意义的信息。
版本2
我非常喜欢使用侧边栏导航，但放在我的个人网站中显得太平凡了。所以还是继续看看有没有什么新想法吧。
版本3
经典的横向导航可以在几乎任何场景中使用，并且易用性非常棒，但会占据一定的高度。从另一个方面来说你需要设置文字的最大宽度来给左右两侧留有足够的留白。
4、迭代设计与原型制作
在构建了网页雏形之后就是迭代设计了。迭代应该考虑到过去的设计流程和所有版本中经过斟酌的最有用的部分。这是个人网站设计的重要注意的。
我们过了好几遍框架，讨论了许多有建设性的解决方法，当然也包括如何建立灵活的设计流程。
虽然这是我第一次尝试设计网站，个人还是把导航部分的内容变成了可点击的原型，这是能在任何早期阶段消除疑虑的做好的事情之一。
如果觉得原型并不是非常有必要的话，可以试试 Semplice 之类的 framework 工具来测试哪些想法是可行的。
5、添加互动、转换和完善细节
从一个想法变成一个实物的过程是非常痛苦的，在这事儿上要消耗很多想象。但现有的页面可以作为非常棒的参考来进行讨论。
利用线框故事版可以视觉化的呈现想法，巧妙的展现在同一区域中的动画效果。Roland 将原型进行了扩展，所以我们可以直接点击操作进行检查。
在最后的开发阶段我把注意力集中在细节上。最终这个网页由一个简单的扁平的页面变成一个不仅仅呈现我的能力和经历也是我在现实生活中的真实写照的极具个性的个人网站。
网页设计中人性化设计的表现形式
1、文字的人性化设计
文字是网页界面设计中的一个重要的角色，网站里边可以没有图片，也可以没有动画，但是却不能没有文字，文字是构成网页设计的重要元素，也是浏览者获取信息最重要的方式。[2]文字的人性化设计可以从文字的字体、样式、字号、色彩等属性入手。随着互联网的快速发展，涌现出来越来越多的现代字体形式。在网页设计中，经常用到的字体有宋体﹑黑体﹑楷书等计算机自带的字体，这样就保证了我们的页面在每一台计算机上都是可以正常显示的。网页设计页面中一般把宋体设为默认字体，大小一般为12px，字体的颜色要根据背景的颜色来确定，原则上以能看清文字内容并且与文字周围的环境搭配和谐为标准。一般情况下，网页设计师为了让浏览者对某一部分的信息产生注意力，常常把该信息标题文字的色彩选用与其他文字区别较大的色彩或者字体的大小区别于其他地方，已达到引起读者注意力的目的。内容文字的色彩多采用与背景色能够很好区别开的颜色，以便于我们浏览和阅读。
2、色彩的人性化设计
我们生活的世界是色彩斑斓的，每天映入眼帘的事物是各种各样﹑五彩缤纷的。人们时常会体会到不同的色彩对自己心理和情绪的影响。不同的颜色会带给人不一样的心理感受，同一种颜色给不同的人看，也可能会得到不一样的心理感受。所以，网页设计师在网页色彩的设计上要充分考虑网页用户群的心理需求、视觉习惯和操作习惯等等，使网页界面的色彩更加人性化，便于浏览用户能够轻松地使用和浏览网页的同时也能有良好的心理感受。
1)和谐的配色，让文字更突出。由于颜色有很多的属性，而人眼对于颜色的识别能力有限，色彩对比明显的人眼容易识别，而对比较弱的则可能很难区分。在网页界面设计中，网页中的文字、图案、背景都有各自的颜色，网页用户在浏览网页时，页面的背景颜色和文字颜色的搭配会直接影响到用户页面的基本内容的识别和阅读。而在网页设计中，文字是网页浏览用户获取信息最重要的形式，所以网页设计师在设计时必须考虑到文字颜色与其他网页元素颜色的色彩对比度，需要着重注意提高页面上文字的可见度，让文字更加突出。
2)了解用户心理。合理配色有一些网页设计师应用色彩只是凭借自己的喜好和感觉，而没有对网站浏览用户群体的心理和审美进行需求调查和分析，而这样的网页界面设计往往是很难满足用户的心理需求的。因此，网页界面设计中的色彩设计要充分了解网页浏览用户的心理，根据网页用户的色彩心理进行合理的配色。其实网站面向的人群不同，界面用色也是有区别的，女性一般较偏爱粉色;年轻人比较喜欢鲜艳的颜色;而年龄较大的人则更愿意接受灰色系的颜色;种种这些因素在进行网页的色彩搭配设计时都是应该考虑到并加以运用的。网页色彩的应用只有符合了用户的心理才能够激发他们的阅读兴趣，也才能利于网页信息的传播。
3)保证色彩的功能性和习惯性。网页设计师进行色彩搭配时，需要注意色彩的功能性，而功能性往往涉及到普遍浏览者的习惯性，例如链接颜色的问题。大多数网络浏览器都使用两种不同颜色显示链接:用户没看过的通常显示为一种颜色，而看过的则显示为另一种颜色。用户往往对于网页的结构和所处的位置是不敏感的，他们往往很快就忘记了自己哪些内容是浏览过的，哪些是没有浏览过的，如果网页只有单一的链接颜色，对于浏览过的内容和没有浏览过的内容不加以区别，用户就无法清楚的了解网页中哪一部分已经看过的，哪一部分没有看过，用户会浪费很多不必要的时间在重复选择同一个选项上，或者认为已经试过所有的选项而过早放弃深入的了解网站。因此，网页设计人性化在网页配色功能性和用户习惯性的考虑上不容忽视。