网站界面设计课件.ppt

1、信息工程学院web编程基础综合实践6/9/2022网站界面设计网站界面设计主讲人：常艳芬主讲人：常艳芬6/9/2022网站界面设计概念网站界面设计概念( (Web User Interface) )网站界面设计要能充分吸引访问者的网站界面设计要能充分吸引访问者的注意力注意力，让访问者产生，让访问者产生视觉上的视觉上的愉悦感愉悦感。因此在网页创作的时候就必须将网站的整体设。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式，以及结合网站设计是将策划案中的内容、网站的主题模式，以及结合自己的认识

2、通过艺术的手法表现出来；而网页制作通常就是将网自己的认识通过艺术的手法表现出来；而网页制作通常就是将网页设计师所设计出来的设计稿，按照页设计师所设计出来的设计稿，按照W3CW3C规范用规范用htmlhtml（标准通用标（标准通用标记语言下的一个应用）将其制作成网页格式。记语言下的一个应用）将其制作成网页格式。别名：别名：网站建设网站建设, ,网页设计，网站策划网页设计，网站策划6/9/2022UIUI设计师发展之路设计师发展之路6/9/20226/9/2022WUI（WEB界面设计）模块模块课程课程内容内容目标目标学时学时展示展示WUIWUI软件基础软件基础Fireworks软件的基本构成、矢

3、量工具和位图工具、WUI用户界面及广告设计。了解WUI常用软件工具、功能的使用；理解企业及客户的基本要求；掌握WUI界面模块的设计。72Dreamweaver建立站点、添加页面元素、使用CSS样式及交互行为。FlashFlash中的动画制做原理与技巧，典型WUI商业广告中的Flash技术与实现。WUIWUI界面设计界面设计WEB界面设计WEB界面的分类，企业网站界面、门户网站界面、专题活动界面的分析与设计。了解WUI标准设计规范及风格；理解企业客户对设计的需求和期望值；掌握网站及软件界面设计的技能和技巧。24PC客户端软件界面设计PC客户端软件界面的类型，企业OA办公软件、触摸屏管理展示系统界

4、面的分析与设计。WEBWEB标准化布局标准化布局（X）HTML/HTML5语言HTML语法与常用标签的详解，包括布局标签，表格标签，表单标签等。了解网站布局的三大核心部分：结构标签，修饰语言和行为语言；理解CSS修饰的用途及意义；掌握基于WEB标准的网站结构搭建、WEB界面外观美化和主流浏览器兼容。48CSS样式表CSS语法与常用属性的详解，使用CSS对网站中各个模块进行修饰美化。布局技巧与浏览器兼容对页面布局结构进行深入的分析。系统的讲解浏览器兼容的处理解决办法，并带领学生完成各种网站布局实训。阶段实训阶段实训中小型企业网站项目华为技术有限公司企业整站设计实训。了解实训方案及需求；理解实训对

5、于学生就业的积极意义；掌握独立完成企业级应用项目的技能。32讲解提纲 、3C原则 2、颜色的意义 、UI设计色彩搭配 、安全配色指南 、其它色彩理论 、建议与经验 、学习资料推荐6/9/20226/9/20223 3原则原则6/9/2022网站界面设计网站界面设计3C原则Concision(简洁)Coherence（一致性）Contrast(对比度)6/9/20226/9/20226/9/20226/9/20226/9/20226/9/2022颜色的意义颜色的意义6/9/2022红色红色红色是红色是代表爱情和激情的颜代表爱情和激情的颜色。红色是很强势的颜色，当它和其他颜色相色。红色是很强势的颜

6、色，当它和其他颜色相遇时，比如搭配黑色，可以创建非常强势的感觉。遇时，比如搭配黑色，可以创建非常强势的感觉。6/9/2022橙色橙色橙色代表了温暖，橙色代表了温暖，但是并不像红色那样咄咄逼人。橙色能够创建一个有趣的但是并不像红色那样咄咄逼人。橙色能够创建一个有趣的氛围，因为它充满了活力，而且橙色创造出的活跃气氛并没有危险的感觉。橙色氛围，因为它充满了活力，而且橙色创造出的活跃气氛并没有危险的感觉。橙色可以与一些健康产品搭上关系，比如维生素可以与一些健康产品搭上关系，比如维生素C，毕竟橙子里也有很多维生素，毕竟橙子里也有很多维生素C。6/9/2022黄色黄色提到黄色，经常可以联想到提到黄色，经常

