网页设计的流程篇（1）

引言

在浏览网页的时候经常可以看到这样的网页，上面排满了内容，没有考虑它的空间框架，它的编排秩序，在页面占着均衡的地位，让人看了无法知晓哪些内容才是最具发言权的，没有流畅的视觉流程，这是典型的没有注意到编排的清晰度、可读性。

一、视觉流程

在网页版面设计中，我们强调图文的一致性与和谐性，即版式的视觉流程。版式设计的视觉流程是一种“空间的运动”，是视线随个元素在空间沿一定的轨迹运动的过程，这种视觉在空间的流动线为“虚线”。正因为它虚，所以设计时容易被忽略。而有经验的设计师却非常重视并善于运用这条贯穿版面的主线。可以说，视觉流程运用的好坏。是设计师技巧是否成熟的表现。视觉流程可以从理性与感性、方向关系的流程与散点流程来分析。

在网页编排的过程中，我们首先要将凌乱页面的组织过程、混杂的内容依整体布局的需要进行分组归纳，经过进行具有内在联系的组织排列，反复推敲文字、图形与空间的关系，找到最适合他们的位置，或主或从，各自在页面中找到自己的“舞台”，在混乱无序的状态中创造新秩序使其成为丰富多样而又简洁明确的统一整体，在对比中达到和谐统一。

方向关系的流程强调逻辑，注重版面的清晰脉络，似乎有一条线、一股气贯穿其内，是整个版面的运动趋势有“主题旋律”，细节与主体犹如树干与树枝一样和谐。方向关系流程较散点关系流程更具理性色彩。方向关系表现为以下几种形式。

（一）单向视觉流程

单向视觉流程使页面的流动更为简明，直接地表达主体内容，有简洁而强烈的视觉效果。其表现为三种方向关系：

竖向视觉流程——坚定、直观的感觉

横向视觉流程——给人稳定、恬静之感

斜向视觉流程——以不稳定的动态引起注意

（二）曲线视觉流程

各视觉要素随弧线或回旋线而运动变化我们称为曲线视觉流程。曲线视觉流程不如单向视觉流程直接简明，但更具韵味、节奏和曲线美。曲线流程的形式微妙而复杂，可概括为弧线形“C”和回旋型“S”。弧线形具有饱满、扩张和一定的方向感：回旋形两个相反的弧线则产生矛盾回旋。在平面中增加深度和动感。

（三）重心视觉流程

重心是视觉心理的重心，可理解为：其一，以强烈的形象或文字独据页面某个部位或完全充斥整版，其重心的位置因具体画面而定。在视觉流程上，首先是从页面重心开始，然后顺沿形象的方向与力度的倾向来发展视线的进程。其二，向心、离心的视觉运动，也是重心视觉流程的表现。重心的诱导流程使主题更为鲜明突出而强烈。

（四）反复视觉流程

反复视觉流程指相同的或相似的视觉要素做规律、秩序、节奏的逐次运动。其运动流程不如单向、曲线和重心流程运动强烈，但更富于韵律和秩序美。

（五）导向视觉流程

通过诱导元素，主动引导读者视线沿一定方向顺序运动，由主及次，把画面各构成要素依序串联起来，形成一个有机整体，使重点突出，条理清晰，发挥最大的信息传达功能。编排中的导线有虚有实，表现多样，如文字导向、手势导向、形象导向以及视线导向等。

（六）散点视觉流程

散点视觉流程指页面图与图、图与文字间呈自由分散状态的编排。散状排列强调感性、自由随机性、偶合性，强调空间和动感，追求新奇、刺激的心态，常表现为一种较为随意的编排形式。这种编排方式在国外网页设计十分流行，而国内还偏重于相对规则、理性的编排方式。我们读画的过程为视觉流程，所阅读的画中，有严谨规律的、流程明朗的、也有流程疏散甚至完全自由散点的。面对自由散点的页面，我们仍然有阅读的过程，即：视线随页面图像、文字或上或下或左或右地自由移动阅读的过程。这种阅读过程不如直线、弧线等流程快捷，但更为生动有趣。也许这正是页面刻意追求的轻松随意与慢节奏。

二、最佳视域

