网站风格布局.doc

网站风格布局
首页设计，包括首页基本内容、功能合理分区、网站标头设计、主导航设置等。
网站设计规范，包括网站风格规范、网站配色规范、字体规范、内容格式规范、统一LOGO设计、网站导览性、网站视觉效果、图片规范、信息要素表现规范、页面长度、文件规范、链接规范、网页人性化设计。
根据栏目内容规划网站结构，优化网页设计，按照“简单、方便、实用、布局合理”和“专业化、艺术化”的原则进行美工创作，适当应用图形表现形式和动画视频 效果，确保最高人民法院门户网站给人以耳目一新的视觉效果,要求庄重首页设计上突现特点，强调视觉感染力凸现，能给用户留下第一印象，第二层页面尽量配以柔和、亲切、淡雅色调和图片，减少用户视觉疲劳。
首页风格布局合理、美观、功能清晰，方便用户操作。优化设计，减少网站信息的深度（一般不超过三层），采取在首页和快速连接上重点推荐特色栏目和精品信息等方式。

（一）设计策划
1、网页风格设计遵循主题鲜明，导航清晰的基本原则。网站风格设计传达的是一定的意图和要求，有明确的主题并按照视觉心理规律和形式将主题传达给观赏者，作为政府网站要结合自身的特点使网站主题在适当的环境里被人们及时地理解和接受，以满足人们的实用和需求。这就要求设计不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，鲜明地突出设计主题。
网页风格设计的主要内容是视觉传达设计，其最终目的是使网页内容产生清晰的条理性，达到最佳的主题诉求效果。这种效果的取得，一方面通过对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进浏览者对网页内容的理解。
2、网页艺术设计基本原则-- 强调整体
在进行网页风格设计时需要强调其整体性，以使用户清晰、快速地体会到网站完整的设计思想和所包含的信息内容。网页界面中的整体性，是指构成界面形式的诸要素相互依存，彼此联系所具有的统一性。为了获得网页界面的整体性，在设计网页时应通过准确的定位对界面中的元素进行编排与组合。设计网页界面时，必须进行统一规划，统一风格，形成整个网页的整体性。
3、网页艺术设计基本原则-- 简洁明了
网页设计时界面应具有形式简洁的外部特征。网页界面设计必须以其强有力的视觉冲击效果来吸引用户的注意，从而使特定的信息得以准确的传播。如果形式构成繁乱，就会导致视觉冲击力的降低，使网页界面传递信息的功能得不到应有的发挥。并且，网页设计中所采用的元素如文字、图像、动画等元素都会占据网络空间，影响网页的开启与传输速度。
所谓CI，即CIS，企业形象识别系统，英文为“Corporate Identity System”，简称CI。CI分为MI（理念识别mind identity）、BI（行为识别behavior identity）和VI（视觉识别visual identity），这三个部分相辅相成。一个杰出的网站需要整体的形象包装和设计。一个有创意的CI形象设计对网站的宣传推广有事半功倍的效果。

（图五）中国人民共和国商务部网站（

商务部网站是我国商务部的电子政务网站，连续四年蝉联部委网站访问第一名，2005年进入全球网站500强行列，成为中国内地唯一进入500强的政府类网站。现在，商务部的建设目标是成为全球200强的网站和全球最受欢迎的政府网站。商务部网站是我国经济对外的一个门户。

（图六）

网站十分清晰、鲜明，在空间划分上使浏览者明确各大部分，上部是政府名称和标志logo，然后是灰色的菜单栏（即此站的导航部分），从菜单栏开始空间上分为几部分，左边是机构职能分类，右边是商务热点专题、业务专题等，共有几种语言的版本。

（图七）国家质量监督检验检疫总局（

国家质量监督检验检疫总局是国务院主管全国质量、计量、出入境商品检验、出入境卫生检疫、出入境动植物检疫和认证认可、标准化等工作，并行使行政执法职能的直属机构。
在标识和图标等表现元素设计上，应体现机构或业务特点。比如国徽、国旗、地方标志物、行业标志都可作为设计元素。好的网站标识，可以强化人们对网站的印象，是一种文化和宣传符号，同时也作为其他相关网站链接的图标。此外，flash、gif动画等动态元素的采用要适度。