7、可以联想到太阳和温暖太阳和温暖。使用橙色的时候，可以创造出一种夏天的好玩的感觉，黄色则带给人口渴的使用橙色的时候，可以创造出一种夏天的好玩的感觉，黄色则带给人口渴的感觉，所以经常可以在卖饮料的地方看到黄色的装饰。黄色也可以和懦弱与恐惧感觉，所以经常可以在卖饮料的地方看到黄色的装饰。黄色也可以和懦弱与恐惧联系起来，这个则是因为以前联系起来，这个则是因为以前“yellow”这个词也代表着这个意思。当黄色与黑这个词也代表着这个意思。当黄色与黑色搭配在一起时，十分吸引人的注意力，一个绝佳的例子就是很多国家的出租车色搭配在一起时，十分吸引人的注意力，一个绝佳的例子就是很多国家的出租车都采用这种配色。都采

8、用这种配色。6/9/2022绿色绿色在西方国家，在西方国家，绿色是钱的颜色，绿色是钱的颜色，这与他们的这与他们的文化和财富文化和财富有关。因为大多数有关。因为大多数植物都是绿色的。绿色也代表着经济增长和健康。绿色经常用作一些保健食植物都是绿色的。绿色也代表着经济增长和健康。绿色经常用作一些保健食品的品的LOGO，因为看起来就十分贴近自然。绿色还意味着利润和收益。如果，因为看起来就十分贴近自然。绿色还意味着利润和收益。如果搭配上蓝色，通常会给人健康、清洁、生活和自然的感觉。搭配上蓝色，通常会给人健康、清洁、生活和自然的感觉。6/9/2022蓝色蓝色蓝色是一个神奇的颜色，蓝色是一个神奇的颜色，因为

9、不同明度的蓝色会给人不同的感受、想法和情绪因为不同明度的蓝色会给人不同的感受、想法和情绪。如下图中所示，深蓝色可以给人一种悲伤的感觉，让人联想起伤心时怎么听。如下图中所示，深蓝色可以给人一种悲伤的感觉，让人联想起伤心时怎么听都不够的蓝调音乐。而浅蓝色则通常会让人联想起天空和水，给人以提神、自都不够的蓝调音乐。而浅蓝色则通常会让人联想起天空和水，给人以提神、自由和平静的感觉。蓝天永远都是平静的，水流可以冲走泥土，清洗伤口，所以由和平静的感觉。蓝天永远都是平静的，水流可以冲走泥土，清洗伤口，所以蓝色也代表着新鲜和更新。蓝色给人冷静的感觉，会帮助人放松下来。蓝色也代表着新鲜和更新。蓝色给人冷静的感觉

10、，会帮助人放松下来。6/9/2022紫色紫色紫色总是让人不禁想起皇室成员的长袍。紫色总是让人不禁想起皇室成员的长袍。紫色可以更多地与浪漫、亲密、紫色可以更多地与浪漫、亲密、柔软舒适的质感产生联系。柔软舒适的质感产生联系。紫色给人一种奢华的感觉，也有一种神秘感。紫色给人一种奢华的感觉，也有一种神秘感。下面这个葡萄酒网站就是极好的例子。下面这个葡萄酒网站就是极好的例子。6/9/2022黑色黑色黑色通常与死亡有关，尤其是在美国。它可以代表腐坏，因为很多食物腐坏变质以后就是黑色的。黑色也代表邪恶，因为是白色的对立颜色，而白色通常代表着纯洁美好善良。黑暗和未知也会给人焦虑的感觉。很多图像中，黑色表达了抑

11、郁、绝望和孤独。虽然黑色有很多负面的含义，但是黑色也是一个万能色彩，当黑色遇上其他颜色的时候会产生其他的意义。比如当黑色邂逅金黄色，就可以给人一种奢华、高档的感觉；当黑色偶遇银灰色，则会给人一种成熟稳重的感觉。下面的网站就完美诠释了这一点。6/9/2022白色白色白色通常与医院联系在一起，因为医生们都是穿着白大褂的，而且医院内部白色通常与医院联系在一起，因为医生们都是穿着白大褂的，而且医院内部的装修通常也是白色的。此外，宗教绘画有时候也是没有色彩的，白色也代的装修通常也是白色的。此外，宗教绘画有时候也是没有色彩的，白色也代表着圣洁。白色通常给人干净的感觉，比如白色的床单和衣服都让人感觉很表着圣

