网页设计的流程篇1

网页是网络传达信息的主要载体，网页设计作为人机界面的一个重要对象，其视觉形式直接影响网络最终的传播效果。网页版面设计的视觉流程是人在观看网页时候的视觉线路走向。根据人的生理特点和心理特点，人们在观看网页时通常是从第一感觉印象到具体信息传达、最后产生整体印象的过程。下面，笔者分析一下网页版式视觉流程的设计原则和表现形式，以及网页视觉流程中的变化性特点。

一、网页版面视觉流程的设计原则

网页版式设计是网页设计的重要组成部分，它遵循一定的认知心理学和审美原则。通过设计创意和设计原理构成网页页面，能更好地实现信息传达和视觉效果传达。承载网页设计的媒介终端的数字化特点，决定了网页版式的视觉流程在具体设计中要遵循以下原则：

1.科学性。网页版式设计的视觉流程以人眼的生理结构和视觉心理认知特征为依据，因此网页版式的视觉流程是符合一般视觉原理和大众认知基础的[1]。根据视觉流程的特点，网页版式在设计上遵照从左到右、从上到下的原则，因此设计中要选择最佳的视觉区域，设计符合科学理性的视觉流程方法。如图1所示视线流动的一般规律，在网页版面中，1区即左上区域，一般为观者视觉进入版面的区域，因此一般放置比较醒目、鲜明、简洁的视觉元素，如标志等。这些元素一般以图形或是文字设计的形式出现，让观者在第一时间了解到网页的代表符号，对网页产生深刻印象，并能同其他网页区别开来。区域2即页面的右上角，虽然不是视觉进入版面的区域，但同样处于页面上方，因此也可放置一些重要信息，在具体设计中，banner、导航条常布置在1、2两个区域。网页的中间部分，如图3区左中和4区右中为放置主要内容的区域，这部分一般放置内容性文字或者图形，属于元素集中区域，是观者阅读和获取信息的主要区域；而3区由于位于页面左侧，处在视觉进入区域一侧，因此在设计中也常常将导航内容放置在3区左侧，便于操控。5、6两个区域靠近屏幕下方，6区一般是视觉线路的终点，因此这两个区域一般放置非重要的信息。

2.识别性。在网页版式视觉流程设计的过程中，最终目的是保障网页内容被更准确、快捷地识别。识别性在视觉流程的设计中关系重大，设计行为都应该围绕着识别性这个主题而展开。根据设计内容的需要，对视觉元素进行处理，如区分主次关系进行设计、通过色彩区别元素、加强设计的整体性等，都是加强页面识别性的设计手法。视觉传达设计的内涵与形式也不是一成不变的，无论采用哪种视觉表达形式，终端受众都必须借助视觉感知来接受信息。[2]

3.合理性。合理性是指在网页版式视觉流程的设计中依照设计的原理合理地展开视觉流程的引导。网页的浏览过程是动态的、互动的，观者获取信息的过程不尽相同，有时浏览者可能会从其他网页链接跳过主页直接进入网站子页面中；同时网页的互动性也容易吸引受众。因此，合理地处理每个网页的视觉流程，让各级页面都拥有设计清晰、可操作性强的导航，便于受众在各种情况下进行浏览。

二、网页版面视觉流程样式

视觉流程在运动的过程中受各种外部因素和主观因素的影响，会产生各种运动形式。结合网页版面设计的特点，主要有如下几个方面：

1.线性视觉流程。线性视觉流程是最常见、最基本的视觉流程样式。文本阅读的方式就是以线性视觉流程的形式呈现的。主要的线性视觉流程有直线、斜线、曲线3种形式。直线视觉流程在版面中引导人的视线做直线的视觉流动，具有直观、确定、一目了然的特点。斜线视觉流程动态性很强，具有较强的个性特征，常用在表现突出动态或个性化的设计中；斜线视觉流程稳定性相对较差，要注意画面的整体均衡。曲线视觉流程是颇具韵律感的视觉流程形式，曲线在版面中的融会贯通让版面舒畅、自然、饱满且充满张力，如“S”曲线形态的视觉流程使页面元素上下左右运动，能在有限的空间中穿插回旋，具有一定的张力。

2.导向视觉流程。在网页设计中使用能诱导观者视线的诱导性元素，令观者的视线能通过诱导按照设计者的布局进行一定顺序的运动，将所有元素从主到次、从大到小构成一个有机整体，形成一个重点突出、流程动感的视觉组合。诱导性的元素有很多种，常见的有文字导向，利用文字的排列组合后的线、面特点来引导视觉走向；肢体导向，利用人体的肢体语言或是手部动作的方向性，来引导视觉走向；指示导向，利用符号箭头的方向性特点，将视线引向主体；形象导向，利用众多的事物形象特征来引导视线，如人或者动物的视线、钟表的指针等。

3.反复视觉流程。反复视觉流程是指由于相同或者相似元素的规律出现，而产生的一种有秩序和节奏的运动。反复视觉流程构成的版面动感性差，通过元素的处理方式能产生很强的节奏和秩序的美感，吸引视线。由于网页技术特点决定了这种反复视觉流程是比较常见的视觉流程表现手法，在网页的导航设计、图片排列、文本信息等设计中常见这种排列手法。

4.散点视觉流程。散点视觉流程使用了后现代的视觉表现中的一些特点，自由、随意、新颖。散点视觉流程指版面中的视觉元素，包括图形、文字等视觉元素及其各元素之间的组成关系不拘泥于规则、严谨的理性编排方式，而是强调感性、自由、随意、分散的排列组合状态。散点视觉流程在初始感官上给我们以散乱的感受，信息获取过程不如其他视觉流程顺畅，但是只要稍加观察我们就会发现散点的视觉流程通常是“形散而神凝”。在对待元素的处理方式、版面的整体协调、主次的关系处理、色彩的利用等方面，都更加刻意精心地遵循着一定的规则，这就使散点视觉流程的表现在灵活、感性、生动之余，不乏理性的雕刻。

5.复向视觉流程。复向视觉流程是从页面的中心点开始，产生向心或离心等形式的视觉运动，画面中心突出、主题明确，视觉冲击力比较强，常用在对某一事物进行强调的页面设计中。

三、网页版面视觉流程中的变化性

网页版式设计同传统媒介版面设计虽然都是在一定的空间中进行视觉元素的组织，但由于二者在最终显示方式上存在差别，因此网页版面在具体的视觉流程表现中必然会受媒介变化的影响。

1.网页版面中的变化性。网页版面设计同传统的版面设计有着一定的联系，但也有着很大的不同，这就是它的动态变化性。对于同一个网页版面而言，观者所见的第一感觉印象未必是最终的感觉印象。由于网页版面互动性的特点，在观者和网页版面的不断接触过程中还会出现各种动态的图标或悬浮导航条等，这些都是带来变化的元素，都会对初始页面视觉流程产生一定的影响。变化会打破最初视觉状态下的相对稳定，在视觉流程的设计中都应该整体考虑。变化的视觉流程可以使网页页面更加生动、多样化，但这也为设计增加了很大的难度，这种变化的视觉流程多用于一些娱乐性的或追求与众不同的个性化网页设计。

2.页面之间跳转的变化性。除了同一网页版面内部的变化性以外，在不同网页页面之间的非线性跳转也是网页设计不同于传统媒介的特征之一，超链接改变了网页内容空间的前后关系。由于网页具有超链接功能和多维性的特点，使得不同站点以及同一站点的不同页面之间跳转成为网页变化性的又一表现。通常来讲，一个站点是由多个页面构成的，观者的浏览顺序是不固定的，可能从主页开始，也可能从二、三级页面开始，因此保持整体的视觉流程至关重要。这就要求设计者尽可能在一个网站的整体设计以及页面的跳转过程中保持视觉元素设计的连贯性，保持视觉流程特征的连贯性，保持整体设计风格的连贯性，来更好地适应页面跳转过程中的变化。

