网页设计与制作2-网页设计.ppt

网页设计与制作2-网页设计.ppt

《网页设计与制作2-网页设计.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作2-网页设计.ppt（89页珍藏版）》请在冰豆网上搜索。

第二讲、网页设计主要内容风格、创意设计原则布局设计颜色设计文字设计Logo、Banner设计0.网站的构建承接项目准备原始资料加工原始资料提出草案讨论实施方案制作导航器安排内容图像设计决定布局明确设计理念完成制作二次质检修改错误与测试初次质检制作网页Benchmarking（定位）主题对象内容Sitemap（栏目和版块）目录结构和链接结构访问量交互（提高质量，增强亲和力）最初的Benchmarking就是模仿的过程网站地图公司职员专用同友会公告板（注册会员后才能使用）LV同友会资料室（一般资料下载、范例资料室（VI资料）、技术资料常见问题销售说明书公告板客户信息免费培训、有偿培训、培训申请（参考Word附件）培训开发实绩、合作商谈、汽车、工厂自动化、半导体、通信、宇宙航空、家电、生物工程，其他事业领域欢迎词、公司沿革、组织图、简图公司介绍公司介绍、或banner广告、新消息（新商品、招聘、其他活动）主页Hypersnap截取静态图片Flash保存工具（如闪客精灵）获取精美Flash动画（有些浏览器有直接保存Flash动画的功能，如：

Maxthon，Gosurf等）Flash编辑工具修改动画，为我所用，如闪客精灵。

确定设计理念风格l抽象的，是站点的整体形象给浏览者的综合感受。

“整体形象”包括站点的CI（标志，色彩，字体，标语），版面布局，交互性，文字，内容价值等等诸多因素。

举个例子：

平易近人的，生动活泼的迪斯尼，专业严肃的IBM。

通过网站的外表，内容，颜色，交流可以概括出一个站点的个性，情绪。

是温文儒雅，是执著热情，是活泼易变，是放任不羁还是深沉含蓄。

l表现方法有创意，专业，有（技术）实力，有美感，有冲击力运用颜色的象征性和心理特点运用布局给人的整体性运用内容给人的态度交流合作的感觉1.设计原则创意l创意是传达信息的一种特别方式。

l它引人入胜，精彩万分，出奇不意的；创意是捕捉出来的点子，是创作出来的奇招。

l创意并不是天才者的灵感，而是思考的结果，是将现有的要素重新组合。

l根据美国广告学教授詹姆斯的研究，创意思考的过程分五阶段1.准备期-研究所搜集的资料，根据旧经验，启发新创意；2.孵化期-将资料咀嚼消化，使意识自由发展，任意结合；3.启示期-意识发展并结合，产生创意；4.验证期-将产生的创意讨论修正；5.形成期-设计制作网页，将创意具体化。

设计的目的：

为他人服务！

原则：

一致性和变化性均衡性比例黄金分割动感效果和律动运动调和与对比重复性和层次感2.布局设计Logo、Banner导航栏主图像、Flash页脚主题内容图片、图标等2.2网页的布局左右式左、中、右式同字型上、中、下型整体型场景式卫星式以太阳为中心的卫星环绕型，太阳不是越大越好，周围留白强调中心性卫星以全景式展开，体现安定、自由与开放卫星通过太阳紧密结合，卫星的组合不要产生混乱，处理好留白照片组合式多样性，丰富性，故事性，引人入胜包围式将页面周围用色块或图案包围起来，形成一个稳定的世界分辨率800600还是1024768？

2.3导航文字导航静态文字动态Flash图像按钮实物导航3.颜色设计颜色的基本知识光源色、物体色三原色颜色的属性颜色传达的信息三原色无法通过混合其他颜色得到的颜色。

光源色的三原色：

红、绿、蓝物体色的三原色：

黄、品、青颜色的3个属性：

色相、色调（亮度、饱和度）色相颜色的本质属性，区分不同的颜色Vivid&strong饱和度高，鲜明、强烈Pale&light亮度、对比度高，柔和LightGrayish、Grayish、Dull朴素、冷静Deep、Dark深沉而凝重色调颜色的明暗程度和纯净程度1.颜色的轻重颜色传达的信息2.颜色的冷暖以清凉的蓝色和热情的红色为出发点，寻找相似色3.颜色的心理颜色象征（联想）意义红热情、奔放、喜庆、幸福、活力、危险、愤怒橙欢喜、丰收、温暖、嫉妒、警告黄光明、快活、希望、高贵、喜悦、欢快绿和睦、宁静、健康、安全，和淡白搭配，产生优雅、舒适的气氛蓝永恒、博大、凉爽、清新、理智、平静、忧郁、深远紫阴森、冷酷、高贵黑深沉、神秘、寂静、悲哀、压抑白单纯、质朴、洁白、明快、纯真、清洁灰中庸、平凡、温和、谦让、中立和高雅3.2配色实践1.根据色彩印象空间配色2.根据设计师参考配色3.自主配色注：