12、洁。白色通常给人干净的感觉，比如白色的床单和衣服都让人感觉很干净。也可以代表棉花和柔软的云朵。心理健康相关的事物也可以选用白色干净。也可以代表棉花和柔软的云朵。心理健康相关的事物也可以选用白色，白色也同样适用于卫生、清洁相关的设计。比如下面这个网站，就很好地，白色也同样适用于卫生、清洁相关的设计。比如下面这个网站，就很好地利用了白色。利用了白色。6/9/2022总结总结作为一名设计师，了解色彩是一件必不可少的事儿。在设计的时候应该慎作为一名设计师，了解色彩是一件必不可少的事儿。在设计的时候应该慎重地考虑和选用颜色。通过不同的颜色，可以创造出不同感觉的图像。合适的重地考虑和选用颜色。通过不同的颜

13、色，可以创造出不同感觉的图像。合适的组合可以获得关注，通过视觉传达设计师所想，进一步拉近设计师与观众的距组合可以获得关注，通过视觉传达设计师所想，进一步拉近设计师与观众的距离，让图像更具力量。如果之前并不仔细考虑用色，现在开始，应该培养对于离，让图像更具力量。如果之前并不仔细考虑用色，现在开始，应该培养对于色彩的感觉。相信客户会看到一个不一样的你，你的设计作品将会通过颜色建色彩的感觉。相信客户会看到一个不一样的你，你的设计作品将会通过颜色建立联想，更好地传达信息。立联想，更好地传达信息。6/9/2022Page 256/9/20226/9/20226/9/20226/9/20226/9/202

14、26/9/20226/9/20226/9/20226/9/20226/9/20226/9/20226/9/2022初学者的初学者的6 6条网页设计安全条网页设计安全配色指南配色指南6/9/20221. 配色方案是画布，不是画配色方案是画布，不是画网页设计中最基本的原则之一是，不管你花多长时间创网页设计中最基本的原则之一是，不管你花多长时间创造一个华丽的设计，其最终的角色都是这场秀中真正的明星造一个华丽的设计，其最终的角色都是这场秀中真正的明星内容的衬托内容的衬托。网页设计中不应该让配色比内容展示更加。网页设计中不应该让配色比内容展示更加“热闹热闹”。你的设计应该是在后台的，帮助将网站的内容推向

15、前台。你的设计应该是在后台的，帮助将网站的内容推向前台。6/9/20226/9/20222. 从简单的灰度模式开始从简单的灰度模式开始你可以为你的主背景和文本从无数的色彩组合中进行挑你可以为你的主背景和文本从无数的色彩组合中进行挑选。然而，我的建议是先掌握最简单的，选。然而，我的建议是先掌握最简单的，白色或浅灰色背景白色或浅灰色背景搭配深灰色的文本。搭配深灰色的文本。这种组合你基本保证了为访客提供可读性，并允许基于这种组合你基本保证了为访客提供可读性，并允许基于内容的文本和图像进入前景。内容的文本和图像进入前景。利用一些示例内容制定一个基本的灰度布局，例如：利用一些示例内容制定一个基本的灰度布

16、局，例如：6/9/2022建议：建议：一般来说，你应该避免使用纯黑的文本纯黑的文本，深灰色深灰色相对来说更易阅读。一个相对舒适的范围是#333333至至#666666。基于上述，在任何文本主体下，最保险的背景色是全白#FFFFFF。对于其他的背景元素，背景色的范围可以从#FFFFFF至至#CCCCCC.再次声明，这些并不是你必须使用的颜色准则，仅仅只是你可以开始安全设计的一些指南。6/9/20223. 只选择一种强调色只选择一种强调色配色方案出错配色方案出错的最常见的地方就是颜色使用过多颜色使用过多。你使用的颜色越多，你想要将它们都保持在控制中就越困难。所以一开始，在灰度基础之上只添加一种额外

17、的颜色只添加一种额外的颜色来强调诸如链接、某些标题、菜单、按钮等等元素链接、某些标题、菜单、按钮等等元素是很有用的。你的强调色可以是蓝色、绿色、红色或其它任何你喜欢的颜色蓝色、绿色、红色或其它任何你喜欢的颜色。6/9/2022通常做法：通常做法：开始在你的基础图上拉一个强强调色的矩形框调色的矩形框，这样你可以衡量颜色是否与页面上所有的元素匹配。然后打开颜色选择器，选择在颜色面板右上角右上角四分之一四分之一中心位置中心位置的颜色。6/9/2022色相的选择：色相的选择：上下移动滑块，选择选择一个你认为适合你设计的颜色。至此，你已经使用了三种基本颜色：背景色，文本色，以及一种强调色背景色，文本色，