3.视觉元素的动静变化性。网页既包含了传统媒体的形式，其本身又是新的媒体，它具有极大的兼容性和互动性。网页设计中既包含传统的静态设计，又存在具有互动性的游戏、动画、影像和线性播放的影像、广告等元素，这就构成了页面中的动静对比。

对网页浏览者而言，视觉流程的变化还受页面元素动静变化的影响。通常来讲，事物要引起人注意应具备两方面的特点，一是有刺激物出现。在这里网页上的动态元素，如视频、动画、广告等外界刺激具备引起人无意注意的行为，即浏览者事先没有目的也不需要做意志努力就能注意到的，这类变化节奏越快越能吸引人的视线。这是一种动态的吸引，可以改变人的视觉流程，能较先吸引人的视线。因此，在一些页面上，常将一些重点信息进行动态化处理以吸引人的第一注意力。二是视觉主体的意向性。浏览者作为视觉主体，更容易受动态元素的吸引。动态元素的视觉形象力更加明显，受人注意的程度要多于静态元素。因此，我们可以看到，新的媒介赋予了设计以更丰富的内容，网页版式的视觉流程同传统设计相比较增加了动态效果对其的影响，网页上的动态元素可以吸引观者的视线，使观者能按照设计者给出的特定视觉线路进行视觉移动，而页面上的静态元素较之动态元素，其视觉吸引力相对较弱。

结语

视觉是一种主动性很强的感觉形式，新技术在很大程度上要依靠人类的视觉感官去获取、传达和交流，技术的进步让我们开始更加关注网页信息传达的品质。[3]网页视觉流程的设计直接关系着网页版式构成并影响到网页信息传达的效果；在网页设计中组织视觉元素进行视觉表现，使设计形式的组织达到对浏览者视觉线路的引导，能更好地发挥设计元素的功能。总之，加强网页设计的视觉文化基础，利用视觉表现达到提升网页信息传达的目的，对于网页信息传达来讲具有重要的意义。

参考文献：

[1]方新普，陆峰，孟梅林.视觉流程设计[M].安徽：合肥工业大学出版社，2004：49.

网页设计的流程篇2

二、网页版式设计的视觉流程

网页的浏览是通过视觉元素实现信息传播的视觉传达过程，为了达到最优的视觉传达效果，网页的版式设计就必须依据人们在视觉上的心理和生理特点，确定各种视觉构成元素之间的视觉关系和浏览秩序，即安排好网页的视觉流程。所谓的视觉流程，是指页面内容的一种视觉传达过程，它是以人的生理和心理习惯的认知模式来进行的，是将各种构成要素在视觉运动的规定下进行空间定位，即从注意力的捕捉起，通过视觉流向的诱导，直至最后的印象留存，体现出这一程序的规划和诱导性。合理的视觉流程应在与人们认识过程的心理顺序和思维发展的逻辑一致的基础上，根据信息的主次（即传达重点）来确定各元素的顺序，并通过精心安排从而影响、引导浏览者的视线移动。1、网页视觉流程的三阶段当我们浏览网页时，视觉流程通常是首先在一瞬间迅速浏览页面，形成第一印象，接着视线就会从最吸引注意力的一点开始依次作有序的流动，最后完成信息的传递。整个过程包括印象感知（第一印象）、运动感知（感知过程）、整体感知（最终印象）三个心理感知阶段，而每一阶段各视觉要素发挥的作用都有所不同。在第一阶段印象感知中，视线并没有集中在页面的某一点上，而是对页面的总体认识，在这一阶段主要是页面的布局和色彩起着形成浏览者第一印象的作用。在第二阶段运动感知过程中，视线从视觉重点开始，按一定顺序浏览页面，当视线遇到较强烈的刺激时，就会停留下来给予足够的关注。2、视觉流程的设计要求网页的视觉流程设计无特定的模式，但无论采用何种视觉引导方式，都应该注意以下基本设计要求：（1）符合人的视觉习惯。这是网页的视觉流程设计的基本要求，做不到这一点，就将大大降低信息的识别度。（2）有效传达信息。视觉流程要保证可靠的信息传达，网页的主题表达就是视觉流程设计的最终目的。（3）突出主要信息。页面的编排要以突出主要信息为目标，组织页面的设计元素，合理引导视觉。一般情况下，长页面的注意中心位于页面的中上部，往往是视觉流程的起点，设计中要传达的主要信息，如主标题、重要内容等都可以放在注意中心上。保持视觉引导的节奏感和流畅感。3、页面间的视觉流程站点内部的信息传达是通过页面之间的链接和切换来实现的，由于网页的多维性和抄链接性，浏览者的浏览顺序也不是单线性的。浏览者依据自己的需要，按照各自不同的流程获取信息。合理的站点地图和导航设计才是保持网站视觉连续性和信息传达有效性的着力点。

网页设计的流程篇3

社会的进步使人们对审美有了更高的要求，同时对非物质设计的要求也越来越高，所以对设计的需求越来越丰富。每个人每天都会接触很多的网页，并且随着非物质社会的发展，每天接触到的网页数量越来越多。因此网页设计越来越重要，要求越来越高。这就要求设计师设计出能够更好的满足大众审美和需求的网页。网页分很多种，如购物网站、传媒类网站、社交类网站等。

网页的创建要更多关注用户的视觉流程以及信息的传递，这些需求则更多的建立在网页的设计过程中。层次感在网页设计中的应用能更好的优化网页的设计。

层次感

层次感是一个广义的词汇。指某一系统在结构或功能方面的等级秩序。具有多样性，可按物质的质量、能量、运动状态、空间尺度、时间顺序、组织化程度等多种标准划分。不同层次具有不同的性质和特征，既有共同的规律，又各有特殊规律。 “层次感“一词最早出自雕塑的浮雕技法中。图案的雕刻，不仅要有三维感，还要体现出图案造型、色彩和功能等的主次之分、大小、透视等关系，它是观感上的主次、强弱、美丑，是大脑中的三维感觉。在创意设计中不仅要进行变形、挤压、分割和增加等，也要符合观感的舒适。

网页设计的层次感有2个分支：

（1）应用元素的层次感。网页设计须有前、中和后的变化，满足这些变化，画面的层次感才更好；

（2）色彩元素的层次感。色彩有进色和退色之别，因此会造成网页由于色彩设计产生的进退感。色彩的前进、后退感形成的视错觉，在设计中用来加强画面空间层次。

层次感与网页设计

1.层次感与网页设计的关系

层次就是有主次之分，无论从大的范围还是小的范围都需要主次。突出主次的方法有许多，如从大小、色彩、动态形状。

首先，大小。视觉重心一般会落在较大的元素上。因此，设计时把要突出的主题文字或者元素大一些，以此吸引读者的视觉重心。

其次，色彩。不同的色彩能给读者带来不同的感觉。例如，红色代表热情、警告、激情；蓝色代表冷漠、忧郁等。使用色彩强调主次的前提是设计师必须研究色彩的特点以及视觉效果。

第三，动态形状。动态的形状更能吸引视觉重心。所以设计师在设计网页时要想网页更能吸引读者，多加入一些动态形状。

2.视觉层次感在网页设计中的重要性

（1）视觉流程

网页视觉流程与展示设计中的流动路线的设计相似。网页视觉流程相当于展示设计中的流动路线，浏览者第一印象决定网站的整体感觉，规划视觉流程引导用户在浏览网页过程中建立明确的视觉顺序（见图1），令用户在浏览网页的过程中可以首先看到网站的主要传递信息，第二步再看什么，最后看什么，潜移默化地使用户形成网站的品牌意识，并使在网页布局中的所有重点信息不被漏看。网页视觉流程设计使网页拥有信息传播更简洁快捷明确的浏览过程。减少读者不必要的视觉搜索，避免读者视觉疲劳。

网站一般由多个页面组成：一级页面、二级页面、三级页面等，页面之间的变换存在不同的导航方式，因此网页视觉流程不是单个网页的视觉流程，而是包含了多个页面的复杂视觉流程。网页设计与视觉流程存在一定的对应关系，视觉流程是随多个页面版式的变化而变化的。

