网站版式设计.ppt

网站版式设计
一.网站的视觉路径
1.视觉路径一般是：从上到下，从左到右。
2.网站中方块：
(1)方块感越强越能给用户方向感。
(2)方块越少越好。
(3)尽量用留白做视觉区分。
3.对齐和间距：
(1)视觉设计最简单，也是最容易忽略的就是对齐。
(2)间距的一般规律：字距小于行距，行距小于段距，段距小于块距。
4.主次关系 ：
对用户引导的关键就在于怎么处理主次关系。说白了就是对比，从视觉的角度上看：形状的大小，颜色，摆放的位置都会影响信息的重要与否。比如yahoo中间新闻栏的设计，大图带大标题是第一要点，小图带字是第二要点，纯文本第三，节奏感、主次关系非常强。
5.常见问题：
(1)视觉设计师不懂代码，前端设计师在视觉方面又不专业。常常是实现出来的产品跟视觉设计出来的图片有所偏差。建议视觉设计师跟进调整。
(2)广告图片破坏视觉效果。如果网站足够牛的话，可以让广告方遵循视觉规范。如果不行的话，起码设计师还能决定广告的尺寸，位置等等。
新浪、腾讯、淘宝的首页改版。单纯从视觉设计的角度上看，腾讯非常清爽，很用心。
二.版式的基本类型：
1.骨骼型 ：网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。
2.满版型 ：页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。
8.焦点型 ：焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。
（1）中心　以对比强烈的图片或文字置于页面的视觉中心。 （2）向心　视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。 （3）离心　视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。
9.三角型 ：网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。