网页设计有哪些要素

网页设计师在制作页面时，不光光只想到当前页面，还要想到页面上的感应反应，这样前端设计师才会知道当鼠标触摸时，感应应该是怎么样的。下面介绍网页设计有哪些要素，希望可以帮助到大家。

[图片0]

尺寸

网站最先开始的是尺寸，一定要对网页设计的尺寸熟悉，尺寸又是分辨率的原理，由于每个电脑尺寸不一样，因此分辨率是有差异的，如现在的电脑屏幕尺寸有980，1038，1280等一系列的，那么网站的主体内容规划就要做好提前规划。

颜色

一个网站的颜色一般有三个色调系的，其中分别是主，次，搭配，三个结合，做网页前，一定要先定好网站的颜色，调好色系搭配。

部件

配套的网页部件是一定要自己先制作好的，如某一些按钮，一些图标之类的系列部件，都是需求设计人员先设计完善，然后当用到时，直接PS上去即可，这一类都是配套制作的。不提前设置好，将会与网站搭配不协调。

技术

设计师如果没有技术功度，那一切都是纸上谈兵，而且作为一个网页设计师，不仅只懂PS就行，flash,这些也是必会的功能之一。简单的懂一些网页制作源理，以及简单的代码。

感应

网页设计师在制作页面时，不光光只想到当前页面，还要想到页面上的感应反应，这样前端设计师才会知道当鼠标触摸时，感应应该是怎么样的，另外一个网站上同样类型的感应应该都是统一的(小编就遇到菜鸟设计师，各种页面同一个感应都是不同的颜色。)

排版

排版是很重要的，也是创意的重要体现，哪些页面放什么内容，页面的视觉让人怎么样，通常页面内容都是设计师自己规化一些，如果啥都不想，等着需求同事弄，那只能说是一个不是很合格的设计师。

网页设计的构成要素具体有哪些

要素一:文字

文字是网页中最主要的一部分。对于文字的把握，主要有两点。一是简洁、明了，能够让用户读得下去;二是数量的掌握，文字太少，会显得单调，文字多了，网页就会显得很乏味。

要素二:图片

图片，比文字更能吸引人的眼球，所以网页中要善用图片。在某些突出的位置，可以放置一些比较出彩的图片，这样既能达到美观的效果，又能让浏览者对网页印象深刻。

要素三:色彩

色彩的搭配，能体现出一个网页设计者的审美观，也会直接影响到浏览者的观感。网页的颜色不用很多，但是一定要搭配得当。一个网页一般会有一个主打色，用以配合网页的主题。其他的颜色，辅以调节的作用。

要素四:排版

有文字、有图片、有颜色，网页有这些就够了吗?No!光是这些，还不够，还需要有专业的排版技术，把这些要素整合起来，组成一个协调的页面。排版需要顾忌很多，要注意字间距，文字、图片的数量，颜色的搭配，页面留白等等，是个细致活。

响应式网页设计的方法

响应式网页设计是以用户为中心的设计，关注特定情境下的用户体验，它既要适应设备的功能和限制又要适应用户的使用环境。响应式网页设计的方法主要包括以下几个方面。

[图片1]

(一)移动优先

在网站策划与制作的初步阶段，响应式技术比常规方法费时耗力。一般来讲，开发人员需要了解用户设备及不同使用情境，优先从移动端开始设计，从创建具有一定可用性的基本体验开始，满足用户简洁、顺畅的情境需求。然后，渐进增强，布局显示内容，提高图片质素，增加必要的服务，提供恰当的交互，创造更丰富的体验。移动优先采用渐进增强原则，而非早期网站设计提倡的优雅降级原则。移动优先既可以为不支持媒介查询的移动设备提供适合的布局，聚焦当下最重要的事，也可以降低CSS代码复杂性，减少冗余代码。

(二)媒介查询

媒介查询是指根据用户特定情境，查询设备各种属性来布局样式和内容。测试的属性包括:设备屏幕宽高;视窗显示区域的宽高，例如浏览器窗口的大小;屏幕方向媒体特性决定一个设备是处于横屏还是竖屏，即设备处于垂直或水平的状态，宽长比例等特性;设备屏幕分辨率，每平方英寸像素数，一般的屏幕为163ppi，视网膜屏为326ppi。这些属性可以通过“与或非”等逻辑运算符形成复杂的表达式，以此判断是否为特定目标设备类型，从而加载特殊样式、调整页面布局、提供适合的功能和交互。

(三)流式布局

传统的固定宽度布局以像素为单位，是网页布局中最常见的方法，它简单粗暴地固定了页面的宽度，使用户在不同设备上浏览相同的页面。屏幕较大时，页面两侧出现大片的空白区域未加利用;屏幕较小时，页面内容位置不变，用户只能不断地通过手指滑动进行浏览和界面交互。

网页设计有哪些表现手法

1、对比:设计就是规则中加入一点变化，从而达到突出重点的作用。大标题我们为了显眼通常都是加粗加大使用，小部分描述才使用纤细的。即使保持字体上的统一，改变字体样式，又让字体不至于太平淡缺乏变化。另外，也不仅仅是只有字体才有对比，网页上各个元素之间，也存在对比关系，对比越夸张效果越强烈。

2、几何图案:使用重叠几何图案的技术，可以实现更有趣的视觉效果。设计师可以添加各种各样简单的样式和形状。

3、插画:网页的设计趋势更新换代，但是使用插图始终是给页面一个独特外观和风格的好方法。

4、杂志排版:纸质媒体的平面设计和信息排版较网络媒体有着更悠久的历史，相对而言他们的经验沉淀更加专业;随着网络硬件的提升，网页在视觉形式表现上的束缚也越来越少，这样的环境给网页设计师带来了更多元化的设计学习空间;杂志版式中简约轻薄的形式感正好契合了现在多终端的网页自适应设计。所以向杂志排版学习，是网页探寻新形式的一个开始。

5、色彩:选择鲜艳的配色，对于背景设计来说可是非常大胆而又独特的。通过这些颜色的背景，将用户引导至设计全体，添加了具有视觉效果关注点的同时创造出了留白空间，能够达成一举多得的效果。

6、灰色的运用:加入少许灰色，你可以很轻松的在网页上实现简约风格。作为平凡的白色背景的代替，在背景上加入淡灰色的网页正在逐渐增加。灰色背景最棒的地方就是:不管色彩多么丰富，不管是暖色还是冷色的图片都能很好的表现出来，在品牌颜色或图像周围使用灰色与之调和也能给人留下不错的印象。还有，在平面的色彩上使用淡黑的灰色作为阴影也是很不错的。　　　　7、扁平化风格:扁平化设计依然占据主流，从某种程度上而言，是因为它同响应式设计有着极高的契合度，这也是在过去几年间的逐步变化而造就的结果。

8、抄现实:简单意义上说就是抄袭现实中存在的事物，这种手法多用于活动主题页和游戏页面。