购买

¥30.0

加入VIP
  • 专属下载券
  • 上传内容扩展
  • 资料优先审核
  • 免费资料无限下载

上传资料

关闭

关闭

关闭

封号提示

内容

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

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

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

烟雨梦兮
2018-10-14 0人阅读 举报 0 0 0 暂无简介

简介:本文档为《网页设计版式与网页配色(PPT74)ppt》,可适用于IT/计算机领域

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

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

评分:

/74

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利