网页界面设计字体.ppt

《网页界面设计字体.ppt》由会员分享，可在线阅读，更多相关《网页界面设计字体.ppt（47页珍藏版）》请在三一办公上搜索。

1、,网页界面设计基础 字体设计基础,主 讲：杜敬卿,第4章 网页中的字体设计,文字，是人类思想感情交流的必然产物。随着人类文明的进步，它由简单而复杂，逐步形成了科学的完美而规范化的程式。它既具有人类思想感情的抽象意义与韵调和音响节律，又具有结构完整，章法规范，而又变化无穷的鲜明形象。尤其是象形文字，更是抽象与具象的紧密结合，其文字的本身，也可说是一种完整的美术设计。1正确 不同汉字或拉丁字母的构成，笔画都是法定的，只要有一点笔划不符，就成别字，轻则字义不同，重则不成其字，无人认得，这就完全失去了文字本身的作用。因此字形要做到确切无误，既不能任意增加笔画，也不能任意减少或改变，以便保证期信息传达功

2、能的准确性。,4.1字体设计原理,2风格要统一 字母汉字，字体笔画都必须统一。如写汉字，不宜三笔隶体，二笔仿宋，写拉丁字母也不宜把楷、小楷、花楷杂组一字，印刷体与手写体也不能在一字中混合运用。3表情要适应文字内容的精神 每一种字体，都有它自身的表情。选择某种字体为设计美术字之基调时，应该按文字内容的精神而定。做到表里一致，充分发挥出文字感染力的最大功能。,4字型匀称 字与字之间看起来要大小相称，字的笔画有繁有简，要合理安排。5结构严谨 字的结构要做到多样统一，均匀稳定，疏密有致，变化有序。6对文字的形象进行艺术处理，以增强文字的传播效果。,4.2字体与版式设计 文字在排版设计中，不仅仅局限于信

3、息传达意义上的概念，而更是一种高尚的艺术表现形式。文字已提升到启迪性和宣传性、引领人们的审美时尚的新视角。文字是任何版面的核心，也是视觉传达最直接的方式，运用经过精心处理的文字材料，完全可以制作出效果很好的版面，而不需要任何图形。1.字体、字号 字体的设计、选用是排版设计的基础。2.字距与行距 字距与行距的把握是设计师对版面的心理感受，也是设计师设计品味的直接体现。,3.编排形式 文字的编排形式多种多样4.文字编排的特殊表现 文字在版式中扮演着重要的角色，同时它的形式也是灵活多变的。,4.3网页中文字颜色的运用 一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自

4、然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面是大家设计网页和浏览的网页时，对网页背景色和文字色彩搭配经常采用的色彩，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体,网站的整体风格及其创意设计是站长们最希望掌握，也是最难以学习的。难就难在没有一个固定的程式可以参照和模仿。当给出一个主题，任何两人都不可能设计出完全一样的网站。当人们说：“这个站点很cool，很有个性！”那么，是什么让读者觉得很cool呢？它到底和一般的网站有什么区别呢？可以从以下几个方面讨论：,第5章 网页设计中的排版与布局,5.1 网页设计风格与创意,网站风格概述,风格(style)是抽象的

5、。是指站点的整体形象给浏览者的综合感受。风格是独特的，是彼此之间的区别之一。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出网站的独有性。风格是有人性的。通过网站的外表、内容、文字、交流可以概括出一个站点的个性，情绪。,树立网站风格 风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。1.如何树立网站风格 确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。首先必须保证内容的质量和价值性。需要彻底搞清楚希望站点给人的印象是什么。在明确网站印象后，开始努力建立和加强这种印象。2.运用创意 创意(idea)是网站

6、生存的关键。这一点相信大家都已经认同。然而作为网页设计师，最苦恼的就是没有好的创意来源。,logo是徽标或者商标的英文说法，起到对徽标拥有公司的识别和推广的作用。网络中的徽标主要是各个网站用来与其它网站链接的图形标志，代表一个网站或网站的一个板块。,作用 1.LOGO是与其它网站链接以及让其它网站链接的标志和门户。2.LOGO是网站形象的重要体现。3.LOGO能使大众便于选择。,5.2网页Logo设计,国际规范为了便于INTERNET上信息的传播，一个统一的LOGO国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：1.88*31这是互联网上最普遍的LOG

