8.1 网页设计概述（课件）-《实用美术基础》（高教版第5版）同步精品课堂

网页设计 网页设计概述 -第13课时- 中职教育高教版第五版 目录 网页设计的内涵和原则 网页设计的视觉要素 学习目标 的创意方法 了解网页设计的内涵和原则 了解网页设计的视觉要素 标志的创意方法 课程导入 提问 1.观察一下两张网页图片说一说同一机构的网页风格为何不同？ 网页设计概述 第一部分 8.1 网页设计概述 网页设计是以平面设计为基础，顺应网络媒体传播与网页浏览的特性所产生的视觉传达创意工作。 网页设计特点： ①具有很强的视觉效果、互动性，受众面广。 ②是区别于报刊、影视的一种新媒体。 ③有传统媒体的优点，同时传播更直接、省力、有效。 网页设计与网页制作的区别： 网页设计是将策划案中的内容、网站的主题模式，结合自己的认识通过艺术的手法表现出来；网页制作是将网页设计师所设计出来的设计稿，按照规范用 html 等语言将其制作成网页格式。 网页设计的内涵和原则 第二部分 8.1.1 网页设计的内涵和原则 网页设计具有媒体性、数字技术性、艺术性三大内涵。 首先，网页设计的载体为互联网，互联网的发展直接影响着网页设计的发展，因此，媒体性是网页设计的基本内涵。其次，网页设计具有很强的技术性， 一个完整的网页设计，往往综合了多种软件技术，这些技术的应用无不取决于网络平台的技术支持。数字技术和网络技术是网页设计的基础。最后，网页设计是科技与艺术结合的产物，是有设计目的的创造性活动，需要遵循艺术的一般规律。 8.1.1 网页设计的内涵和原则 在网页设计的过程中需要遵循主题明确、技术合理、个性突出、形象统一的设计原则。 1.符合受众的心理需求 是网页设计者应遵循的一项基本原则。 2.以用户需求和类别为导向明确主题 8.1.1 网页设计的内涵和原则 3. 技术合理 网页设计既是艺术设计，又是技术设计。 技术合理要注意以下四个方面： ①要注意网页设计的科学性。 ②采用适当的技术表现网页的内容和形式。 ③避免滥用技术。 ④网页设计不能脱离网页浏览的技术环境。 8.1.1 网页设计的内涵和原则 4. 个性突出 在符合主题的前提下，具有独特的艺术风格和艺术个性的网页，具有更强的视觉冲击力， 能在众多的网页中抓住浏览者的视线，提高点击率和信息传播的效率。 5. 形象统一 形象统一是指网页的视觉印象和文化意境的整体性、 一致性（以故宫博物院官网为例，多个页面文化意境的统一使网页之间体现出一种连贯性和整体性。）。 8.1.1 网页设计的内涵和原则 网页设计的视觉要素 第三部分 8.1.2 网页设计的视觉要素 网页是由多个视觉元素组合而成的，各视觉元素的设计效果决定了网页设计的基本风貌。 网页设计的视觉元素主要包括文字、图形图像、 色彩、网页动画、交互式视觉元素(按钮、导航条、表单) 。 8.1.2 网页设计的视觉要素 1.文字编排设计 文字是网站传播信息的主要载体，在版面中占有绝大部分的空间，文字设计能对浏览者产生一定的视觉刺激，营造视觉意境，提高信息传达的效率。 网页的文字，主要包括标题文字、文本文字和图形文字。 8.1.2 网页设计的视觉要素 (1)标题文字 强化标题的方法有以下几种： ①通过字号、粗细、色彩强化。 ②标题周围留出大面积的空白空间，标题会更加突出。 ③利用反差大的衬色，突出标题。 (2)文本文字 文本文字设计被大量用于正文文字和某些导航条。清晰、明确、可读性强是网页文字设计 的基本要求。文本字体最好选用计算机的系统字体，常用的是黑体和宋体。 8.1.2 网页设计的视觉要素 为了避免杂乱无章，使大量的信息便于查询，可采用分组的手段安排整理文字，分组可以 通过空白、下划线和色块实现。 粗字体会给人以强而有力的印象， 体现活力与刚毅的风格。细字体显得优美，体现简练、柔美的风格。 标题文字与正文文字的大小对比，也会影响浏览者对页面的印象。对比越大，画面越活跃；对比越小则越稳重。 8.1.2 网页设计的视觉要素 (3)图形文字 图形文字是将文字的含义图像化，使浏览者能够观图知意的各种文字，主要运用于标题、 文字图标、文字广告。采用图形文字可以取得更为强烈的视觉效果和丰富的页面表现形式，但图形文字的文件体积会明显增大，影响浏览速度。图形文字的创意方法主要有形象化、透叠、 组合。 8.1.2 网页设计的视觉要素 2. 图形图像编排设计 网页图形图像设计最基本的原则是与网页整体协调，主次分明。图片的位置、大小、多少、 形状、色调对形成网页的整体视觉印象很重要。 3. 色彩设计 色彩是设计中最活跃、最多变的元素，能为页面增添变化和情趣，增加了页面的空间感和层次感。设计中需要掌握必要的色彩知识要从主题内容出发，理解色彩在表现主题思想上的视觉和心理感受。二是要以目标对象为主体，研究他们的心理、情感、喜好、性别、年龄、认知度、民族、 地域等因素，这些都是进行色彩设计时作出准确定位的依据。 8.1.2 网页设计的视觉要素 4. 网页动画设计 网页动画主要有以下几种： (1)背景动画 (2)Logo动画 (3)悬停动画 网页动画的设计要点 ①明确的目标。 ②合适的设计风格。 ③流畅自然的动画效果。 ④使用适当的动画技术。 8.1.2 网页设计的视觉要素 5. 交互式视觉元素设计 (1)按钮 按钮设计的要点： ①小巧而醒目。采用与背景对比强烈的色彩以引起注意，但要注意与页面整体协调。 ②具备导航提示的功能，提醒和指引浏览者。应编排在醒目的位置或作出明显提示。 ③采用形象化设计的方法，使按钮功能一目了然，便于信息的查找。 ④趣味化设计可以引起注意，减少视觉疲劳，增加网页的设计情趣。 8.1.2 网页设计的视觉要素 (2)导航条 导航条是由多个按钮或链接图标排列形成的横条或竖条，其主要功能就是导航。导航条 一般位于页面的顶部和两侧。 导航条设计要点： ①网站的同类页面往往用同一个导航条，以便浏览者访问，实现页面风格统一。 ②导航条的内容设计很重要，科学合理的导航路线可以使浏览者方便地浏览。 ③导航条的风格设计要与整个页面协调，色彩和形状应与整个页面和谐统一。 ④导航条文字要清晰可辨，易于识别。 (3) 表 单 表单是用于信息收集和用户反馈的，表单设 计的基本原则是尽量简单。 总结 练习 1.网页设计的基础是（ ） A.影视制作 B.报刊编辑 C. 网络技术 D.平面设计 【答案】D 解析：网页设计是以平面设计为基础 练习 2. 网页设计的载体是（ ） A. 手机 B.电视机 C. 互联网 D. 计算机 答案：C 解析：网页设计的载体为互联网 练习 3. 以下选项中不属于网页设计的视觉元素的是（ ） A. 视频 B. 色彩 C. 图形图像 D. 文字 答案：A 解析：网页视觉元素包括文字、图形图像、色彩等 练习 4. 粗字体给浏览者带来的印象是（ ） A. 柔和细腻 B. 强而有力、活力刚毅 C. 优美、简练柔美 D. 稳重内敛 答案：B 解析：粗字体会给人以强而有力的印象，体现活力与刚毅的风格 练习 5. 网页色彩设计不能单凭设计师喜好的依据是（ ） A.只能从主题内容出发 B.只能以目标对象为主体 C. 设计师审美不专业 D.从主题内容出发和以目标对象为主体 答案：D 解析：设计师 不能单凭自己的喜好设计颜色，一是要从主题内容出发。二是要以目标对象为主体。 练习 6. 导航条的主要功能是（ ） A.隐藏内容 B.增加加载时间 C. 导航 D.仅装饰 答案：C 解析：主要功能就是导航 谢谢观看 THANKS 素材来源于网络，介意联系删除 $