印象空间不同的人对不同的颜色有不同的感觉和印象，设计师利用对多个人群进行调查和分析得出的具有参考价值的选择趋向。

实例：

主题：

少儿服饰风格：

可爱、快乐参考配色（见配色方案）高雅高雅的色彩组合只会使用最淡的明色。

例如，少许的黄色加上白色会形成粉黄色，这种色彩会给全白的房间带来更温馨的感觉。

自然光造成柔和的阴影，并且凸显建筑上的细微部分，如此，将能达到设计出幽雅的目的。

在服装设计上，米色色调高雅的亚麻、丝绸、羊毛和丝绒能轻描淡写地表示古典、高贵的气质，给人一种雍容华贵的印象。

传统传统的色彩组合常常是从那些具有历史意义的色彩那里仿来的。

蓝、暗红、褐和绿等保守的颜色加上了灰色或是加深了色彩，都可表达传统的主题。

例如，绿，不管是纯色或是加上灰色的暗色，都象征财富。

狩猎绿（huntergreen）配上浓金或是暗红或是黑色表示稳定与富有。

这种色彩常出现在银行和律师事务所的装潢上，因为它们代表恒久与价值。

古典古典的色彩组合带有势力与权威的意味，强烈的宝蓝色（royalblue）是任何一个古典色彩组合的中间装饰色。

它是如此地醒目，就算和其它的色彩搭配在一起，也毫不会逊色。

古典的色彩组合表示真理、责任与信赖。

又因为它接近绿色，宝蓝色会唤起人持久、稳定与力量的感觉，特别是和它的分裂补色红橙和黄橙色搭配在一起。

怀旧任何色彩搭配淡紫色，最能诠释怀旧思古之情。

能令人仿佛回到维多利亚时代，如梦似幻的时刻，优美的诗歌和浪漫的乐章。

在紫色系中，淡紫色融合了红和蓝，比起粉色较精致，也较刚硬。

淡紫色尽管无声无息，与其它色彩相配后，仍可见其清丽出众，往日如歌，犹在耳际。

可靠海蓝（navyblue）是最为大众所接受的颜色之一。

采用这种颜色的色彩组合可解释成可靠、值得信赖的色彩。

这类组合也带有不可置疑的权威感。

警官、海军军官或法官都穿着深色、稳定的海军蓝，以便在值勤时表现出统率、支配的权威感。

当海军蓝用红和金色来强调时，会变得较不严肃，但仍表达出坚定、有力量的感觉。

浪漫粉红代表浪漫。

粉红色是把数量不一的白色加在红色里面，造成一种明亮的红。

象红色一样，粉红色会引起人的兴趣与快感，但是比较柔和、宁静的方式进行。

浪漫色彩设计，藉由使用粉红、淡紫和桃红（略带黄色的粉红色），会令人觉得柔和、典雅。

和其它明亮的粉彩配合起来，红色会让想起梦幻般的月天和满满一束夏日炎炎下娇柔的花朵。

流行今天“流行”的，明天可能就“落伍”了。

流行的配色设计看起来挺舒服的，但却有震撼他人目光的效果。

淡黄绿色（chartreuse）就是一个很好的例子，色彩醒目，适用于青春有活力且不寻常的事物上。

从棒球运动鞋到毛衣，这种鲜明的色彩在流行服饰里创造出无数成功的色彩组合。

黄绿或淡黄绿色和它完美的补色苯胺红（magenta）搭配起来，就是一种绝妙的对比色彩组合。

平静在任何充满压力的环境里，只要搭配出一些灰蓝或淡蓝的明色色彩组合，就会制造出令人平和、恬静的效果。

中间是淡蓝的配色设计，会给人安心的感觉，因为它看起来诚实、直接。

带着明色的寒色可保持安宁、平和的感觉。

补色和这些强调平静的色彩在明暗度方面一定要类似，这点很重要，因为要是色彩太鲜明，会制造出不必要的紧张。

热情采用黄橙、琥珀色的色彩组合，是最具亲和力的。

添加少许红色的黄色会发出夺目的色彩，处处惹人怜爱。

如果充分表现出这类色彩组合的强度时，会使人联想到耀眼的金光或是珍贵的番红花。

把番红花色（saffron）加上白色，来作单色配色的设计时，会产生一种古典的美感，令人心动神摇。

淡琥珀色组成的配色，使人有舒适、温馨的感觉。

这类色调可作多种应用，像淡黄的明色可以营造出欢乐、诚恳的气氛。

