8.2,8.3,8.4 网页设计（课件）-《实用美术基础》（高教版第5版）同步精品课堂

网页设计 网页的视觉流程 -第14课时- 中职教育高教版第五版 网页的版式设计 网站设计流程 目录 网页设计的内涵和原则 网页设计的视觉要素 网页的视觉流程 框架式分割 自由式分割 网页的版式设计 客户需求分析 制订策划方案 网站设计流程 项目实施 学习目标 的创意方法 了解网页的视觉流程 了解网页的版式设计 了解网站设计流程 标志的创意方法 课程导入 提问 1.回顾常用的构图法则？ 黄金构图法则、三分构图法则、均衡法则 视觉流程的规划 第一部分 8.2.1 视觉流程的规划 视觉流程是视线浏览页面的移动过程。视觉运动的规律是：一条垂直线在页面上，会引导视线做上下的视觉移动；水平线会引导视线做左右的视觉移动；斜线比垂直线、水平线有更强的视觉诉求力；矩形的视线移动是向四方发射的；圆形的视线移动是辐射状的；三角形则随着顶角的方向使视线产生移动；各种图形从大到小逐个排列时，视线 会强烈地按照排列方向移动。 视觉流程中视觉的流动线极为重要，这条贯穿于页面的主线，引导用户浏览。上部给人轻快、漂浮、积极、高昂之感；下部给人压抑、沉重、限制、稳定的印象；左侧，感觉轻便、自由、舒展，富有活力；右侧，感觉局促却显得庄重。网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最佳视域。 设计时可以把重要信息放在页面的左上角或页面顶部。 视觉流程的类型 第二部分 8.2.2 视觉流程的类型 视觉流程的类型主要分为线形视觉流程和焦点视觉流程。 1.线形视觉流程 线形视觉流程分为直线视觉流程和曲线视觉流程两类。 (1)直线视觉流程 使页面的流动线更为简明，主题内容诉求明确，有简洁而强烈的视觉效果。直线视觉流程表现为三种形式： 竖向视觉流程：给人坚定、直观的感觉。 横向视觉流程：有稳定、恬静之感。 斜向视觉流程：以不稳定的动势引起注意。 8.2.2 视觉流程的类型 (2)曲线视觉流程 曲线视觉流程是由视觉要素随弧线或回旋线运动而形成的。它不如直线视觉流程直接简 明，但更具流畅的美感。曲线视觉流程的形式微妙而复杂，可概括为两种形式： 弧线形(C形)视觉流程：有扩张感和方向感。 回旋形(S形)视觉流程：两个相反的弧线产生回旋，在平面中增加深度和动感。 8.2.2 视觉流程的类型 视觉焦点的倾向与力度对视线起诱导作用。通常以鲜明的形象或文字占据页面某个位置 或完全充斥整体版面，可以集中浏览者的视线，确立视觉心理上的焦点。视觉流程中突出焦点的形式包括以下几点 ： 按照主从关系的顺序，使放大的主题形象成为视觉焦点，以此来表达主题思想； 将文字整体编排，突出主题形象； 在主题形象四周增加空白，使之成为视觉焦点； 向心、离心的视觉运动。 2.焦点视觉流程 焦点是指视觉心理的焦点。每个页面中都有一个视觉焦点，这是设计的重点。焦点是否突出和页面版式编排、图文的位置、色彩的运用有关。 网页的版式设计 第三部分 8.3 网页的版式设计 网页的页面设计讲究的是布局，版面布局也称版式设计， 定义： 网页的版式设计是指将网页的视觉要素(文字、图像、图表、表单等)按一定的艺术规律组织和布局，形成整体的视觉印象，最终实现有效传递信息的视觉设计。 作用： 网页的版式在整个网页中具有重要的作用，它决定了网页的艺术风格和个性特征，并影响着网页之间导航的方向性，起到吸引浏览者阅读、增强网页内容表达效果的作用。 8.3 网页的版式设计 网页版式设计要达到内容和形式的统一，不同主题的网站，应根据网页的目标、对象、功能等 确定网页的版式设计。 网页的版式布局组成网页内容的各个部分的功能可以概括为标题区、导航区、内容区等。设计时应首先根据内容的多少、功能的分类、 页面的大小，设计出分割样式，然后将文字、图像、导航条等各要素纳入分割样式中。网页的版式布局按分割形式分为框架式和自由式。 框架式分割 第四部分 8.3.1 框架式分割 定义： 框架式分割是一种理性的分割形式，是指利用各种不同的方形框架对网页进行分割。框 架式分割适用于信息量大的站点设计。 框架样式几种形式： ①两端均齐式：被纳入不同的方形框架中的文字、图形排列从左端到右端的长度均齐，形成方方正正的面。这种布局使版面效果端正、严谨、美观，文字信息量大，版面空间利用率高， 是门户网站和商业网站常用的样式。 8.3.1 框架式分割 框架样式几种形式： ②单侧对齐式：左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线，很容易与图形 配合。这种编排方式有松有紧，有虚有实，跳动而飘逸，产生富有节奏与韵律的形式美感 左对齐符合人们阅读时的习惯，显得自然；右对齐因不太符合阅读习 惯而较少采用，但显得新颖。 自由式分割 第五部分 8.3.2 自由式分割 自由式分割更具有感性色彩，多用于信息量较小的网站设计。自由式分割多运用均衡原理使页面达到变化统一的效果。 自由式分割常见几种形式： 全景式：多张小图片分散地均匀排列着，视线可以从多角度进入页面，产生开放的轻松感。全景式布局的特点是图片数量不能过少，图片不能过大。 卫星式：小的图标环绕主图均匀展开，稳定与开放感并存。 满版式：以图像充满整个版面。各种视觉要素在图像上自由编排，与图像紧密结合，形成协调统一的关系。 网站设计流程 第六部分 8.4 网站设计流程 8.4.1 客户需求分析 网站设计是软件应用工程，涉及项目管理、页面设计、程序设计、网站测试、资 料收集和文档编辑等多方面的工作，需要不同的人员分工合作才能完成。网站的设计过程大 致可分为客户需求分析、制订策划方案、项目实施三个阶段。 客户需求分析包括对网站的主题和性质的定位客户需求分析还包括对网站的目标对象的分析，了解他们的特点、爱好、习惯、知识结构等，有效地引导其接受自己的信息和观点。 制订策划方案 第七部分 8.4.2 制订策划方案 1. 总体设计 根据客户需求对项目进行整体设计，制订一份规划说明书，网站开发内容包括网站的栏 目和版块、网站的功能和相应的程序等。 2. 策划方案 策划方案要详细说明网站的主题和定位、网站建设计划和合理的建设步骤， 一般包括以下 几部分内容：前言、背景分析、目标分析与网站定位、网站建设内容与结构、技术说明、进度表、后期支持、费用明细。 3.资料收集和编辑 包括图片搜集、拍摄与制作；音视频搜集与制作；文字资料的编辑。 项目实施 第八部分 8.4.3 项目实施 1.整体形象的设计 设计网站的整体视觉形象和首页。整体形象包括标准字、标志、标准色、广告语等。首页设计包括版面、 色彩、图像、动态效果、图标等设计，也包括广告条、菜单、标题、版权说明等模块设计。首页设 计一般设计1~3个设计草图供客户选择，客户确定首页的主体风格后，就可以进入开发制作了。 8.4.3 项目实施 2.开发制作 这一阶段程序员要和网页设计师同时进入开发阶段，两者之间的协调和沟通可以保证开 发工作的顺利进行。 3.系统测试 网站完成后，将网站文件上传到服务器空间，测试速度、兼容性、交互性、链接，记录测试中 出现的问题并解决。 4.后期维护 网站测试合格后，后期还要进行内容更新和维护、响应反馈信息、推广网站等。 总结 总结 练习 1.以下选项中关于视觉流程的定义是正确的是（ ） A.视线浏览页面的移动过程 B. 页面的排版布局 C.页面的交互功能 D. 页面的色彩搭配 【答案】A 解析：视觉流程是视线浏览页面的移动过程 练习 2.焦点视觉流程中的焦点本质是( ) A.页面的背景图案 B.页面的装饰性元素 C.视觉心理的焦点 D. 页面的交互功能按钮 答案：C 解析：焦点是指视觉心理的焦点 练习 3. 网页版式设计的核心是( ) A.提升网页交互按钮的样式 B.调整网页文字大小，搭配网页颜色 C.将网页视觉要素按艺术规律组织布局，实现无效传递信息的视觉设计 D.将网页视觉要素按艺术规律组织布局，实现有效传递信息的视觉设计 答案：D 解析：网页的版式设计是指将网页的视觉要素 (文字、图像、图表、表单等) 按一定的艺术规律组织和布局，形成整体的视觉印象，最终实现有效传递信息的视觉设计. 练习 4. 以下选项中（ ）不是两端均齐式布局的优势 A.适合门户和商业网站 B.排版灵活跳跃 C.文字信息量大 D.空间利用率高 答案：B 解析：两端均齐式的特点是信息量大、空间利用率高，适用于门户和商业网站 练习 5. 网站设计过程大致可分为（ ）个阶段 A.3 个 B.4 个 C.5 个 D.6 个 答案：A 解析：网站设计过程分为客户需求分析、制订策划方案、项目实施三个阶段。 练习 6. 以下选项中（ ）不是策划方案网站建设内容与结构 A.网站的功能 B.网站的数据库 C.背景分析 D.网站的用户友好界面 答案：C 解析：网站建设内容与结构：包括网站栏目与版块的分布、网站的功能、网站的数据库、页面链接结构、网站的用户友好界面等 谢谢观看 THANKS 素材来源于网络，介意联系删除 $