（2）视觉层次对网页设计的影响

视觉层次原则是网页设计中的重要原则。优秀的网页能和浏览者有更好的交流互动，所以设计作为核心，设计出的作品在某一程度上是和用户的视觉交流。一个高能的设计师，必须传达设计思想传达。阅读中，容易视觉疲劳，由于趋利避害，用户是视觉美感的欣赏者，而非数据处理者。所以巨大的信息量，对用户是挑战。如图2中的两个普通圆：

在浏览者看来，图1的画面并不是两个圆，而是一个较大黑色的圆和一个较小红色的圆。在浏览者视觉出现的画面中，并非看到两个普通的圆，而是搜寻画面元素的异同。这些异同感给人区分物体的信息并赋予图形特定的意义。

图2的是网页设计中的文本层次运用。两段文字内容一致，但图中第二段文字更加易读和理解。因为文字排版的接近性、篇幅比例和相似程度使读者将下级内容自然地归入标题和分段。因此层次的错落有致能赋予标题更多的涵义，并非信息的传递。

层次感在网页设计中的构建

层次感有很多类型：网页设计中的层次感、产品设计中的层次感、发型设计中的层次感等。层次感在网页设计中主要有两个分支：应用元素的层次感和色彩元素的层次感。

1.应用元素的层次感的构建

粗糙和杂乱是“丑”的外在表现，而层次感是美的一种表现，单调的重复给人的视觉观感是无味的。层次感的分明、自由活泼有层次变化的造型能刺激视觉上美的感受。在网页设计中，层次感适宜程度依据页面的复杂程度而定。页面复杂，要表达的重点越多，对层次感的要求亦越高。

（1）大小对比

一般来说，物体体积的大小与其自身 的吸引力成正相关。较大的物体更具吸引力。尺寸的设计是制造层次非常高效的途径。因此，设计时把尺寸和重要性相结合是非常关键的。较大的应用元素一般而言是最重要的，相反，最小的应该元素重要性微弱些。对比关系能够体现出对象之间的重要性。设计对象在大小上的戏剧性变化将传递出该信息的重要性或需要被特别关注，亮背景转成暗背景可以区分核心出核心板块，字体大小的对比和色彩明暗的对比传达了信息的重要性。

（2）对齐

应用元素的对齐反映网页构成元素优良的组织性，对齐能赋予浏览者视觉层次安静的作用。如，网页中放在页面左上角的标识被赋予了官方的性质，因为浏览者将左上角的信息与简介、账号、购物车等相联系。以某种秩序感的对齐方式能够激起用户的兴趣，网页设计中整齐排列给用户的视觉感受是：干净，整洁、明了、便于阅读。对齐需要的应用元素要两个以上。对齐必须要使用重复的设计手法，重复体现了应用元素之间的关联性。如果文字都是同一种色彩，那么浏览者看到一段新的同一色彩文字时，会认为这是其中的另一段；当同一个浏览者遇到一个蓝色的或者有下划线标记的链接时，浏览者便会把它理解该段落之外的的文字。

（3）亲密与留白

亲密会把应用元素互相分离且创建下级的层次感。页面中会出现较多的被空白隔开的小部件，这些部件中有新层次，例如标题、副标题、作者和内容等。亲密性以最便捷的方式将有关的内容组织起来，通过亲密之间的关联将主要内容与次要内容相区分。但是，由于亲密而关联在一起的元素有种杂乱的感觉，应用元素间距大，会失去互相关联性。一个优秀的网页设计，浏览者视觉关联性将会精确的将各个元素在大脑中形成完整的统一画面。

2.色彩元素的层次感

不同色相的色彩在视觉感受中有距离感上的差距，即色彩进的退感。色彩的进退指色彩在有对比的情况下给人的视觉反应，其会受到色相的影响，其次是纯度和明度的影响。例如，在可见光光谱中，波长较长的颜色，如红色视觉反馈有前进感；而波长短色彩，如蓝色的是后退感。在色彩纯度中，鲜艳的高纯度色彩，伸张感强；混浊的低纯度色彩，退缩感强。就明度而言，高明度色彩，有前进的视觉反馈，黯淡的低明度色彩，则是后退的视觉感受。

（1）色彩的主次

色彩的主次是指当把作品去色后，作品呈现的从黑灰白比例。例如，当作品去色之后，黑色较多，整体效果会显得沉重。相反，白色多那么整体效果显得苍白，如果灰色多，白色与黑色少，那么版面会显得“脏”，亮点不够。在网页设计过程中，需明确网页设计的主色与辅色。网页设计中丰富的色彩层次会使设计作品色彩艳丽，夺人眼球。

（2）色彩的对比

设计师在网页配色时，需考虑到色彩的对比关系。但色彩的对比有很强的主观性，因此色彩设计时的对比关系的可行性很难掌握。设计师在设计时，更多的要把黑白灰的关系处理好， 页面中太多灰色调，这样对比性太差，页面没有灵气，显得灰和脏。网页设计中避免灰的方法是寻求色彩、明暗、饱和度三者之间的统一。

设计师应用色彩时，不能把所有的色彩都做得面积一样，所以设计师在设计网页时首先得找到主色，并找到与之相关的色彩为辅色。色彩比例的设计可以让网页更具吸引力。

总结

互联网时代，让信息数量呈爆炸式增长，网页设计的目的是通过现代的设计手法，来提高信息传达的品质，以增强信息传播的力量和数量。网页作为一种新的传递信息的视觉表现形式，有传统平面设计的特点。优秀的网页设计，首先应思考内容上的精益求精，其次要对传递的内容合理有效的视觉编排与布局。网页设计的视觉流程已成为用户主观感受而并非公式化，设计只要符合浏览者认知过程的心理顺序和思维的逻辑顺序，可以灵活多变地应用。可以应用各种版式设计与多样的网页布局类型，改变浏览者视觉流程。设计师要做的是让视觉流程自然、合理、畅快，更能给人留下深刻的印象。

色彩作为信息传播过程中的重要元素能赋予信息丰富的美感，并有效的提升信息传达的品质。合理的运用色彩语言，在网页设计中能更好的引导浏览者完成信息获取的过程，让网页获得更强的视觉认知力和艺术感染力，以获得更广泛的传播。

网页设计的流程篇4

一、研究背景

根据齐鲁网及山东传媒职业学院毕业生岗位调研结果，我校毕业生在网页设计方面适应的岗位主要有网页页面设计、前端网页开发、后台动态网页开发等。

网页页面设计：主要应用Photoshop、Illustrator等图片处理和图形设计工具;

前端网页开发：主要应用Dreamweaver、Notepad++、Editplus等网页编码工具;

后台动态网页开发：主要应用Mysql数据库、PHP动态页面开发工具等。

这些工作岗位要求学生熟悉整个网页设计和开发的工作流程，具备所需的基本知识和操作技能，同时还要有良好的职业道德和团队精神，以适应行业发展需求。为了进一步实现职业院校的人才培养目标，提高职业教育的教学质量，围绕实际的网页设计和开发的工作过程，对《网页综合实训》课程进行改革和开发。

二、课程设计原则和设计依据

设计原则：以学生为主体，提高学生的学习兴趣;以职业岗位任务为导向，组织教学内容;以职业岗位需求为依据，突出职业能力培养;以项目为载体，训练学生职业岗位能力和自学能力。

设计依据：本课程以真实完整的网站开发项目为载体设计教学过程，以网站技术人员的岗位工作任务为依据，设计相应教学工作任务，以这些工作任务为载体设计学习情境。教师带领学生在网络机房完成网站项目的开发设计任务，学生以小组为单位开展工作任务。

三、根据岗位能力要求和专业培养目标，确定课程培养目标

1.岗位能力目标

（1）网页页面设计：要求学生能对网站结构进行规划及功能设计、能利用ps等工具设计制作网页页面效果图;

