网站设计过程方法简述参考课件.ppt

1、多媒体网站设计,电气与信息工程学院,1,网页设计师是一个新兴职业。 国内网页设计制作的状况。 网站出资人，网络工程师，美术设计师。 个人主页及B2B、B2C、C2C的电子商务网站。,一、网站设计概述,2,平面设计与网页设计之比较 分辨率 色彩模式 RGB、CMYK（CMYK即代表印刷上用的四种油墨色，C代表青色，M代表洋红色，Y代表黄色，K-黑色。）例：黑色在印刷与网页制作中的不同 图像大小 成功的网页设计师必须在网页的美观和速度之间找到一个平衡点，目前的状况得以改善。 链接、动画、按钮。,二、平面设计与网页设计之比较,3,网站的色彩 网站的色彩是构成网站CI的重要组成部分，成功的网站，网站风

2、格的定位是从其基本色彩开始的(调子)，不同的色彩基调传达给人不同的感受，即影响浏览者的情绪也界定了改网站的风格。 色彩的基本知识：色相、纯度、亮度、冷暖。 色彩心理学 色彩搭配原则： 合理性；独特性；艺术性。 大企业的成功色彩形象：IBM、可口可乐、奥迪。,三、网站的形象设计与CI策划,4,四、网站的形象设计与CI策划,CI，是借用的广告术语。 CI(corporate identity)，意思是通过视觉来统一企业的形象。 现实生活中的CI策划比比皆是，杰出的例子如：可口可乐公司，全球统一的标志，色彩和产品包装，给我们的印象极为深刻。 更多的例子如SONY，三菱，麦当劳等等。,5,1.设计网站

3、的标志(logo).,设计制作一个网站的标志(logo)。就如同商标一样，logo是站点特色和内涵的集中体现，看见logo就让大家联想起你的站点。 1.LOGO是与其它网站链接以及让其它网站链接的标志和门户。 2.LOGO是网站形象的重要体现。 3.LOGO的国际标准规范。 88*31 互联网上最普遍的LOGO规格，以下举例均是这种大小 120*60 用于一般大小的LOGO 120*90 用于大型LOGO。,6,7,(1).网站有代表性的人物，动物，花草，可以用它们作为设计的蓝本，加以卡通化和艺术化。 例如迪斯尼的米老鼠，搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。 (2).网站有专业性的，可以以本专

4、业有代表的物品作为标志。 如：中国银行的铜板标志，奔驰汽车的方向盘标志。 (3).最常用和最简单的方式是用网站的英文名称作标志。 采用不同的字体，字母的变形，字母的组合可以很容易制作好自己的标志。,8,9,10,11,12,2.设计网站的标准色彩,网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。 不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。 “标准色彩”指能体现网站型象和延伸内涵的色彩。 例如：IBM的深蓝色，肯得基的红色条型，windows视窗标志上的红蓝黄绿色块，都使我们觉得很贴切，很和谐。,13,14,15,一般来说，一个网站的标准色彩不超过3种，太多则让

5、人眼花缭乱。 标准色彩要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。 一般来说，适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。,16,17,3.设计网站的标准字体,标准字体指用于标志，标题，主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。 例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。 目前常见的中文字体有二三十种，常见的英文字体有近百种，网络上还有许多专用英文艺术字体下载。 说明：使用非默

6、认字体只能用图片的形式，因为很可能浏览者的PC里没有安装你的特别字体。,18,五.确定网站的目录结构和链接结构,.网站的目录结构,不要将所有文件都存放在根目录下。 按栏目内容建立子目录。在每个主目录下都建立独立的images目录。 目录的层次不要太深。建议不要超过3层。 原因：维护管理方便。,19,研究网站的链接结构的目的：用最少的链接，使得浏览最有效率。 一般建立网站的链接结构有两种基本方式：,.网站的链接结构,1.树状链接结构(一对一)。 类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。这样的链接结构浏览时，一级级进入，一级级退出。 优点：条理清晰，访问者明确知道自己

7、在什么位置，不会“迷”路。 缺点：浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。,20,2.星状链接结构（一对多） 类似网络服务器的链接，每个页面相互之间都建立有链接。 优点：浏览方便，随时可以到达自己喜欢的页面。 缺点：链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。,21,在实际的网站设计中，总是将这两种结构混合起来使用。 最好的办法：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。,例子：一个新闻站点的页面结构： 一级页面 二级页面财经新闻页 - 财经新闻1，财经新闻2./ |首页 - 娱乐新闻页 - 娱乐新闻1，娱乐新闻2. |

