您好,欢迎访问三七文档
第五章网站页面设计第五章网站页面设计5.1主页设计5.2栏目与版面设计5.2.1栏目设计5.2.2版面设计5.3页面可视化设计5.3.1色彩设计5.3.2字体设计5.3.3导航设计第五章网站页面设计5.3.4图像设计5.3.5动画设计5.1主页设计确定主页的功能模块网站名称、广告条、主菜单新闻、搜索、友情链接联系及版权信息等主页版面设计勾画草图→软件实现处理技术上的细节风格、链接、图形、动画、文字、速度企业的名称、标语、徽号或图像广告条通常应体现出企业网站的主题主菜单视觉兴趣点—通常是一幅图片、表示企业最新的产品、最新的服务等最新消息搜索友情链接邮件列表计数器用户登录……版权信息、联络信息、电子邮件地址页头内容页页尾5.2栏目与版面设计设计版面的最好方法是:找一张白纸、一支笔,先将理想中的草图勾勒出来,然后再用网页制作软件实现。设计人员要了解企业的CIS,熟悉企业标志、吉祥物、字体及用色标准,以便在网站的局部将之体现出来,于平淡之中勾画出一个优美的符合企业特点的曲线,从而将企业印在浏览者的脑海里。5.2.1栏目设计栏目设计应紧扣网站主题设计一个最近更新或网站指南栏目设计一个可以双向交流的栏目设计一个下载或常见问题解答栏目大型网站可根据需要设置子栏目联系及版权信息等辅助信息不要放在主栏目5.2.2版面设计版面布局原则主次分明,中心突出大小搭配,相互呼应图文并茂,相得益彰版面布局常用方法正常平衡异常平衡对比凝视空白图片解说正常平衡异常平衡对比凝视空白图片说明版面布局步骤轮廓设计布局设计细节设计版面布局形式“T”形结构布局“口”形布局“三”形布局对称对比布局“国”或“同”字形拐角形框架布局Flash动画型,封面型主页栏目首页内容网页5.3页面可视化设计网页可视化设计要确保命名简洁、导览性好、易读、视觉效果设计合理、下载速度快等原则。5.3.1色彩设计色彩的基本知识三原色原理色彩搭配色彩的心理感觉色彩的对比色彩的区域大小和形状色彩的位置网页色彩设计网页配色的基本方法底色和图形色整体色彩颜色的平衡配色时要有重点色渐变色的调和统调配色分割配色网页色彩设计网页内容的色彩网页标题色导航菜单色侧栏色页脚色网页色彩搭配的技巧暖色调冷色调对比色调透视色轮色轮是我们认识颜色关系的工具。没有某一种颜色是所谓的“好”或“坏”。只有当与其它颜色搭配作为一个整体时,我们才能说,是协调或者不协调。色轮告诉我们颜色之间的相互的关系。色轮由12种基本的颜色组成。首先包含的是三原色(Primarycolors),即蓝、黄、红。原色混合产生了二次色(Secondarycolors),用二次色混合,产生了三次色(tertiarycolors)。原色是色轮中所有颜色的“父母”。在色轮中,只有这三种颜色不是由其它颜色调合而成。从后面的图可以看出,三原色在色环中的位置是平均分布的。二次色所处的位置是位于两种三原色一半的地方。每一种二次色都是由离它最近的两种原色等量调合而成的颜色。三次色是由相邻的两种二次色调合而成。每一种颜色都拥有部分相邻的颜色,如此循环成一个色环。共同的颜色是颜色关系的基本要点,必须对此有深入的了解。在这七种颜色中,都共同拥有蓝色。越远的颜色(如草绿色)含有的蓝色就越少。绿色及紫色这两种二次色都含有蓝色。4.4网页中的色彩在这七种颜色中,都拥有黄色。同样的,离得越远的颜色,拥有的黄色就越少。绿色及橙色这两种二次色都含有黄色。4.4网页中的色彩在这七种颜色中,都拥有红色。向两边散开时,红色就含得越少。橙色及紫色这两种二次色都含有红色。颜色有明暗之分——或者称为颜色数值。为了显示颜色的明暗,所以色轮有多个环。两个外围的大环是暗色(Shadowcolors),里面两个小环是明色(tintcolors)。色轮有五个同心环组成,从暗到亮——暗色处于大环,明色处于小环,而中间是颜色的基本色相。从图中我们可以看出,处于右边的暗色就是加上黑色,而左边的明色则是加上白色。五个圆环已经清楚表示了颜色如何由暗到亮的过程。但这种明色及暗色的关系只是相对而言。下面我们列出六种基本的颜色关系。每一种颜色关系都可以有无数种搭配的可能,当你掌握它们时,你对颜色的视野才会显得开阔。单色搭配(Monochromatic)一种色相由暗、中、明三种色调组成。这就是单色。单色搭配上并没有形成颜色的层次,但形成了明暗的层次。这种搭配在设计中应用时,出来的效果永远不错,其重要性也可见一斑。类比色搭配(Analogous)相邻的颜色我们称为类比色。类比色都拥有共同的颜色。这种颜色搭配产生了一种令人悦目、低对比度的和谐美感。类比色非常丰富,在设计时应用这种搭配同样让你轻易产生不错的视觉效果。4.4网页中的色彩共同颜色是黄色及红色补色搭配(Complement)在色轮上直线相对的两种颜色称为补色。补色形成强列的对比效果,传达出活力、能量、兴奋等意义。补色要达到最佳的效果,最好是其中一种面积比较小,另一种比较大。比如在一个蓝色的区域里搭配橙色的小圆点。4.4网页中的色彩橙色与蓝色互为补色分裂补色(Splitcomplement)如果我们同时用补色及类比色的方法来确定的颜色关系,就称为分裂补色。这种颜色搭配既具有类比色的低对比度的美感,又具有补色的力量感。形成了一种既和谐又有重点的颜色关系。4.4网页中的色彩这样的搭配使红色显得更突出原色搭配(Primary)除了在一些儿童的产品中,三原色同时使用是比较少见的。但是,无论是在中国还是在美国的文化中,红黄搭配都是非常受欢迎。红黄搭配应用的范围很广——从快餐店到加油站,我们都可以看见这两种颜色同时在一起。蓝红搭配也很常见,但只有当两者的区域是分离时,才会显得吸引人,如果是紧邻在一起,则会产生冲突感。二次色搭配(Secondary)二次色之间都拥有一种共同的颜色——其中两种共同拥有蓝色,两种共同拥有黄色,两种共同拥有红色——所以它们轻易能够形成协调的搭配。如果三种二次色同时使用,则显得很舒适、吸引,并具有丰富的色调。它们同时具有的颜色深度及广度,这一点在其它颜色关系上很难找到。考考你下面这四个封面中,都各自运用了我们在上面所述的其中一种颜色搭配。你能说出它们是运用了哪一种颜色搭配吗?(提示:眼睛只集中在一些大区域的颜色,不要理会细微的颜色区域,也不用理会黑白两种颜色)其实运用色轮分析后,很容易得到答案。A:单色搭配B:补色搭配C:三原色搭配D:类比色搭配5.3.2字体设计一般情况下浏览器通过中文GB2312字符集(GB简体码)和英文ISO-8859-1字符集来解释和翻译网页源代码,其他还有BIG5、UTF-8、Shift-JIS、EUC、KOI8-2等字符集,分别用于不同的字体显示。浏览器定义的默认字体是中文宋体和英文TimesNewRoma字体,这两种字体可以在任何操作系统和浏览器里正确显示。5.3.3导航设计突出超链接链接层次不宜过深“上一页、下一页,转到N页”的使用“返回”及“回首页”的使用5.3.4图像设计图像的格式与大小大小:单张30KB,单页60KB,较大图像应进行“切割”图象的格式:GIF、JPEG图像设计技巧为图片加入说明缩略图的使用图片的更新透明色的使用慎用网页背景图片5.3.5动画设计GIF动画Flash动画
本文标题:网站页面设计
链接地址:https://www.777doc.com/doc-4614020 .html