在进行网页的版面设计时。设计师应考虑到将重要信息或视觉流程的停留点安排在注目率高的位置，这就是优选最佳视域。

页面中，不同的视域，注目程度不同，心理上感受也不同。上部给人轻快、漂浮、积极高昂之感；下部给人压抑、沉重、消沉、限制、低矮和稳定之印象：左侧：感觉轻便、自由、舒展，富于活力；右侧：感觉紧促、局限却又庄重。

三、总结

以上前五项流程，均为方向和具有理性的流程。在编排方向性视觉流程关系时，要注意个信息要素间间隙大小的节奏感。若间隙大，节奏感慢，显得视觉流程舒展；而过分增大，则失去联系，彼此不能呼应，视觉流程显弱。若间隙小，节奏强而有力，信息可视度高，布局显得紧凑；但间隙过小，会显得紧张而拥挤，造成视觉疲累，无法清晰快捷地传达主题。而第六项散点视觉流程似乎与前五项相矛盾，其实不然，散点视觉流程是在前五项的基础上的一种突破与创新，它更多地体现了设计师的个人风格与编排技巧，这种创新更具现代设计的气息。

网页设计的流程篇（2）

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

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

网页设计的流程篇（3）

在进入21世纪以后，我国逐渐向信息化发展，人们的日常生活水平也得到了有效的提高，互联网也成为人们在日常生活、工作中必不可少的工具，成为人们在交流、信息查找的重要途径之_。在互联网的发展过程中，网页设计、开发是人们使用互联网工作和生活的重要工具，其中DIV+CSS的布局技术在网页设计和开发的过程中占有重要的地位。但是在传统的网页布局技术运用的过程中，出现了很多隐藏的弊端，并在发展的过程中逐渐显现出来。同时，在这样的情况下，IT行业在网页设计、开发过程中，对DIV+CSS布局技术给予了高度的重视，并且也得到IT行业的广泛应用。DIV+CSS布局技术也是网页设计、开发过程中一种较为流行的技术和术语，开发人员通过利用DIV+CSS布局技术对网页设计过程中的对象进行准确的定位，从而增加了网页在使用过程中的效果和传输、下载速度，也在最大程度上方便了开发人员对网页维护和更新的操作流程。

1网页设计中DIV+CSS布局技术的含义

在网页开发的过程中，DIV+CSS技术布局占有重要的地位。其实DIV+CSS技术也可以分开来说，DIV，CSS在网页布局的过程中，所代表的含义和意义也是不一样的，下面对DIV+CSS布局技术的含义进行了分析：

第一，DIV是DIV+CSS布局技术中的重要组成部分，也是网页设计和开发过程中重要的应用语言和标记元素，为网页设计、开发过程中的文档，提供了网页中的布局结构和网页的背景，在网页设计、开发的过程中也可以将DIV称为定位技术。DIV在起始和结束的过程中都进行了一定标记，并且都是网页设计、开发过程中的文档构成服务的，DIV对网页设计和开发过程中的一些元素进行了有效的控制。

第二，CSS的全称是Cascading Style Sheet，按照中文翻译为层叠样式表，是在网页设计、开发过程中，网页形式和网页信息之间的一种标记语言。在网页设计的过程中，DIV+CSS布局技术中的CSS技术可以准确控制网页中的页面的颜色、布局、背景等，网页中的页面效果更加的丰富，并且开发人员在进行网页设计的过程中，操作流程也相对简单，也使网页中的语言更加简洁化。

第三，DIV+CSS布局技术在某种程度上将也是XHTMDCSS技术。人们在使用网页文档的过程中，对网页中的结构也在进行了一定程度上的规范。DIV+CSS布局技术将网页设计中的结构进行了一定的规范化，将页面中元素进行了一定的规整，使页面中的样式和内容分离，成为一个单独的个体。并且在将2种技术合为1种技术的过程中，可以使网页在操作的过程中，更加灵活、方便。

2 DIV+CSS布局技术在网页设计中的作用

2.1和搜索引擎可以相互融合

