网页设计中的常识

 

　　对于大多数网页制作者来说，可能只会盲目的制作网页，对于拿到手里图片的好坏，美感估计了解甚微，下面就分享一下，自己对美感方面的认知。

　　当我们点击进入一个页面的时候，引入眼帘的不是那些漫天的广告，应该是这个网站的主色调，不同网站的主色调也不同，比如时尚类的黑颜色或者紫色偏多，一般企业门户型的就是白色，灰色的偏多。当你看一个网站的好坏的时候，个人认为一个网站的色调可以分为两部分，主色调，次色调，辅助色调，主色调应用在整个布局中，次色调协助主色调调整个部分细节，如果一个网站的色调有3种以上，那这种网站给人的感觉就会很乱，很非主流。。

我们为什么要选择不同的色调来搭配不同的网站，原因就是不同色调，带给人的感觉也不尽相同，色调不是指颜色的性质，而是对作品的整体颜色的概括评价。色调是指作品色彩外观的基本倾向。在明度、纯度（饱和度）、色相这三个要素中，某种因素起主导作用，我们就称之为某种色调。一个作品虽然用了多种颜色，但总体有一种倾向，是偏蓝或偏红，是偏暖或偏冷等等。这种颜色上的倾向就是一副绘画的色调。通常可以从色相、明度、冷暖、纯度四个方面来定义一幅作品的色调。色调在冷暖方面分为暖色调与冷色调：红色、橙色、黄色--为暖色调，象征着：太阳、火焰。蓝色--为冷色调，象征着：森林、大海、蓝天。黑色、紫色、绿色、白色--为中间色调； 暖色调的亮度越高，其整体感觉越偏暖，冷色调的亮度越高，其整体感觉越偏冷。冷暖色调也只是相对而言。

　　说完了色调，我们就要了解一张图的重心在图片的什么位置，比如，当你看一个人的时候，你第一眼看的肯定是她的脸，之后会看她的眼睛，这就说明，一个物体或者一张图片的着重点是在其中间偏上也就是下面表格标明的地方，把最想要表达的东西，放到这个地方，会让人们瞬间理解一张图突出的是什么，反之一些无关紧要的东西，放到这俩个位置，就会让人觉得一张图很散，没有着重点，也就留不下什么印象，特别是在广告图中这个重心就很明显。

	重心	重心

 　　谈到一个网站的好坏，有这么一句话，细节决定成败，一个网站如果设计的不到位，但是把每个细节都抠的很细，那这个网站也算是成功的，

　　网站的细节设计中，最容易、最常见的营造或破坏设计品质的方面有： 
　　一、字体 
　　设置正确的font family以保证在不同操作系统中都能以最优的字体显示中文、字母、数字、标点。 
　　针对以中文为主和以英文为主的内容、字体大小不同的内容，设置不同的行间距。 
　　 在Windows、宋体为主的环境下，字体不要小于12px，不要使用斜体，避免使用粗体。 

　　二、内容尺寸 
　　对于文字内容为主的页面，往往可以利用最小文字的尺寸（或接近这个尺寸）、并且能整除标准页面宽度的尺寸，作为网格的单元尺寸。 
 　　使用网格设计法规范内容的尺寸，让布局看起来整洁有序。 
　　 设置内容宽度是固定还是可以延展。可延展的内容宽度能充分利用屏幕空间，但是过宽的内容反而妨碍阅读。 

　　三、对齐 
　　使用网格设计法规范内容的对齐，让布局看起来整洁有序。 
　　在横向上不要使用过多的对齐基准线。如果横向有5、6个对其基准线，几乎等于没有规范对齐。 
　　英文在左对齐或右对齐的时候、另一侧参差不齐，居中对齐的时候两侧参差不齐，有一种美感。中文则往往更欣赏整体接近方块化的布局，尤其是对于高密度内容，需要慎用　　　参差不齐的形式。 

　　4、间距 
　　间距单元尺寸的制定，由网格单元尺寸、字体单元尺寸共同决定。 
　　尽量少使用几种不同的间距尺寸，间距类型过多让布局显得凌乱。 
　　间距是非常有效的形成内容区块的方式，并且微妙而不强烈。相比使用背景色、间隔线，用间距形成区块往往更具品质感。 

　　5、颜色 
　　主体颜色尽可能不超过3种（黑色和白色如果作为背景色和文字色，不包括在内），主色、强调色、辅助色。 
　　在同一种颜色上，可以根据需要发展出同色系的辅助色。 
　　如果使用过浅的颜色，有可能在某些显示器上看不见。同一颜色在不同的显示设备上显示效果往往不同，往往绿色的偏色尤其严重。 

　　我们可以把上面的内容总结成“3”的原则：基于网格设计内容布局的尺寸、对齐、间距，使用不超过3种字体大小、3个对齐基准线、3种间距尺寸、3种颜色，这基本就是一个网站要注意的细节