（2）前端网页开发：能将网页效果图重构为HTML网页、能为网页添加常用的js特效;

（3）后台动态网页开发：能进行网站后台数据库设计;能对常用的动态页面功能模块进行开发。

2.职业素质目标

完成具体工作项目，要求学生能自主学习和查阅资料。通过网络搜索资源，首先通过模仿然后举一反三，自主分析问题、解决问题;完成整个网站开发工作项目，要求学生具备良好的职业道德，能够团结协作共同完成工作任务，重在培养学生的团队合作能力和爱岗敬业精神。

四、根据工作流程，基于工作任务，设计学习情境

1.设计思路

网站开发实际工作任务主要包括网站规划设计、网站前端设计、网站后台开发、运营与维护。网站开发过程中的重要环节为设计与开发，即网站规划设计网站前端设计网站后台开发。遵循实际网站开发流程，本课程主要针对这一阶段设计开发一个实际的网站。

2.学习情境设计

遵循网站开发工作流程，以工作过程为导向，以项目为载体，把本课程设计成以下五大学习情境：（1）网站的整体规划设计;（2）网页设计与实现;（3）网页特效设计与实现;（4）网站后台数据库设计;（5）网站后台功能设计。

3.学习子情境设计

对应工作流程和能力目标，每一个情境又以工作任务为载体细分为若干个子情境，即学习任务。学习子情境要与整个项目的实际工作过程相结合，与每个工作阶段的能力目标相对应。下面以第二大情境――网页设计与实现为例，进行基于工作过程为导向的学习子情境设计与实施。

学习情境二：XX网页设计与实现

子情境设计及主要工作任务：

（1）网页版面设计：规划网页页面内容版块;绘制页面布局线框图;

（2）网页素材的搜索及制作：根据网站主题和风格，利用网络搜索，或利用工具软件制作网页素材;

（3）网页效果图设计与实现：利用ps完成网页设计psd效果图;

（4）HTML网页重构：根据psd网页设计图编写html网页代码。

4.考核评价设计

考核方法：本课程的考核包括平时过程考核和期末结果考核，两者各占一定比例。

考核对象：包括小组团队考核和个人表现考核，且侧重于团队的考核，着重培养学生的团队协作意识。过程考核除了考核团队协作以外，还要对学生个人表现情况进行考核，根据小组分工、工作量和完成质量等对每位学生进行考核。

考核内容：工作状态、项目完成质量、团队合作、完成时间、组织纪律。

考核方式：主要包括现场考核、日常考勤等。

参考文献：

[1]向志华.基于工作过程的网页设计与制作[J].湖北广播电视大

学学报，2012，6（32）.

网页设计的流程篇5

中图分类号：J05 文献标识码：A 文章编号：1005-5312（2013）06-0287-01

一、网页设计中的用户体验概述

网页设计中的用户体验 （user experience） 是指用户在访问网站界面、功能的过程中建立起来的心理感受。设计师需要系统的方法才能研究体验，而且这些方法一定能移情地了解用户。

唐纳德-诺曼博士（美国）在《Emotional Design》一书中提到一个完好开发的，有凝聚力的产品，应该看上去美观，用起来舒心，并且以拥有它为自豪，也就是说，快乐的拥有，快乐的使用！

良好的用户体验成为网页设计设计的最终目标之一。网页设计中的用户体验是指用户在访问网站界面、功能的过程中建立起来的心理感受。研究重点在于网页所带来的愉悦度和价值感，而不是网也的性能本身。要求以用户为中心进行组织设计和提供服务， 通过创造性的工作来体现独特的个性和价值，让用户在与产品交互过程中感到愉快、有趣， 富有启发性， 给用户带来成就感，刺激消费等情感要求。

二、明确网页设计流程，找准用户体验设计思路

用户体验不应该是独立的研究环节，而是贯穿于整个项目流程的。要做好的用户体验设计就必须清楚网页设计流程，这样才能理清思路。一般互联网产品项目设计制作流程如下：制定市场需求文档-.制定产品需求文档-用户分析报告-产品架构设计（界面交互与流程的设计）-产品原型设计（页面线框图）-界面UI设计（页面效果图）-界面输出（界面代码化CSS+DIV布局）-设计调整、维护-SEO优化设计。在每一个环节中，都应该换位思考，移情地做好用户体验设计。

三、用户体验在网页设计中的运用举措

1、重视交互设计。

设计人员需经常浏览大量的网站，亲身体验和感受交互流程，并收集优秀素材。交互设计也是UI设计中工作量最大，难度最高的部分。比如说，用户支付流程，支付方式需要几个选择？每种选择方式支付成功后显示什么流程？遇到问题显示什么流程？每个流程还包含哪些功能？可能还会出现什么特殊情况等，这都需要慎密设计。

2、做好移情设计。

尝试考虑用户的使用环境和体验地位进行设计。用他人的经验激发设计的灵感。仔细观察用户的行为习惯和真实反应。这里可以在设计过程中做好用户调查或者模拟用户参与，尝试浏览我们设计的网站，在过程中记录问题、做好修正。在选择调查用户的时，主要、次要、特殊群体都要有所考虑。

3、色彩导向、注重细节。

小细节能带来大改变！体验是建立在信息上的。信息的来源可能是文字、图形、色彩或其他页面元素。特别是网页界面的设计，应该精细到每一个像素。网页中的色彩选择和搭配不同会呈现出不同的色彩情感，设计师应该了解色彩情绪，并加以利用。这样色彩不仅能表现情感，还具有引导功能。网站色彩运用恰当、色彩情感表达合理，不仅能让页面美观更加可以提升网站页面浏览量。因此完全有必要对色彩情感进行深入的研究与探讨。

4、内容吸引（实时更新、迅速、快捷）体验都是建立在信息之上的，良好的信息可以让用户更好的掌握，如果它不是过于强烈的描述的话，还可以创造一个愉悦的体验。网页中的内容要切实，新闻类的还需快捷、更新。

5、网站优化、兼容性考虑。

随着越来越多的移动终端电子设备使用率上涨，人们的上网方式发生了很大变化。简单地举例：网页可能会在PC机上显示，也可能在手机上显示。兼容性的考虑，移动化的优化都被提上日程。设计人员可以结合页面布局技术、JQuery Mobile技术、PHP等技术应用方面入手研究。

四、结束语

本文探索了基于互联网产品项目设计制作流程的用户体验设计思路及具体举措。并归纳了网页设计整体流程中用户体验的方法， 为设计者提供可行性的方法和理论指导。

用户体验是艺术、技术、交互设计的统一，是情感与功能的融合，涵盖了心理学、图形、色彩、和情境设计等多个领域。以后用户体验研究工作不仅可以从设计的角度， 还可从技术角度进行探究。

参考文献：

[1]黄未之.Web界面设计语义及可用性研究[D].上海：东华大学，2007.

网页设计的流程篇6

前言：

互联网时代的到来，改变了人们以往的生活习惯，而且对很多行业岗位产生了较大的影响，尤其催生了一批新型以电子商务为主要经营模式的企业。电子商务网站的网页设计在现代企业的实际运营管理过程中十分重要，不仅起到了宣传企业文化作用，而且也是企业拓展新业务、维护客户的重要平台，这是互联网时代的发展为现代企业单位开辟的新路径。

一、新形势下电子商务网站网页设计与制作的目标

所谓“新形势”指的就是当前快速发展的互联网时代影响下的社会环境的变化，以及人们思想意识的转变。随着各领域贸易的日益频繁，使得商家更依赖电子商务平台，因其成本低、信息资源丰富等特点受到了广大社会群体的认可。

（一）电子商务网站设计与制作的根本目的

在电子商务平台之上，我们可以清晰的看到商品本身的形态、特征以及价格，而且，越来越多样化的网站网页设计形式层出不穷，促使电子商务平台建设的格局逐步升级，新技术的涌现更是突显了电子商务模式的优势。从网站网页设计与制作的目标来看，能够以最直观、最有效的网站网页设计方案来吸引更多的顾客及促使其参与交易才是新形势下电子商务网站网页设计与制作的终极目标。