搜索引擎在网页设计的过程中起到了重要的作用，是根据Spider程序查找互联网中的内容。Spider程序一般是由少到多地进行网页内容的查找，等到将所有的内容查找扫描后，引入到其他网页中，然后访问网页页面，重复扫描、更新，直到内容出现为止。在使用传统的数据代码的过程中，在内容浏览和操作时不仅复杂，多余的代码也较多，但是在DIV+CSS布局技术中，可以将浏览和操作的流程相对地简单化，并且在搜索内容的过程中，时间也相对较短，其执行的效率也相应提高。另外，在DIV+CSS布局技术的应用过程中，将代码也进行了一定程度的简化，和搜索引擎配合良好。这样，不仅提高了网页设计中的执行的效率，也有效提高了网页设计、开发过程中的质量。

2.2简化了网页维护、更新等操作流程

设计人员在对网页进行设计、开发的过程中，利用Table对网页进行版本的更新设计时，需要对网页中所有的代码进行一定程度上的整合，这样造成网页维护和更新的工作效率在一定程度上的降低。但是，随着时代的不断发展，我国IT行业将DIV+CSS布局技术有效地应用到网页设计。更新、维护的过程中，在一定程度上降低了网页中的内容，并利用DIV+CSS布局技术进行一定程度上的控制。当设计人员对网页中的某一个部分进行一定程度上的更新时，可以有效地提出这部分内容和代码，设计该区域代码，设计人员利用DIV+CSS布局技术对网页进行设St.维护、更新，对其他部位也不会造成任何的损伤。

2.3加强了传输的效率

在传统的网页设计的过程中，往往只注重网页页面的效果和带给人们的视觉冲击，在这种情况下，设计人员在网页中的传输效率较慢，也给网页使用带来一定程度上的影响。但是设计人员在使用DIV+CSS布局技术进行网页设计、开发的过程中，可以对网页中的代码、文字、图片进行灵活的设计，设计人员利用网页中的过滤软件，取代了图片带给网页的视觉冲击。同时，DIV+CSS布局技术也将网页中的中体布局分为不同的层次，在网页开始使用的过程中，无需将网页的内容储存到一个较大的表格中，这样在一定程度上加快了网页的传输效率，在人们的日常生活、工作使用的过程中最大程度地提高了便利性。

2.4有效地提高了网页设计中的视觉效果

软件设计人员在进行网页设计、开发的过程中，利用传统的Table对代码进行整合，在网页的页面中，图片、文字等效果的分辨率并不高，页面的效果并不是很好，同时在设计的过程中，需要大量的设计人员。不同的设计人员所设计的网页形式也是不同的，这样对人们使用的网页造成了一定程度上的影响。但是，在DIV+CSS布局技术对网页设计、开发的背景下，DIV+CSS布局技术能够有效地统一设计人员的设计理念、风格、特点等，并且DIV+CSS布局技术可以有效控制网页中的结构，提高了页面中图片、文字的分辨率，也给人们在使用网页的过程中带来一定程度上的视觉冲击。

3 DIV+CSS布局技术在网页设计、开发中的应用

在网页设计、开发的过程中，设计人员要想有效地利用DIV+CSS布局技术对网页中的结构进行一定程度上的规划，就要对网页中的语言代码的结构进行一定程度的分析。网页中的语言代码其实就是网页结构中的构成元素，网页结构其实就是网页设计、开发过程中的构架。换句话说，就是在网页设计的过程中，对网页中的内容进行有效的规划。下面就对DIV+CSS布局技术在网页设计中的应用进行简单的分析。

3.1 DIV+CSS布局技术在网页中内容规划的应用

设计人员在网页设计、开发的过程中，应当对网页中的内容的几个基本组成要素进行具体的分析。网页内容中的几个基本的要素一般情况下可以分为：网页的头部、网页的主体、网页的页脚和网页中的版权区域。另外，DIV+CSS布局技术在网页设计的过程中，可以使网页形成基本的框架。并且在具体的编写的过程中，DIV+CSS布局技术可以有效整合网页中的代码，最大程度地简化操作流程，为设计人员提供了方便，提高了设计人员的工作效率，同时也使人们在使用网页的过程中可以一目了然。

3.2 DIV+CSS布局技术在网页设计中信息的应用