8、IT新闻页 - IT新闻1，IT新闻2.,22,以上是对的三级页面举例。如果所建站点内容庞大，分类明细，需要超过三级页面，那么建议在页面里显示导航条，帮助浏览者明确自己所处的位置。 例如：经常看到许多网站页面顶部的，类似这样：,“您现在的位置是：首页-财经新闻-股市信息-深圳股-深发展”,23,六.版面布局与首页设计,草案建议先用一张白纸和一支铅笔，用作图软件photoshop等也可以。 这时，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。 尽量可能多画几张，最后选定一个满意的作为继续创作的脚本。,24,常用到的版面布局形式,1.“T”结构布局 结构：页面顶部为横条网站

9、标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T。这是网页设计中用的最广返的一种布局方式。 优点：页面结构清晰，主次分明。初学者最容易上手。 缺点：规矩呆板，如果细节色彩上不注意，很容易“让人看之无味”。,25,2.“口”型布局 结构：页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容。 优点：充分利用版面，信息量大。 缺点：页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计。,26,3.对称对比布局 结构：采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。 优点：视觉冲击力强。 缺点：将两部分有机

10、的结合比较困难。,27,4.POP布局(自由布局) 结构：页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。 优点：漂亮吸引人。 缺点：速度慢。,28,首页的设计,主页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的“功力”。所以，首页的设计和制作是绝对要重视和花心思的。 首页的制作风格也决定了整个网站将要延续的风格。一般首页设计和制作占整个制作时间相当大的比重。,29,首页的主要类型,书籍封面式首页,有些大型网站往往有一个书籍封面式

11、的首页，上面只有一个“进入”的链接，点击之后才可进入到网站。 这种首页设计精美、考究。,30,例1,31,例2,32,例3,33,首页的主要类型,期刊杂志式首页,与书刊封面式首页相似，但在首页上有网站全部内容的目录索引，图文并茂，看上去就像期刊杂志的封面，即漂亮，又使网站的主要内容一目了然，是一种值得推荐的形式。,34,例1,35,例2,36,例3,37,首页的主要类型,报纸式首页,许多电子商务网站、搜索引擎网站和新闻信息网站更加务实，为了速度和操作的简便，往往采用报纸式的首页设计，将栏目索引、功能模块、具体内容一并显示在首页，看上去就像报纸的头版一样。,38,例1,39,七.网页色彩的搭配,

12、色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。 色彩总的应用原则应该是“总体协调，局部对比”。 即：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。 在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。,40,1.色彩的心理感受,色彩与人的心理感觉和情绪也有一定的关系。 一般情况下，各种色彩给人的感觉是： 红色代表热情、活泼、热闹、温暖、幸福、吉祥； 橙色代表光明、华丽、兴奋、甜蜜、快乐； 橙色较温和,是一种很活泼、辉煌的色彩、富足的、快乐的色彩，稍加黑则较稳重，蓝橙对比时较生动； 黄色代表明朗、愉快、高贵、希望；

13、 绿色代表新鲜、平静、和平、柔和、安逸、青春； 蓝色代表深远、永恒、沉静、理智、诚实、寒冷； 紫色代表优雅、高贵、魅力、自傲；,41,白色代表纯洁、纯真、朴素、神圣、明快； 灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞； 灰色是色彩中最被动的颜色。受有彩色影响极大,靠邻近的色彩获得自己的生命，近冷则暖,近暖则冷。 黑色代表崇高、坚实、严肃、刚健、粗莽； 黑与白:非常对立而又有共性,是色彩最后的抽象.能够用来表达富有哲理性的东西。,42,2.网页色彩搭配的原则,1.使用单色 网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。 2.使

14、用邻近色 邻近色，是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色。 采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。,43,3.使用对比色 对比色可以突出重点，产生强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。,4.背景色的使用 一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。,44,红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。 红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉

15、疲劳的色。 在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。 在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。 在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。 在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。,45,黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。 黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度变化。 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有

16、分寸感的热情、温暖。 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。,46,蓝色的色感冷静，性格朴实而内向，是一种有助于人头脑冷静的色。 蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。 蓝色还是一种在淡化后仍然似能保持较强个性的色。 如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。,47,绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。,48,白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的