（二）网站网页设计与制作要能够技术合规且突出重点

具体来分析，对于电子商务网站的设计要突出其功能性，需要最新的电子计算机技术来为其做支撑，程序的设计一定要能够顺利运行，通常要经过测试以后才能够上线运行。对于电子商务的网页设计而言，结构和形式要突出层次感，内容要尽可能丰富，从而将电子商务的关键内容呈现在网页的重点区域，便于人们登录浏览。

二、电子商务网站网页设计与制作所需技术

对于电子商务网站网页设计来说，能够依托网络载体使得开展电子商务业务的企业将其业务有效的推广出去，就是一项成功的设计。在实践过程中，需要应用到很多计算机技术及电子商务设计软件。就以web标准为例来看，电子商务网站网页设计的思想是通过缜密的开发流程来体现的，通过对SHOPEX网上商店系统的制作，进而达到管理网店、拓展业务的目的。从实质上来看，Web标准不是单一的技术标准，而是一个完整的技术体系，其层次较为清晰。在Web标准的支撑下，设计者可以很好地将网站网页结构分割清楚，并能够提升网站开发的效率，降低设计及维护成本。总之，从Web标准的关键技术来看，整个技术体系都是以Web标准基本思想为基础，采用一套有效的开发流程，对SHOPEX网店系统进行电子商务网站的网页设计与制作，最终，这种开发流程在实践过程中得到了验证。

三、电子商务网站网页设计与制作过程

在具体进行电子商务网站网页的设计与制作的过程中，首先要分析目标网站网页的设计内容、方向、网站所要突出的重点等问题，然后，要缕清设计思路，规划出详尽的设计方案，做好网页结构的编排，最后，细化网站结构，完善网页制作的细节。只有按照规划好的流程来，采用合适的网页设计技术及软件，才可以将电子商务网站网页设计和制作的过程完成。

（一）电子商务网站网页的设计内容分析

通常情况下，网站设计的方案要符合当下人们的审美观，简单来说，就是要符合大多数人的视觉习惯，并需要做好合理规划。对于电子商务网站的设计而言，要能够利用大块区域来突出贸易活动的主体内容，并让企业的产品、服务等项目列在最为突出的位置上，只有本着重点突出的原则，才能让浏览网站的客户清楚的看到企业的业务及文化，从而令其产生交易的想法。

（二）网站网页结构编排与方案设计

以Web标准下的网店系统开发为例来看，在进行网页方案设计之前，网页模版的开发较为重要。在实际设计及制作的过程中，采用了SHOPEX网店系统开发的模版来为其做支撑，在每个设计模块区域放置一个独立的设计内容、产品或服务，这样就会令用户对电子商务平台上的功能及业务模块一目了然。最后，要进行网站网页内容的填充，逐步细化网站结构，增添时尚感的素材完善网页制作。

结束语：

通过分析电子商务网站网页设计的特殊性，结合基于web标准的制作技术，来进一步探究网络时代的发展对于电子商务网站网页设计及制作的影响，并提出完善电子商务网页网站设计和制作的具体策略。在web标准基本思想的推进下，开发了一套高效制作电子商务网站网页的系统，并且将其应用于实践，取得了良好的实践成果。总之，以web标准下为例来看，新形势下电子商务网站网页设计与制作已经不同以往，需要改换新型设计内容、结构设计、方案设计等内容，只有这样，才能突出现代电子商务网站网页的设计特点，抓住人们的视线，从而促进电子商务的快速发展。

参考文献：

[1]朱淑琴，魏威，张嘉萌.基于Web标准的电子商务网站网页设计与制作[J].计算机与现代化，2012，03（03）：106-109.

网页设计的流程篇7

移动互联网载体是手机，从界面角度来看，桌面网页设计的分辨率大都是1024以上，而手机的分辨率因型号不同各异，一般只有320，最多也就是800的分辨率，从物理角度来看，这基本上是移动互联网页的最高值。要在足够小的屏幕里让你看到想要的东西，是一件非常难的事。基于这个出发点，大部分移动互联网网页设计的比较简单和实用。移动互联网比起传统的网页具备较强的实时性。我们可以第一时间把身边发生的事情通过手机到互联网上，在此基础上推动了诸如手机人人网、手机微博等社区化移动互联网站的加速发展。

二、移动互联网网页设计中现存问题

1.移动互联网网页分辨率难以衡量目前市场是的手机型号各式各样，屏幕种类令郎满目，规格不等，分辨率从320—800像素都有，这些因素给移动互联网网页设计带来不同程度的难度，设计师很难针对一种或几种手机型号进行设计，只能通过对主流手机进行界面设计，这种设计完全依赖于UC浏览器来自动转换分辨率的设计导致了网页文字错位，页面杂乱，严重降低了用户满意度。

2.网页设计缺乏规划性由于目前移动互联网页面设计受到移动终端的条件限制，设计师设计出的页面往往过于简单，甚至出现文字堆积的状态，整个页面毫无设计感。于此同时，由于移动互联网处于刚起步阶段，很多设计师还不够成熟，设计出的页面缺乏色彩规划，要么颜色过于单调，要么花里胡哨。移动互联网站同时也有电脑桌面网站，由于受到手机条件限制，很多移动互联页面趋于简单，移动互联网站与桌面网站缺乏统一性。

3.网页载入速度慢受到移动互联网速度的影响，再加上很多网站并非是专门设计的WAP站点，在访问一个网站时，大量的图片和视觉效果加载缓慢，使用户丧失耐心，用户体验度大打折扣。

三、基于用户体验的移动互联网页设计原则

1.简洁、易操作、避免输入

鉴于手机屏幕狭小，要做好页面设计，简洁便成了必然的要求。简洁并不单指设计的不拥挤，同时还包括页面板式和图形图像的简练概括。就现行的手机屏幕而言，页面上一行的字数最多能容纳14个中文字符，所以，移动互联网页面的板式结构要相对简单，呈现形式最好单列布局。由于屏幕太小，不足以观察到页面中细微的设计，所以图像的设计要以简洁为主，要让用户对页面内容一目了然，而花里胡哨的设计只会干扰用户的视觉。良好的用户体验下的设计应当遵循少即是多的原则，简单的交互、清晰的提示和反馈，少而精确的用户请求，从简单、易操作中准确的满足用户需求。另外，还应尽可能的减少用户输入，避免给用户增加负担。图1

2.信息扁平化原则

网页设计的流程篇8

2网页设计中交互体验的重要性

网页设计中的交互性是人与页面间的交流，通过页面设计为受众提供一个平等的交流平台，开放性和不确定性是这个平台的特点。网页设计中的交互体验不单单会影响在计算机上的互动，还将对社会文化及现代传媒系统产生深远的影响。网页设计的终极目标是给受众提供更多信息和功能，让受众能轻松地找到所需信息。在网络大发展的背景下，人们获取信息多源于网络，每当人们获取信息、购物、在线聊天时都得面对页面，即页面设计的体验优劣成为人们驻足页面停留时间的重要决定因素。当下企业、文化行业、新闻行业、时尚业、体育行业等都开发了自己的网站，并将其作为与受众交流的平台，每个网站都有自己的独特风格，都有吸引访问者的特点。眼下交互体验设计成为新的吸引访问者的重要因素。这就需要我们不仅要对网站进行精心的创新设计，还要在设计中加入交互体验内容，不仅要清晰的表达页面内容，还要让受众能够参与进来，在具有交互性的环境中访问网站。Flash恰好能够通过它的“交互性”来连接受众与网站。

3网页设计中Flash交互功能的应用