设计人员在利用DIV+CSS布局技术进行网页设计、开发的过程中，可以灵活地将网页中的信息进行一定程度上的整合，并有效地展现出来，给人们视觉的冲击。在网页设计的过程中，要对网页中的信息元素进行定义，合理安排网页页面中的信息，这样不仅简化了设计、开发的流程，也有效地减少了设计人工作人员的工作负担，从而提高了工作人员的工作效率。同时，也使网页中的形式更加丰富，例如：新闻、通知、公告、天气等信息形式，也有效地节省了网页中的空间，给人们使用网页提供了最大程度的方便，也给人们带来了视觉上的冲击。

3.3 DIV+CSS布局技术在网页设计中的链接的应用

网页设计的流程篇（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.考核评价设计

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

网页设计的流程篇（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）

中图分类号：TP3 文献标识码：A

随着商业社会的繁荣，大众生活品质的提高，互联网代表着一种崭新的信息交流方式。网页设计也越来越趋向人性化，设计要求围绕人为中心展开进行设计。而网页作为一种传播信息的媒介，会受到时间、空间和适用环境的限制。但是如何让凌乱复杂的网页变得变得轻薄简洁，在拥有它完整功能的同时又能很好的把重点模块区分出来呢？如何更好剔除多余的颜色、背景或是部分元素，保留并梳理清楚视觉流程呢？

1网页设计视觉流程筹划

视觉流程俗指人们在观看网页时候的视觉路线走向。美国阿尔多斯・赫叙尼在《观看的艺术》中提到：感觉+选择+理解=观看。观看的第二步是从视野中选定一个特定的元素，进行下一步详尽的理解。这是他总结给我们看清事物的方法。

视觉流程是视线在观赏物体上移动的过程，而网页设计中的视觉流动路线是相当重要的。垂直的物体在页面上会引导人们的视线做上下的运动轨迹，水平的物体在页面则给我带来的是左右的视觉流动，三角形的物体会让我们的视觉由角顶开始做循环的视觉流动，而圆形的物体往往会让我们的视线呈辐射状运动。

因此，网页设计中不同的视区范围有着不同的注目度。我们浏览网页时一般的阅读习惯是从左至右，从上至下，因而我们会把一些重要的讯息，比如logo、通知、最新信息放在左上位置，通常我们叫这个位置为视觉中心。

2影响网页页面视觉呈现的要素

2.1网页页面的版面率

版面率指的是网页设计中文字、图形、图像、颜色等的占有率，它不仅影响页面信息传达效率，也决定着整个网页设计的视觉呈现效果。一般来说，版面率与视觉传达效果以及设计创意成反比的。如图（1、2）

由图我们可以看出，宜家的版面率低，整个页面几乎只有其logo的存在，所容纳的信息量少，但是给我们的视觉冲击力很强烈，视觉呈现的形式感很强。在网页设计中，极简的网页视觉呈现能够把最重要的信息以最直观的方式传达给浏览者，而且也可以起到一个避免阅读中分散注意力的作用。譬如我们的一些个人网站、博客等商业气息不浓厚，大多都会以设计创意个性为主，版面率较低。选择版面率比较高的设计时，讲究空间的有效利用与秩序的合理划分，而且每一版面的大小和位置关系要和谐。否则要么排版呆板，要么秩序混乱。

2.2网页设计的权衡布局及简化设计

所谓简约主义，顾名思义就是要我们将设计元素、色彩、造型进行简化。人们常说的“简约不简单”，实际上就是简约主义。目前，简约设计已经被广泛应用到我们生活的各个领域，无论是室内设计或是平面设计还是包装设计，都在实行“简约主义”。甚至很多品牌，譬如无印良品、宜家家居等都是采用的简约主义风格，无疑简洁时尚已成为人们广泛追求的一种风格。正所谓“简约不简单”，个人也认为越是简单的东西越大牌。

排版布局中的平衡、对齐及对比关系，对页面视觉效果至关重要。那么对于网页设计来说，要做到简化设计的第一步就是要去除一些多余的没有必要的东西，尽可能的丢掉他们，留下一下最为关键的信息，比如logo、介绍、导航等等。我们每天都在使用的腾讯，它的页面设计就做到了这点。如图（3、4）

图3 腾讯页面设计

图4 腾讯页面设计

2.3颜色给我们带来的心理暗示

