《网页排版与布局》PPT课件.ppt

,网页排版与布局,网页设计拥有传统的媒体的不具有的优势，例如是能够声音、图片、文字、动画相结合，营造一个富有生气的独特世界，同时它拥有极强交互性，使使用者能够参与其中，同设计者相交流。但是最基本的模式还是平面设计的内容，也就要考虑形式美的内容。 所以现在强调网页设计的创造，表现在对页面的布局上，具体说就是体现在页面的形式美方面。就是通过页面的合理安排，例如文字的条理清楚、流畅、整体，使形式美得到体现。,1.一个用户首次进入网站首页能清楚知道的问题： a,这是什么地方； b,这里有什么； c,我在这里可以做些什么 ； d,我为什么要呆在这里,2.用户不做最佳选择,只要满意， 原因：a,太匆忙 b,即使选错,代价也不大 c,权衡选择未必能增加胜率 d,猜测更省劲,3.我们会把注.意力集中于符合下列条情况之一的词语或短语: a,与手头工作有关的； b,满足当前的个人兴趣的； c,对神经系统有冲击力的词语,如免费,甩卖等,及自己的名字.,设计前的一些思考:,网页上尽量不出现使人费神琢磨的东西 2. 设计的网页应一目了然 3. 设计的网页应便于浏览,而非阅读 4. 利用惯例：惯例是因为有效而成为惯例的,惯例的广泛采用可使用户毫不费劲地在网站畅游,制作便于浏览页面的一个大敌就是视觉干扰,它包含两类: 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,使页面更短,无需滚屏就可以一眼看到更多的东西,巧妙地运用动态元素。以横贯页面的长条色块统一画面，图片安排随意，疏密有致，使整体风格既统一又有变化。,在块状组合结构中，如图片太多，则无法突出重点。这个页面通过改变图片的面积，有效地分开了,图片与文字穿插编排，形成散点组合。运用线条的分割、文字的群组化以及单一的背景色形成整体,多幅图片使水平垂直线规律地等量分割，获得了理性与秩序的美。,以水平分割为主的页面，右上角与左