7、O规格.2.120*60 这种规格用于一般大小的LOGO。3.120*90 这种规格用于大型LOGO。,设计流程1.调研分析 标志不仅仅是一个图形或文字的组合，它是依据企业的构成结构、行业类别、经营理念，并充分考虑标志接触的对象和应用环境，为企业制定的标准视觉符号。2.要素挖掘 要素挖掘是为设计开发工作做进一步的准备。3.设计开发 有了对企业的全面了解和对设计要素的充分掌握，可以从不同的角度和方向进行设计开发工作。4.标志修正 提案阶段确定的标志，可能在细节上还不太完善，人们经过对标志的标准制图、大小修正、黑白应用、线条应用等不同表现形式的修正，使标志使用使更加规范，同时标志的特点、结构在不同

8、环境下使用时，也不会丧失，达到统一、有序、规范的传播。,制作工具和方法 目前并没有专门制作LOGO的软件，其实也并不需要这样的一种软件。平时所使用的图像处理软件或者加上动画制作软件（如果要做一个动画的LOGO的话）都可以很好地胜任这份工作，如FIREWORKS、PHOTOSHOP、Easy GIF Animator等。良好的条件 一个好的LOGO应具备以下的几个条件，或者具备其中的几个条件：1.符合国际标准 2.精美、独特 3.与网站的整体风格相融 4.能够体现网站的类型、内容和风格 5.在最小的空间尽可能的表达出整个网站、公司的创意，精神等,LOGO的应用一直是CIS导入的基础和最直接的表现

9、形式，其重要性是不言而喻的，通过对标识的识别、区别、引发联想、增强记忆，促进被标识体与其对象的沟通与交流，从而树立并保持对被标识体的认知、认同，达到高效、提高认知度、美誉度的效果。作为时代的前卫，网络LOGO的设计，更应遵循CIS的整体规律并有所突破。因此网络标识的设计应具备以下要素：1.识别性 关于识别性要求必须容易识别，易记忆。这就要做到无论是从色彩还是构图上一定要讲究简单。2.特异性 所谓特异性就是要与其他的LOGO有区别，要有自己的特性，以区别于其它LOGO。,制作要素,3.内涵性 设计LOGO一定要有它自身的含义，否则就算做的再漂亮，再完美也只是形式上的漂亮，却没有一点意义。4.法律

10、意识 关于LOGO的法律意识一定要注意敏感的字样、形状和语言。5.整体形象规划（结构性）LOGO不同的结构会给人不同的心理意识，就像水平线给人的感觉是平缓、稳重、延续和平静，竖线给人的感觉是高、直率、轻和浮躁感，点给人的感觉是扩张或收缩，容易引起人的注意等。,设计决定品牌命运设计分类1.具象表现形式：具象表现是忠实于客观物象的自然形态，对客观物象采用经过高度概括与提炼的具象图形进行设计的一种表现形式。人体造型的图形 动物造型的图形,植物造型的图形 器物造型的图形 自然造型的图形,2.抽象表现形式 抽象表现形式是以抽象的图形符号来表达标志的含义，以理性规划的几何图形或符号为表现形式。圆形标志图形

11、 四方形标志图形,三角形的标志图形 多边形标志图形 方向形标志图形,3.文字表现形式：文字表现是以标志形象与字体组合而成一个整体。标志是一种视觉图形，但文字标志同时具有语言特征和语音形式。汉字标志图形 拉丁字母标志图形 数字标志图形,5.3 导航栏的统一与变化导航栏 导航系统的作用：告诉在哪里，可以去哪里，这里有什么，附近有什么，指引浏览着下一步的行为。1.导航系统的分类 全站、区域、情境式、辅助性导航。2.网站索引：就是将网站的内容以关键词、词汇、标签按一定顺序(字母、笔画)排列而成。内容之间可以没有等级关系。3.指南:设计指南主要依据以下原则：指南要短。无论何时，用户都能离开指南。允许用户

12、在指南中前进、后退的自由移动。指南的设计目的是回答问题的。截图应该明确，具有把重点功能放大的效果。如果指南有好几页，要有目录。,4.高级设计导航方法：个性化就是针对个人的行为、需求、喜好提供剪裁后的网页给用户。定制化(指用户告诉人们想要什么，但有时候用户自己都不知道他们要需要什么)是给用户直接控制权，可以针对展现格式、导航和内容选项的组合做调整。可视化：让用户可能采用可视化的方式浏览。(在网上浏览博物馆网站时就像逛现实生活中的博物馆一样身临其境的感觉，)。社会化：用户上网的需求点、兴趣点可以从观察其它用户行为中推论出来的基础上。,打开网页后，促使浏览者继续浏览，除了主页上的内容外，按钮设计起着

