网页设计版式与网页配色(PPT74)

null网页的版式设计网页的版式设计选自顾群业等编著《网页艺术设计》 山东美术出版社 null很多从事网页设计的计算机专业人员，对于网页的制作技术驾轻就熟，但对于网页富有艺术性和个性的设计却感到力不从心。特别是没有经过艺术设计专业训练的网页制作者，在掌握了网页制作技术的情况下，都渴望将自己的网页制作得更具创意和美感。目前关于网页制作的讨论和介绍，多以讲解软件的技术性操作为主要内容，侧重艺术方面的非常之少。一、文字的格式化 一、文字的格式化 1.字号、字体、行距 　 字号大小可以用不同的方式来计算，例如磅（point）或像素（pixel）。因为以计算机的像素技术为基础的单位需要在打印时转换为磅，所以，建议采用磅为单位。 　　　　 最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。 null　　网页设计者可以用字体来更充分地体现设计中要 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。 null 粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多采。关键是如何根据页面内容来掌握这个比例关系。null图1：通过文字大小疏密进行处理，突出重点，层次分明。 null 从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。null　　行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。 null　　除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。 null 　　行距可以用行高（line-height）属性来设置，建议以磅或默认行高的百分数为单位。例如：｛line-height：20pt｝、｛line-height：150%｝。 null图2：上、中部文字编排疏散，传达出轻松愉快的感觉。 下部的文字编排采用较小的行距，与上面的编排方式形 成对比，丰富了版面空间层次。 2.文字的整体编排 2.文字的整体编排 　　页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲，所有的设计元素都可以理解为图形。 （1）文字的图形化（1）文字的图形化　　字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。所谓文字的图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。 null　　将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。 null图3：将文字放大，不仅实现了字意与语义的功能，而且具备了视觉冲击力。 （2）文字的叠置 （2）文字的叠置 　　文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性，但是能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”的表现手法，体现了一种艺术思潮。因而，它不仅大量运用于传统的版式设计，在网页设计中也被广泛采用。 null图4：由字符(ASCII码)组成的网站标志。 null图5：通过文字的大小、明暗、疏密以及叠置等变化， 产生杂音感，起到较好的视觉引导作用。 （3）标题与正文 （3）标题与正文 　　在进行标题与正文的编排时，可先考虑将正文作双栏、三栏或四栏的编排，再进行标题的置入。将正文分栏，是为了求取页面的空间与弹性，避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理，甚至可以直接插入字群中，以新颖的版式来打破旧有的规律。 （4）文字编排的四种基本形式  （4）文字编排的四种基本形式  　　页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。 　　两端均齐　文字从左端到右端的长度均齐，字群形成方方正正的面，显得端正、严谨、美观。 　　居中排列　在字距相等的情况下，以页面中心为轴线排列，这种编排方式使文字更加突出，产生对称的形式美感。 　　左对齐或右对齐　左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线，很容易与图形配合。这种编排方式有松有紧，有虚有实，跳动而飘逸，产生节奏与韵律的形式美感。左对齐符合人们阅读时的习惯，显得自然；右对齐因不太符合阅读习惯而较少采用，但显得新颖。 　　绕图排列　将文字绕图形边缘排列。如果将退底图插入文字中，会令人感到融洽、自然。 null图6：文字与图片穿插排列，密集的文字形成块面，丰富了页面层次。 3.文字的强调3.文字的强调 （1） 行首的强调 　　将正文的第一个字或字母放大并作装饰性处理，嵌入段落的开头，这在传统媒体版式设计中称之为“下坠式”。此技巧的发明溯源于欧洲中世纪的文稿抄写员。由于它有吸引视线、装饰和活跃版面的作用，所以被应用于网页的文字编排中。其下坠幅度应跨越一个完整字行的上下幅度。至于放大多少，则依据所处网页环境而定。 null图7：下坠式的行首强调，有吸引视线与活跃画面的作用。 （2） 引文的强调（2） 引文的强调 在进行网页文字编排时，常常会碰到提纲挈领性的文字，即引文（也称为眉头）。引文概括一个段落、一个章节或全文大意，因此在编排上应给予特殊的页面位置和空间来强调。引文的编排方式多种多样，如将引文嵌入正文的左右侧、上方、下方或中心位置等，并且可以在字体或字号上与正文相区别而产生变化。 （3）个别文字的强调（3）个别文字的强调  如果将个别文字作为页面的诉求重点，则可以通过加粗、加框、加下划线、加指示性符号、倾斜字体等手段有意识地强化文字的视觉效果，使其在页面整体中显得出众而夺目。另外，改变某些文字的颜色，也可以使这部分文字得到强调。这些方法实际上都是运用了对比的法则。4.文字的颜色4.文字的颜色　　在网页设计中，设计者可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。例如，如果你使用Dreamweaver编辑器，默认的设置是这样的：正常字体颜色为黑色，默认的链接颜色为兰色，鼠标点击之后又变为紫红色。使用不同颜色的文字可以使想要强调的部分更加引人注目，但应该注意的是，对于文字的颜色，只可少量运用，如果什么都想强调，其实是什么都没有强调。况且，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非你有特殊的设计目的。 null图8：根据页面色调灵活运用文字的色彩，既符合页面的整体氛围，又保证了可读性。 null颜色的运用除了能够起到强调整体文字中特殊部分的作用之外，对于整个文案的情感表达也会产生影响。这涉及到色彩的情感象征性问题，限于篇幅，在这里不做深入探讨。 　　另外需要注意的是文字颜色的对比度，它包括明度上的对比、纯度上的对比以及冷暖的对比。这些不仅对文字的可读性发生作用，更重要的是，你可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想。 二、图像 二、图像 　　除了文本之外，网页上最重要的设计元素莫过于图像了。一方面，图像的应用使网页更加美观、有趣；另一方面，图像本身也是传达信息的重要手段之一。与文字相比，它直观、生动，可以很容易地把那些文字无法表达的信息表达出来，易于浏览者理解和接受。 1.图像的格式 1.图像的格式 　　Web通常使用两种图像格式：GIF和JPEG。除此以外，还有两种适合网络传播但没有被广泛应用的图像格式：PNG和MNG。 2.图像的形式2.图像的形式　　同印刷排版一样，静态图像在网页排版中的运用不外乎四种形式：方形图、退底图、出血图以及这三种形式的结合使用。 　 （1）方形图　 （1）方形图　即图形以直线边框来 规范 编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载 和限制，是一种最常见、最简洁、最单纯的形态。方形图使图像内容更突出且将主体形象与环境共融，可以完整地传达主题思想，富有感染性。配置方形图的页面，给人以稳重、可信、严谨、理性、庄重和安静等感觉，但有时也显得平淡、呆板。 图9：典型的方形图，四周留出边框，使图片内容突出。 null（2）退底图　将图像中的背景去掉，只留下主题形象。退底图形自由而突出，更具有个性，因而给人印象深刻。配置退底图的页面，轻松、活泼，动态十足，而且图文结合自然，给人以亲和感。但也容易造成凌乱和不整体的感觉。 null图10：人物全部退底，文字色块的安排轻松随意，是面向年轻人的设计。 （3）出血图（3）出血图　 图像的一边或几个边充满页面，有向外扩张和舒展之势。一般用于传达抒情或运动信息的页面，因不受边框限制，感觉上与人更加接近，便于情感与动感的发挥。 null图11：四边出血，有强烈的扩张感。 null图12：主体形象退底且两边出血。主体形象的方向性 与右侧文字的排列方式具有引导视觉的作用。 3.图像的编排 3.图像的编排 （1）四角与中轴四点结构 页面的四个角与对角线、中轴四点及水平与垂直的中轴线，具有支配页面结构的作用。 null  四角是页面边界相交形成的四个点，把四角连接起来的斜线即对角线，交叉点为页面中心。中轴四点指经过页面中心的垂直线和水平线的端点。这四个点可上、下、左、右移动。    通过四角与中轴四点结构的不同组合、变化，可以求得多样的页面结构。在图像排版时紧紧抓住这八个点，可以突出网页的形式美感，网页的版式设计、视觉流程的筹划也得到相应简化。 null图13：着重于对左上角和右下角的控制， 右下角的树叶起到呼应与稳定页面的作用。null图14：饱满的页面构图，巧妙地利用表盘稳定住页面四角。null图15：以水平分割为主的页面，右上角与左下角安排了文字，打破呆板的感觉。 null图16：多幅图片使水平垂直线规律地等量分割，获得了理性与秩序的美。null图17：图片与文字穿插编排，形成散点组合。 运用线条的分割、文字的群组化以及单一的背景色形成整体感。null图18：在块状组合结构中，如图片太多， 则无法突出重点。这个页面通过改变图片的面积， 有效地分开了层次。 4.图像的处理 4.图像的处理  　　 图像的外形、大小、数量以及与背景的关系，都与内容有着密切的联系。  　 （1）图像的外形处理  　　图像的外形能使页面的气氛发生变化，并直接影响浏览者的兴趣。一般而言，方形的稳定、严肃，三角形的锐利，圆形或曲线外形的柔软亲切，退底图及一些不规则或不带边框的图像活泼。  　 （2）图像的面积 　 （2）图像的面积 　　 图像在网页中占据的面积大小能直接显示其重要程度。一般地，大图像容易形成视觉焦点，感染力强，传达的情感较为强烈；小图像常用来穿插在字群中，显得简洁而精致，有点缀和呼应页面主题的作用。在一个页面中，如果只有大图像而无小图像或细密的文字，就会显得空洞，但只有小图像而无大图像又使页面缺乏视觉冲击力。 null 　 　图像的大小不仅决定着主从关系，也控制着页面的均衡与运动。大小对比强烈，给人跳跃感，使主角更突出；大小对比减弱，则页面稳定、安静。这是因为，访问者在浏览页面时，首先会注意到大图像，然后再看到较小的图像，这种由大到小的引导，使浏览者的视线在页面上流动，便造成一种动势，使页面活泼起来。null 　　 因此，在网页设计时，应首先确定主要形象与次要形象，扩大主要图像的面积，使次要角色缩小到从属地位。只有大小图像主次得当地穿插组合，才能构成最佳的页面视觉效果。null图19：作为主体的人物形象，既突出了大小对比又增强了页面的亲和力。（3）图像的数量   （3）图像的数量    　 　图像的数量是根据内容决定的。只用一幅图像，会使内容突出、页面安定。增加一幅图像，页面会因为有了对比和呼应而活跃起来。再增加一幅，则更加热闹、活泼。但是，限于目前网络的传输速度，使用图像时一定要谨慎，大的图像会降低页面显示速度，即使是小图像，如果运用数量过多，同样会使页面下载速度变慢。随着网络环境及技术条件的改善，这种情况已经有了很大的改观。 （4）与背景的关系（4）与背景的关系  　　网页图像与背景是对比和统一的关系。也就是说，图像与背景在和谐统一的基础上，应存在一定的对比，以使主要图像更加突出。如精密的相机镜头以粗糙的岩石为背景，明亮的文字以深邃的星空为背景，或者使用没有背景及陪衬物的退底图像，周围留出大面积空白，都是利用对比对主体形象起到突出作用。  5.图像在长页面中的应用 5.图像在长页面中的应用  　　网页一般都是纵向的(也有特意设计成横向滚屏的)，其长度从一屏到三屏不等，有时甚至更多。访问者在浏览页面时，通过拖动垂直滚动条使网页一屏一屏地显示，但这并不意味着我们可以将整个页面分割开来，孤立地进行每一屏的设计。页面的整体感是建立在形象的启承关系上，尽管页面被分割成几屏来显示，但图像或文字的延续性应使浏览者得到完整、统一的视觉感受。设计者所要做的就是进行通盘考虑，例如：寻找对比中的和谐、建立同一的视觉识别等，来处理好每一屏与整个页面的关系。 null图20：巧妙地运用动态元素，比印刷媒体具有更强的表现力。 以横贯页面的长条色块统一画面，图片安排随意，疏密有致，使整体风格既统一又有变化。 三、版式的基本类型 三、版式的基本类型  　　网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。 1.骨骼型 1.骨骼型 　网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。 null图21：综合运用多种分栏形式。2.满版型 2.满版型  　　页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。 null图22：四边出血，向外扩张，适合年轻人的口味。 3.分割型 3.分割型  　　把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。 null图23：分割线上的压置的图片既打破了页面分割的生硬感， 也使自身得到强调。左边框上的小标签乃点睛之笔。 4.中轴型 4.中轴型  　　沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。 null 　　图24：不易觉察的中轴型版式，给人以轻快之感。5.曲线型5.曲线型 图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。 图25：网站的导航标题沿图形弧线排列。 6.倾斜型 6.倾斜型  　　页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。 图26：文字水平排列，将画框斜置，产生对比与动势，印象被加强。 7.对称型 7.对称型  　　 对称的页面给人稳定、严谨、庄重、理性的感受。  　　 对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。   　 　四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角，也就控制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。 null图27：以相对对称手法制作的导航页面。 8.焦点型 8.焦点型  　　焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况。 （1）中心　以对比强烈的图片或文字置于页面的视觉中心。   （2）向心　视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。   （3）离心　视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。 null图28：通过离心的版式，清晰地传达出网站提供的服务。 9.三角型 9.三角型  　　网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。null图29：整体看为正三角形的构图，主体形象稳定而突出。 10.自由型 10.自由型  　自由型的页面具有活泼、轻快的风格。 图30：引导视线的图片以散点构成，传达随意、轻松的气氛。