PhotoshopCC网页设计与配色标准教程教学全套课件 第5章.ppt

《PhotoshopCC网页设计与配色标准教程教学全套课件 第5章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、1第5章网页元素设计不同网页元素构成不同的网页设计风格，体现着所属网站的总体风格和设计特色，吸引和引导用户进入网站中浏览。网页设计元素大体上包括网页图标设计、网页导航设计、网页广告设计、特效文字在网页中的应用。25.1网页图标设计网站是由多个网页组合而成的，而网页之间跳转的桥梁就是带有链接的元素，其中图标是最为常用的链接元素。35.1.1图标概念图标是具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆等特性。图标有广义和狭义之分。广义的图标泛指一切图形化的标识。45.1.2网页图标主要应用网页图标的每个图案都是具有特定的含义的，比如可以表示一个栏目

2、、功能或命令等，比如一个衣服的小图标，浏览者很容易便能辨别出这是跟衣服有关的网站，同时可以省去了大段的内容功能介绍，也有利于不同国家之间不同语言用户地相互交流和沟通。55.1.3网页图标设计原则图标设计的基本原则就是要尽可能的发挥图标的优点：比文字直观，比文字漂亮，减少图标的缺点：不如文字表达的准确。因此图标设计的基本原则主要有以下三点。第一，可识别性原则。第二，风格统一性原则。第三，视觉美观。65.1.4图标的保存格式图标以简明的图案、颜色为主，因此网页图标保存格式主要是GIF与PNG-8两种。GIF和PNG-8可支持256种索引色，不但占用空间小，完全满

3、足一般图标的颜色表现，而且支持透明，便于图标在不同背景中的应用。75.1.5实战案例：商务网站图标制作网站中的导航菜单多种多样，除了纯文字导航菜单和单色图标外，还可以利用图形来装饰导航菜单。在网站导航栏目中加入相应的图标，既可以美化网站，又形象地表达了栏目含义。在制作具有装饰效果的图标时要特别注意构图简洁，以便于识别。85.2网站导航设计好的网页导航（navigation）使网页主次分明，让用户在浏览和使用时快速访问到所需的内容。要想设计出优秀的网页导航，就要了解导航设计原则和技巧、导航样式、网页导航优化方向。95.2.1导航设计原则和技巧网页导航条是链接网

4、站各个站点的纽带，在整个网页中起着极其重要的引导作用。好的导航条能够给整个网页增光添彩，这就要求设计人员在设计的过程中应该掌握一些原则和技巧，使制作出来的导航能够满足特定网页的需求，现将这些原则和技巧介绍如下。1.坚持一个导航栏2.清晰、简单、明显的菜单选项3.不要使用多于两级的下拉菜单4.下拉菜单中不要多于10个选项5.不要只放图标6.让你的设计方便触摸屏用户使用105.2.2导航样式导航是网站风格的主要组成部分，一个好的导航可以在确定网页风格的同时，也会使页面层次清晰。导航制作一直是设计师们需要重点思考的问题，也是网页创意的重要体现，现在互联网最流行的导

5、航样式有以下几种。1.水平导航条2.垂直导航条3.选项卡导航4.面包屑导航5.标签导航6.搜索导航7.飞出式菜单和下拉菜单导航8.分面/引导导航9.页脚导航115.2.3网页导航优化方向每个用户想要从网站上获取的东西都是不一样的，根据用户选择的不同需要对导航进行一些合理化的设计，主要列出了以下优化方向：提高有效导航的利用率1.去除无效导航或者无人使用的导航2.提高导航描述与对应内容的关联度3.优化导航页面内容的组织和展示。125.2.4导航条设计欣赏为了吸引更多的用户，网站设计师们便需要绞尽脑汁，使出浑身解数来把导航条设计地更加漂亮，并且符合网站的整体风格，

6、突出其特色。下面来欣赏一些设计师的设计成果。135.2.5案例实战：导航设计案例1网页中导航条的类型多种多样，其中的图案和颜色搭配也是多种多样的，成功的导航条都是主体事物突出，简洁不累赘，在配色上也都是搭配合理，呈现和谐的状态。导航条设计案例比较适合轻松愉快的网站风格，小夹子和纸片都呈现出活泼闲适的感觉，是导航条设计中的一个小小的创意。145.3网页广告设计由于网络的日益发展，网络广告的市场正在以惊人的速度增长，网页广告发挥的效用显得越来越重要。做好网页广告设计就要了解网络广告形式和网页广告设计技巧。155.3.1网络广告形式网络在人们的日常生活和交流沟通中

7、扮演着重要的角色，成为一个重要的新型媒体。如何充分利用网络媒体投放广告成为商家、设计师必须考虑的问题。网络广告从最初的横幅广告发展到如今，出现的多种形式，如全屏广告、对联广告、流媒体广告等。下面介绍常见的网络广告类型。1．Banner广告2.全屏广告3．对联广告4．流媒体广告165.3.2网页广告设计技巧除开传统广告设计讲求的美观、创意外，网页广告更强调信息的简单，视线流畅。其实，如果把海报设计的要点“简单、醒目、有力”用在网页广告设计上，是非常妥当的。下面以Banner广告设计为例，介绍网页广告设计的一些常见技巧。1．颜色数目少，对比突出2．用图简单，裁剪

8、有力3．字体相近，关键字突出4．视觉路线简单，相似元