18、以及一种强调色。怎样选择怎样选择“色相色相”？简而言之，色相就是一种基本色。当你上下移动滑块的时候你就会看到你颜色选择器中的“H”值在不断变化。 “H代表色相，代表色相，一旦你选择强调色，文本框中数值就是色相的值。6/9/2022. 如果有疑问，选择蓝色如果有疑问，选择蓝色如果你对选择什么强调色有任何疑问，请使用如果你对选择什么强调色有任何疑问，请使用蓝色蓝色。蓝。蓝色通常是最灵活的颜色，适合多数的网站类型。如果你要选色通常是最灵活的颜色，适合多数的网站类型。如果你要选择特别的蓝色，你可以选择择特别的蓝色，你可以选择深蓝色（深蓝色（H值值235）至浅绿色（）至浅绿色（H值值190）的范围）的范

19、围以保证自己在安全的领地。以保证自己在安全的领地。紫色和紫色和黄色黄色之类的颜色可以是很活泼的，但是如果使之类的颜色可以是很活泼的，但是如果使用不当的话，立马会变得很花哨。用不当的话，立马会变得很花哨。6/9/2022假如你在按钮或任何其他有文字的区域使用假如你在按钮或任何其他有文字的区域使用了强调色，也要了强调色，也要相应地改变文本的颜色相应地改变文本的颜色。在这个。在这个例子中，将强调色区域之上的文字改成了白色。例子中，将强调色区域之上的文字改成了白色。在下面的布局示例中，选择值为在下面的布局示例中，选择值为205的色相的色相。当你已经选定了强调色，将它添。当你已经选定了强调色，将它添加到

20、任何你认为必需的位置。加到任何你认为必需的位置。6/9/2022. 为强调色添加变化为强调色添加变化一旦选定了强调色，将色相（一旦选定了强调色，将色相（H）滑条位置保持不变。）滑条位置保持不变。做法：做法：在颜色选择器上强调色周围拖动选色点来创建变色。6/9/2022在以下这些元素上在以下这些元素上使用变色使用变色：悬停效果悬停效果边框边框强调色上的文本强调色上的文本渐变渐变光和阴影的效果光和阴影的效果6/9/2022.避开调色面板右上角的位置避开调色面板右上角的位置颜色选择器上右上角的位置是颜色选择器上右上角的位置是高纯度的颜色高纯度的颜色。最好去尝。最好去尝试使用试使用更缓和的颜色更缓和的

21、颜色。这就是为什么在第三点让你选择这就是为什么在第三点让你选择右上角四分之一中心右上角四分之一中心位位置的颜色置的颜色，以确保以一种相对，以确保以一种相对柔和的颜色柔和的颜色开始。开始。为了说明这一点，看一下假如只改变设计的色相，不再为了说明这一点，看一下假如只改变设计的色相，不再动颜色选择器，会是什么效果。动颜色选择器，会是什么效果。6/9/2022遵循遵循一般的指南避开颜色面板上右上角的位置来进行调色。一般的指南避开颜色面板上右上角的位置来进行调色。6/9/2022色彩理论的其它方面色彩理论的其它方面6/9/2022、饱和度和明度、饱和度和明度当你在颜色选择器上拖动选色点的时候，你会看到当

22、你在颜色选择器上拖动选色点的时候，你会看到“S”和和“B”的值在改变，这分别代表的值在改变，这分别代表“饱和度饱和度”和和“亮度亮度”。同时你会也看到色相的值保持不变。所以你是同时你会也看到色相的值保持不变。所以你是通过改变基础色的饱和度和亮度来创建变色的。通过改变基础色的饱和度和亮度来创建变色的。 6/9/2022、饱和度和色彩、饱和度和色彩饱和度生动地表达了你的颜色。举个例子来说，想象一下饱和度生动地表达了你的颜色。举个例子来说，想象一下“我的白衬我的白衬衫被溢出的红酒渗透了衫被溢出的红酒渗透了”。在颜色选择器上，饱和度取决于有多少的白色。在颜色选择器上，饱和度取决于有多少的白色与你的基本

23、色进行混合。白色越少，饱和度越高。与你的基本色进行混合。白色越少，饱和度越高。当你向右拖动选色点的时候，你减少了白色的量，提高了饱和度，因当你向右拖动选色点的时候，你减少了白色的量，提高了饱和度，因此此“S”值上升值上升了。当你向左拖动选色点的时候，你增加了白色的量，降了。当你向左拖动选色点的时候，你增加了白色的量，降低了饱和度，因此低了饱和度，因此“S”值下降了值下降了。 这种将基本色与白色混合的方式也叫做创建一种这种将基本色与白色混合的方式也叫做创建一种“色彩色彩”。这个词来自于颜料。这个词来自于颜料混合，就是将白色的颜料与彩色的颜料进行混合混合，就是将白色的颜料与彩色的颜料进行混合。6/

