布局要考虑很多内容,例如:排版、图标、分解线、间距留白、
一致性
、
借喻
、光、影、形状、空间
和
色彩等等。
排版:这是一种起交流作用的表现方式,它拥有内建的层次结构、模式和韵律。通过不同的文字大小、间距和颜色来调整排版。
图标:设计图标的关键在于要将它尽可能地以某种强烈、一致的方式与其要表达的概念想关联。
分界线:将页面的不同区域有效的分开,让页面看起来更有韵律,甚至还可以知道维度。
间距:给文本一些呼吸空间,让用户的视线正对页面内容。
一致性:设计中用的元素可能不一样,但是使作品
的整体达到统一的意境才是最重要的。例如使用单一的色系,用线条围绕悉心调整匹配的区域,将最重要的、起支配作用的元素用艺术线条或者图片表示。
借喻:用简单的设计元素表示复杂的图像或概念。
光:可以让元素有立体感,可以让我们浏览网页有看书的感觉,会让我们去寻找光源。
阴影:增加丰富的视觉效果。
形状:圆弧一般关联女性和柔和,表示温暖、舒适和爱情等。三角形一般关联男性和阳刚,表示运动、力量和攻击等。而方形给用户有序、逻辑、缜密和安全的感觉。
空间:正空间和负空间,正空间指作品对象所占空间,负空间指对象背景所占空间。理解这个可以让我们更好的掌握间隔空间和作品融为一体的方法。
色彩:不同的色彩对应不同的心理、文化等,所以才设计时要考虑色彩比。
对于布局的溢出,在实际设计中,
主要的溢出来自于绝对定位中的元素内容过多,浮动元素尺寸超过其可容纳区域:
浮动导致内容溢出:
1、运用空标签清除浮动;例如<div id="clear"> </div>
2、精确控制浮动;
3、适当增大浮动元素的容器宽度;
4、限制内容宽度并注意斜体;
5、限制内容溢出,使用overflow属性;
绝对定位导致内容溢出:
垂直溢出:
1、使用浮动代替绝对布局;2、在设计中尝试避免该问题;3、限制溢出,使用overflow属性;(但是太多的滚动条会让用户对页面失去兴趣,所以可以将overflow设置为hidden)
1、 使用脚本;
2、用em而不是px作为长度单位;(这个仅适用于用户增大字号时的溢出,对于由于内容的长度溢出却没有效果)