网页排版与布局.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 使页面更短 无需滚屏就可以一眼看到更多的东西 巧妙地运用动态元素 以横贯页面的长条色块统一画面 图片安排随意 疏密有致 使整体风格既统一又有变化 在块状组合结构中 如图片太多 则无法突出重点 这个页面通过改变图片的面积 有效地分开了 图片与文字穿插编排 形成散点组合 运用线条的分割 文字的群组化以及单一的背景色形成整体 多幅图片使水平垂直线规律地等量分割 获得了理性与秩序的美 以水平分割为主的页面 右上角