13、至关的作用。好的按钮设计一定会是醒目且能“勾引”用户眼球的。以下是好的按钮设计必不可少的5个特征:1.颜色颜色一定要能与平静的页面相比更加与众不同，因此它要更亮而且有高对比度的颜色。2.位置它们应当“座落于”用户期望更容易找到它们的地方。产品旁边、页头、导航的顶部右侧这些都是醒目且不难找到的地方。,按钮设计,3.文字表达 在按钮上使用什么文字表达给用户是非常重要的。它应当简短并切中要点，并以动词开始，如：注册、下载、创建、尝试等。4.尺寸问题 如果它是你最重要的按钮并且你希望更多的用户点击它，那么让它更醒目些是没有坏处的。把这个按钮设计的比其他按钮更大些并让用户在更多的地方找到并点击它。5.可

14、“呼吸”的空间 按钮不能和网页中的其他元素挤在一起。它需要充足的margin(外边距)才能更加突出，也需要更多的padding(内边距)才能让文字更容易阅读。,在网页设计中，简约并不一定等同于极简主义者的设计美学。简约的网站只是从设计、内容、以及代码中移除了所有不必要的元素。而极简主义的网站普遍符合这一标准，有许多网站，不管你如何想象，都不会被认为是仍适合简单定义的“极简主义”。,5.4网页的简约设计,简约设计的特点 1.简约的设计让网站更容易导航。2.简约的设计让页面加载更快。3.简约的设计让内容更容易被“浏览”。4.简约的网站设计和创建会更快速。5.简约的代码更容易避免漏洞。6.较小的文件

15、意味着较少的服务器空间,怎样使网站变得简约 1.移除不必要的装饰元素。2.经常问自己“这些元素真的很重要吗？”3.网站上哪些元素是可以被合并的。4.一些页面是否可以合并成一个页面?5.确保网站后端和前端一样的简约,5.5网页中的版式设计 探讨网页的版式设计的艺术表现方法，把握网页版式设计的发展趋势，把传统平面设计中美的形式规律同现代网页设计的具体问题相结合，将平面设计中美的基本形式和元素运用到网页中去，对于提高网页表现力、改善网站的运营效果，无疑具有重要意义。,版式设计在网页中的艺术表现 版式设计，就是在版面上，将有限的视觉元素进行有机的排列组合，并通过理性思维，用个性化的方式表现出具有个人风

16、格和艺术特色的视觉效果。它使得版面在传达信息的同时，也产生感官上的美感。版式设计是现代设计艺术的重要组成部分，它不仅是一种技能，更体现了技术与艺术的高度统一。随着互联网和计算机技术的不断进步，网络以其独特的优势迅速覆盖了全球。由于它的发展融合了更多的新技术，使其艺术表现形式比传统媒体更为多样，并具有一些独有特点。,1.高互动性、多维性和效果多元性 互动性是媒体的基本特征，不同媒体的互动程度和互动形式不同。为保持浏览者对网站的新鲜感，很多网站总是定期或不定期的进行改版，内容更是需要经常改变甚至“时时更新”。这就需要在保持网站视觉形象一贯性的基础上，不断创作新的网页设计作品，高互动媒体特性造成网页

17、版式设计需要不断更新并且在设计上更要注意互动性的体现，否则其网页作品就会淹没在互联网的汪洋之中。,2.“不可控制”的效果和“DIY”的网页版式 网络应用很难制订出统一的标准，这导致网页版式设计效果的不可控制性。网页版式甚至可以根据浏览者的喜好自主选择和改变，现在有些网站就为浏览者提供若干种排版风格方案，以供浏览者“DIY”。3.网络技术与艺术创意的紧密结合 毋庸置疑，网页制作的每一次进步都是技术的革新带来的，网页版式设计这种艺术则对技术有着深刻的依赖性，技术的更新不断改变着它的本质。,网络技术日新月异的发展给网页设计带来了新的表现天地。在网络世界里，技术始终起着先导作用，设计则随着它的发展而发

