网页排版与布局
一 网站的层次结构
制作便于浏览页面的一个大敌就是视觉干扰,它包含两类:
a,混乱页面主次不清,所有东西都引人注目
b,背景干扰
1.把页面分割成清晰明确的不同区域很重要,因为可以使用户迅速判断出哪些区域应重点看,哪些可以放心地忽略.
2.创建清晰直观的页面层次结构;越重要越要突出;逻辑相关的内容视觉上也应该相关
3.用嵌套的方式形象地显示从属关系
二 网页的布局形式
整个页面可以分为几个部分,每个部分有不同的功能,也能体现不同的形式,中间的部分一般是最大的,因为它承载着主要的信息,使用者主要就是看中间这个部分的内容,
游戏网网站夜微凉出新意把整个页面进行任意划分,特别是个人网页,例如把整个页面评分为左右两个部分,但是这样会让人不着重点,还有的框架用的太多,影响力页面的整体性…
1.骨骼型
网页版式的骨骼型是一种规范的,理性的分割方法,类似于报刊的版式.
常见的骨骼型有竖向通栏,双栏,三栏,四栏和横向的通栏,双栏,三栏和四栏等.一般以竖向分栏为多.这种版式给人以和谐,理性的美.几种分栏方式结合使用,既理性,条理,又活泼而富有弹性.
题头加三栏式的设计方式:题头就是在最上行,左边是网站标题图案,右边是正文.
上下水平设计方式,它有适合信息量大,维护方便的特点,适合用于商业网站.
网站导航的设计-----清晰,简洁,一致
导航的意义
a,帮助用户寻找他要的东西
b,告诉用户他在哪里
c,更好的展现网站的内容
d,使浏览者对网站有信心
固定导航应包括下列最常用的5个元素:
1,网站标识
2,栏目
3,公共服务(帮助,网站地图,关于我们,联系我们等)
4,返回主页
5,搜索
2.满版型
页面以图像充满整版.主要以图像为诉求点,也可以将部分文字压置于图像之上.四边出血,向往扩张,合适年轻人的口味.
3.分割型
把整个页面分成上下或左右两部分,分别安排图片和文案.分割线上的压置的图片既打破了页面分割的生硬感,也使自身得到强调.左边框上的小标签乃点睛之笔.
4.中轴型
沿浏览器窗口的中轴将图片或位子作水平或垂直方向的排列.水平排列的页面给人稳定,平静,含蓄的感觉.垂直排列的页面给人以舒畅的感觉.
5.曲线型
图片,文字在页面上作曲线的分割或编排构成,产生韵律与节奏.网站的导航标题沿图片形弧线排列.
6.倾斜型
页面主题形象或多幅图片,文字作倾斜编排,形成不稳定感或强烈的动感,引人注目.
文字水平排列,将画框斜置,产生对于与动势,印象被加强.
7.对称型
对称的页面给人稳定,严谨,庄重,理性的感受.以相对对称手法制作的导航页面.
8.焦点型
焦点型的网页版式通过对视线的诱导,使页面具有强烈的视觉效果.通过离心的版式,清晰地传达出网站提供的服务.
9.三角型
网页各视觉元素整体看为正三角形的构图,主体形象稳定而突出
10.*型
*型的页面具有活泼,轻快的风格
引导视线的图片以散点构成,传达随意,轻松的气氛
但是作为个人网站,就不一定要采用这些方式,完全可以更新颖,更艺术些.什么又算是灵活多样?怎样做到新颖,艺术呢?没有一个模式取套,他需要你领悟,去创新.
留白
我们应该在网页中通过留白的作用,使整个内容排布得松紧有度,给人以跌宕起伏之感.
把整个屏幕都塞得满满的,让人感觉不乱也很挤.网适当的留白,可以提高网页的视觉效果和艺术感染力.
留白既可以给人带来心理上的松弛,也可以给人带来紧张与节奏.利用留白的体量感来使页面布局平衡,在一种不平衡中营造平衡,这样会使页面生动起来.
“破”
这个"破"是指打破拘束,打破平衡,增添动感的手法(不是动画的动感).有如国画中画兰花----“一撇二交三破”,每片叶子都朝上竖着当然不好看了,这一"破"就是其中的道理.
简单
“美就是简单”,平淡之中才显真色.过于复杂,过于花哨,自然就偏离了没得轨道,比如过多地使用特效,过分炫目的图案,过于复杂的文字板块排列等.
精简文字—生动的诱惑力的作品是简洁的
不要用文字去填充空间
减掉那些没有用的文字的好处:
a,减少了页面的干扰;
b,使有用的内容更突出;
c,使页面更短,无需滚屏就可以一眼看到更多的东西
巧妙地运用动态元素.以横贯页面的长条色块统一画面,图片安排随意,疏密有致,使整体风格即统一又有变化.
在块状组合结构中,如图片太多,则无法突出重点.这个页面通过改变图片的面积,有效地分开了
图片与文字穿插编排,形成散点组合.运用线条的分割,文字的群组化以及单一的背景色形成整体
多幅图片使垂直线规律地等量分割,获得了理性与秩序的美.
以水平分割为主的页面,右上角与左下角安排了文字,打破了呆板的感觉.
饱满的页面构图,巧妙地利用表盘稳定住页面四角.
人物全部退底,文字色块的安排轻松随意,是面向年轻人的设计.
根据页面色调灵活运用文字的色彩,既符合页面的整体氛围,又保证了可读性.
密集的文字形成块面,丰富了页面层次.