Web前端页面设计
2.2 前端UI设计
2.2.1 模块分布
UI设计这是设计中最重要的一点，也可以发挥出更多创意的设计想法；
其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。下面是以任由设计师发挥，不是这样死板，要运用层次感的原理去设计 2.2.2 颜色配置
产生丰富色彩的三原色是红，绿，蓝，也就是RGB，十六进制是00 00
00， 例如经常写的red，color:#FF0000； 缩写color:#F00；
color:gray(#808080)；是比较深的灰色。所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。我们网站上用的色彩系是属于灰白色系这个选择符合网站的整体风格，不可能把网站设计成五颜六色，因为是学院网站所以要体现一种淡雅，自然的色彩风格。背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。首页的顶端使用灰色标题图片下面用全景图这两个部分过度的很自然。在文字部分用黑色文字当鼠标移动到相关文字上面时文字颜色变成红色。不同的文字颜色会产生不同的效果，这能给浏览者一种层次感，方便与阅读。违纪一点禁止大面积使用白色文字，特别是较深的背景下，禁止大面积使用加粗文字如图2-7所示：
图 2-7 字体颜色变换
17
Web前端页面设计
2.2.3 CSS元素
CSS块元素(block) 总是另起一行开始；高度，行高以及顶，底边距都可
控制 常用的有：div p table h1 ul dl 等等。 内联元素(inline)和其它元素都在一行上；高度，行高以及顶，底边距不可改变；常用的有：a strong font img input span small label等等如图2-8所示：
Display: inline-block将对象呈递为内联对象，但是对象的内容作为块
对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。
图 2-8 CSS浮动
CSS间距 相应的设置大小，行高，首行缩进，间距（padding，margin）
内边距padding：元素的内边距在边框和内容区之间。padding:10px 5px 15px 20px;上 10px右 5px下 15px左 20pxpadding:10px 5px 15px; 上右左下padding:10px 15px;上右下左
18
Web前端页面设计
这个属性是无法居中的，如图所示2-9所示：
图 2-9 元素边框调整
2.3 交互设计与UI
由于视觉设计本身是一种比较主观的创作性工作，那些已经被
制定好的视觉结构常常因设计师的“审美需要”而被剥离，切割。
这种情况下，交互设计尤为重要，既不能失去UI设计的特
性，又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术如图2-10，2-11所示：
19
Web前端页面设计
图 2-10 导航栏
图 2-11 咨询中心
20