色彩是我们认识事物的第一印象，我们在浏览网页的时候对视觉冲击力强的网页设计留下的印象最为深刻。因此一个好的网页设计必定有一个很好的页面配色设计，它不仅能更好的传达信息，同时还能更好的与大众的心理需求相契合，更大的发挥网页设计中带来的视觉效果。如图（5、6）

根据季节的变更、促销活动的安排以及各品牌不同的文化理念，常常要做一些不同的网页设计才吸引消费大众。因为人们在长时间浏览网页的时候很容易产生疲倦，在色彩的使用上，我们一般应将色彩对比放在一些需要仔细阅读或主要信息上，以免增加网页浏览者的阅读难度，引起视觉疲劳。同时，我们也不能采用一些辨识度低的颜色，尽可能把信息目标更快更好的传达到消费者的眼中。

3结束语

在网页设计过程中，我们应继承我国的传统文化，形成独特的设计风格，拓展设计的视觉语言。与此同时，我们还要推陈出新，突出现代化，引领时尚潮流。以现代简约主义的手法对中国的传统元素和符号进行提炼和二次设计，让网页设计获得更强的视觉认知力和艺术感力，营造一个自然、合理、顺畅的视觉流程，更好的激发人们的审美情趣，引导人们在美的享受中接受传达的信息，发现美好。

参考文献

[1] （美）鲁道夫，阿恩海姆.艺术与视知觉[M].中国社会科学出版社，1984.5.

[2] 孙娇，宗明明.网页设计中视觉流程筹划与应用[J].美术教育研究，2011（7）.

网页设计的流程篇（7）

中图分类号：TP317 文献标识码：A 文章编号：1007-9416（2012）11-0222-01

1、引言

网页设计技术的产生促使网页设计图形艺术领域快速地发展，在整个设计过程中离不开技术，设计的需求也是促进技术水平不断提高的过程中。因此，计算图形艺术设计的设计师需要正视设计与技术的结合，能够正确掌握设计艺术与计算机程序设计和多媒体技术相结合的方法，能够正确运用网页设计图形艺术的表现形式，针对其特点设计出更多更好的作品。

2、图形艺术与网页设计的改革

虽然在视觉传递这一层面上网页设计的图形艺术较之以往的网页图形艺术设计非常相似，但技术方面的应用也有很大的差别。对网页的设计艺术与图形艺术结合在一起是视觉表达的一种技术，它是综合了计算机网页图形艺术及网络技术运用。

2.1　艺术理念的传递

和以往的计算机网页图形艺术作品相同，对网页设计也要求具备一定形式的艺术感染效果。因为毫无章程、平庸无奇、没有美感的网页很难吸引到浏览者的，更不会使访问者去打开页面上的其它窗口。要知道第一印象很重要，直接影响访问者能否再次光顾改网页。

传统计算机图形艺术作品在设计的过程中看重的是页面元素的组成、色彩的搭配、版式的布局与空间表达形式等等，这些元素对图形艺术设计作品很重要，每一个网页设计作品都是将以上提到的因素结合到一起。通过各个方面有机的结合，在视觉传达方面给观看者一种审美的享受，网页设计艺术最终的目的就是满足观看者的审美心理。

2.2　介质的差异

传统的艺术设计作品的表达方式是印刷品，人们更愿意将美好的艺术设计打印出来保存，而现代艺术设计作品的表达方式是通过计算机显示器来表现出来，并且在传输的过程中受到带宽的限制。计算机图形设计师在设计时就会发现，打印的作品的原理是色素减法原理，而设计作品的模式是以CMYK模式出现，而电脑显示器的色彩工作原理则是RGB模式。

传统与现代的分辨率有很大的区别，过去计算机图形艺术的表现形式是印刷品作为表达介质，精度越高所要表达的效果也是约好，在正常的情况下，图形设计作品的设定值是360dpi，而网页设计艺术的图形分辨率的设定值是图形设计作品的五分之一。由于介质的不同，在艺术设计着色的时候需要慎重，不能将传统图形艺术表达的技巧直接应用到现代网页艺术中去。

2.3　功能的异同

