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