[网页设计] 网页设计艺术处理

网页的设计主要是网页制作软件的操作与技术应用的问题。但是，要使网页设计、制作得漂亮，必然离不开对网页进行艺术的加工和处理，这就要涉及到美术的一些基本常识。本文将介绍一些网页设计中经常涉及到的艺术处理原则，供各位在进行网页制作的时候参考。

　　一、风格定位

　　网页的美化首先要考虑风格的定位。任何网页都要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。目前网页的应用范围日益扩大，几乎包括了所有的行业，包罗万象，但归纳起来大体有这么几个大类：新闻机构、ZF机关、科教文化、娱乐艺术、电子商务、网络中心等。对于不同性质的行业，应体现出不同的主页风格，就像穿着打扮，应依不同的性别以及年龄层次而异一样。例如：ZF部门的网页风格一般应比较庄重，而娱乐行业则可以活泼生动一些；文化教育部门的主页风格应该高雅大方，而商务主页则可以贴近民俗，使大众喜闻乐见。

　　网页风格的形成主要依赖于网页的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。这些问题看似简单，但往往需要网页的设计和制作者具有一定的美术素质和修养。

　　还有，动画效果也不宜在网页设计中滥用，特别是一些内容比较严肃的网页。网页毕竟主要依靠文字和图片来传播信息，它不是动画片，更不是电视或电影。至于在网页中适当链接一些影视作品，那是另外一回事。

　　二、版面编排

　　网页的设计首先涉及到的是页面的版面编排问题。"版面编排"实际上就是中国古代画论中的"经营位置"。网页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。因此必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体，展现给广大的观众。可以依据如下几条来做：

　　1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别123。

　　2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。

　　3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使网页有丰富的内容，大家可以看一下http://www.code-123.com网，做的很不错。

　　三、线条和形状

　　文字、标题、图片等的组合，会在页面上形成各种各样的线条和形状。这些线条与形状的组合，构成了网页的总体艺术效果。必须注意艺术地搭配好这些线条和形状，才能增强页面的艺术魅力。

　　1.直线（矩形）的应用。直线条的艺术效果是流畅、挺拔、规矩、整齐，所谓有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的主页题材。

　　2.曲线（弧形）的应用。曲线的效果是流动、活跃，具有动感。曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果。一般应用于青春、活泼的主页题材。

　　3.曲、直线（矩形、弧形）的综合应用。把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力，使页面呈现更加丰富多彩的艺术效果。这种形式的主页，适应的范围更大，各种主题的主页都可以应用。但是，在页面的编排处理上，难度也会相应大一些，处理得不好会产生凌乱的效果。最简单的途径是，在一个页面上以一种线条（形状）为主，只在局部的范围内适当用一些其它线条（形状）。

　　四、色彩处理

　　色彩是人的视觉最敏感的东西。网页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是"总体协调，局部对比"，也就是：网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金**、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升网页的文化品位。下面介绍几种常用的配色方案：

　　1.暖色调。即红色、橙色、**、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。

　　2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。

　　3.对比色调。即把**完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握"大调和，小对比"这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。

　　最后，还要考虑网页底色（背景色）的深、浅，很多网页制作教程忽略了这点，我们这里借用摄影中的一个术语，就是"高调"和"低调"。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为"明度变化"。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了





网页设计中，字号多大才合适？   本站整理   wangchuan   2009-06-29   点击： 189   字体：大 中 小  我要评论 在这个显示器百花齐放的时代，网页设计师往往需要考虑不同客户端的浏览体验。
-
在这个显示器百花齐放的时代，网页设计师往往需要考虑不同客户端的浏览体验。

文字大小，是用户体验中的一个重要部分。不同的分辨率，不同的显示器尺寸，不同的DPI，乃至不同的浏览器设置，都会对最终展现的文字大小带来影响。虽然现在很多浏览器已经可以方便地缩放页面，但用户每次光临都要重新缩放，总归麻烦，何况还有许多用户不知道如何缩放页面。最好还是根据用户的分辨率给用户一个比较体贴的默认字号，那这个字号多大合适呢？

12px？14px？15px？16px？ 还是压根就不应该使用px这个单位呢？

问题的根源，在于屏幕上的一切字号单位（px，pt，em）都是相对单位，单凭它们并不能确定文字的实际大小。何况人对文字大小的根本感知在于眼睛的视角，这不仅取决于文字的物理尺寸，还取决于它到人眼的距离。

物理尺寸