在网站的商业推广中，Flash的交互体验发挥了很重要的作用。Flash交互应用优势主要体现在简单的流动式互动体验和复杂的互动式动画体验中。网页设计中融入了Flash互动体验能够增大网站的活力，进而吸引受众的注意力。Flash强大的交互性很大程度上来源于它的脚本语言，它是一种专门的程序语言，采用统一的编程思想。若想得到最佳效果的网页设计，恰当合理的引导是重点，每个引导过程都要有明确清晰的轨迹。恰当的应用Flash交互功能不仅能吸引受众的兴趣，同时它的交互性又能让受众很好去体验信息交互带来的兴奋。在浏览网页的体验中，交互功能是人们各种感官集合的延伸。在融入flash交互体验思维的网页设计中，受众可以随时通过互联网来查看自己的作品，并与作品进行交互体验，使作品在网络中大范围的传播。网页设计中，信息的流动性会很强，受众不但拥有自由的选择权，而且还能够制约信息对象按照受众的意愿进行处理。在受众与页面的互动体验中，受众的主体意识得到很大的提高，创造力和思维被极大的激发，进而改变受众的思维模式，受众的互动能力被调动起来。

网页设计的流程篇9

中图分类号：TP317.4-4

互联网时代的到来，让网页设计成为了一种新兴领域，从而让网页推广以及网页设计等相关的网页技术得以发展。目前，计算机领域中，针对网页设计的计算机语言有jsp、php以及asp等等。这些语言的形成，让网页设计实现了动态网络连接，从而进一步加强了人们对网页的使用效率。在网页技术发展的过程中，出现了越来越多的网页元素。传统的文字描述已经无法满足人们对于网络的要求，图像化网页时代逐步进入人们的生活，并且对于图像的要求以及网络的速度要求越来越高。因此，针对目前的计算机技术而言，计算机图像技术将逐步成为未来网页设计的主流技术。

1 计算机图像技术的应用与发展

对于计算机的图像处理技术，主要是来源于网络的发展。数码时代的到来，然图片开始出现在了计算机的屏幕上，让更多的人开始喜欢数码图片。而计算机的图像处理技术，就是以数码图片为基础进行设计的。最初，计算机对图像的处理只是限制于对图像的一种显示功能，通过驱动与硬件的接口，让计算机与拍照设备进行连接，从而实现在计算机上进行图片的浏览。随着人们对图片质量要求的提高，开始出现对图片进行处理的需求。那么，针对图像的技术就开始得以研发，从而得到应用。

Photoshop就是计算机针对图片处理开发的一种软件，在一定程度上对于图片的处理而言，有着非常重要的作用。图片的质量在拍照以后，一般是不可以进行再次加工的。但是，随着计算机图像处理软件的研发，让图像的再次处理成为了可能。Photoshop可以通过对图片的格式进行识别，从而对色彩进行一定的控制，保证了其在使用的过程中，对光线以及色彩等进行一定的操作，提高了图片的质量。

随着计算机图像的不断普及，让更多的非专业人士开始着眼于计算机图像的探究与处理。那么，图像处理技术就要进行一定的改革。其中，对于一些图像处理软件，就显得更加重要。为了能够让更多的人对图像进行处理，一些简单操作的图像处理软件也开始得以发展。因此，计算机图像处理技术未来的发展必然向着简单化与简洁化的方向发展。

2 网页设计的图像元素需求分析

网页设计是因为互联网的出现，而逐步让更多的人开始喜欢用网页进行信息的收集与获取。因此，网页设计中，图像的因素开始不断被重视，从而实现了网页设计的发展。网页的基本组成有文字和图像，随着网络的带宽不断增加，也允许了更多图像文件进行和展示，从而让网页更加丰富和美观。因此，在网页设计中，图像元素越来越重要。但是，为了满足图像的大小和清晰度的双重标准，计算机图像技术设计研究出网页图像的格式，让图像可以同时满足大小和清晰度，从而让图像有了更好的使用范围。

总之，要满足网络用户使用的需要，才能彻底的进行图像处理技术的研发。对于出现的一些问题，需要集中解决，保证网页的加载速度，并控制图片的质量，才能满足未来网页的发展。因此，计算机图像处理技术依然有很大的开发空间。

3 计算机图像技术在网页设计中的应用

对于网页设计而言，其中最为重要的元素就是图像。在一些复杂的网页中，还会存在一些动态的图像设计以及flash元素等等。这些元素的存在，让原本空洞的网页更加鲜明有特点，从而提高了用户的体验度，提高了网页的质量。那么，实现这样的技术，需要计算机图像技术的支持，在网页的设计中，计算机图像技术有着怎样的应用呢？

首先、计算机图像处理技术可以满足网页设计对于图片的格式需求。在网页设计中，需要诸多基本元素组成一个完整的网页，从而让浏览者获取所需要的信息。同时，网页的设计必须合理而且便捷，让浏览者有相对比较好的浏览体验。因此，图像是网页必不可少的原因之一，并且越来越受到人们的重视。因此，计算机图像技术首先要处理好网页的图像问题。网络图像的格式一般都是jpeg与gif，其中jpeg是最为常用的图片格式。而gif可以实现动态效果。因此，两者所需要的参数和规格是不同的，那么在计算机图像处理技术中，就应该对两者的区别有所区分。因此，计算机技术应该能够满足其格式的需求。

其次，计算机图像技术要适当对图像进行大小的控制。由于目前网络的带宽是有限的，因此，为了能够保证网页浏览的流畅度，需要对图像的大小进行限制。但是，图像的大小与其清晰度有着直接的关系。一般情况下，会陷入一种尴尬的情况。追求图片的高清晰度，但是网页加载就会十分困难，造成浏览效果不佳。如果降低图片的清晰度，就会加快网页的加载速度，但是浏览效果依然不好。因此，计算机图像技术研发一种针对网页的jpeg图片，其能够在两者之间有一定的权衡，从而保证了网页的加载速度以及图片的清晰程度，做到了两者的一种兼顾。

最后，计算机图像技术需要针对网页设计进行进一步的开发。目前，计算机图像技术以软件处理为主，Photoshop是最为常用的图片处理软件。但是，对于网页逐步普及化的过程中，出现了诸多个体的设计者。为了能够让这些个体成为网页设计的主流，从而更加丰富网页的内容和色彩。需要让计算机的图像处理技术相对降低要求，满足一般人的处理能力。其中，Photoshop的确功能强大，但是在一定程度上限制了很多非专业人士的使用。因此，在一定程度上需要开发一些相对简单的图像处理软件，从而让更多的网页开发者能够体验网页设计的乐趣。

4 结语

通过对计算机图像技术的分析，以及对网页设计中对图像技术的需求，可以容易了解到在进行网页设计的过程中，网络使用者更加倾向于对图像的浏览。传统的文字描述已经渐渐淡出了网页设计的主流，而图像技术渐渐兴起，并且取而代之。那么，如何让网友享受更流畅的浏览空间，让网页浏览更加顺畅、高效，成为了网页设计中的主要问题。因此，计算机的图像技术，通过结合网页设计技术，针对图像进行网页图像格式的设计，从而保证了图像的清晰度以及质量，在一定程度上实现了清晰度与顺畅度的双重标准。因此，计算机的图像技术成为了网页设计的必须技术之一，也在一定程度上完善了传统的设计缺陷，实现了网页设计的现代化。

参考文献：

[1]包义保，殷丽华，方滨兴，郭莉.动态安全策略逻辑语言及安全属性验证问题的研究[J].计算机研究与发展，2010（04）：932-941.

[2]朱延飞，王刚，姚养无.平面组合连杆机构的多目标优化设计及仿真[J].火炮发射与控制学报，2008（04）：94-96.

网页设计的流程篇10

何为网页的整体性，即在网页艺术设计的过程中既要遵循网页设计的基本诉求，将主题凸显出来，将内容与形式进行完善的搭配；同时，网页的整体画面感、形式美要艺术性要合理搭配，形成整体效应。这样，网页的基本内容能够一目了然，同时艺术性和美感也得以提升。因此，从整体角度衡量和操作设计，才是新时期网页艺术设计的主流。例如，在版式设计上，要将页面中各视觉要素作通盘考虑，以周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定。所以，从细节看到整体、从版式看到画面，这才是当下网页艺术设计的基本态势，也是优秀设计师必须遵循的准则。主要凸显出网页的整体性，其艺术性才能表现出来，网页的整体水准和质量才能得以提升。总之，规范的运用网页艺术设计的操作技巧，统筹整体性与艺术性，这显然是当前网页艺术设计的主流走向。