（图八）
该网站主题鲜明、导航清晰，左部是单位的简介和主要机构设置；上部的蓝色导航条列出主要栏目，鼠标点击时，打开新窗口，进入到部委司室子站；右部图片新闻、最新动态。整个页面清晰明了，用户可以轻松找到自己想看的内容。
（二）网页构成
网页风格设计依靠视觉表现传递信息，所以在网页设计时首先要找到构成页面的不同的空间感觉，然后运用不同的表现形式完成创作设计。
网页元素中文字的大小多少、图形图像的形式如何复杂多变,作为视觉形式的语言,它们在设计者的眼中都是最基本的造型元素，变成了点、线、面、体以及空白的组合。正是这些点、线、面、体及空白的变化与组合,构成了一幅幅生动的图形图像。网页设计的过程就是在特定的空间里经营和组织好这些点、线、面、体、空白，使其传达出特定的信息，给人以美的享受。
（三）页面布局
在网页风格设计中，页面布局具有相当重要的位置。当网页呈现在我们面前时，它就好像一张白纸，传统的报刊杂志编辑一样来进行布局。网页的布局形式没有固定的格式可以遵循，但是网页布局设计的原则是有章可循的，它们设计的基本原理也是共通的。
网页的信息内容将直接影响到布局结构，因此在设计网页布局前，要根据网页的信息类型、信息量等进行合理的规划，做好充分的前期准备。在页面布局上，还有要考虑到人体工程学的因素，将焦点位置留给焦点内容，将动态内容放在容易引起注意的位置，做到重点突出。
1点对称布局
点对称是图形关于旋转180度角的不变性，如果能使图形不变的旋转变换越，图形就越对称、越美。点对称在网页设计布局中是非常具有参考价值的，点是非常灵活的视觉元素，具有注目、突出诱导视线的性格，点的感觉与人的视觉相联系，点没有方向性，没有具体的尺度。
2线对称布局
如果一个图形沿一条直线对折，直线两边的部分能够互相重合，那么这个图形就是线对称图形。线可以看成是由点的运动而形成的，线具有一定的方向感，线的变化丰富，运动自由，表现力极强。
3感觉对称布局
对称是一种完美的形态，它能传达庄严、秩序、安静、平和的心理感觉，左右或上下同形、同色、同质为实质的对称；左右或上下不完全等同,但在视觉上产生对称时,便成为感觉对称。
总之，在点线面的运用上，要在保持风格一致性的基础上，针对不同的内容有所变化，避免审美疲劳，使人在视觉上舒服不感突兀。
（四）版式设计
版式设计是指在网页上将有限的视觉元素进行有机的排列组合,将理性思维个性化地表现出来，是一种具有个人风格和艺术特色的视觉传达方式。在传达信息的同时，给观者留下感官上的美感。
网页版式类型主要有分栏型、中轴型、曲线型、倾斜型、焦点型五种。网页分栏型版式是一种规范的、理性的分割方法。这种版式在网络上属于最为常见的版式，所容纳的信息量是最大的，而且给人以和谐、理性的美感。分栏型版式的最大特点就是简单，一条竖线就足以把你需要的页面结构区分开来。分栏型的版式设计可以营造出统一感，能够合理的利用空间，保持页面的平衡，不会出现其他的空白。
中轴型版式是将图片和文字沿浏览器窗口的中间轴心位置作水平或垂直方向排列的一种设计方式。沿中轴水平方向排列的页面可以给人稳定、平静、含蓄的感觉，沿中轴垂直方向排列的页面可以给人以舒畅的感觉。采用这种版式设计的网页比较适合做网站的首页。中轴型的网页往往会使人们的视觉中心比较容易的集中在网页的中心，有利于突出重点内容，有很好的视觉导向作用。
在网站版式设计上，应注重内容和形式的统一，对网站的风格样式、首页、下层页面进行综合策划，版面效果力求端庄、大方、舒展。
（五）色彩设计
整个网站如果只是运用一种色彩，让人感觉单调，乏味；但是将所有的色彩都运用到网站中，会有给人以轻浮感。在色彩的运用上，要求用色简练、典雅、清爽、自然，突出个性与特色。一般网站有一种、两种主题色，会使浏览者感觉该网站主体突出、形象鲜明。确定网站的主题色是要慎重考虑的问题。一般情况下，网站页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重。当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现的效果。另外哪种因素占主要地位，是明度，纯度还是色相。
色彩具有三种基本要素：色相、明度、纯度。在网页设计过程中，可以通过色彩处理的相关软件，根据设计者的需要把色彩的相关属性进行人为的加工，使整个页面达到理想的视觉效果。
1.色相
色相是色彩的最大特征，指能够确切地表达某种色彩的色别的名称。如柠檬黄、朱红、翠绿、湖蓝、紫罗兰等，每种名称都代表一块色彩的色相。不同色相是不同波长给人的一种感觉。
2.明度
明度指色彩的明暗程度。以光源色来说可以称为光度。对物体色来说。可称亮度，深浅度等。在无彩色类中，最高明度是白色,最低明度是黑色。在白、黑色之间存在一个系列的灰色，一般可分为九级。靠近白色的部分称为明灰色；靠近黑色的部分称暗灰色。在有彩色类中，最明亮是黄色，最暗的是紫色，这是因为各个色相在可见光谱上，振幅不同，对于眼睛的知觉的程度也不同而形成的。黄色，紫色在有彩色的色环中，成为划分明暗的中轴线。任何一个有彩色渗入白色，明度会提高，渗入黑色明度则会降低，渗入灰色时，依灰色的明暗程度而得出相应的明度色。
明度色标

