5Web设计与规划汇编.ppt

夏　瑜 博士、副教授 E_Mail：csit_xiayu@163.com 计算机科学与工程学院 动态网页技术基础 Web设计与规划 目录 1. Web视觉设计 1、Web视觉设计 视觉设计重要性 Web设计中，什么最重要？毫无疑问，内容。 但是，能够在一瞬间，抓住访问者眼球的是什么？是外观！ 1、Web视觉设计 视觉设计重要性 视觉设计是指：针对眼睛官能的主观形式的表现手段和结果。 “爱美之心人皆有之”，在Web领域也不例外。 无论网站界面采用什么样的设计风格，或简约、明快，或复杂、精致， 大家都喜欢井然有序、外观漂亮的网站。 漂亮的外观，首先给访问者一个不错的第一印象。 1、Web视觉设计 视觉设计重要性 出色的视觉设计，能够赋予意义，提供语境，唤起情感。它可激起访问者的兴趣，并使其相信网站的专业性和可靠性。它可以确定焦点，设立重点，建立网站元素之间的关系，并指导用户完成任务。 2. 视觉流程筹划 2、视觉流程筹划 视觉运动规律 在视觉心理学上，有个词叫做“张力”，表示物象形式的矛盾差异相对比所产生的对抗振奋感和精神刺激力，差异越大，视觉张力也就越强。 人们在完整地接收平面元素信息时，视线会形成一个习惯性的流动顺序：视点先落入视觉焦点，后随各元素间的强弱变化而作有序流动，最后完成对全部分元素信息的吸收。 2、视觉流程筹划 最佳视域 页面中不同的视域，注目程度不同，给人心理上的感受也不同。 上部给人轻快、漂浮、积极、高昂之感；下部给人压抑、沉重、限制、稳定的印象； 网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最佳视域。 浏览者的眼睛首先看到的是屏幕的中间偏上的区域 根据视觉心理学的研究，人的视线对于版面的视觉诉求力大体是上部比下部强，左半部比右半部强。 2、视觉流程筹划 最佳视域 这个设计轻松而具均衡的形式感，把最佳视域留给了横贯页面的大Banner。 2、视觉流程筹划 最佳视域 这三个拼贴剪纸式的文字，作为个性化的视觉元素，分别占据了三个点，吸引视线在它们之间流动 。 3. 视觉流程类型 3、视觉流程类型 线性视觉流程 分为直线视觉流程和曲线视觉流程两类 直线视觉流程：使页面的流动线更为简明，直接地诉求主题内容，有简洁而强烈的视觉效果。 A.竖向视觉流程 B.横向视觉流程 C.斜向视觉流程 3、视觉流程类型 线性视觉流程 竖向视觉流程--给人坚定、直观的感觉 3、视觉流程类型 线性视觉流程 横向视觉流程--有稳定、恬静之感 3、视觉流程类型 线性视觉流程 斜向视觉流程--以不稳定的动势引起注意 3、视觉流程类型 线性视觉流程 分为直线视觉流程和曲线视觉流程两类 曲线视觉流程：由视觉要素随弧线或回旋线运动而形成。 A.弧线形（C形）视觉流程 B.回旋形（S形）视觉流程 3、视觉流程类型 线性视觉流程 弧线形（C形）视觉流程--有扩张感和方向感 3、视觉流程类型 线性视觉流程 回旋形（S形）视觉流程 --两个相反的弧线则产生矛盾回旋，在平面中增加深度和动感 3、视觉流程类型 焦点视觉流程 焦点：是指视觉心理的焦点。每个页面中都有一个视觉焦点，这是需要重点处理的对象。焦点是否突出，和页面版式编排、图文的位置、色彩的运用有关，同时也与对“焦点”着力描写有关。在视觉心理作用下，焦点视觉流程的运用使主题更为鲜明、强烈。 3、视觉流程类型 焦点视觉流程 按照主从关系的顺序，使放大的主题形象成为视觉焦点，以此来表达主题思想。 3、视觉流程类型 焦点视觉流程 将文案作整体编排，突出主题形象。 3、视觉流程类型 焦点视觉流程 在主题形象四周增加空白量，使之成为视觉焦点。 3、视觉流程类型 反复视觉流程 反复视觉流程是指网页中相同或相似的视觉要素，作规律、秩序、节奏的逐次运动。其产生的视觉效果更富于韵律美和秩序美。 3、视觉流程类型 反复视觉流程 3、视觉流程类型 导向视觉流程 导向视觉流程：是通过诱导性视觉元素，主动引导读者视线向一定方向作顺序运动，按照由主及次的顺序，把页面各构成要素依次串联起来，形成一个有机整体。 A.文字导向 B.手势导向 C.形象导向 D.视线导向 3、视觉流程类型 导向视觉流程 文字导向 3、视觉流程类型 导向视觉流程 手势导向 3、视觉流程类型 导向视觉流程 形象导向 3、视觉流程类型 导向视觉流程 视线导向 3、视觉流程类型 散点视觉流程 散点视觉流程：是指在分散处理视觉元素的编排方式。它强调感性、自由性、随机性、偶合性。其视觉流程为：视线随各视觉元素作或上或下、或左或右的自由移动。这种视觉流程不如其他视觉流程严谨、快捷、明朗，但生动有趣，给人一种轻松随意和慢节