24、9/2022、亮度与色度、亮度与色度亮度是往你的颜色中混合多少亮度是往你的颜色中混合多少黑色黑色。黑色越少，亮度越大。黑色越少，亮度越大。当你向上拖动选择点的时候，你减少了黑色的量，提高了亮度，当你向上拖动选择点的时候，你减少了黑色的量，提高了亮度，因此，拾色器上的因此，拾色器上的“B”值就上升了。当向下拖动选择点的时候值就上升了。当向下拖动选择点的时候，你增加了黑色，你增加了黑色，“B”值就下降了。值就下降了。 这种将这种将基本色与黑色混合基本色与黑色混合的方式也叫做创建的方式也叫做创建“色度色度”。这同。这同样来自于颜料混合，就是将黑色的颜料与彩色的颜料进行混合。样来自于颜料混合，就是将黑

25、色的颜料与彩色的颜料进行混合。6/9/2022、色调、色调当你用当你用灰色混合灰色混合基本色时就创建了基本色时就创建了“色调色调”。当你从色板的。当你从色板的右上角挪出的时候，你同时降低了饱和度和亮度，也就是同时右上角挪出的时候，你同时降低了饱和度和亮度，也就是同时增加了白色和黑色（灰色），也就创建了色调。因此基本上任增加了白色和黑色（灰色），也就创建了色调。因此基本上任何时候只要你的饱和度和亮度都不到何时候只要你的饱和度和亮度都不到100%，这就是一种色调。，这就是一种色调。同样，这个术语来自于颜料混合，将灰色颜料与一种彩色同样，这个术语来自于颜料混合，将灰色颜料与一种彩色颜料混合。这也就是

26、词语颜料混合。这也就是词语“调淡调淡”的由来。的由来。6/9/2022、单色配色方案、单色配色方案“单色单色”配色方案是使用基本色以及基于基本色调整颜色的浓淡配色方案是使用基本色以及基于基本色调整颜色的浓淡、阴影及色调来进行扩展。、阴影及色调来进行扩展。因此通过挑选一种强调色以及它的变色，实际上已经创建了单色因此通过挑选一种强调色以及它的变色，实际上已经创建了单色的配色方案。的配色方案。 6/9/2022接下来呢？接下来呢？6/9/2022第一：第一：在在灰度基础上灰度基础上继续练习你的继续练习你的单色配色方案单色配色方案直到你已经直到你已经非常自信。试着用不同的色相作为你的非常自信。试着用不

27、同的色相作为你的强调色强调色来进行创作来进行创作，尝试在使用中，尝试在使用中改变饱和度和亮度改变饱和度和亮度。6/9/2022第二：第二：当你觉得得心应手的时候，继续添加一个当你觉得得心应手的时候，继续添加一个额外的强调色额外的强调色。建议你在第一次尝试的时候使用建议你在第一次尝试的时候使用橙色橙色和蓝色和蓝色，因为它，因为它们是相处最和谐的们是相处最和谐的“二人组二人组”。然后尝试。然后尝试绿色和绿色和蓝色蓝色，在，在我的经验中，这是第二简单的。这些组合是最容易打动客我的经验中，这是第二简单的。这些组合是最容易打动客户的。户的。6/9/2022推荐网址：推荐网址：http:/ 1 在网络上查

28、找网站策划书在网络上查找网站策划书，熟悉规划书的结构及内熟悉规划书的结构及内容，写报告时参考。容，写报告时参考。、参考、参考”网站结构分析网站结构分析- -参考参考（可从（可从10.0.0.1510.0.0.15 课课程资源程资源 webweb综合实践课程资源菜单下下载综合实践课程资源菜单下下载 ）”文文件，自行策划某网站，撰写网站结构分析，学号件，自行策划某网站，撰写网站结构分析，学号+ +中文中文姓名姓名压缩上传到压缩上传到10.0.0.1510.0.0.15，截止本周日。，截止本周日。、根据所学的、根据所学的WUIWUI知识完成网站主页和内容页的效果知识完成网站主页和内容页的效果图制作（图制作（.psd.psd），下周日之前上传到），下周日之前上传到10.0.0.1510.0.0.15。作业：作业：6/9/2022谢谢 谢！谢！