5Web设计与规划

1、夏瑜 博士、副教授E_Mail：csit_计算机科学与工程学院动态网页技术基础 Web设计与规划Web视觉设计1视觉流程设计2视觉流程类型3版面设计基本类型4Web创意设计5目录目录1. Web视觉设计1、Web视觉设计视觉设计重要性Web设计中，什么最重要？毫无疑问，内容。但是，能够在一瞬间，抓住访问者眼球的是什么？是外观！1、Web视觉设计视觉设计重要性视觉设计是指：针对眼睛官能的主观形式的表现手段和结果。 “爱美之心人皆有之”，在Web领域也不例外。 无论网站界面采用什么样的设计风格，或简约、明快，或复杂、精致， 大家都喜欢井然有序、外观漂亮的网站。 漂亮的外观，首先给访问者一个不错的第

2、一印象。1、Web视觉设计视觉设计重要性 出色的视觉设计，能够赋予意义，提供语境，唤起情感。它可激起访问者的兴趣，并使其相信网站的专业性和可靠性。它可以确定焦点，设立重点，建立网站元素之间的关系，并指导用户完成任务。2. 视觉流程筹划2、视觉流程筹划视觉运动规律 在视觉心理学上，有个词叫做“张力”，表示物象形式的矛盾差异相对比所产生的对抗振奋感和精神刺激力，差异越大，视觉张力也就越强。 人们在完整地接收平面元素信息时，视线会形成一个习惯性的流动顺序：视点先落入视觉焦点，后随各元素间的强弱变化而作有序流动，最后完成对全部分元素信息的吸收。2、视觉流程筹划最佳视域u 页面中不同的视域，注目程度不同

3、，给人心理上的感受也不同。u 上部给人轻快、漂浮、积极、高昂之感；下部给人压抑、沉重、限制、稳定的印象；u 网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最佳视域。u 浏览者的眼睛首先看到的是屏幕的中间偏上的区域 u 根据视觉心理学的研究，人的视线对于版面的视觉诉求力大体是上部比下部强，左半部比右半部强。2、视觉流程筹划最佳视域这个设计轻松而具均衡的形式感，把最佳视域留给了横贯页面的大Banner。2、视觉流程筹划最佳视域这三个拼贴剪纸式的文字，作为个性化的视觉元素，分别占据了三个点，吸引视线在它们之间流动 。3. 视觉流程类型3、视觉流程类型线性视觉流程分为直线视觉流程

4、和曲线视觉流程两类直线视觉流程：使页面的流动线更为简明，直接地诉求主题内容，有简洁而强烈的视觉效果。A.竖向视觉流程 B.横向视觉流程 C.斜向视觉流程 3、视觉流程类型线性视觉流程竖向视觉流程-给人坚定、直观的感觉 3、视觉流程类型线性视觉流程横向视觉流程-有稳定、恬静之感 3、视觉流程类型线性视觉流程斜向视觉流程-以不稳定的动势引起注意 3、视觉流程类型线性视觉流程分为直线视觉流程和曲线视觉流程两类曲线视觉流程：由视觉要素随弧线或回旋线运动而形成。 A.弧线形（C形）视觉流程 B.回旋形（S形）视觉流程 3、视觉流程类型线性视觉流程弧线形（C形）视觉流程-有扩张感和方向感 3、视觉流程类型

5、线性视觉流程回旋形（S形）视觉流程 -两个相反的弧线则产生矛盾回旋，在平面中增加深度和动感 3、视觉流程类型焦点视觉流程 焦点：是指视觉心理的焦点。每个页面中都有一个视觉焦点，这是需要重点处理的对象。焦点是否突出，和页面版式编排、图文的位置、色彩的运用有关，同时也与对“焦点”着力描写有关。在视觉心理作用下，焦点视觉流程的运用使主题更为鲜明、强烈。3、视觉流程类型焦点视觉流程按照主从关系的顺序，使放大的主题形象成为视觉焦点，以此来表达主题思想。3、视觉流程类型焦点视觉流程将文案作整体编排，突出主题形象。 3、视觉流程类型焦点视觉流程在主题形象四周增加空白量，使之成为视觉焦点。3、视觉流程类型反复

