网页视觉设计的问题
由于网页是视觉读取的对象，因此浏览者需要注目读取才能获得网站的信息，因此，网页需要简约、生动的界面才能引起读者的注意和留存，在视觉设计中需要注意图文结合以及动态因素的利用。下面介绍网页视觉设计的问题，希望对您有帮助。
一、页面视觉设计的基本特性
(一)直观性。网页是互联网时代的特殊产物，根据其视觉浏览的需求特征，使页面的设计具有视觉上的直观性能，即人们常常在不需要仔细深入了解具体网站的内容时，可以从打开的页面有一个最直接的感受，因此网页的色彩、图片、布局设计都决定着浏览者的第一印象。
(二)注目性。由于网页是视觉读取的对象，因此浏览者需要注目读取才能获得网站的信息，因此，网页需要简约、生动的界面才能引起读者的注意和留存，在视觉设计中需要注意图文结合以及动态因素的利用。
(三)选择性。网站的页面上往往包含大量的信息，但是并不是所有信息都是浏览者所需要的，浏览者在获取信息时具有选择性，因而在页面的视觉设计中，需要注意网站主题特色，把握住各部分信息的主次关系，安排其排列位置和视觉冲击强度，便于读者快速选取。
二、视觉设计的基本元素
(一)文字。对于绝大多数网页而言，文字是信息构成的主体，它与图片容易造成歧义不同，具有直接准确传递信息的特性，使浏览者可以准确地、方便地接受信息。但是文字过多，给人长篇累牍的感觉，让人心中生厌，影响浏览者的阅读情绪，所以在视觉设计中，要对文字采取一定的格式处理和艺术加工。所谓的格式处理，就是指对文字的字体、粗细、字号、颜色等加以处理，使之格式多样、变化丰富，打破呆板、累赘的形象。艺术加工是指对页面的文字，根据其所处位置和作用地位的差异，来加以图像化、风格化的艺术手段处理，让文字更具有个性风格，显得更加生动形象，易于读者轻松接受。
(二)色彩。在网页的视觉设计中，色彩设计主要有五个部分组成，即标准色彩、图片主色彩、边框色彩、背景色彩和文字链接的色彩。由于人们的审美特点各有不同，不可能使页面的视觉效果完全满足所有人的浏览需求，但是就主色调方面而言，人们通常易于接受的色彩基本是一致的。页面的使用者在浏览页面的第一印象就是界面的色彩主体构成，它直接关系到浏览者是否有继续浏览下去的兴趣。所以页面的色彩选择必须符合当前人们的审美习惯，在确定页面主体的色调时，既要尊重受众的心理需求又要符合网站自身的主题定位。网站页面的色彩既不能太过于单一，也不能色彩斑斓，这就需要把握一个适中标准。在确定主体色调以后，按照主次、轻重关系，对图片、标题、边框、文字链接的色彩做出有层次的选择，绝对不能喧宾夺主，要处理好各部分之间的关系以及各部分与整体之间的关系，色彩种类也不宜过多，以免浏览者产生视觉疲劳。
(三)图片。在页面的组成部分中，图片是除文字以外最重要的构成要素，也是最早引用到网络中的多媒体对象。文字的特点是能够直观、准确地传递信息，而图片则可以打破纯文字界面的枯燥、平淡的格局，为页面增添活力，图文并茂，使网页生动形象，充满感情色彩。一般情况下，网页中使用的图片分辨率不需要太高，因为过高的分辨率势必使图片的容量加大，会影响到网页的浏览速度。在网页设计中，图片的大小、位置和方向都会影响到信息的表达，在整体编排中，应该分清重点和主次，对引用到的所有图片先做整体上的布局处理，然后使图片之间、图片和文字之间的关系和谐，页面整体布局和谐统一。
(四)版面。版面设计是在有限的屏幕空间界面对所有多媒体元素进行有机整合，使整体页面布局合理得到，感官效果好，便于受众接受。版面设计的成功与否，影响到网页核心信息的传递价值和浏览者的视觉留存时间，是网页整体感的直观传递。在进行版面设计时，主要利用点、线、面的依存关系，对页面的所有组成要素进行空间位置的排列，这一过程需要在网页自身价值表达的需求下，充分挖掘各多媒体因素的相互关系，使这些要素在视觉感受中体现出均衡、调和、律动的视觉效果，让整个界面生动起来，不平淡、不呆板。在版面的视觉处理上，需要把握好主题与素材、整体与个体之间的关系，在统一之中寻求变化，在不对称中寻找均衡点，促成页面整体的和谐效果。
三、页面的视觉设计原则
(一)风格的确定
在对网站页面进行页面设计之前，一定要确定好基本的主体风格，使其与网站的主题侧重点保持一致，只有内容与形式和谐统一，才能使网站的宣传到达理想效果。在确定主体风格的过程中，还要充分考虑网站受众面的群体特征，即浏览者的大众需求和审美偏好。
(二)色彩的处理
对于视觉冲击而言，色彩是给人最直观的视觉体会，和谐适当的色彩安排可以夺人眼球，吸引浏览者的注意力。因此在色彩的设计中，应该首先确定与主题风格相统一的主打色调，可以是暖色调、冷色调或者采用对比色调，这个完全要根据页面信息传递的需要而定。然后分清主次，分别对背景色、图片颜色、文字颜色等等做出具体的处理，注意色彩的使用层次，不可喧宾夺主。
(三)版面的编排
网页的视觉设计属于交叉学科范畴，在版面的布局安排上基本和平面媒体的设计有异曲同工之处。在有限的屏幕界面内对构成要素做出编排，需要充分考虑各要素之间的依存关联和信息内容的轻重，通过空间上的排列组合，使整个界面和谐统一，生动形象。如何做到科学合理的版面设计，需要从三个大的方面考虑：一是主次分明，让浏览者可以轻松判别信息的价值，便于快速选取核心信息;二是图文并茂，相得益彰，注意文字与图片的结合;三是错落搭配，具有动态感，对要素的位置、大小、方向的处理要错落有致，并把握整体的动态感，使之生动有气息。
网页色彩的设计方法
网页色彩设计得好，可以为网站锦上添花，收到事半功倍的传播效果。在网页色彩设计中，要充分利用色彩的色相、明度、纯度、远近、冷暖、轻重等对比关系，强化网页的视觉效果。
1.确定网站的主角调及辅助色
网页中可以采用多种色彩，但一个网页中只能有一个主色调。主色调就好比乐曲中的主旋律，对网页起着主导作用。
选择主色调时，应首先确定网站的主题、服务对象和所要表达的气氛，以及利用色彩所希望达到的目的，如树立形象、推广产品、娱乐大众、传播信息等。不同的网站定位，会延伸出不同的色彩取向，该色彩取向决定了这个网站的风格，或严肃、或活泼、或前卫等。
主色调主导着整个网页的风格和意境，而辅助色的面积虽小，却起着缓冲和强调的作用。辅助色能让页面有生气、有趣味，使主色调流畅。辅助色与主色调搭配合理，可使整个页面特色鲜明，引人注目。网页的辅助色可用主调色的邻近色，也可用对比色。一般情况下，可选择一两种辅助色配合使用，整个网页的色彩最好控制在三种颜色之内。网页也可以采用单色调，以形成一种醒目的风格，需要注意的是，应在网页的局部采用少量小面积的对比色，以达到丰富页面的效果。
在色调的使用方面，采用高饱和度的色彩，如黄色、红色作为网页的主色调，能展现活泼、乐观、希望、充满生命力的气氛，具有强烈的视觉吸引力;采用具有中、低明度和饱和度的复合色或消色如浅灰、蓝灰、暗绿、枣红等，作为网页的主色调，既不炫目，也不黯淡，对眼睛的刺激适中，可传达严肃、优雅、稳重、富有内涵的氛围;以粉彩等柔和色调为主色调的网页，则可传达明朗、轻松、欢快的气氛，如粉红、柠檬黄、天蓝、新绿等。
2.确定文字、配图的色彩效果
作品内容的表现是通过造型、色彩、构图、文字等多种形式共同完成的，内容与形式的统一是色彩协调成功的条件。不同的内容需要不同的色彩来表现。
网页以文字信息为主，网页文字要有良好的可读性与清晰度，除了考虑文字的字体、大小、字距、行距等以外，还必须重视文字色彩与背景色彩的配合。背景与文本的色彩对比要尽量大(一般明度对比为3∶1~5∶1)，以便突出文字内容，但文字色彩不要过于亮丽，以免造成过强的视觉刺激。
对于图形感较强烈的页面，首先要将底色与图形色的反差拉开。如使用一些在色相、明度、饱和度上具有强对比关系的色彩，这样既能起到烘托主题图形的作用，也可使得页面色彩主次分明。其次，要结合图形的面积情况处理底色和图形色：如果图形大，则图形色可以使用主色调;如果图形小，则图形色可配置鲜艳的色彩。
此外，还要注意超链接翻转效果。当前超链接及已访问过的超链接的文本色彩与其他文本的色彩要有差别，以利于浏览者进一步链接。翻转页的色彩也应与超链接页面色彩有所不同，这样可以突出已选到的超链接;但已访问的超链接页面色彩与超链接页面色彩，可以相同，也可以不同。
3.网页色彩的配置
主调色、辅助色、文字色、底色、图形色都是网页设计中不可缺少的色彩，但网页的色彩品种不宜过多，否则会过于花哨，喧宾夺主。主调色、辅助色、文字色等不一定要采用不同的色相，有时网页色彩简单明了更能突出主题，产生舒适的视觉效果。合理选配网页色彩，形成主色调为主小色块为辅、既对比又调和的色彩画面，会赋予网页以活力和个性，最大限度地吸引网民的视线。
(1)同种色的配置。同种色指色相相同而明度、纯度不同的颜色。网页设计忌用单一色彩以免产生单调的感觉，但通过调整色彩的饱和度与透明度也可以使单一色彩产生丰富的变化。
(2)类似色的配置。类似色指在色轮上邻近的色组。采用类似色来设计网页，可以使网页避免色彩杂乱，易于达到页面的和谐统一。
(3)对比色的配置。一是补色配置，最强的对比色配置。如红与绿、黄与紫等。二是次对比色配置。合理使用对比色会产生强烈的视觉效果，能够使网站特色鲜明、重点突出。在设计网页色彩时，一般以一种颜色为主色调;对比色作为点缀，可以起到画龙点睛的作用。
(4)黑、白色的配置。黑、白色虽然不如彩色那样张扬、奔放，但它含蓄、沉稳、淡雅的色彩特征更符合都市人的气质，更能展现浓郁的人文气息与高雅的审美情趣。黑色是一种特殊的颜色，如果使用恰当、设计合理，往往产生很强烈的艺术效果。
(5)综合配置。综合配置指以上诸方法的组合。
4.正确使用图像及其色彩
图像在网页中起着画龙点睛的作用，不但能装饰页面，还能表达风格与情感。但网页如果图片过多或色彩使用不当，会导致浏览、下载的速度变慢，从而使网页的点击率下降。所以要正确使用图像及其色彩。
(1)位图与矢量图。以文件数据的组织特征进行分类，可将众多的图像分为两类：位图格式;矢量图格式。位图又称为光栅图文格式，是以像素点的形式来描述图像。常见的图像格式有：JPEG格式、BMP格式、PNG格式、TIFF格式等。位图的色彩丰富逼真，但缩放时会产生失真现象而且所占空间较大。若要向网页中添加照片或者色彩逼真的图片，则可以选用位图。矢量图是用数学方式描述的一种由线段和几何元素组成的图形图像。常用的格式有:AI格式、CDR格式、EPS格式等。矢量格式的图形在缩放时不失真而且所占空间较小。若要为网页增加动态效果，可使用矢量图，通常采用Flash动画形式。此外，在进行网页图片设计时，应该对用户的带宽有充分的估计。在带宽较小的情况下，应该权衡网页对图片色彩以及传输速度的要求，以决定其主次位置。
(2)保存合适的图像文件格式。Web浏览器内部支持多种图片格式，现在通常使用GIF、JPEG和PNG三种图片格式。GIF格式是最流行的格式，其特点是所占空间小、下载速度快，较适用于具有简单色块的标志、图案，一般不用于保存真彩色的图像文件，在图片动画方面只采用GIF格式，因为JPEG、PNG格式不允许一个文件中有多幅图像。JPEG格式是一种24位色、高压缩比的图像文件格式，通过有损压缩方式可将图像文件压缩到原图的10%，不适合放大观看，也不适合印刷，适用于新闻图片、照片或美术作品的传输。PNG格式使用无损压缩方式，可以通过不同的储存方式、以不同的色彩数目来存储文件，具有很大弹性。
(3)Web安全色。计算机提供了一些色彩模式：RGB模式、CMYK模式、Index Color模式、LAB模式等。在网页色彩设计中常用RGB模式。RGB模式是计算机显示器默认的显示模式，用RGB模式制作出图像后，经处理成为Web图像就可在网上使用了。当超过显示能力时，计算机的色彩管理系统会尽力使用最接近的颜色来代替，但效果往往不如人意。为避免色彩被扭曲可使用Web安全调色板，它支持216种颜色。如果在设计网页时使用这些颜色，则无论在何种浏览器或平台上都可达到相同的色彩效果。所以，设计师通常选择Web安全色来设定网页背景、文字、表格的颜色，以及色彩简单的标题、动画、图形等。当然Web安全色也有自身的局限性，如会出现颜色偏暗的问题等。因此，在设计网页的色彩时，一方面要考虑色彩的安全问题，另一方面也要考虑色彩的需求问题。
网页设计流程是什么
对于网站设计每个前端工程师都有自己的 一套方法论。就我个人而言，找到适合自己的方法需要大量的实战演练。
1.效果图分析。当一张psd图呈现在桌面前时，你需要的，只是冷静地思考。仔细地观察和分析，那些是主，那些是辅，理顺各个页面的组成元素和他们之间的关系是开头最最重要的。
2.布局切图。通过上一步，对效果图有一个整体轮廓的印象，下面开始布局规划。页面是三行两列式还是两行一列式，需要考虑到网站今后可能改版遇到的某种情况(当然，这需要经验)其他网页的需求，最好考虑到代码重用和网站的灵活性。如果对页面的构成已经相当清晰，那就动手吧。切割图片。那个属于表现层图片，那个属于内容层图片。
3.网站文件规划。(有的同学喜欢把这个步骤放到最后做)我个人喜欢早做 嘻嘻。合理地组织网站文件结构将会让网站以后的更新与维护更加方便。包括后续的开发。
4.HTML编码。这部分每个人的做法还真是不同，我个人，首先打好框架，再分别细化，填充内容。
5.CSS 组建网页。之所以把第四步和第五步分开，就是为了说明一个道理：内容与表现的分离。上一步我们往往做的很沮丧因为我们还看不到实际的效果图，我们只是单纯地想表达内容，这一步就是我们丰富内容的时候了。
完成以上步骤，网站终于有个样子了，下来就是调整啦，网页重构啦，让网站更加perfect 。
1、网站策划负责前期收集实际业务部门需求及分析市场动态，确定网站定位;结合用户体验及技术实现的可能性，确定页面原型。
2、网站设计师负责根据页面原型，设计成为平面页面;
3、网站制作(部分公司或团队因架构不一致，此处工作也可能由网站设计师承担)负责将平面页面切图，并
网站设计流程按照SEO优化等标准生成html静态页面;
4、网站技术开发部门或网站开发师开发相关前、后台代码，并完成html页面的代码嵌套工作;
5、网站进入内测、公测及BUG修复流程;
6、发布网站并上线(其中包括运维工程师的服务器环境搭建、部署等工作)。
如何自学网页设计
先学一学HTML，找本自己能看懂的教材，浏览为主，不用记住所有的概念，只要记住使用原理就行了，这一阶段，估计三天就够了;然后用两天时间学CSS，方法同上;进而再花些时间了解一下JavaScript。
然后就可以用记事本尝试写几个网页，记住这时千万不要用那些可视化工具，比如FrontPage、Dreamweaver(那些以后再学)。
有一个提高自己“写网页”的捷径，就是上各大网站，把网页保存下来(什么?你说你不会保存网页?就是“文件→另存为”)，然后打开保存下来的网页，点击右键→查看源文件，看看人家的网页是怎么写的，然后模仿他们的写法，不断规范自己的代码。嘿嘿，这个方法不错吧。先好好模仿一下吧。
接下来该学一下Fireworks了。建议一开始就到网上找些实例教程，这些实例教程一般都介绍得很详细，跟着它一步一步做下来，每学会一个实例就掌握了几项操作，而且也有了自己的作品，很有成就感的，长期积累下来对自己的提高很有帮助。学Fireworks主要是学图片处理，比如加一些效果，还有很重要的就是切图，这对于初学者是很重要的。
这时还可以结合Dreamweaver进行学习，你就可以体会到Dreamweaver和Fireworks的无缝集成了。利用这些工具多做几个网页，你就可以达到一定水平了。
要是想让你的网页多一些炫目的效果，建议你学一下Flash，难度并不大，而且要是前面的JavaScript基础打得好的话，学到Flash中ActionScript时，你会有一种似曾相识的感觉，因为这两种语法几乎是一模一样的。
到这时，相信你就可以真正领会到“网页三剑客”的威力了。
在实践中不断提高
要是每天能拿出两个小时来学习，完成以上这些学习估计只要20天就差不多了。要是天赋高的话(比如说像我这样的，呵呵)，那需要的时间就更少了。接下来该实习了，找个地方锻炼一下自己，比如可以去一些公司干干兼职，或是给自己的单位设计一下主页等。
最好是能进入一个正规的开发团队，你就会学会如何以团队合作的方式开发网站，特别是怎样和程序组合作，把页面与后台程序数据库配合起来。可能你会担心自己是新手，人家会嫌弃你，没关系，只要努力去找，总会有机会的。
到此，你就基本可以称作是一个“准Web Designer”了，不过要从根本上提高自己，最好去学学美术，这是当一个网页设计师的基本功。