首先假定一个我们希望达到的文字物理尺寸，例如设定为17寸1280 * 1024显示器上的16px，计算可得它的高度约是4.32mm，我们计划让网页文字在大部分显示器上都比较接近这个大小，那么在不同分辨率下应该显示成多大的字号呢？

第一步：统计用户主要的分辨率和对应的屏幕大小。

要在物理尺寸和分辨率之间换算，首先要统计分辨率和对应的屏幕尺寸。用户分辨率的分布情况可以从网站的统计日志里获得。由于每个分辨率设置可能对应好几个不同尺寸的屏幕，而屏幕尺寸又无法通过网页获得，只好对现在的显示器市场进行统计分析：针对某一分辨率，统计可能的屏幕尺寸范围，从最小到最大，相对主流的是多大（或使用该范围的中间值作为主流尺寸）。

电脑显示器市场（产品种类繁多，难免挂一漏万，数据仅供参考）

第二步：计算每个分辨率主流屏幕尺寸的物理宽度

现在的显示器长宽比不仅有4：3的标准屏，16：10的宽屏，还有更多不规则比例，为了在不同长宽比的显示器之间进行比较，统一使用横向分辨率来统计。用主流尺寸和长宽比（假设像素的长和宽相同）计算出屏幕宽度（英寸），再换算成公制（毫米），将其一一对应就可看出屏幕大小的趋势。再结合各分辨率的用户分布，结果如下图所示（图片中每个点对应一个分辨率，横轴为屏幕横向的像素数，纵轴为该屏幕的物理宽度，气泡大小表示使用该分辨率的用户人数。其中蓝色气泡表示标准屏，紫色表示宽屏）：最大的三个气泡分别是1024*768，1280*1024，1280*800。

第三步：计算不同显示器上的字号大小

用屏幕的物理宽度除以像素宽度，就可以得到每个像素的宽度。然后用指定的文字物理大小除以这个数，就可以得到在不同分辨率下所需的字号。例如要显示4.32mm见方的文字，各分辨率下分别需要如下的字号（对笔记本和台式机分别统计）：

不同分辨率下需要的字号

可以看出笔记本和台式机的尺寸相差很大，为方便使用，使用各分辨率的主流尺寸或平均尺寸计算出指定字号在每个分辨率下所需的字号。（下图去掉了基本只用在笔记本上的那些分辨率），以4.32mm、3.77mm、3.25mm为例（17寸1280*1024分辨率下的16、14和12号字）：

为保持固定物理尺寸，各主流显示器下所需字号与分辨率的关系

由于在未开启cleartype的情况下，一些中文字体在非偶数字号下的显示效果欠佳，所以一般建议使用12、14、16、18、22px等偶数字号。也就是对某个分辨率选择离它最近的偶数字号。例如：屏幕横向分辨率在1100以下的采用14px，1100到1500采用16px，1500以上采用18px，依此类推。

到人眼的距离

虽然笔记本的字号远小于台式机，可是实际并没有给我们带来那么大的不便，这是因为：一般使用笔记本时人眼到屏幕的距离比使用台式机时要近一些。当上网本越来越小时（极端的例子就是手机），人们使用的时候可能会拿的更近，这样视角更大。反之，当显示器越来越大时（24寸甚至更大），出于整体视角等方面考虑，人们也可能离屏幕远些，从而减小了视角。

定量来说：由于文字大小h（4~5mm）相对人眼到文字的距离d（30~60cm）非常小，可近似认为视角θ正比于h，并与d成反比（θ≈tgθ=h/d）。也就是说，同样大小的文字，距离二尺时看到的只有距离一尺时的一半大小。

也就是说，显示器只能传达一个大概的尺寸，每个用户在具体操作时仍会通过不自觉地调节到屏幕的距离来调整所看到的实际效果。面对越来越多的笔记本用户（请参照上一篇：笔记本电脑的市场份额），前端设计师们只能给出一个针对笔记本和台式机平均尺寸的页面效果，具体就靠用户去自我调整了。

用JS实现不同分辨率下自动调整字号

例如网页正文所在div的id为content——

注：为保证各浏览器下文字均可缩放，字号单位使用em而不是px，一般来说，浏览器默认1em=16px，0.875em\1em\1.125em即为14\16\18px。

使用字号缩放时请注意：对该div内的标题等字号单位最好使用百分比，而不是固定字号，以便随正文同步缩放。

不过字号的大小也是因人而异，所以有的网站会作出 大中小切换这样的功能，用户可以按自己的喜好来调整大小。