6、视觉流程 反复视觉流程是指网页中相同或相似的视觉要素，作规律、秩序、节奏的逐次运动。其产生的视觉效果更富于韵律美和秩序美。3、视觉流程类型反复视觉流程3、视觉流程类型导向视觉流程 导向视觉流程：是通过诱导性视觉元素，主动引导读者视线向一定方向作顺序运动，按照由主及次的顺序，把页面各构成要素依次串联起来，形成一个有机整体。A.文字导向B.手势导向C.形象导向D.视线导向3、视觉流程类型导向视觉流程文字导向3、视觉流程类型导向视觉流程手势导向3、视觉流程类型导向视觉流程形象导向3、视觉流程类型导向视觉流程视线导向3、视觉流程类型散点视觉流程 散点视觉流程：是指在分散处理视觉元素的编排方式。它强调感

7、性、自由性、随机性、偶合性。其视觉流程为：视线随各视觉元素作或上或下、或左或右的自由移动。这种视觉流程不如其他视觉流程严谨、快捷、明朗，但生动有趣，给人一种轻松随意和慢节奏的感受。 3、视觉流程类型散点视觉流程3、视觉流程类型散点视觉流程4. 版面设计基本类型4、版面设计基本类型 1.骨骼型 2.满版型 3.分割型 4.中轴型 5.曲线型 6.倾斜型 7.对称型 8.焦点型 9.三角型 10.自由型 4、版面设计基本类型骨骼型 网页中的骨骼型版式是一种规范的、理性的设计形式，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给

8、人以和谐、理性的美。几种分栏方式结合使用，显得网页既理性、条理，又活泼而富有弹性。4、版面设计基本类型骨骼型三栏式中间一栏突出，页面层次分明。页面最上方为一横向通栏。 4、版面设计基本类型骨骼型以竖式结构为主，横式为辅。使页面条理明确 。 4、版面设计基本类型骨骼型多栏的分隔方式，图像及导航分别占据了一个竖栏 。 4、版面设计基本类型骨骼型常见的分栏版式，页首通栏，下面又分为两栏。 4、版面设计基本类型骨骼型左右分栏 4、版面设计基本类型骨骼型综合运用多种分栏形式 4、版面设计基本类型满版型 页面以图像充满整版。主要以图像为诉求点，将少量文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以

9、舒展、大方的感觉。美中不足的是，限于当前网络宽带对大幅图像的传输速度较慢，这种版式多见于强调艺术性或个性的网页设计中。4、版面设计基本类型满版型大面积的图片配以文字，视觉效果强烈 4、版面设计基本类型满版型向外扩张，适合年轻人的口味 4、版面设计基本类型满版型满版的大图，给人以强烈的视觉冲击 4、版面设计基本类型满版型满版的页面，运用放射性图形突出主题 4、版面设计基本类型分割型 分割型版式设计，是把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成明显的对比：有图片的部分感性而具活力，文案部分则理性而平静4、版面设计基本类型分割型页面的分隔让画面产生更多的层次。 4、版面设计基本

10、类型分割型首先以图片吸引浏览者的注意力，然后将视线引向文字。4、版面设计基本类型分割型页面右侧使用斜线分割，打破了呆板的感觉 。4、版面设计基本类型分割型水平分割：水平均匀分割，上半部用作视觉表现，引发情感，下半部用水平分割：水平均匀分割，上半部用作视觉表现，引发情感，下半部用来解释说明。来解释说明。4、版面设计基本类型分割型水平分割：水平变化分割，水平分割与斜线、弧线相结合，打水平分割：水平变化分割，水平分割与斜线、弧线相结合，打破了页面的安定，产生运动和速度感。破了页面的安定，产生运动和速度感。4、版面设计基本类型中轴型 中轴性版式，是沿页面的中轴将图片或文字作水平或垂直方向的排列。水平排

11、列的页面，给人稳定、平静、含蓄的感觉。垂直排列的页面，给人以舒畅的感觉。4、版面设计基本类型中轴型水平的中轴线营造了静谧的空间 。4、版面设计基本类型中轴型左重右轻，以打破中轴线的平衡 。4、版面设计基本类型中轴型图库类的网站，在中轴线上排列的图片使自身得到了强调 。4、版面设计基本类型中轴型栏目导航安排在垂直的中轴线上 。4、版面设计基本类型中轴型分割线上的压置的图片既打破了页面分割的生硬感，也使自身得到强调。左边框上的小标签乃点睛之笔。4、版面设计基本类型曲线型 曲线型版式，是图片或文字在页面上作曲线的编排构成。这种编排方式能产生韵律感与节奏感。4、版面设计基本类型曲线型整个页面大量运用了