传统计算机图形艺术的作品的作用是通过作品向外界传递一些信息资源，而现代网页设计艺术不仅仅具备这些功能，还会增加了一些导向和链接。现代网页艺术设计中超链接是非常重要的一个功能，以一个页面超链接，点击它们会就进入到链接的任何一个页面。链接的方式是以文字、图片、按钮等某种信息表现出来。无论是那种表达方式对页面的整体设计与布局都会有一些影响，对浏览是否方便也会产生影响。

3、规范布局网页图形艺术界面设计

在网页设计图形艺术中，布局规范、流畅，使视线融会贯通是完善设计的关键所在。网页艺术设计的设计师在设计的过程中需要将重要信息表达在网页最醒目的区域，视觉流程的停留点设计也需要设计在一目了然的位置。网页设计先关人员可以依照具体信息资源的传递的需求，画面所呈现不同的着重点，需要根据其位置进行合理的安排，在网页艺术设计中，视觉传达效率比较重要，为提高视觉传递的功能，必需要掌握以下几个要点：（1）设计醒目的导航栏；（2）掌握浏览者的视觉习惯方式；（3）完善页面的主从功能关系；（4）消除人的视觉疲劳感；（5）科学设计视觉流程。

在进行网页设计图形艺术时还应注重动态方面的设计，这就要求网页应该具有闪变化的色彩、烁的文字以及Flas。不仅如此，在网页之间的链接设计方面，应该能够设计出使人们具有访问更深层次页面的倾向，这就需要建立合理的导航系统来引导访问者的视觉流程，将网站的信息、文件以及说明更加醒目、清晰地处于视觉可及范围之中，从而使引访问者能够进一步地观赏网站。网站的导航系统应该运用简短、便于理解，导航系统能够体现出网站的各个视觉方向，这也就要求在网站设计的过程中，导航功能的应用要清楚、自然，简便、新颖。通过网站导航系统的设置，为使用者提供方便，根据导航提示随意从一个页面跳转带其他页面。

4、图形艺术的界面处理

网页图形艺术设计的新颖特点能够吸引浏览者的目光，而创意独特、设计完美、布局规范的操作也是提高网页浏览回头率的必胜法宝。一个设计完美的网页可以促进浏览者提高点击网页的欲望和爱好，因此这也就要求网页设计图形艺术可以根据一切科学技术手段来完善页面完整度。保证页面效果能够更迷人，更吸引人，给客户一种视觉冲击的感觉，保证每一个网页都具有较强的统一性与个性。当然，当我们在运用各种设计方法、科学的软件以及先进技术方法的同时，要做到收放自如。将图形设计信息的高效资源传递给浏览者，这才是网页设计的最终目标。因此，设计过程中结合各种软件工具的应用，在配上一些有声的音乐，这样就能够为浏览者提供更便捷、舒适的服务。网页设计所要表达是信息的传递，而图形设计的意义就在与保证访问者能看到一个丰富多彩、舒适流畅的网站设计，全面提升企业的整体形象。

5、结语

正如建筑艺术最初的目的仅仅是为了满足人们最基本的生存需求一样，网页中图形设计业是一样，目前已经告别了仅仅使用HTML和JAVA语言来实现网页的设计，这些设计的完成者全部都是技术性人才，但这些仅仅能满足最为基本的传递功能，设计不到艺术层面，而现代的网站表达，艺术设计更为重要，现今，Macromedia　Dreamweaver、Microson　Froltpage等软件的产生使数字化艺术设计变得更加方便。我相信，网页图形艺术设计将会发展得越来越好，展现在浏览者眼前的是艺术与技术的结合。

参考文献

网页设计的流程篇（8）

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

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

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

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

网页设计的流程篇（9）

 

1引言

随着计算机、网络与通讯技术的发展，Internet在人们的生活、学习和工作中的位置越来越重要，经常性上网冲浪的生活已经成为现代人生活的一个重要特征。通过属于个人或者公司的Web站点向全世界宣传个人形象、推广公司产品或开展公关活动已成为一种新的流行趋势。因此精通网页的设计与制作等内容已经成为现代人必备的一种技能。对此，本文基于网页设计与制作课程本身固有的特点，采用模块化的教学方法，更好地加强了教学实践性，极大地提高了学生的实践能力。

