1、第二讲、网页设计,主要内容,风格、创意设计原则布局设计颜色设计文字设计Logo、Banner设计,0.网站的构建,承接项目,准备原始资料,加工原始资料 提出草案,讨论实施方案,制作导航器,安排内容,图像设计,决定布局,明确设计理念,完成制作,二次质检,修改错误 与测试,初次质检,制作网页,Benchmarking(定位)主题对象内容Sitemap(栏目和版块)目录结构和链接结构访问量交互（提高质量，增强亲和力）最初的Benchmarking就是模仿的过程,网站地图,公司职员专用,同友会公告板（注册会员后才能使用）,LV同友会,资料室（一般资料下载、范例资料室（VI资料）、技术资料常见问题销售说
2、明书公告板,客户信息,免费培训、有偿培训、培训申请（参考Word附件）,培训,开发实绩、合作商谈、汽车、工厂自动化、半导体、通信、宇宙航空、家电、生物工程，其他,事业领域,欢迎词、公司沿革、组织图、简图,公司介绍,公司介绍、或banner广告、新消息（新商品、招聘、其他活动）,主页,Hypersnap 截取静态图片 Flash保存工具(如闪客精灵)获取精美Flash动画(有些浏览器有直接保存Flash动画的功能，如：Maxthon，Gosurf等)Flash编辑工具修改动画，为我所用，如闪客精灵。,确定设计理念风格抽象的，是站点的整体形象给浏览者的综合感受。“整体形象”包括站点的CI（标志，色
3、彩，字体，标语），版面布局，交互性，文字，内容价值等等诸多因素。举个例子：平易近人的，生动活泼的迪斯尼，专业严肃的IBM。通过网站的外表，内容，颜色，交流可以概括出一个站点的个性，情绪。是温文儒雅，是执著热情，是活泼易变，是放任不羁还是深沉含蓄。表现方法有创意，专业，有(技术)实力，有美感，有冲击力 运用颜色的象征性和心理特点运用布局给人的整体性运用内容给人的态度交流合作的感觉,1.设计原则,创意 创意是传达信息的一种特别方式。它引人入胜，精彩万分，出奇不意的；创意是捕捉出来的点子，是创作出来的奇招。创意并不是天才者的灵感，而是思考的结果，是将现有的要素重新组合。根据美国广告学教授詹姆斯的研究
4、，创意思考的过程分五阶段 1.准备期-研究所搜集的资料，根据旧经验，启发新创意；2.孵化期-将资料咀嚼消化，使意识自由发展，任意结合；3.启示期-意识发展并结合，产生创意；4.验证期-将产生的创意讨论修正；5.形成期-设计制作网页，将创意具体化。,设计的目的：为他人服务！原则：一致性和变化性均衡性比例 黄金分割动感效果和律动运动调和与对比重复性和层次感,2.布局设计,Logo、Banner导航栏主图像、Flash页脚主题内容图片、图标等,2.2 网页的布局,左右式,左、中、右式,同字型,上、中、下型,整体型,场景式,卫星式,以太阳为中心的卫星环绕型，太阳不是越大越好，周围留白强调中心性卫星以全
5、景式展开，体现安定、自由与开放,卫星通过太阳紧密结合，卫星的组合不要产生混乱，处理好留白,照片组合式,多样性，丰富性，故事性，引人入胜,包围式,将页面周围用色块或图案包围起来，形成一个稳定的世界,分辨率 800600 还是 1024768？,2.3 导航,文字导航静态文字动态Flash图像按钮实物导航,3.颜色设计,颜色的基本知识光源色、物体色三原色颜色的属性颜色传达的信息,三原色无法通过混合其他颜色得到的颜色。光源色的三原色：红、绿、蓝物体色的三原色：黄、品、青,颜色的3个属性：色相、色调（亮度、饱和度）色相颜色的本质属性，区分不同的颜色,Vivid&strong 饱和度高，鲜明、强烈Pal
6、e&light 亮度、对比度高，柔和Light Grayish、Grayish、Dull 朴素、冷静Deep、Dark 深沉而凝重,色调颜色的明暗程度和纯净程度,颜色的轻重,颜色传达的信息,颜色的冷暖,以清凉的蓝色和热情的红色为出发点，寻找相似色,颜色的心理,3.2 配色实践,根据色彩印象空间配色根据设计师参考配色自主配色注：印象空间不同的人对不同的颜色有不同的感觉和印象，设计师利用对多个人群进行调查和分析得出的具有参考价值的选择趋向。,实例：主题：少儿服饰 风格：可爱、快乐,参考配色(见配色方案）,高雅 高雅的色彩组合只会使用最淡的明色。例如，少许的黄色加上白色会形成粉黄色，这种色彩会给 全
7、白的房间带来更温馨的感觉。自然光造成柔和的 阴影，并且凸显建筑上的细微部分，如此，将能达 到设计出幽雅的目的。在服装设计上，米色色调高雅的亚麻、丝绸、羊毛和丝绒能轻描淡写地表示古典、高贵的气质，给人一种雍容华贵的印象。,传统 传统的色彩组合常常是从那些具有历史意义的色彩那里仿来的。蓝、暗红、褐和绿等保守的颜色加上了灰色或是加深了色彩，都可表达传统的主题。例如，绿，不管是纯色或是加上灰色的暗色，都象征财富。狩猎绿（hunter green）配上浓金或是暗红或是黑色表示稳定与富有。这种色彩常出现在银行和律师事务所的装潢上，因为它们代表恒久与价值。,古典 古典的色彩组合带有势力与权威的意味，强烈的宝
8、蓝色（royal blue）是任何一个古典色彩组合的中间装饰色。它是如此地醒目，就算和其它的色彩搭配在一起，也毫不会逊色。古典的色彩组合表示真理、责任与信赖。又因为它接近绿色，宝蓝色会唤起人持久、稳定与力量的感觉，特别是和它的分裂补色红橙和黄橙色搭配在一起。,怀旧 任何色彩搭配淡紫色，最能诠释怀旧思古之情。能令人仿佛回到维多利亚时代，如梦似幻的时刻，优美的诗歌和浪漫的乐章。在紫色系中，淡紫色融合了红和蓝，比起粉色较精致，也较刚硬。淡紫色尽管无声无息，与其它色彩相配后，仍可见其清丽出众，往日如歌，犹在耳际。,可靠 海蓝（navy blue）是最为大众所接受的颜色之一。采用这种颜色的色彩组合可解释
9、成可靠、值得信赖的色彩。这类组合也带有不可置疑的权威感。警官、海军军官或法官都穿着深色、稳定的海军蓝，以便在值勤时表现出统率、支配的权威感。当海军蓝用红和金色来强调时，会变得较不严肃，但仍表达出坚定、有力量的感觉。,浪漫 粉红代表浪漫。粉红色是把数量不一的白色加在红色里面，造成一种明亮的红。象红色一样，粉红色会引起人的兴趣与快感，但是比较柔和、宁静的方式进行。浪漫色彩设计，藉由使用粉红、淡紫和桃红（略带黄色的粉红色），会令人觉得柔和、典雅。和其它明亮的粉彩配合起来，红色会让想起梦幻般的月天和满满一束夏日炎炎下娇柔的花朵。,流行 今天“流行”的，明天可能就“落伍”了。流行的配色设计看起来挺舒服的
10、，但却有震撼他 人目光的效果。淡黄绿色（chartreuse）就是一个很好的例 子，色彩醒目，适用于青春有活力且不寻常的事 物上。从棒球运动鞋到毛衣，这种鲜明的色彩在流 行服饰里创造出无数成功的色彩组合。黄绿或淡 黄绿色和它完美的补色苯胺红（magenta）搭配起来，就是一种绝妙的对比色彩组合。,平静 在任何充满压力的环境里，只要搭配出一些灰蓝或淡蓝的明色色彩组合，就会制造出令人平和、恬静的效果。中间是淡蓝的配色设计，会给人安心的感觉，因为它看起来诚实、直接。带着明色的寒色可保持安宁、平和的感觉。补色和这些强调平静的色彩在明暗度方面一定要类似，这点很重要，因为要是色彩太鲜明，会制造出不必要的紧
11、张。,热情 采用黄橙、琥珀色的色彩组合，是最具亲和力的。添加少许红色的黄色会发出夺目的色彩，处处惹人怜爱。如果充分表现出这类色彩组合的强度时，会使人联想到耀眼的金光或是珍贵的番红花。把番红花色（saffron）加上白色，来作单色配色的设计时，会产生一种古典的美感，令人心动神摇。淡琥珀色组成的配色，使人有舒适、温馨的感觉。这类色调可作多种应用，像淡黄的明色可以营造出欢乐、诚恳的气氛。,神奇 紫色透露着诡异的气息，所以能制造奇幻的效果。各种彩度与亮度的紫色，配上橘色和绿色，便是刺激与新奇的最佳代言人。如果紫色配上黄绿色或黄橘色，色调不合、怪异，而且俗不可耐，但如果配上它真正的补色黄色，便能展现怪诞
12、、诡异的感觉，令人不禁要驻足，欣赏一番。以现代流行语来说，紫色象征“青涩”或“未成年”，常被用以代表两代关系之间的沟通桥梁。,友善 配色设计要想表达友善之意时，常会使用到橙色。这种色彩组合，开放、随和，又有一切表现能量和动力的素质。能够创造出平等、有序气氛，却没有强势和支配的霸气。橙色和它邻近的几个色彩常应用在快餐厅，因为这类色彩会散发出食物品质好、价钱公道等诱人的讯息。橙色有耀眼、活力的特质，所以被选为在危险地区的国际安全色。橙色的救生筏和救生设备（例如救生衣等）可以让人轻易地在蓝色和灰色的大海里发现踪迹。,专职 在商业活动中，颜色受到仔细的评估，一般流行的看法，灰色或黑色系列可以象征“职业
13、”，因为这些颜色较不具个人主义，有中庸之感。灰色其实是鲜艳的红色或橘色最好的背景色。这些活泼的颜色加上低沉的灰色，可以使原有的热力稍加收敛、含蓄一些。虽然灰色不具刺激感，却富有实际感。它传达出一种实在、严肃的气息，绝少幽默之感。,自主配色,配色原理配色实践,色彩的组成,色彩的对比,亮度对比亮度差越大，越鲜明,饱和度对比饱和度差越大，越鲜明,色相对比长时间停留，转移后看到补色的影子,色带对比面积越大，颜色的饱和度、亮度会提高。忌大面积使用单色,补色对比鲜明,配色实践,颜色选择选择邻近色色环上的相邻色以白色为标准的邻近色以灰色为标准的邻近色选择补色（下图）配色实例,应把主色的选定拿进来。在选定主色
14、的前提下再选择邻近色或补色,邻近色配色和谐、统一,补色配色突出重点，强烈的视觉效果,非彩色和彩色配色轻快、清爽、整洁、宁静,渐变色配色冷静、整齐、细致,Seperation配色强弱分明，主体突出常以黑、白、会作为分隔色，缓冲对比强烈的颜色,4.文字设计,字体的选择文字的粗细文字的大小文本的行距文本的颜色,4.1 文字的选择,字体：根据需要选择，一般不超过3种,书法体，钢笔、毛笔体，剧本体，手写体等,想象字体如剪纸风格，绳子字体等,4.2 文字粗细,细字优美，柔弱，适合文章正文粗字强悍，有力，设和做文章标题正文不要应用粗细变化的文字,4.3 文字的大小,正文文字的大小一般以适合阅读的12号字或者
15、14为宜文章标题的大小一般以1.5倍-2倍于正文字体大小为宜字号大小一定程度上影响重要程度跳跃率越大，画面越活泼。注：跳跃率文章标题和正文的大小比,4.4 文本的行距,适合阅读的标准行距是文字高度的150-170%。注：如果为150%行距，则两行之间的空白为字体高度的一半高。180%以上的行距，宽敞舒适，给人典雅的印象。,4.5 文字的颜色,文字与背景色之间的差异,一、网站Logo Logo意为商标或公司名称的图案字和标识语。Logo作为网站的标志出现，不仅可以树立网站形，还可以传达相关的信息。设计原则：形体颜色文本文字的抽象,5.Logo、banner设计,形体,263在线的Logo抽象形体
16、使人想到：,千龙新闻网的Logo使用了龙的标志：,网易的Logo中使用了网址：,颜色 尽量使用最少的颜色，一方面减小尺寸，同时以免过于花哨。另外，颜色要与网站整体相关联。文字简洁好发音好记忆好联想好写，好认,文字的抽象 对文字进行适当的抽象处理，可以使Logo更加人性化。,经典欣赏,将车形象化，并和“车”字融为一体，有效传递网站定位和核心产品。颜色使用对比色，对比鲜明，醒目。线条流畅，美观大方,将手机形象卡通化，体现了网站的灵气和网站的类型及主体内容。动感性不强。,二、网站Banner Banner就是我们常说的广告条，主要用于传递信息（开展的活动、新动向、商品信息）。设计原则：颜色文本位置制作方法：Flash层,颜色 色彩鲜艳，用红、橙、蓝、绿、黄等颜色。文字 文字应具有较强的号召力，如奥柯玛冰箱的广告“没有最好，只有更好”。位置 一般放在页眉。,
