第05章网页版式设计课稿.ppt

主要内容 3．重心 离心、向心的视觉运动也属于重心的视觉流程范围，其视觉流程运动感强烈，同时富于节奏和秩序美。 4．导向 导向视觉流程主要是通过诱导元素，主动引导浏览者的视线按一定的方向或位置有序地运动，有主有次地把页面各构成要素依序串连起来，形成一个构成联系的有机整体，使主次分明、重点突出、结构紧凑、条理清晰流畅，最大程度地发挥视觉传达的功效。常运用手势导向、视线导向、形象导向、文字导向来传递信息。 4．导向 导向视觉流程主要是通过诱导元素，主动引导浏览者的视线按一定的方向或位置有序地运动，有主有次地把页面各构成要素依序串连起来，形成一个构成联系的有机整体，使主次分明、重点突出、结构紧凑、条理清晰流畅，最大程度地发挥视觉传达的功效。常运用手势导向、视线导向、形象导向、文字导向来传递信息。 4．导向 导向视觉流程主要是通过诱导元素，主动引导浏览者的视线按一定的方向或位置有序地运动，有主有次地把页面各构成要素依序串连起来，形成一个构成联系的有机整体，使主次分明、重点突出、结构紧凑、条理清晰流畅，最大程度地发挥视觉传达的功效。常运用手势导向、视线导向、形象导向、文字导向来传递信息。 5．散点 散点视觉流程是指没有固定的视觉流动线，在网页编排中形成图与图、图与文字之间自由分散状态的方式，视线随页面的组成要素做或上或下、或左或右的自由移动。散点排列强调感觉性原理，较注重自由、随机和偶然性的空间运动感。追求新奇、特别刺激的心态，能让人轻松随意、有趣和极具个性。 对不同类型的导航来说，所有导航的布置必须保持一致性。一致性是实用性的关键，考虑到快速点击导航按钮，导航的布置基本上相同，网站顶部的导航一直保持在每个网页，其位置、形态、色彩均保持一致。屏幕到屏幕间导航区域内元素的位置和数目也应保持一致。如果改变了导航按钮的位置和样式，读者不得不花时间寻找到和确认下一个导航按钮，或大幅度地移动鼠标点击导航。 5.2.5 一致导航 也可称为栏型，网页中的骨骼型版式是一种规范的、理性的设计形式，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，显得网页既理性、条理，又活泼而富有弹性。这种版式常用于公司网站的设计。 5.3网页版式构成的类型 5.3.1 骨骼型 “口”字型、“同”字型、“回”字型也可归于此类，是一些大型网站所喜欢的类型，即最上面是网站的标题、导航以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种布局的优点是充分利用版面，信息量大，缺点是页面拥挤，不够灵活。这种结构是我们在网上见到的差不多最多的一种结构类型，常用于门户网站的设计。 5.3.2 “国”字型 “匡”型布局或“T”型布局可归于此类，“匡”型布局中，常见的类型有上面是标题与导航，左侧是展示图片的类型和最上面是标题及广告，左侧是导航链接的类型。“T”布局就是指页面顶部为横条网站标志与广告条，下方左面为主菜单，右面显示内容的布局，因为菜单背景色彩较深，整体效果类似英文字母“T”，我们称之为“T”形布局。这种布局的优点是页面结构清晰，主次分明，是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人感觉枯燥无味。 5.3.3 拐角型 框架型版式常用于功能型的网站，如邮箱、论坛、博客等。 1．左右框架型 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。枯燥无味。 2．上下框架型 与上面类似，区别仅仅在于是一种上下分为两页的框架。 3．综合框架型 上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。常见的邮箱的版式都是综合框架型。 5.3.4 框架型 POP布局属于此类。就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，页面以图像充满整版。主要以图像为诉求点，将少量文字压置于图像之上。满版型给人以舒展、大方的感觉，视觉传达效果直观而强烈，缺点就是速度慢。随着当今网络的带宽不断变大，因此这种版式在商业网站设计尤其是网络广告中比较常见。 5.3.5 满版型 把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性