2 “模块项目化”教学法在网页设计与制作课程中的应用

网页设计与制作模块项目化教学法是根据网页设计与制作教学大纲的要求，把教材划分为若干个模块，并将这些模块项目化，同时以学生为主，教师为主导作用，以教、学、练相结合，调动学生的学习兴趣，启发学生思维，以实践为主的教学方法。

2．1网页设计与制作课程模块化任务的设计

以项目开发为出发点，将该课程分成网站策划、网站规划、网页风格设计、网页制作、网站测试和网站上传与更新维护等六个知识模块，每一个小的模块项目又具体细化为一个个小的任务。论文大全。每个任务根据教学的实际情况可以再细化。课程知识体系结构图如图1所示。

图1 课程知识体系结构图

2.2网页设计与制作课程模块项目化设计

模块项目化教学法的关键在于项目的选取。教师所设计的项目，应将培养学生的职业能力作为出发点，联系市场发展，从企业需要出发，以实际项目开发流程来确立课程的知识体系，使知识体系结构中的各个知识模块包含学生应掌握的能力素质。表1是“模块项目化”教学法的学习模块分解表。论文大全。

网页设计的流程篇（10）

关键词 ：Web标准；电子商务网站；网页设计

引言

随着计算机网络技术的迅速发展，网站的网页设计布局也显得越来越复杂，在专业技术上的要求也越来越综合。同时，电子商务在这样的潮流下飞速发展，但电子商务网页设计却成了阻碍电子商务发展的一个重要因素，在这样的形势下，电子商务网页设计与制作就需要有专业的技术来实现，仅仅依靠传统的网页设计技术已不能满足时代的需求。目前，基于Web标准的网页设计思路已成为网站开发的主流，以Web标准为基本思想探究出一套有效的、紧跟时代步伐的设计流程，同时针对电子商务领域研究有效的网页设计策略。

1、关于Web标准的主要技术

1.1 什么是Web标准

Web标准不仅仅是一个标准，而是一系列标准的组合。一般的网页都由三个部分组成，即结构、行为和表现，而这三个部分中结构对应的标准为XML和XHTML，行为对应的标准为对象模型等，表现对应的标准为CSS。

① 结构

其中的主要技术包括可扩展超文本标记语言（XHTML）和可扩展标记语言（XML），主要应用在对网页数据的分类以及整合方面。在这两个标准中，XML是一种源语言，它能够让用户对自己的语言进行标记定义，其具有的数据转换能够相对来说比较强大，而XHTML在性能上结合了超文本置标语言（HTML）的简单特性，同时，它还使用了XML的强大的功能系统，在语法上相对来说也比较严格。

② 行为

其中的主要技术包括ECMAScript和对象模型（DOM），主要应用在交互操作网页文档方面。ECMAScript能够有效的实现界面上操作对象的交互操作，而DOM能够定义、修改以及表示文档所需的对象、所需的对象的属性和行为，同时还能处理这些所需的对象之间的关系。

③ 表现

其中的主要技术是CSS，即层叠样式表，主要应用在对浏览器的显示控制方面。CSS控制的表现与XHTML决定的结构相分离，主要用来设计网页的风格。

1.2 Web标准下的网页设计流程

Web标准下的网页设计流程主要包括语义结构定义、网页内容添加、CSS美化网页以及添加动态元素四个部分。

语义结构定义：进行这个部分时，需要我们能够根据网页上的设计图，对我们所需要的DIV层块进行进一步分析，同时也要分析各个层块之间的相互关系，为达到一个好的访问速度，DIV层块应该小于等于三层。

网页内容添加：在第一步中定义好语义结构后，然后根据网页设计图添加内容，并且在每一个层块添加合适的网页内容，其中包括添加文字、图像、表单、列表等。

CSS美化网页：在进行网页设计时，需要使用CSS对网页的整个页面进行布局，其中包括在页面中加入边框和背景等；同时，还需要使用CSS的相关设置，其中包括字体和大小等。

添加动态元素：在网页中添加动态元素时，需要根据网页设计图对各个方面的要求，利用JavaScript技术完成网页中动态元素的添加，包括添加导航菜单、焦点图及其它动态元素等。

2、电子商务网站网页设计所需要的技术