1．2行业的发展催生了设计师的队伍壮大

很明显，相比于传统的网页设计，网页艺术设计更加注重网页的艺术性特征与美感的表现，更能吸引访问者与受众的注意，因此格外受到重视。可以看到，单就网页设计这一个行业来看，运用艺术设计的思维和元素已经是大势所趋。在行业急剧的变化和发展过程中，网页艺术设计师的队伍正在逐渐壮大，这正是依附于网页艺术设计的蓬勃兴起。不难想象，未来的一段时期内，更多技能过硬、思维活跃和技巧多元的网页艺术设计师将“登堂入室”，进一步推动网页艺术设计行业的快速发展，这一点毋庸置疑。

2网页艺术设计的发展趋势探究

前面就网页艺术设计的发展现况进行了简要的分析，同时也穿插着对网页艺术设计的原则、特点进行了剖析。展望未来，网页艺术设计的发展还是很具生命力和影响力的。

2．1多种要素的交互与综合运用

很明显，未来随着计算机技术、多媒体技术的综合、快速发展，网页艺术设计必然受其波及，产生剧烈的变化。其中，设计过程中多元要素的交互与综合性运用能够增加网页的艺术性，提升网页的观感美感度，拓展网页的辐射力与影响力。未来，网页艺术化设计中诸如视频、音频、新型静态媒体、流媒体、自媒体等多种要素的综合交互是基本的趋势，也必然带动网页艺术设计的再一次变革。

网页设计的流程篇11

创建面向用户的远程教育门户网站是高校远程教育机构进行信息化建设和大学文化建设的重要内容。“远程教育网站”通常被称为远程教育的网上“门面”。它既是服务师生的平台，也是对外宣传或展示自己办学实力及服务能力的重要窗口，也是传递大学文化的有效载体。其中，网页样式设计起关键性作用。

一、综述

远程教育网站应该尽量做到门户结构清晰，页面精美，访问快捷、功能实用。主要包含：整体布局要求和网站整体设计风格统一；界面设计体现用户相互之间交流互动的特色；网络响应速度应该尽量快，更快的信息访问速度、更加省时和智能化的用户界面；更简便、智能化程度更高的浏览查询流程；后台管理功能强大、录入效率高；易于查看网民的建议和评论以及后台信息。一个网站门户的主页面通常由Logo、导航、Banner、内容、链接、版权这六部分元素组成。有研究认为，网页布局包括传统“T”型布局、上下对照式布局、“上中下”“三”字布局、左右对称型布局、“回”字形布局、“同”字形布局、“国”字型布局、“川”字型布局、氛围式布局、POP海报四、式布局、“杂物箱”布局、“人物风格化”布局、封面型布局、简约型布局、综合型布局、瀑布流式布局等，这是基于对网页结构“形式”的划分。每一类型的页面样式都具有统一的构成元素，但彼此间又有自己独特的布局特点，因而呈现出不同的网站视觉效果和网页设计风格。

二、页面样式的分类特征

1）“简约式”。“简约式”的特征是页面主体“一屏显示”、布局简洁。在主流显示分辨率下，网站浏览者不再需要上下、左右的拖动鼠标，即可实现页面主要内容的相对完整的浏览效果。2）“图片动画式”。“图片动画式”的特征是布局简洁明晰、页面图片感强烈。一个精彩的网页缺少不了图片，如图片按钮、翻转图片、滤镜、透明图、导航图等，图片往往在网页中起到画龙点睛的作用。图片传达信息的直观性与寓意性远远超过文字，大号图片的应用也是简洁设计的一种体现，可以明确的表达网站诉求。3）“完整式”。“完整式”的特征是布局规整秩序、信息直观、“多屏显示”、视觉感强。网站页面组成元素之间，既错落有致，又和谐统一，营造出的良好秩序感。一般按照分列样式布局设计，以字体的大小对标题文字与正文内容加以区分，区别于以往栏目图标的复杂显示效果，具有“扁平化”的设计特点。

三、页面样式的特色功能

1）“角色浏览”。“角色浏览”是指网站设计者主观上假定网站浏览者为在读学生、教职员工、考生、访客等不同角色，按照浏览需求对网站综合信息进行分类和聚合，满足不同的访问行为。。在实际应用中，网站设计者运用CSS样式，以达到利用CSS美化网页，统一网站内各个网页风格。CSS样式定义可以用代码编写，也可以借助样式生成器可视化生成，样式可以定义在当前网页，也可以导入外部样式表。优点在于一是简化了不同网页重复的格式设置工作，二是将来只要更新了CSS样式，所有引用该样式的对象都会更新，便于网站的更新和维护。2）“Banner图示”。“Banner图示”是Banner在高校门户网站中“广告”效果的实现和扩展。《设计的法则》中提到：要增加人们的辨识力，让人回想起重要信息，就可以利用“图片优势效应”。用图片加文字，确认强调的是同一信息，以便达到最佳效果。有鉴于此，网站设计者将“Banner”作为一个专题栏目，充分利用其“图示”功能，实现其突出视觉功能的同时，也发挥其强化信息传达效果的作用。网站浏览者进行点选后可阅读，Banner标签包含的图文内容，更新速率频繁，浏览者可以根据时间进行自主选择，又使它具有了“书签”功能的展示效果。3）“适应网页设计（Responsive Web Design）”。如何将日新月异的网络技术应用于高校门户网站，使网站浏览者在各类浏览器终端上，尽可能获得良好的用户体验，是网站设计者思考和努力的方向。网络使用环境复杂而多变，除去传统意义上的台式机和笔记本电脑，又有了智能手机、iPad、iTV等终端。鉴于智能手机和平板电脑等移动浏览器终端的普及，一些远程教育门户网站，利用先进网络技术，创新设计页面样式，来适应和满足各类移动终端的浏览需求。

四、结语

远程教育网站是信息技术和大学文化在网络媒介平台的融合与呈现，网站设计者要做到内容为主，用户至上，提高用户满意系数。设计者应对网站设计进行调研分析，对其页面样式进行规律探析，形成更多系统化、理论化的设计经验和技巧，以此指导网页样式设计实践活动。

参 考 文 献

[1]祝晓铭，王艳平.高校门户网站页面样式设计探析[J]. 电脑知识与技术，2015（VOL.11）第2期：199-200.

网页设计的流程篇12

学情分析

高一学生经过近一个学期的学习，已经具备了一定的信息获取、加工、管理能力，同时了解了网络技术的基础理论，对精彩的网页很感兴趣，非常向往掌握网页制作的技术，很想亲自创作网页作品来表达自己的想法进行有效交流。但他们会忽略电子作品制作的前期规划，对于网页设计的一般流程，以及如何确定适合的主题、如何在作品中体现主题，缺少必要的经验，因此本节课有必要在规划设计方面加以训练。

教学目标

知识与技能目标：了解创作电子作品的一般流程，理解网页规划的重要性；能够根据网站主题要求设计评价指标，对网站的质量与运行状况进行评价。

过程与方法目标：通过赏析、评价网页作品，了解网页规划的设计要素，提高审美意识；能根据任务需求，确定主题，进行科学规划，初步掌握网页规划的方法。

情感态度与价值观目标：通过小组合作，感受同学友谊，增强集体意识和协作意识；学会欣赏他人的劳动成果，提高艺术修养和审美情趣。

教学设计思路

通过赏析网页，让学生感受优秀网页所具有的特征，了解网页规划的设计要素，形成网页规划设计的思路。通过往届学生网页作品投票和评分的过程，明确网页规划的注意事项，初步了解网页评价量规，激发学生的创作兴趣。最后，结合实际表达需求，小组协作，确定创作主题，进行创意设计，完成网页规划设计。

