网页设计概论及分析.docx
《网页设计概论及分析.docx》由会员分享，可在线阅读，更多相关《网页设计概论及分析.docx（21页珍藏版）》请在冰豆网上搜索。
网页设计概论及分析
网页设计
目录
网页设计现状以及实战技巧
网页设计的要点
【法律类的网站设计】
成为一名网页设计师你要学会
如何快速成长为一名厉害的网页设计师
网页设计师如何找工作？
网页设计的要点是设计第一而技术其次
网页设计--------网站是企业向用户和网民提供信息（包括产品和服务）的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。
企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。
企业网站设计显得极为重要，下面是一些网站设计中应注意的原则。
一、明确建立网站的目标和用户需求
Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此我们必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。
我们会根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，以“消费者（customer）”为中心，而不是以“美术”为中心进行设计规划。
在设计规划时我们会考虑：
建设网站的目的是什么？
为谁提供服务和产品？
企业能提供什么样的产品和服务？
网站的目的消费者和受众的特点是什么？
企业产品和服务适合什么样的表现方式（风格）？
二、网页设计总体方案主题鲜明
在目标明确的基础上，完成网站的构思创意即总体设计方案。
对网站的整体风格和特色作出定位，规划网站的组织结构。
Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。
有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。
好的Web站点把图形表现手法和有效的组织与通信结合起来。
为了做到主题鲜明突出，要点明确，我们将按照客户的要求，以简单明确的语言和画面体现站点的主题；调动一切手段充分表现网站点的个性和情趣，办出网站的特点。
Web站点主页应具备的基本成分包括：
页头：
准确无误地标识你的站点和企业标志；Email地址：
用来接收用户垂询；联系信息：
如普通邮件地址或电话；版权信息：
声明版权所有者等。
充分利用已有信息，如客户手册．公共关系文档．技术手册和数据库等。
三、网站的版式设计
网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。
版式设计通过文字图形的空间组合，表达出和谐与美。
多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。
为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。
四、色彩在网页设计中的作用
色彩是艺术表现的要素之一。
在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。
根据色彩对人们心理的影响，合理地加以运用。
如果您的企业有CIS（企业形象识别系统），我们将按照其中的VI进行色彩运用。
五、网页设计形式与内容相统一
为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。
灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。
如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。
点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，充分表达完美的设计意境。
六、三维空间的构成和虚拟现实
网络上的三维空间是一个假想空间，这种空间关系需借助动静变化．图像的比例关系等空间因素表现出来。
在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。
通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。
网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。
现在，人们已不满足于HTML语言编制的二维Web页面，三维世界的诱惑开始吸引更多的人，虚拟现实要在Web网上展示其迷人的风采，于是VRML语言出现了。
VRML是一种面向对象的语言，它类似Web超级链接所使用的HTML语言，也是一种基于文本的语言，并可以运行在多种平台之上，只不过能够更多地为虚拟现实环境服务。
七、网页设计中多媒体功能的利用
网络资源的优势之一是多媒体功能。
要吸引浏览者注意力，网页的内容可以用三维动画、FLASH等来表现。
但要由于网络带宽的限制，在使用多媒体的形式表现网页的内容时不得不考虑客户端的传输速度。
八。
结构清晰并且便于使用。
如果人们看不懂或很难看懂您的网站，那么，他如何了解你的企业和服务呢？
使用一些醒目的标题或文字来突出您的产品与服务。
并且即使您拥有最棒的产品，如果客户从您的网站上不清楚您在介绍什么或不清楚如何受益的话，他们是不会喜欢您的网站的，这就是网页设计的失败。
九。
导向清晰。
网页设计中导航使用超文本链接或图片链接，使人们能够在您的网站上自由前进或后退，而不会让他们使用浏览器上的前进或后退。
我们在所有的图片上使用“ALT”标识符注明图片名称或解释，以便那些不愿意自动加载图片的观众能够了解图片的含义。
十。
快速的下载时间。
很多的浏览者不会进入需要等待5分钟下载时间才能进入的网站，在互联网上30秒的等待时间与我们平常10分钟等待时间的感觉相同。
因此，我们会建议您在网页设计中尽量避免使用过多的图片及体积过大的图片。
我们通常会与客户合作，将主要页面的容量控制在50K以内，平均30K左右，确保普通浏览者页面等待时间不超过10秒。
十一。
非图形的内容。
我们在必要时适当使用动态“Gif”图片，为减少动画容量，应用巧妙设计的Java动画可以用很小的容量使图形或文字产生动态的效果。
但是，由于在互联网浏览的大多是一些寻找信息的人们，我们仍然建议您要确定您的网站将为他们提供的是有价值的内容，而不是过度的装饰。
十二。
方便的反馈及订购程序。
让客户明确您所能提供的产品或服务并让他们非常方便地订购是您获得成功的重要因素。
如果客户在您的网站上产生了购买产品或服务的欲望，您是否能够让他们尽快实现吗？
是在线还是离线？
十三、网站测试和改进
测试实际上是模拟用户询问网站的过程，用以发现问题并改进网页设计。
我们通常与用户共同安排网站测试。
[编辑本段]
网页设计现状以及实战技巧
（一）垃圾还是经典
网页技术更新很快，一个网站的界面设计寿命仅仅2-3年而已。
不管是垃圾还是精品，都没有所谓的经典。
经典只存在于是哪个首次成功创新性的应用。
网页设计者不管自己的学识、技术和经验如何，都自以为自己吊的不得了，这可能是源与商业设计自我意识体现的强烈主观因素。
一个闭门造车者做出的东西，是远远赶不上综合借鉴者的。
网页设计不同于其他艺术，在模仿加创新的网页设计领域当中，即便是完全自己设计的，也是沿用了人们已经认同的大部分用户习惯，而且这种沿袭的痕迹时非常的明显！
还有那个设计者敢腆着脸说，这都是我自己的原创设计？
对于业界来说，经典只是个理念和象征！
（二）国内网页设计环境
不可否认，国内网页设计环境目前还停留在初级的认知阶段，也就是说，绝大多数人不知道网络的真正的可用之处，你去做一个业务的时候，不得不去做大量的说服教育工作。
以乙方的身份去说服甲方，以专业角度去教育非专业认识，结果是可想而知的。
也正是这种全体社会普遍的低认知水平，导致了大量网络垃圾的产生。
举个简单的例子，看看“阿里巴巴”中文和英文两个版本的页面。
中文版主色是橙色（与标志色统一），英文版是极不协调的蓝橙（具有很明显的生凑效果）。
为啥中文版是橙色，呵呵，不要以为哪是为了和标志统一，其实那时国内最常用的商业色。
橙色代表什么？
肉色，淫欲。
商业是性质？
贪婪、拜金。
对于社会主义初级阶段群众的普遍思想来说，橙色就是最突出的体现，它不仅仅是网页首选商业色，它还体现了当今社会经济发展条件下的“浮躁”和“糜烂”，它还说明了“低认知水平”的国人，需要用这个刺激的颜色，去宣教引领他们被动接受。
为啥英文版是蓝橙？
因为洋人已处于发达社会，他们首先需要的不是“宣教引领”，而是“功能”。
一个弱化的界面更能强化显示功能，使人方便使用。
较刺激热烈的颜色，会引起洋人的反感，所以用的浅蓝灰色。
那么为什么又会出现极不协调的橙色捏？
原因有二，一是要与标志颜色统一，二是中英文要有传承，所以出了这末个一半是火焰一半世海水的结果。
明白了吗？
社会主义初级阶段界定了各行业都在一个初级阶段，这个初级阶段归根结底是由“经济发达水平”决定的。
同样，决定网页设计的也是“经济发达水平”，而不是个人的设计水平和思想理念。
（三）什么是好的网页设计
（1）内容和功能决定表现形式和界面设计
常常拿到的任务是一张小纸条，上面两句话，叫你去做一个网站设计。
有的人看看纸条就去设计页面了凭，凭两句话，你就可以为客户做一个页面设计，以我7、8年的设计经验，我都不敢去做，你真是我的偶像阿！
做网页设计，你需要了解客户的东西很多：
1、建站目的
2、栏目规划及每个栏目的表现形式及功能要求
3、主色、客户性别喜好、联系方式、旧版网址、偏好网址
4、根据行业和客户要求，那些要着重表现
5、是否分期建设、考虑后期的兼容性
6、客户是否有强烈的建站欲望
7、你是否能在精神意识上控制住客户
8、面对你未接触的技术知识，你有底吗？
9.网站类型
等等...
当你把这些内容都了解清除了时候，你的大脑中就已经给这个网站有个全面而形象的定位了，这时才是有的放矢去做界面设计的时候了。
（2）界面弱化
一个好的界面设计它的界面时弱化的，它突出的是功能，着重体现的是网站业提供给使用者是主要什么。
这就涉及到浏览顺序、功能分区等等。
要让访客在0.5内就能把握网站的行业性质，1秒内就知道该从哪个地方开始使用这个网站，能点一此的，绝不点第二次。
当然上面说的是大多数功能性网站，对于宣战展示性网站，诸如加特效的或Flash网站，可能就不得不花哨一些，但不能太过分。
网站不是动画片，在效率越来越高，社会心理越来越浮躁的中国，人们的耐心越来越小，心理承受能力越来越低。
效果可以体现意境，点到为止。
（3）模块化和可修改性强
模块化不仅可以提高重用性，也能统一网站风格，还可以降低程序开发的强度。
这里就设计一些尺寸、模数、宽容度、命名规范等等知识了，不再冗述。
，无论是架构还是模块或图片，都要考虑可修改性强。
举个简单的例子，logo、按钮等，很多人喜欢制作图片，N个按钮就是N张图片。
如果只做3-5类按钮的背景图片，然后用在网页代码里打上文字，那么修改起来就简单了，让程序员自己改字就可以了。
然而网页显示的字体是带有锯齿的，一般即能清晰又保证美观的字体字号有几类：
宋体12px|宋体12px粗体|宋体14px|宋体14px粗体|黑体20px|verdana9px|ArialBlack12px+|
（4）创艺是可耻的，分析能力远比创艺来的重要
设计界动辄就大谈什么“创意”，我要说的是，还没有搞清目的意义内容，还没在技术制作上臻于完善的基础上班，用创艺和特效来迷惑客户和访客是可耻的。
一个网也设计者的分析能力远比创艺来的重要。
（5）兼顾还是抛弃
CSS、XHTML、web2.0、Ajax等等山雨欲来，学习先进技术固然是有好处的，但对于目前国内普遍的低认知水平，决定了客户的需求和价格也是相当低的。
之前，说到经济决定网也设计，所以有的时候，是不允许你做出更多的兼顾的，抛弃和放弃也是无奈之举。
（四）结尾，送上思洋广州的一些经验
（一）网页配色基本概念
（1）白纸黑字是永远的主题，谁都说不出不好来。
（2）网页最常用流行色
·兰色——蓝天白云，沉静整洁的颜色。
·绿色——绿白相间，雅致而有生气。
·橙色——活泼热烈，标准商业色调。
·暗红——宁重、严肃、高贵，需要配黑和灰来压制刺激的红色，
（3）颜色的忌讳
·忌脏——背景与文字内容对比不强烈，灰暗的背景令人沮丧！
·忌纯——艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。
·忌跳——再好看的颜色，也不能脱离整体。
脱离群众是自取其辱！
·忌花——要有一种主色贯穿其中，主色并不时面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。
·忌粉——颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就象病夫一样无可救药。
·蓝色忌纯，绿色忌黄，红色忌艳。
（4）几种固定搭配
·蓝白橙——蓝为主调。
白底，蓝标题栏，橙色按钮或ICON做点缀。
·绿白兰——绿为主调。
白底，绿标题栏，兰色或橙色按钮或ICON做点缀。
·橙白红——橙为主调。
白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。
·暗红黑——暗红主调。
黑或灰底，暗红标题栏，文字内容背景为浅灰色。
（二）网页设计理念
（1）内容决定形式
先把内容充实上，再分区块，再定色调，再处理细节。
（2）先整体，后局部，最后回归到整体。
全局考虑，把能填上的都填上，占位置。
然后定基调，分模块设计。
最后调整不满意的几个局部细节。
（3）功能决定设计方向
·看网站的用途，决定设计思路.商业性的就要突出赢利目的；政府型的就要突出形象和权威性的文章；教育性的，就要突出师资和课程。
关于网页标题设计的原则
在设计网页标题时，应注意同时兼顾对用户的注意力，以及对搜索引擎检索的需要。
这一原则在实际操作中可通过下来三个方面来体现，这三个方面也可以被认为是网页标题设计的一般规律：
（1）网页标题不宜过短或者多长。
一般来说6－10个汉字比较理想，最好不好超过30个汉字。
网页标题字数过少可能包含不了有效关键词，字数过多不仅搜索引擎无法正确识别标题中的核心关键词，而且也让用户难以对网页标题（尤其是首页标题，代表了网站名称）形成深刻印象，也不便于其他网站链接。
（2）网页标题应概括网页的核心内容。
当用户通过搜索引擎检索时，在检索结果页面中的内容一般是网页标题（加链接）和网页摘要信息，要引起用户的关注，网页标题发挥了很大的作用，如果网页标题和页面摘要信息有较大的相关性，摘要信息对网页标题将发挥进一步的补充作用，从而引起用户对该网页信息点击行为的发生（也就意味着搜索引擎推广发挥了作用）。
另外，当网页标题被其他网站或者本网站其他栏目/网页链接时，一个概括了网页核心内容的标题有助于用户判断是否点击该网页标题链接。
（3）网页标题中应含有丰富的关键词。
考虑到搜索引擎营销的特点，搜索引擎对网页标题中所包含的关键词具有较高的权重，尽量让网页标题中含有用户检索所使用的关键词。
以网站首页设计为例，一般来说首页标题就是网站的名称或者公司名称，但是考虑到有些名称中可能无法包含公司/网站的核心业务，也就是说没有核心关键词，这时通常采用“核心关键词＋公司名/品排名”的方式来作为网站首页标题。
本文开头所列举的某网络营销服务商网站首页标题实例，其实也是采用这种方式来设计网页标题，只不过由于罗列了太多的“核心关键词”，反而没有了核心。
上述几个方面其实都考虑了搜索引擎检索网页的特点，也就是说，网页标题设计都将有利于搜索引擎检索作为重要因素，即使如此，作者仍然建议，与网页内容写作一样，网页标题写作首先是给用户看的，在这个前提之上考虑对搜索引擎检索才有意义。
可见网页标题设计并不是一件随意的事情，尤其对网站首页标题设计，不可不慎重。
做美工看起来并不是一件容易的事情。
首先，要对整个站点和企业有个大致的了解。
例如：
某些企业喜欢蓝色的主调，你不可能去做个红色的主调，这样完全违背客户的主要意愿，如果XX的标志改成五颜六色的，相信大家也不会认可的。
站长的职责是规划网站结构。
同样也需要有一定的审美观。
下面介绍了几款常用的绘图工具和基本知识。
1.源文件psd，ai，cdr的区别
psd文件就是用photoshop创建的，当然也必须用photoshop打开；
ai文件是Illustrator的。
他们都是Adobe公司的。
ai文件同样也可以用photoshop打开，但打开后会载入在同一层内。
cdr文件是CorelDRAW的。
2.关于CMYK和RGB颜色模式
CMYK是Cyan（青）、Mageata（品红）、Yellow（黄）、Black（黑），这是印刷上使用比较普遍的色彩模式。
R、G、B就是Red、Green、Blue（红，绿，蓝）三种颜色，RGB模式就是由这三种颜色为基色进行叠加而模拟出大自然色彩的色彩组合模式。
我们日常用的彩色电脑显示器、彩色电视机等的色彩都使用这种模式。
3.矢量图
矢量图与位图最大的区别是,它不受分辨率的影响。
因此在印刷时,可以任意放大或缩小图形而不会影响出图的清晰度
矢量图：
是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。
它的特点是放大后图像不会失真，和分辨率无关，文件占用空间较小，适用于图形设计、文字设计和一些标志设计、版式设计等。
aicdr均为矢量图。
4.图片文件jpg，gif，png，bmp的区别
bmp：
是未经过压缩的用点阵来表示的真彩图片,占用磁盘空间较大
gif：
是经过压缩的,只能表示256种颜色,占用磁盘空间小,常用来演示色彩单一的成块的卡通图案,GIF还有一种可以表示连续的动画.
png：
是fireworks的图片格式
jpg：
也是有损压缩格式但是它表示的颜色比较丰富,一般用来显示真彩的照片或图案
5.名片的尺寸问题
名片的标准尺寸：
90mmX54mm。
但是加上出血上下左右各2mm，所以在设计时
制作尺寸必须设定为：
94x58mm。
6.源文件的提供问题
作为设计者和客户（这里指各站长），如果事先没有明文协议的话
设计者有权不提供源文件。
7.什么是logo，ci，vi
VI是VisualIdentity的缩写，中文译为“企业视觉识别”。
VI是CI计划的静态识别符号，是企业理念视觉化传达的载体，因此它项目最多，效果最为直接。
VI作为视觉识别，它是外在表现，固然需要具有美感，但VI必须是MI的体现，直接反映企业的理念。
因此VI设汁包含这样一些原则：
即充分传达企业理念、人性原则、民族性原则、简洁抽象及动态原则、员工参与原则、法律原则、艺术性原则和个性原则。
CI是CorporateIdentity的缩写，中文译为“企业形象”。
CI计划，是指企业有目的、有计划、战略性地创造出所希望的自身形象，由此提高企业的社会知名度，最终得到自己最适合的经营环境。
而logo只是网站或企业一个标志。
8，关于logo设计的资费问题
这个问题很不好说，如果是去找正规广告公司做的话，根据公司规模大小，500到5000的都是正常的，一般都附送半套VI（namecard等常用一些），大公司的服务态度和服务质量不一定比小公司好。
现如今有些朋友在论坛上说50元做logo，个人认为还不如不收取费用来得好些。
这样的恶性竞争下，设计业迟早会或者说已经被带入了“民工职业”的行列。
还有一点，如果您喜欢拿很多方案去比稿的话，建议您去发布威客任务，那样价钱不会很贵，还可以得到很多得设计方案，一般400块钱的悬赏任务可以得到30份左右的初稿，还是很划算的。
BTW：
在威客发布悬赏任务是要给相关网站支付一定的任务管理金的，一般为20%。
）
最后说句，站长在设计之前请与设计师先进性良好沟通，不要撇下一句“你看着办吧，我相信你。
”“你是专业的，你说怎么弄就怎么弄。
”之类的话就不管了。
自己对自己的站点不负责的话，设计师也一定不会对你的站点负责的。
另外，一个设计可以大幅度改稿的次数一般在2--3次间（付费情况下），这不是一个规定，但是大多数设计在超过这个次数后会对业主产生一定的仇恨情绪......
[编辑本段]
网页设计的要点
网页设计的两大要点是：
整体风格和色彩搭配。
一、确定网站的整体风格
网站的整体风格及其创意设计是最难以学习的。
难就难在没有一个固定的模式可以参照和模仿。
给你一个主题，任何两人都不可能设计出完全一样的网站。
风格（style）是抽象的。
是指站点的整体形象给浏览者的综合感受。
这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。
举个例子：
我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的。
这些都是网站给人们留下的不同感受。
在这里，我提供给大家一些参考经验：
1．将你的标志logo，尽可能的放在每个页面上最突出的位置。
2．突出你的标准色彩。
3．总结一句能反映贵站精髓的宣传标语！
4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！
二、网页色彩的搭配
无论是平面设计，还是网页设计，色彩永远是最重要的一环。
当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。
关于色彩的原理有许多，在此我们不可能一一阐述，大家可以看看相关设计书籍，有利于系统地理解。
在此我们仅仅想告诉大家一些网页配色时的小技巧。
1．用一种色彩。
这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。
2．用两种色彩。
先选定一种色彩，然后选择它的对比色。
3．用一个色系。
简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
在网页配色中，还要切记一些误区：
1．不要将所有颜色都用到，尽量控制在三至五种色彩以内。
2．背景和前文的对比尽量要大（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。
三、网页设计的工具
1.dreamweaver,用与编辑HTML、ASP、JSP、PHP时的辅助工具
2.Frontpage跟dreamweaver一样，不过个人感觉还是dreamweaver好。
3.FLASH网页需要画面流动时的首选择
4.PS图象处理软件，一般网页都需要有图片相搭配，PS是款很强大的工具。
5.FW跟PS一样都是图象处理软件，但FW偏向与对网页的处理。
[个人喜欢PS]
[编辑本段]
【法律类的网站设计】
设计法律类网站最应该突出的是“严谨”和“公正”。
在网页配色方案上，设计师应尽量避免使用过于明亮或过于活泼的色彩。
相饱和度或亮度较低，或是一些在普通网页中有“
升级会员 