随着互联网科学技术的飞速发展，越来越多的企业应用互联网技术推动了企业的发展，人们的生活方式也受到互联网的影响。在这样的背景下，电子商务也逐渐发展壮大，而电子商务网站网页设计就成了相对重要的一部分，网页设计是以网络为载体，把一些对人们有用的信息方便快速的传达给他们。在进行电子商务网站网页设计时，整个过程都要用到大量的电子商务设计软件，而设计的过程又需要计算机技术作为基础。

在研究基于Web标准的电子商务网站网页设计时，在设计过程中需要有缜密的思想来进行设计的每一个流程，然后开发网上商店系统，以达到对网店实行有效的管理以及扩展网店的业务。在Web的标准下，网页设计者能够有效的将网页结构划分清楚，这样就能够提升电子商务网站网页开发的效率，同时还能够尽可能的降低网页设计成本。

3、电子商务网站网页设计过程

在设计电子商务网站网页时，可以按照下面的流程进行：内容分析、结构设计、方案设计以及表现设计。

第一，内容分析：即通过了解需要展示在网页上的具体内容，清楚各内容所具有的逻辑关系，最后分清楚各个内容的重要程度从而合理安排位置。第二，结构设计：即根据内容分析得出的相关结论，找到合理有效的网页布局，从而设计出好的XHTML结构。第三，方案设计：使用好的美工设计软件，设计出一个能给人视觉带来享受的网站页面设计图。第四，表现设计：表现设计又可分视觉设计和布局设计，视觉设计即是使用CSS美化网页的方式，同时配合美工设计元素，将设计方法转化为网页的方式。布局设计即是通过使用CSS和XHTML对网站页面进行布局设计。

3.1 内容分析

一个电子商务网站能否起到吸引客户的效果，取决于这个电子商务网站网页的布局是否清晰明了，能否给人一种视觉上的享受。网页设计就是一种视觉语言，对布局和色彩的搭配要求很高，要求网站的主页也能给人一种美的享受，其它网站页面的布局也应该与主页相协调。电子商务网站中网页布局形式多种多样，有“厂”字型、“国”字型、“封面”型以及经济“框架”型等。

3.2 结构设计

为电子商务网站开发网页时，网页中展示的有突出核心的业务区，也有展现其它功能的区域，整个网页开发完成后，用户可以在后台进行可视化的操作，同时，用户还可以创建属于自己的个性化的网页。在设计电子商务网站网页时，框架是整个网页的核心部分，它决定了整个网页的整体布局效果，框架一般都是HTML格式的文件，它能够将页面划分区域。

在制作电子商务网站时，首先要在硬盘上新建一个文件夹，并把这个文件夹作为网站的根目录，最后将这个目录上传到服务器上就行了。一个网站就对应一个磁盘上的文件夹，设计网站所需要的全部资源以及所有网页都放在这个文件夹里面。

3.3 表现设计

在设计好网页和它的结构后，可以使用CSS为网页文档添加样式。首先要将已经设计好的方案中的网页图片分离出来，然后使用CSS为其添加合适的样式，在进行这个操作的整个过程中，涉及到CSS的布局以及背景图片应用，在使用CSS时，可在网站的前台观察到网页的板块区域，板块区域的个数会根据有设计的电子商务网站的类型不同而有所变化，这个过程是由CSS规则确定的，并且整个框架结构是由HTML文件确定的。这样设计的网站，可以在其后台进行可视化设计，向所需要的区域添加好的插件等，这样网页表现出来的画面效果更好。

4、结语

随着时代的发展，人们不再满足于单调的生活模式，在这样的背景下，互联网技术慢慢融入到人们的生产与生活中去，这就使得方便人们生活的电子商务逐渐发展起来。目前，大多数人的生活开始与电子商务紧密联系在一起，而电子商务的网页设计的好坏直接关系到整个电子商务模式的运行。因此，研究基于Web标准下的网页设计技术成为了电子商务门户的重点，这样才能有效的提升电子商务网站的性能以及开发效率。

参考文献：

[1] 朱淑琴，魏威，张嘉萌. 基于Web标准的电子商务网站网页设计与制作[J]. 计算机与现代化. 2012(15),30-32.