旅游网页设计.ppt

旅游网页设计汇报,设计汇报,目录,设计汇报,凤凰古城是国家历史文化名城，曾被新西兰著名作家路易艾黎称赞为中国最美丽的小城。这里与吉首的德夯苗寨，永顺的猛洞河，贵州的梵净山相毗邻，是怀化、吉首、贵州铜仁三地之间的必经之路。作为一座国家历史文化名城，凤凰的风景将自然的、人文的特质有机融合到一处，透视后的沉重感也许正是其吸引八方游人的魅力之精髓。这座曾被新西兰作家路易艾黎称作中国最美丽的小城之一的“凤凰古城”建于清康熙时，这颗“湘西明珠”是名副其实的“小”，小到城内仅有一条像样的东西大街，可它却是一条绿色长廊。,设计汇报,设计汇报,设计汇报,设计汇报,设计汇报,设计汇报,3 资料分析,3.1色彩分析,各旅游景区网站,设计汇报,设计汇报,设计汇报,设计汇报,设计汇报,设计汇报,设计汇报,国外的网站一 般用色比较 鲜美亮丽， 还有一些复古风 的色调。,设计汇报,设计汇报,设计汇报,设计汇报,设计汇报,设计汇报,普通的底色应柔和些，素一些，淡一些，配上黑字，读起来自然、流畅。而为了追求醒目的视觉效果（如标题），可以使用较深的颜色，然后配上对比鲜明的字体如白字、黄字或篮字。其实底色与字体的合理搭配要胜过用背景图画，因为背景图画太花哨，有种不安静的感觉。而纯色给人感觉较好，尤其是看图片多了以后!,设计汇报,一般国内的旅游网站用绿色和蓝色居多， 淡雅古朴， 绿色介于冷暖色彩的中间，显得和 睦，宁静，健康，安全的感觉。它和金色， 淡白色搭配，可以产生优雅，舒适的气氛。 蓝色是最具凉爽的，清新，专业的 色彩，它和白色混合，能体现柔顺，淡雅， 浪漫的气氛（像天空的色彩。）,设计汇报,3 资料分析,3.2 版式分析,设计汇报,3 资料分析,3.2 版式分析,3.2.1 框架,页面尺寸：800宽度的页面主要是为了照顾800*600分辨率的浏览器， 但在1024分辨率下略显小气。1024宽度的页面显得大气饱满，但在800 分辨率下影响内容表现不全。,设计汇报,设计汇报,框架数：单框架简洁，多数网站也是单框架；多框架略显零乱，不过 在一些特殊形式上使用会有更好的效果。,3 资料分析,3.2 版式分析,3.2.1 框架,设计汇报,首页内容量指的是一个页面所显示的信息多少。大型网站页面过长 是一个大问题，将首页内容量控制在一定范围使信息结构清晰是非常 重要的。 蓝色理想，视觉中国便是页面过长的例子,而同是知名设计网站的设计 在线就没有这个毛病。,3.2.2 首页内容量,设计汇报,一般网页为纵向，前面的内容较为重要。内容结合栏目归类，便于浏 览者快速查阅资料。 横向浏览较为特殊，一般用的很少，不太符合大众的浏览习惯。但有 些网站大胆应用此排版方式，突破传统的排版规律，视觉上与众不同， 给人一种耳目一新的视觉观赏性，达到了创新的目的。,3.2.3 视觉方向,设计汇报,经常是一个形式简单的导航条和版权、联系等信息。,3.2.4 底部结构,设计汇报,大学网站和门户网站为了适合各方面人群浏览，一般用800宽度页面；设计类网站用1024宽度的较多。网站越大，内容量自然越多，页面过长是一个很大的问题，大多门户网站和大型的设计网站都会出现这个毛病。 视觉方向的创新在很正式的网站中不会出现，毕竟人们是为了浏览信息的而不是为了探索新形式。设计公司的头部、主体和底部结构往往与众不同，也是为了页面的新颖性以吸引浏览者。科研网站注重学术性，版式很严谨，结构简洁便于信息的浏览。 作为设计中心的网站，主要针对的浏览者是与设计有关的人，他们大多使用1024分辨率的显示器，所以设计方案首选1024的页面宽度。框架数的选择因各方案异。首页内容量不宜多，控制在两个全屏内。视觉方向主要还是用纵向，也鼓励设计者提出创新方案。设计中心网站具有很强的设计性质，头部、主体、底部结构创新的重要性不可忽视。,3.2.5 版式分析小结,设计汇报,3 资料分析,3.3 导航分析,设计汇报,网页的导航栏位置定下来后，其网页的框架也就有了明确的方向 网页顶部横条 中分式横条 居左式和居右式 网页底部横条,3.3.1 导航栏位置,设计汇报,3.3.1 导航栏位置,设计汇报,设计汇报,设计汇报,网页底部横条,网页大于一屏时，底部横条导航可以方便地使浏览者到达不同的页面 加入网站的次要链接，丰富网站内容。,设计汇报,设计汇报,其他,中间：处在网页中间的导航栏比较少（集美大学）,此类打破常规，用得比较灵活，多般用于个人主页或引导页面上。,设计汇报,形式 分隔元素 颜色 排版 导航特效,3.3.2 导航设计,3.3.2 导航设计,设计汇报,形式,纯文字：普遍的网站都采取了文字形式导航。 大小：字号大小一般比内容栏的文字稍大。 字体：宋体众多 图片：此类导航相对纯文字的较美观，但有个不足点就是影响了浏览速度。 flash动画：娱乐性和个人网站的导航条多般使用flash动画。,设计汇报,颜色,导航条是整个网站中的一部分，颜色要融入整个网站的设计（而不是孤立的装饰效果）,设计汇报,横向：,纵向：,设计汇报,导航特效,css样式 静态： 下横线：,缩放： 颜色切换：,flash动画特效：吸引深浏览者并进一步加深浏览者的记忆，但对于一部分浏览器不兼容、不易于搜索引擎,设计汇报,旅游网站,设计汇报,综合网站,设计汇报,设计网站,设计汇报,从上诉各类网站的导航条内容可以看出，导航的内容和本身网站的性质是直接相关的，但具体内容还要根据浏览者做细部的改善。根据中心性质及上所分析，信息量不是很大，其导航条设计为中分式横条较好；因为网页内容不多，文件自然小些，所以在形式方面可采用图片切换；导航的颜色可根据网页的整体偏向。 导航内容的提议：首页 中心简介 新闻资讯 科研成果 服务范围 设计书架 因为以后的可扩充性，我们还建议加入常见疑难 联系我们 （其他设计网站）友情连接等类似内容。,设计汇报,3 资料分析,3.4 视觉元素,设计汇报,背景图案：不少网站使用图案背景，比起直接填充背景色更丰富 （中国设计在线）,3.4.1 背景,设计汇报,背景图像：使网页更美观，但图片一般较大下载速度较慢,形式上小而精巧 起到强调标题 引导视向 平衡视觉的作用,3.4.2 图标,设计汇报,设计汇报,功能：主题性图像，针对单个栏目,针对全页面,3.4.2 图像,设计汇报,修饰性图像,3.4.3 图标,设计汇报,功能：主题性 修饰性 形式：鼠标事件 自播放,3.44 动态影像,设计汇报,使用不超过三种字体， 文本汉字用宋体， 英文用arial,3.4.5 字体,设计汇报,动态样式：变色、下划线、缩放、位移、附加图形、变换、特殊 静态样式：无变化，几乎没有网站使用,3.4.6 按钮链接,设计汇报,边框：粗细1-2px 表格特效：当鼠标经过时变换背景色或强调边框,3.4.7 表格,设计汇报,字号大小：普遍使用12px (9pt,小五号字) 行距：15-18px,3.4.8 文本,设计汇报,网页下载速度是关键，使用背景图案下载快。 图标运用要达到三个目的：强调标题，引导视向，平衡视觉。 既要有针对全页面的高质量主题性图像，也要有针对栏目的主题性图像，图像 色调保持一致，使页面丰富而统一。修饰性图像重要但不必要。 用一些小巧的动态影像，最好的建议是与图标结合起来。 使用不超过三种字体，汉字文本用宋体、英文用arial。 按扭链接样式：在以下动态样式中由各设计方案的风格来选择：变色、下划线、