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