神奇紫色透露着诡异的气息，所以能制造奇幻的效果。

各种彩度与亮度的紫色，配上橘色和绿色，便是刺激与新奇的最佳代言人。

如果紫色配上黄绿色或黄橘色，色调不合、怪异，而且俗不可耐，但如果配上它真正的补色黄色，便能展现怪诞、诡异的感觉，令人不禁要驻足，欣赏一番。

以现代流行语来说，紫色象征“青涩”或“未成年”，常被用以代表两代关系之间的沟通桥梁。

友善配色设计要想表达友善之意时，常会使用到橙色。

这种色彩组合，开放、随和，又有一切表现能量和动力的素质。

能够创造出平等、有序气氛，却没有强势和支配的霸气。

橙色和它邻近的几个色彩常应用在快餐厅，因为这类色彩会散发出食物品质好、价钱公道等诱人的讯息。

橙色有耀眼、活力的特质，所以被选为在危险地区的国际安全色。

橙色的救生筏和救生设备（例如救生衣等）可以让人轻易地在蓝色和灰色的大海里发现踪迹。

专职在商业活动中，颜色受到仔细的评估，一般流行的看法，灰色或黑色系列可以象征“职业”，因为这些颜色较不具个人主义，有中庸之感。

灰色其实是鲜艳的红色或橘色最好的背景色。

这些活泼的颜色加上低沉的灰色，可以使原有的热力稍加收敛、含蓄一些。

虽然灰色不具刺激感，却富有实际感。

它传达出一种实在、严肃的气息，绝少幽默之感。

自主配色配色原理配色实践三原色近似色补色色环中任何一种颜色的邻近的几种颜色色环中的直接位置相对的颜色色彩的组成分离补色组色暖色一种颜色和补色的邻近色色环上距离相等的任意三种颜色色彩的对比亮度对比亮度差越大，越鲜明饱和度对比饱和度差越大，越鲜明色相对比长时间停留，转移后看到补色的影子色带对比面积越大，颜色的饱和度、亮度会提高。

忌大面积使用单色补色对比鲜明配色实践颜色选择选择邻近色色环上的相邻色以白色为标准的邻近色以灰色为标准的邻近色选择补色（下图）配色实例应把主色的选定拿进来。

在选定主色的前提下再选择邻近色或补色邻近色配色和谐、统一补色配色突出重点，强烈的视觉效果非彩色和彩色配色轻快、清爽、整洁、宁静渐变色配色冷静、整齐、细致Seperation配色强弱分明，主体突出常以黑、白、会作为分隔色，缓冲对比强烈的颜色4.文字设计1.字体的选择2.文字的粗细3.文字的大小4.文本的行距5.文本的颜色4.1文字的选择字体名称特征形象宋体/黑体罗马体/世纪体标准中庸，传统，标准，合理，流畅书法体、艺术体剧本体人性化自由，欢乐，敏锐，柔和等想象字体自由剪纸字体，绳子字体等自由发挥，风格独特字体：

根据需要选择，一般不超过3种书法体，钢笔、毛笔体，剧本体，手写体等想象字体如剪纸风格，绳子字体等4.2文字粗细细字优美，柔弱，适合文章正文粗字强悍，有力，设和做文章标题正文不要应用粗细变化的文字4.3文字的大小正文文字的大小一般以适合阅读的12号字或者14为宜文章标题的大小一般以1.5倍-2倍于正文字体大小为宜字号大小一定程度上影响重要程度跳跃率越大，画面越活泼。

注：

跳跃率文章标题和正文的大小比4.4文本的行距适合阅读的标准行距是文字高度的150-170%。

注：

如果为150%行距，则两行之间的空白为字体高度的一半高。

180%以上的行距，宽敞舒适，给人典雅的印象。

4.5文字的颜色文字与背景色之间的差异一、网站LogoLogo意为商标或公司名称的图案字和标识语。

Logo作为网站的标志出现，不仅可以树立网站形，还可以传达相关的信息。

设计原则：

形体颜色文本文字的抽象5.Logo、banner设计形体263在线的Logo抽象形体使人想到：

千龙新闻网的Logo使用了龙的标志：

网易的Logo中使用了网址：

颜色尽量使用最少的颜色，一方面减小尺寸，同时以免过于花哨。

另外，颜色要与网站整体相关联。

文字简洁好发音好记忆好联想好写，好认文字的抽象对文字进行适当的抽象处理，可以使Logo更加人性化。

经典欣赏将车形象化，并和“车”字融为一体，有效传递网站定位和核心产品。

颜色使用对比色，对比鲜明，醒目。

线条流畅，美观大方将手机形象卡通化，体现了网站的灵气和网站的类型及主体内容。

动感性不强。

二、网站BannerBanner就是