12、曲线，主题文字也以曲线排列 。4、版面设计基本类型曲线型曲线与直线的对比使画面产生了节奏感 。4、版面设计基本类型曲线型导航安排在弧线上，给人以活泼的感觉 。4、版面设计基本类型曲线型这也是一个导航安排在弧线上的案例 。4、版面设计基本类型倾斜型 倾斜型版式，是页面主题形象或多幅图片、文字作倾斜编排。它能造成页面强烈的动感，引人注目。4、版面设计基本类型倾斜型对角线构图，以横排的文字进行分割，求得均衡对比 。4、版面设计基本类型倾斜型斜置的纸张与浏览器边框形成对比，印象被加强 。4、版面设计基本类型倾斜型以房间的透视线打破水平线的呆板 。4、版面设计基本类型对称型对称型的页面版式，给人以稳定、

13、严谨、庄重、理性的感受。4、版面设计基本类型对称型对称的版式设计、多变的色彩组合使页面稳重而不乏时尚感 。4、版面设计基本类型对称型相对对称的版式，以像素画的手法制作的游戏场景 。4、版面设计基本类型焦点型 焦点型的网页版式，通过对视线的诱导，使页面具有强烈的视觉效果。A.中心 B.向心C.离心 4、版面设计基本类型焦点型中心以对比强烈的图片或文字置于页面的视觉中心。4、版面设计基本类型焦点型向心视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。 4、版面设计基本类型焦点型离心视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。 4、版面设计基本类型三角型 这种版式是网页各视

14、觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。 4、版面设计基本类型三角型4、版面设计基本类型自由型自由型的页面具有活泼、轻快的风格。 4、版面设计基本类型自由型色块和图形的自由组合，使画面生动活泼 4、版面设计基本类型自由型画面层次感强，图形语言独特 5. Web创意设计5、web创意设计创意设计思维 一个网站如果想在浏览者中确立自己的形象，就必须具有突出的个性。在网页设计中，要想达到吸引浏览者、引起共鸣的目的，就必须依靠网站自身独特的创意，因此创意是网站存在的关键。 好的创意能巧妙、恰如其分地表现主题、渲染气氛，增加网页的

15、感染力，让人过目不忘，并且能够使网页具有整体协调的风格5、web创意设计创意设计思维v 创意是引人入胜、精彩万分、出奇不意的想法；v 创意是捕捉出来的点子，是创作出来的奇招v 创意并不是天才者的灵感，而是思考的结果。v 创意是将现有的要素重新组合。v 在网页设计中，创意的中心任务是表现主题。因此，创意阶段的一切思考，都要围绕着主题来进行。5、web创意设计创意设计思维“一切皆有可能”李宁网站动画加载过程截图5、web创意设计创意设计思维审美原则v 好的创意必须具有审美性。v 一种创意如果不能给浏览者以好的审美感受，就不会产生好的效果。v 创意的审美原则要求所设计的内容健康、生动、符合人们审美观

16、念。5、web创意设计创意设计思维目标原则v 创意自身必须与创意目标相吻合，创意必须能够反映主题、表现主题。v 网页设计必须具有明确地目标性。v 网页设计的目的是为了更好的体现网站内容。5、web创意设计创意设计思维系列原则v 系列原则符合“寓多样于统一之中”这一形式美的基本法则，是在具有同一设计要素或同一造型、同一风格或同一色彩、同一格局等的基础上进行连续的发展变化，既有重复的变迁，又有渐变的规律。v 这种系列变化，给人一种连续、统一的形式感，同时又具有一定的变化，体现了网站的整体运作能力和水平，增强了网站的固定印象和信任度。5、web创意设计创意设计思维简洁原则v 一是要明确主题，抓住重点

17、，不能本末倒置、喧宾夺主；v 二是注意修饰得当，要做到含而不露、蓄而不发、以凝炼、朴素、自然为美。5、web创意设计创意设计思维v 创意是传达信息的一种特别方式。v 根据美国广告学教授詹姆斯的研究，创意思考的过程分 5 个阶段： 准备期：研究所搜集的资料，根据旧经验，启发新创意。 孵化期：将资料咀嚼消化，使意识自由发展，任意结合。 启示期：意识发展并结合，产生创意。 验证期：将产生的创意讨论修正。 形成期：设计制作网页，将创意具体化。5、web创意设计创意设计方法v综合型创意方法v趣味型创意方法v联想型创意方法v比喻型创意方法v传统型创意方法v时尚型创意方法5、web创意设计创意设计思维综合型