18、展，技术更新对网页版式设计的影响无疑是巨大的。1.技术的更新将使网页版式设计不断增加新的设计元素 表格布局将被CSS布局取代 新型浏览器的出现将使网页设计更趋简约,网页版式设计的发展趋势,2.设计方式将遵循新的要求 网页像书籍一样有文字、有图片，像电视一样有动态影画、声音，几乎融合了所有媒体的特性。预计在今后，网络不仅会作为一个独立的媒体而成长，而且会成为联系各大媒体的重要工具，处处显示出极强的生命力。同时，经验的积累和新技术的运用也将促进网页版式设计方式遵循新的要求。更为注重色彩搭配 巧妙运用flash 注重页面层次和版式细节 建立合理的“路标”,动画是一种动态的视觉上的表达、形式和结构，并

19、随时间推移而变化。动画十分普遍，用途不尽相同，人们在计算机上、尤其是网页上和在线广告中常常可以看到。一些设计者使用动画来传递信息，并认为在有限的计算机屏幕上动画比文本有用的多，但是人们对于动画的效果却要小心谨慎。多数人在多数情况下认为网页上的动画是令人讨厌的。很多浏览者在浏览网页时常常会被网页上的动画所干扰，或者被分散了注意力，特别是当动画不能给浏览者正在进行的工作带来任何信息的时候。这种动画被认为是对浏览者的“非主要信息刺激”或者“辅助刺激”。换句话说，他们不能对浏览者正在进行的查找数据任务或者当前所需要的信息带来任何有价值的信息。这类非主要信息刺激动画会引起视觉上的干扰，这种干扰影响了浏览

20、者搜寻信息的能力。无关紧要的动画经常出现或者突然出现，往往会分散浏览者在有用信息上的注意力。因此，当人们在网页上搜寻有用信息时，常常会受到这些动画的干扰，正确获得所需信息的时间也随之变长，这十分令人讨厌。,第6章 网页动画,6.1网络动画的分类6.1.1 FLAS动画 FLASH动画是近几年出现的一种新的事物，他是由美国的 MACROMEDIA 公司推出的一款多媒体动画制作软件。它是一种交互式动画设计工具，用它可以将音乐，声效，动画方便地融合在一起，以制作出高品质的动态效果，或者说是动画。动画 GIF 广泛支持 Internet 标准。支持无损耗压缩和透明度。动画 GIF 很流行，易于使用许多

21、 GIF 动画程序创建。GIF 只支持 256 色调色板，因此，详细的图片和写实摄影图像会丢失颜色信息，而看起来却是经过调色的。在大多数情况下，无损耗压缩效果不如 JPEG 格式或 PNG 格式。GIF 支持有限的透明度，没有半透明效果或褪色效果,三维动画 三维动画又称3D动画，是近年来随着计算机软硬件技术的发展而产生的一新兴技术。三维动画软件在计算机中首先建立一个虚拟的世界，设计师在这个虚拟的三维世界中按照要表现的对象的形状尺寸建立模型以及场景，再根据要求设定模型的运动轨迹、虚拟摄影机的运动和其它动画参数，最后按要求为模型赋上特定的材质，并打上灯光。当这一切完成后就可以让计算机自动运算，生成

22、最后的画面。三维flash是利用计算机图形学技术，将需要展示的产品在计算机中先进行逼真的三维模拟运行演示，然后再通过专业软件压缩转换成一个完全适合在网页上流畅运行的flash文件。三维flash在网页上运行很流畅，浏览者无需下载插件，打开网页就可看到产品演示。,6.2网络动画的制作常用软件制作动画的软件包括：Maya Softimage 3Dmax LIGHTWAVE Alias 是三维动画制作软件Animator、ANIMO、TOONZ、RETAS PRO 商业二维动画TOOB BOOM STUDIO、HARMONY、SOLO、flash 网页二维动画制作网络中常见的flash动画是用FLA

23、SH制作的，一些banner是由FLASH或者imageready制作的，当然三维软件制作的动画也可以通过插件转为二维动画。,传输速度 网络传输速度是相对固定的，在此前提下，网站的文件量越小，传输的信息速度就越快，所以人们要尽可能的对网页进行优化。风格统一 统一，是指设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。网页上所有的图像、文字，包括象背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。,6.3网络动画的指导方针 研究结果表明人们必须小心地设计网页动画以免对浏览者产生负面影响。以下列出设计

