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

多媒体网站设计 电气与信息工程学院 1 网页设计师是一个新兴职业 国内网页设计制作的状况 网站出资人 网络工程师 美术设计师 个人主页及B2B B2C C2C的电子商务网站 一 网站设计概述 2 平面设计与网页设计之比较分辨率色彩模式RGB CMYK CMYK即代表印刷上用的四种油墨色 C代表青色 M代表洋红色 Y代表黄色 K 黑色 例 黑色在印刷与网页制作中的不同图像大小成功的网页设计师必须在网页的美观和速度之间找到一个平衡点 目前的状况得以改善 链接 动画 按钮 二 平面设计与网页设计之比较 3 网站的色彩网站的色彩是构成网站CI的重要组成部分 成功的网站 网站风格的定位是从其基本色彩开始的 调子 不同的色彩基调传达给人不同的感受 即影响浏览者的情绪也界定了改网站的风格 色彩的基本知识 色相 纯度 亮度 冷暖 色彩心理学色彩搭配原则 合理性 独特性 艺术性 大企业的成功色彩形象 IBM 可口可乐 奥迪 三 网站的形象设计与CI策划 4 四 网站的形象设计与CI策划 CI 是借用的广告术语 CI corporateidentity 意思是通过视觉来统一企业的形象 现实生活中的CI策划比比皆是 杰出的例子如 可口可乐公司 全球统一的标志 色彩和产品包装 给我们的印象极为深刻 更多的例子如SONY 三菱 麦当劳等等 5 1 设计网站的标志 logo 设计制作一个网站的标志 logo 就如同商标一样 logo是站点特色和内涵的集中体现 看见logo就让大家联想起你的站点 1 LOGO是与其它网站链接以及让其它网站链接的标志和门户 2 LOGO是网站形象的重要体现 3 LOGO的国际标准规范 88 31互联网上最普遍的LOGO规格 以下举例均是这种大小120 60用于一般大小的LOGO120 90用于大型LOGO 6 7 1 网站有代表性的人物 动物 花草 可以用它们作为设计的蓝本 加以卡通化和艺术化 例如迪斯尼的米老鼠 搜狐的卡通狐狸 鲨威体坛的篮球鲨鱼 2 网站有专业性的 可以以本专业有代表的物品作为标志 如 中国银行的铜板标志 奔驰汽车的方向盘标志 3 最常用和最简单的方式是用网站的英文名称作标志 采用不同的字体 字母的变形 字母的组合可以很容易制作好自己的标志 8 9 10 11 12 2 设计网站的标准色彩 网站给人的第一印象来自视觉冲击 确定网站的标准色彩是相当重要的一步 不同的色彩搭配产生不同的效果 并可能影响到访问者的情绪 标准色彩 指能体现网站型象和延伸内涵的色彩 例如 IBM的深蓝色 肯得基的红色条型 windows视窗标志上的红蓝黄绿色块 都使我们觉得很贴切 很和谐 13 14 15 一般来说 一个网站的标准色彩不超过3种 太多则让人眼花缭乱 标准色彩要用于网站的标志 标题 主菜单和主色块 给人以整体统一的感觉 至于其它色彩也可以使用 只是作为点缀和衬托 绝不能喧宾夺主 一般来说 适合于网页标准色的颜色有 蓝色 黄 橙色 黑 灰 白色三大系列色 16 17 3 设计网站的标准字体 标准字体指用于标志 标题 主菜单的特有字体 一般网页默认的字体是宋体 为了体现站点的 与众不同 和特有风格 可以根据需要选择一些特别字体 例如 为了体现专业可以使用粗仿宋体 体现设计精美可以用广告体 体现亲切随意可以用手写体等等 目前常见的中文字体有二三十种 常见的英文字体有近百种 网络上还有许多专用英文艺术字体下载 说明 使用非默认字体只能用图片的形式 因为很可能浏览者的PC里没有安装你的特别字体 18 五 确定网站的目录结构和链接结构 网站的目录结构 不要将所有文件都存放在根目录下 按栏目内容建立子目录 在每个主目录下都建立独立的images目录 目录的层次不要太深 建议不要超过3层 原因 维护管理方便 19 研究网站的链接结构的目的 用最少的链接 使得浏览最有效率 一般建立网站的链接结构有两种基本方式 网站的链接结构 1 树状链接结构 一对一 类似DOS的目录结构 首页链接指向一级页面 一级页面链接指向二级页面 这样的链接结构浏览时 一级级进入 一级级退出 优点 条理清晰 访问者明确知道自己在什么位置 不会 迷 路 缺点 浏览效率低 一个栏目下的子页面到另一个栏目下的子页面 必须绕经首页 20 2 星状链接结构 一对多 类似网络服务器的链接 每个页面相互之间都建立有链接 优点 浏览方便 随时可以到达自己喜欢的页面 缺点 链接太多 容易使浏览者迷路 搞不清自己在什么位置 看了多少内容 21 在实际的网站设计中 总是将这两种结构混合起来使用 最好的办法 首页和一级页面之间用星状链接结构 一级和二级页面之间用树状链接结构 例子 一个新闻站点的页面结构 一级页面二级页面财经新闻页 财经新闻1 财经新闻2 首页 娱乐新闻页 娱乐新闻1 娱乐新闻2 IT新闻页 IT新闻1 IT新闻2 22 以上是对的三级页面举例 如果所建站点内容庞大 分类明细 需要超过三级页面 那么建议在页面里显示导航条 帮助浏览者明确自己所处的位置 例如 经常看到许多网站页面顶部的 类似这样 您现在的位置是 首页 财经新闻 股市信息 深圳股 深发展 23 六 版面布局与首页设计 草案建议先用一张白纸和一支铅笔 用作图软件photoshop等也可以 这时 不讲究细腻工整 不必考虑细节功能 只以粗陋的线条勾画出创意的轮廓即可 尽量可能多画几张 最后选定一个满意的作为继续创作的脚本 24 常用到的版面布局形式 1 T 结构布局结构 页面顶部为横条网站标志 广告条 下方左面为主菜单 右面显示内容的布局 因为菜单条背景较深 整体效果类似英文字母 T 这是网页设计中用的最广返的一种布局方式 优点 页面结构清晰 主次分明 初学者最容易上手 缺点 规矩呆板 如果细节色彩上不注意 很容易 让人看之无味 25 2 口 型布局结构 页面一般上下各有一个广告条 左面是主菜单 右面放友情链接等 中间是主要内容 优点 充分利用版面 信息量大 缺点 页面拥挤 不够灵活 也有将四边空出 只用中间的窗口型设计 26 3 对称对比布局结构 采取左右或者上下对称的布局 一半深色 一半浅色 一般用于设计型站点 优点 视觉冲击力强 缺点 将两部分有机的结合比较困难 27 4 POP布局 自由布局 结构 页面布局象一张宣传海报 以一张精美图片作为页面的设计中心 常用于时尚类站点 比如ELLE com 优点 漂亮吸引人 缺点 速度慢 28 首页的设计 主页的设计是一个网站成功与否的关键 人们往往看到第一页就已经对你的站点有一个整体的感觉 是不是能够促使浏览者继续点击进入 是否能够吸引浏览者留在站点上 全凭首页设计的 功力 所以 首页的设计和制作是绝对要重视和花心思的 首页的制作风格也决定了整个网站将要延续的风格 一般首页设计和制作占整个制作时间相当大的比重 29 首页的主要类型 书籍封面式首页 有些大型网站往往有一个书籍封面式的首页 上面只有一个 进入 的链接 点击之后才可进入到网站 这种首页设计精美 考究 30 例1 31 例2 32 例3 33 首页的主要类型 期刊杂志式首页 与书刊封面式首页相似 但在首页上有网站全部内容的目录索引 图文并茂 看上去就像期刊杂志的封面 即漂亮 又使网站的主要内容一目了然 是一种值得推荐的形式 34 例1 35 例2 36 例3 37 首页的主要类型 报纸式首页 许多电子商务网站 搜索引擎网站和新闻信息网站更加务实 为了速度和操作的简便 往往采用报纸式的首页设计 将栏目索引 功能模块 具体内容一并显示在首页 看上去就像报纸的头版一样 38 例1 39 七 网页色彩的搭配 色彩是人的视觉最敏感的东西 主页的色彩处理得好 可以锦上添花 达到事半功倍的效果 色彩总的应用原则应该是 总体协调 局部对比 即 主页的整体色彩效果应该是和谐的 只有局部的 小范围的地方可以有一些强烈色彩的对比 在色彩的运用上 可以根据主页内容的需要 分别采用不同的主色调 40 1 色彩的心理感受 色彩与人的心理感觉和情绪也有一定的关系 一般情况下 各种色彩给人的感觉是 红色代表热情 活泼 热闹 温暖 幸福 吉祥 橙色代表光明 华丽 兴奋 甜蜜 快乐 橙色较温和 是一种很活泼 辉煌的色彩 富足的 快乐的色彩 稍加黑则较稳重 蓝橙对比时较生动 黄色代表明朗 愉快 高贵 希望 绿色代表新鲜 平静 和平 柔和 安逸 青春 蓝色代表深远 永恒 沉静 理智 诚实 寒冷 紫色代表优雅 高贵 魅力 自傲 41 白色代表纯洁 纯真 朴素 神圣 明快 灰色代表忧郁 消极 谦虚 平凡 沉默 中庸 寂寞 灰色是色彩中最被动的颜色 受有彩色影响极大 靠邻近的色彩获得自己的生命 近冷则暖 近暖则冷 黑色代表崇高 坚实 严肃 刚健 粗莽 黑与白 非常对立而又有共性 是色彩最后的抽象 能够用来表达富有哲理性的东西 42 2 网页色彩搭配的原则 1 使用单色网站设计要避免采用单一色彩 以免产生单调的感觉 但通过调整色彩的饱和度和透明度也可以产生变化 使网站避免单调 2 使用邻近色邻近色 是在色带上相邻近的颜色 例如绿色和蓝色 红色和黄色 采用邻近色设计网页可以使网页避免色彩杂乱 易于达到页面的和谐统一 43 3 使用对比色对比色可以突出重点 产生强烈的视觉效果 通过合理使用对比色能够使网站特色鲜明 重点突出 在设计时一般以一种颜色为主色调 对比色作为点缀 可以起到画龙点睛的作用 4 背景色的使用一般采用素淡清雅的色彩 避免采用花纹复杂的图片和纯度很高的色彩作为背景色 同时背景色要与文字的色彩对比强烈一些 44 红色的色感温暖 性格刚烈而外向 是一种对人刺激性很强的色 红色容易引起人的注意 也容易使人兴奋 激动 紧张 冲动 还是一种容易造成人视觉疲劳的色 在红色中加入少量的黄 会使其热力强盛 趋于躁动 不安 在红色中加入少量的蓝 会使其热性减弱 趋于文雅 柔和 在红色中加入少量的黑 会使其性格变的沉稳 趋于厚重 朴实 在红中加入少量的白 会使其性格变的温柔 趋于含蓄 羞涩 娇嫩 45 黄色的性格冷漠 高傲 敏感 具有扩张和不安宁的视觉印象 黄色是各种色彩中 最为娇气的一种色 只要在纯黄色中混入少量的其它色 其色相感和色性格均会发生较大程度变化 在黄色中加入少量的蓝 会使其转化为一种鲜嫩的绿色 其高傲的性格也随之消失 趋于一种平和 潮润的感觉 在黄色中加入少量的红 则具有明显的橙色感觉 其性格也会从冷漠 高傲转化为一种有分寸感的热情 温暖 在黄色中加入少量的黑 其色感和色性变化最大 成为一种具有明显橄榄绿的复色印象 其色性也变的成熟 随和 在黄色中加入少量的白 其色感变的柔和 其性格中的冷漠 高傲被淡化 趋于含蓄 易于接近 46 蓝色的色感冷静 性格朴实而内向 是一种有助于人头脑冷静的色 蓝色的朴实 内向性格 常为那些性格活跃 具有较强扩张力的色彩 提供一个深远 广埔 平静的空间 成为衬托活跃色彩的友善而谦虚的朋友 蓝色还是一种在淡化后仍然似能保持较强个性的色 如果在蓝色中分别加入少量的红 黄 黑 橙 白等色 均不会对蓝色的性格构成较明显的影响力 47 绿色是具有黄色和蓝色两种成份的色 在绿色中 将黄色的扩张感和蓝色的收缩感相中庸 将黄色的温暖感与蓝色的寒冷感相抵消 这样使得绿色的性格最为平和 安稳 是一种柔顺 恬静 潢足 优美的色 在绿色中黄的成份较多时 其性格就趋于活泼 友善 具有幼稚性 在绿色中加入少量的黑 其性格就趋于庄重 老练 成熟 在绿色中加入少量的白 其性格就趋于洁净 清爽 鲜嫩 48 白色的色感光明 性格朴实 纯洁 快乐 白色具有圣洁的不