18、创意方法v 综合型方法指在对网页各个构成要素进行分析的基础上加以综合，使综合后的界面整体形式表现出创新性。v 综合型创意方法在网页设计中被广泛应用，通过对各个元素的适宜性处理来体现出设计师的创作意图和网站建设的风格，追求和谐的美感。v 对于大型网站，由于所包含的信息、资源众多，所以在网页创意设计时更要对各个部分进行合理的规划。5、web创意设计创意设计思维5、web创意设计创意设计思维趣味型创意方法v 浏览者容易被富于情趣的界面形式所吸引。v 趣味性方法以幽默、夸张的表现形式，表现出较强的视觉冲击力，让人浏览信息的同时拥有愉悦、轻松的心情，并能使浏览者留下回味。v 在网页设计中，通过在网页中采

19、用一些经过夸张处理的图形图像，能更鲜明地强调主题，同时增强画面的视觉效果。5、web创意设计创意设计思维网页加载过程呈现出汉堡一张一合类似讲话的效果，富有趣味！http:/angry-幽默法是指网页作品中巧妙地再现喜剧性特征，抓住生活现象中局部性的东西,通过人们的性恪、外貌和举止的某些可笑的特征表现出来。5、web创意设计创意设计思维通过夸张手法的运用，为网页的艺术美注入了浓郁的感情色彩，使网页的特征性鲜明、突出、动人。5、web创意设计创意设计思维联想型创意方法v 人具有联想的思维心理活动特征，它来自于人潜意识的本能，也来自于认知和经验的积累。v 在网页中使用富于联想性的图形和色彩，可以使浏

20、览者在形象与主题之间建立必然的联系，从而起到加强主题表现的作用。v 丰富的联想，能突破时空的界限，扩大艺术形象的容量，加深画面的意境。通过联想，人们在审美对象上看到自己或与自己有关的经验，美感往往显得特别强烈。v 联想是艺术设计中最常用的表现手法。联想型创意要选择受众最熟悉的联想形象诱导浏览者。例如：网页上信封或邮筒的形象是“与我们联系”，麦克风的形象是“我要发言”等。5、web创意设计创意设计思维手势与照相的造型沙漠与河流5、web创意设计创意设计思维比喻型创意方法v 比喻与联想的不同之处在于，联想选用与主题直接关联的形象，比喻则选用与主题在某些方面有些许相近的形象。v 比喻型创意方法是指在

21、设计过程中选择两个各不相同，而在某些方面又有些相似性的事物，“以此物喻彼物”，比喻的事物与主题没有直接的关系，但是某一点上与主题的某些特征有相似之处甚至比主题更加美好，因而可以借题发挥，进行延伸转化，获得“婉转曲达”的艺术效果。v 与其它表现手法相比，比喻手法比较含蓄隐伏，有时难以一目了然，但一旦领会其意，便能给人以意味无尽的感受。5、web创意设计创意设计思维用最原始的打电话来寓意联通、沟通；用爬上听筒的绿草来寓意活力、生机！http:/www.adlines.co.kr5、web创意设计创意设计思维传统型创意方法v 这类网页设计以传统风格和古旧形式来吸引浏览者。v 网页中的造型元素采用传统

22、民族形式。传统型创意适合应用于以传统艺术和文化为主题的网站中，将我国的书法、绘画、建筑、音乐、戏曲等传统文化中独具的民族风格，融入到网页设计的创意中。5、web创意设计创意设计思维北京-开伦随园http:/5、web创意设计创意设计思维时尚型创意方法v 时尚型创意手法通过鲜明的色彩、单纯的形象以及编排上的节奏感，体现出流行的形式特征。v 网页设计者利用不同类别的视觉元素，给浏览者强烈、不安定的视觉刺激感和炫目感。这类网站以时尚现代的表现形式吸引年轻浏览者的注意。http:/www.axeeffect.jp5、web创意设计创意技巧v 偶像崇拜v 巧设悬念v 巧用对比v 以小见大v 以人为本v 神奇迷幻5、web创意设计创意技巧偶像崇拜偶像崇拜 借助名人偶像的陪衬，可以大大提高产品的印象程度与销售地位，树立品牌的可信度，产生不可言喻的说服力，诱发消费者对名人偶像所赞誉的产品的注意、并激发起购买欲望。 针对人们的这种心理特点运用的，它抓住人们对名人偶像仰慕的心理，选择观众心目中崇拜的偶像，配合产品信息传达给观众。5、web创意设计创意技巧巧设悬念巧设悬念 在浏览者的心理上掀起层层波澜，产生夸张的效果，驱动浏览者的好奇心和强烈举动，开启积极的思维联想，引起观众进一步探明网页题意之所在的强烈愿望，然后通过网页标题或正文把网