24、网页动画的十个原则。1不要干扰在重要信息上的注意力。2避免混乱。3设定合适的持续时间。4管理布局和组织显示对象。5遵守颜色的惯例。6使用文本和听觉信息来辅助动画。7关注对符号学的探究。8遵从合作原则。9向迪斯尼学习。10避免设计“近视”。,第7章 网络形象设计(IVIS)与广告传媒,7.1视觉识别系统 VI（Visual Identity），通译为视觉识别，是CIS系统中最具传播力和感染力的层面。应用要素系统设计类别 1待客用项目类 洽谈会、会客厅、会议厅家具、烟灰缸、坐垫、招待餐饮具、客户用文具。2商品及包装类 商品包装设计、包装纸、包装箱、包装盒、各种包装用的徽章、封套、封缄、粘贴商标、胶

25、带、标签等。3符号类 公司名称招牌、建筑物外观、招牌、室外照明、霓虹灯、出入口指示、橱窗展示、活动式招牌、路标、纪念性建筑、各种标示牌、经销商用各类业务招牌、标示。,4账票类 订单、货单、账单、委托单、各类账单、申请表、通知书、确认信、契约书、支票、收据等。5文具类 专用信笺、便条、信封、文件纸、文件袋、介绍信等。6服装类 男女职工工作服、制服、工作帽、领带、领结、手帕、领带别针、伞、手提袋等。7出版印刷类 股票、年度报告书、公司一览表、调查报告、自办报刊、公司简历、概况、奖状等。,8大众传播类 报纸广告、杂志广告、电视广告、广播广告、邮寄广告等。9SP类 产品说明书、广告传播单、展示会布置、

26、公关杂志、促销宣传物、视听资料、季节问候卡、明信片、各种POP类。10交通类 业务用车、宣传广告用车、货车、员工通勤车等外观识别。11证件类 徽章、臂章、名片、识别证、公司旗帜。,设计的基本原则 VI的设计不是机械的符号操作，而是以MI为内涵的生动表述。所以，VI设计应多角度、全方位地反映企业的经营理念。同时VI设计不是设计人员的异想天开，而是要求具有较强的可实施性。风格的统一性原则 强化视觉冲击的原则 强调人性化的原则 增强民族个性与尊重民族风俗的原则 可实施性原则 符合审美规律的原则 严格管理的原则,7.2网络形象设计 互联网的发展使视觉文化识别出现了新的空间和领域。网站的外观形象设计非常

27、重要。网站的形象设计表面上看，它不过是页面版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。它从企业整体形象塑造的角度出发，网站形象的设计不仅仅是单一的网页设计，而应该是企业理念（MI）和企业行为（BI）在网页设计中的具体化体现，这决定了网站形象设计的原则：,1.设计主题鲜明一方面通过对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。2形式与内容的统一。任

28、何设计都有一定的形式和内容，内容决定形式，形式又反作用于内容，优秀的设计应该是形式与内容的完美统一。3网站形象的整体性。设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完整的美感。,7.3网络广告 广告是网页设计的重要部分，对于依靠广告收入的网站所有者和企业，这是显而易见的。没有足够或者正确的空间给广告，将给业务带来很大的负面影响，一旦出现这种情况，为了销售业绩就会企图移动或开辟新广告位，从而导致网站看上去很尴尬而且无组织，因为这些位置没有在起初的设计过程中被考虑进来。1在线广告的难题。2网络广告如何影响网站的设计?3网络广告布局和间距。

29、4颜色。5流动。,7.4如何创建内容丰富的企业网站的网页 创建内容丰富的网页，意味着增加以文本为主的栏目，以及在原有页面中配上大量的与该网站的关键词相关的文本文字。这样才有助于提升网站的排名，增加网页被搜索引擎抓取的机会，从而更容易让人找到。几种常用方法来创建内容丰富的网页：1.背景信息。2.产品信息。3.常见问题(FAQ)或问与答(Q&A)。4.发布专业文章。5.友情链接。,第8章 经典网页解析,8.1 产品类网页分析8.2 创意类网页分析8.3卡通类网页分析8.4公司网页分析8.5网页主色调分析8.6欣赏网页8.7常见的网页策划、设计、开发错误1、导航菜单使用图片、FLASH。2、不恰当地使用图片。3、内容里特殊字体的运用。4、新窗口打开。5、无实际意义的特效。,6、内容滚动。7、用户难以获取自己想要的内容。8、文件名命名不规范。9、长篇文章未设置分页。10、颜色搭配错误，网页难于阅读。11、没有返回指向。12、显眼的点击计数器。13、使用框架。14、不恰当地使用声音。15、兼容性不佳。16、急于发布网站。17、发布网站后未登录搜索引擎。18、不留空白。19、缺乏互动性。,