高 略高 中 略低 低
（图十一）
3. 纯度
纯度指色彩纯净程度，亦称为彩度、鲜度或饱和度等。当一个色相的色素包含量达到极限强度的时，正好发挥其色彩的固有特性，即达到了纯净度。凡有纯度的色彩，必有相应的色相感。各色相最高纯度、色的知觉度不同，明度也不同。高纯度的色相加白或加黑，将提高警惕或降低色相的明度，赐教也会降低这它们的纯度。如果加适当明度的灰色或其它色相，也可相应地降色相的纯度。
纯度色标

高 略高 中 略低 低
（图十二）
（六）文字设计
文字既是信息传递的载体，又是页面风格设计的重要元素。文字不但具有功能的价值，也具有艺术价值。网页设计时不仅要将信息传递给用户，还要精心的文字的编排和设计，使网页中的文字也成为网页艺术设计的一部分。

（图十三）中华人民共和国公安部（ ）
文字设计原则具有适合性、明确性、实用性、创新性，政府网站对于整篇文字的编排设计要求比较高，要求字号、字距、行距、颜色等这些要素的合适，使用户在浏览众多文字时不感到疲劳和厌倦，这就需要合理的编排设计。政府网页其文字具有庄重和规范的特质，字体造型规整而有序，简洁而大方；
（七）导航设计
如果把一个网站看作一艘船，导航系统则是船舵。导航设计在整个网站的建设中占有非常重要的位置，它直接关系到能否把浏览者正确地引领到他们想去的地方，轻而易举地找到他们所需要的信息。

（图十四）发改委（）

（图十五）国家质检局（）

（图十六）海关总署（）
一个网络用户如果在某个网站上找不到所需要的东西，或搞不清网站的信息组织结构，那他就不会待很久，或者干脆离开。因此创建的“清晰、简洁、一致”的网站导航的重要性是不言而喻的。
（八）风格设计
网站的背景可以统一网页的风格和情调，并且对视觉主体起着一定的衬托和协调作用，同时背景的设计也有助于体现该网站的主题。背景是为网站的主题和内容服务的，因此，背景及其色彩色调的选择不能一意孤行，而要统筹网站的内容，包括网站类别、网站主题、文字、图片等各个方面，进行合理地选择。

（图十七）中华人民共和国环境保护部（）

（图十八）中华人民共和国水利部（）

（图十九）中华人民共和国商务部（）
在网站设计中，白色是一种非常普遍的底色，这种风格设计艺术称做“留白”艺术，留白，给人以遐想的空间，同时白色又显得整个网站干净素雅，使人浏览起来舒适、畅快。
蓝色是一种无边无际的色彩，象征着遥远、广阔、博大与幻想，代表着永恒、才智、深邃和寂静，天空和大海辽阔的景色都呈现出蔚蓝色，纯净的蓝色背景
（九）浏览页设计
图像浏览页在网站设计中所承担的任务是将图片信息通过某种表现形式展示给用户，让用户清晰直观地获得图片信息。图像浏览页的功能性决定了其自身特点：图片展示方式的直观性。图像浏览页的设计应该是为用户更快更清晰找到所要的图片服务，因此在设计上宜采用直观的构图。图像浏览页在浏览时应该本着易于使用的原则，图片链接提示要醒目，便于对网络不是很熟悉的浏览者使用。

（图二十）（林业局）

（图二十一）（国家质检局）