教学过程

1.创设情境，导入新课

师：因特网在全球的迅速普及和发展，为人类开启了一方全新的文化空间。在网上我们可以浏览各种各样的网页，获取无穷无尽的知识。因特网上的每一个网页都从属于某一网站，可以说，包含着各种信息的因特网就是由无数的网站组成的。只要拥有了一个属于自己的网站，你就可以在茫茫的网络世界中拥有一片属于自己的天空。同学们想不想做一个属于自己的网站呢？

生：想。

师：网站也是一个信息作品，请同学们思考前面学到的信息集成的一般过程。

生：确定作品主题—规划设计作品—采集处理素材—制作加工作品—测试作品。

师：那么网站的制作流程是什么呢？

生：网站的规划—素材的搜集、加工—网站的制作—网站的测试与—网站的评价。

师：由网站创作流程我们可以看出，网站创作、始于规划，本节课我们学习网站的规划与设计。要求以小组为单位制作一个网页规划设计表。

设计意图：导课承上信息集成的一般过程，启下引出网页创作流程，揭示规划的重要性，从而点题。

2.规划开始，确定主题

这是一个承上启下的教学环节。时间不长，但作用很大。首先提出问题。

师：同学们平时都喜欢去什么网站？

生：百度、新浪、人人、QQ、4399……

师：这些网站要表达的主要内容，也就是网站的主题是什么？

生：百度是全球最大的中文搜索引擎，新浪以全面而及时的新闻而著称……

师：主题是信息作品的灵魂，由大家来制作网页，你想表达什么主题呢？你对哪方面的主题感兴趣？提示确定主题的原则：小而精，目标定位准确，积极、健康、向上，网页名称有创意，符合主题（幻灯片展示）。

设计意图：明确主题的含义，了解主题的重要性，它是信息作品的灵魂，思考启发网页主题，为后面的制定规划做铺垫，提供选题参考。本环节主要采用谈话法，谈话法的运用，有利于建立民主平等的师生关系，而课堂上的民主气氛是学生创造性思维得以激发的一个重要条件。

3.网页欣赏，归纳网页设计元素

师：我们来欣赏一个网页，百年世博，落户上海，城市让生活更美好，同学们说说这个网站的主题是什么，并思考如何在网页中体现这一主题。

教师引导学生从网页设计要素中来体现主题，如内容、色彩、版面布局、导航设计、图标设计、图片等。

教师组织学生从以下几个设计要素讨论网站内容和风格，分析网页框架和风格。

（1）栏目设置

师：确定好网站主题后，要把网站的内容按一定的方法进行分类，并设置专门的栏目（如图1）。

网站栏目设计原则一是要紧扣主题，二是要突出重点。

（2）网站色彩

师：不同的颜色给人不同的感受，同学们看这几个网站主要是什么色调，给人什么样的视觉感受呢？

学生思考回答问题。

教师总结图2所示的网站色彩与感觉之间的关系。

（3）网站LOGO

师：我们重点来看图片3中网站的Logo，什么是网站的Logo呢？

生：网站的标识。

师：我们来欣赏图片3中几个网站的Logo，并思考他们所表达的含义。

学生思考，教师予以引导：百度的“熊掌”Logo的灵感来源于“猎人追寻熊爪印迹”的刺激，这与李先生的“分析搜索技术”非常相似，从而构成了百度的搜索概念。熊掌图案也最终成为了百度公司的Logo；新浪的大眼睛寓意世界尽在你的眼中等。

设计意图：采用了比较法、归纳法以及“基于问题的学习”等教学方法，让学生学会欣赏网站，通过欣赏和思考问题，初步归纳网页设计要素，并意识到：要根据主题，设计恰当的网页风格和内容结构。

4.网页评价，明确优秀网页的标准

活动要求：快速浏览学科网页上展示的上届学生的网站作品，选出自己感兴趣的网站进行投票。

活动过程：教师观察学生评分过程，实时展示各网页作品的投票人数柱状图，查看相应网页的评分结果。

分析评价结果，总结网站评价标准。首先，分析学生对网页评价的结果——引出网页规划设计应注意的问题：选题不能过大，网页名称有新意；内容栏目设置有条理，清晰；色彩搭配合理；版面布局规范，美观；导航设计恰当。

设计意图：让学生深刻体验优秀网页的设计标准，学生在学科网上投票评价网页，首先学生很感兴趣，其次大大提高了教学效率，将评价的结果作为讨论的依据总结出网站评价标准，环环相扣，从而轻松自然地突破难点（网站评价指标的讨论和确立）。

5.课堂实践，制定小组主题网页的规划

教师提出学习任务：以小组为单位完成网页规划设计表。而后，教师介绍学习资源，并提出组内按栏目和角色两个维度分工的建议（如图4、图5）。

设计意图：本环节主要采用了小组协作法和自主探究法，让学生去规划设计网页，为学生创造力的发挥提供了平台。学科网提供了大量的网站规划和设计的指导资源，并采用“半成品加工”教学策略给学生一个网页规划设计表和案例，尊重学生的个体差异，让学生有表可依快速进入了课堂实践。同时在组间形成竞争，促进了组内团结。按栏目和角色二维分工，使学生的责任更加明确，课后能有针对性地收集资料和素材。

6.展示规划，相互交流

请1～2组学生交流展示自己本小组的规划设计。学生浏览并讨论。

7.课堂小结

强调规划的重要性，以及规划的思路和方法。同时渗透我们学校的教育部部级课题《人生规划意识》。你不规划人生，就要被人生规划，希望我们的人生经过规划和设计后，可以成功和幸福。

教学反思

本节内容的基础知识和基本技能主要是利用学习网站设置问题情境、提供学习资源，学生可以通过自主学习获得，教师对部分重点难点进行讲解和演示。而动手规划部分要求学生主动地与同伴探讨、合作，将知识与技能内在化、系统化，达到认知结构的有效调整和重构。合作学习在这一建构过程中起了关键的作用。因而本课主要采用了自主探究法、小组协作法，个别地方采用了比较法、归纳法，而教法主要采用了任务驱动法、基于问题的学习、讨论法、讲授法。应该说，整个教学过程比较流畅，基本上都按照教师的教学预想开展教学，学生在教学中能够积极地思考和回答问题，能够学会有效地规划网站的方法，提升了规划能力和审美能力。

点 评

这是一个在借鉴基础上进行创新的优秀案例。说其优秀，是因为每一环节都体现出了设计者的精心、细心。

导入新课部分，由信息集成的一般过程引入，巧妙利用学生已学知识与技能进行迁移，即将信息集成中学习到的规划设计迁移到网站制作中，有利于促进学生在制作作品（包括多媒体与网站制作）中形成规划意识，这也是本次课的核心指向。

网站评价部分，引导学生根据网站分析的结果总结网站评价标准，实现了以评促学、以评导学的目的，在此过程中潜移默化地促进了学生对规划中应注意问题的关注，从而避免了类似问题的出现，以提升规划的效果。

网站规划部分，学生的规划不是空洞的存在，培养规划能力也不是纸上谈兵，因此教学中必须借助各种形式促使“虚”的规划设计落到“实”处，该案例使用的是规划表，也有案例采用了思维导图等方式来实现规划的具体化与可视化。

分组合作部分，作品制作课中学生工作量相对较大，因此分组合作是常见的方式。二维分工方式的采用，既保证所有学生都能经历网站制作，在此过程中形成对网站制作的体验与感悟，也较好关照了学生兴趣爱好等方面的差异。

课堂小结部分，在本次课教学内容的基础上，拓展延伸至人生规划意识的培养。既与教学伊始的设计呼应，又有很大程度的提升。设计者强调的是与该校相关课题的联系，其实，就作品（包括多媒体与网站制作）中的规划部分教学而言，最后提升至人生规划方是此部分的终极追求及应然境界。这一点，当为信息技术教师进行相关内容教学时所借鉴。