《网页界面设计》—课程教案.docx

《《网页界面设计》—课程教案.docx》由会员分享，可在线阅读，更多相关《《网页界面设计》—课程教案.docx（13页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、网页界面设计课程教案授课课题：第一章网页设计的概论授课时间：_月 日 第一周 星期一第一节 授课班级：教学目标、要求：掌握网站的基础概念，熟悉网站的分类，理解网页的制作整个流程及团队 协作。教学重点、难点：理解网站的基本理论知识。教学方法：讨论、演示结合教学手段：多媒体教学教时安排：教学过程：一、导入一一讨论同一个网址在不同的电脑上看效果为什么不一样？影响网页界面视觉效果的因素有哪些？二、知识点讲解1.界定网站的基本概念网页VS网站VS主页网页是以提供人机交流便利为目的的中间媒体。网站是由多个网页用超链接的方式组成的有机整体。主页也称首页，是用户访问一个网站时看到的第一个页面。静态网页VS动态

2、网页静态网页是指不用程序(如Asp,Jsp,PHP等)而直接制作成HTML页面。2、网站的分类网站按照主体性质不同，可大概分为：门户类、垂直类、电子商务类、社交类、企业类和个人类。门户类网站是以提供信息资讯为主要目的，类似于网络世界的“超市”的综合网站。垂直类网站是聚焦于某些特定的领域，提供该领域的深度信息和相关服务的网站。电子商务类网站是企业、机构或者个人实施电商服务或交易的窗口。它的用户为供应商、客 户或者企业产品的消费群体。社交类网站也称为SNS (Social Network Site)是帮助用户建立社会性网络关系的互联网平 台。企业类网站是企业向用户宣传产品和服务的互联网平台，是当今

3、时代企业对外的窗口。个人网站可以说是个人在网络上的家，可以存放个人信息资料，让更多的网页浏览者了解你, 相互结识成为网络中的朋友。3、网站的商业模式流量变现模式；佣金与分成；增值服务收费；直销模式；4、网页界面空间的影响要素授课课题：第五章网页界面设计中的视听元素授课时间：_月 日 第一周 星期第 节 授课班级：教学目标、要求：掌握网站界面中的各视听元素。教学重点、难点：掌握网页界面中各基本元素的特点；能对网页界面中各信息内容的特点及 优先级合理选择表现形式。教学方法：讨论、演示结合教学手段：多媒体教学教时安排：教学过程：一、导入讨论网页界面设计中的视听元素有哪些，可以归纳为几类。二、知识点讲

4、解.文字在网页界面设计中，文字是最重要的构成元素之一，具有比其他视觉元素更加易于辨识的信息传达的明确性。字体的选择：衬线字体与非无衬线字体；文字的可读性：字体样式、间距；文字编排的艺术性：特殊字体或艺术字体最好以图片的方式置入网页。1 .图片图片是随着文字最早进入网络多媒体的对象，有效的图片设置，能极大地丰富、美化网页界面。图片的选择：摄影类与矢量类；图片的格式：位图格式与矢量图格式；图像的肌理：由于物体的材料不同，表面的排列、组织、构造等不同，因而产生粗糙感、光滑、软硬感。不同的质感和肌理，会使人产生不同的心理感受。2 .色彩色彩的模式:Cmyk, Rgb；色彩的情感：不同的颜色有不同的色彩

5、情感，能传递出不同的视觉印象，大多数网站都有自己的主色调，同样的主色搭配不同比例的辅助色也会出现不同的心理感受。色彩组合：按照色彩的多少来分类，大致分为无色系配色、单色配色、2-3色配色、多 色配色三种类型。3 .多媒体视频及其应用范围；音频及其应用范围；,动效从技术的角度分类可分为gif, flash与程序实现的动画。讨论：不同类型的网站是如何运用色彩情感属性与主题之间是如何呼应的？三、上机实践（课时）一一结合自身的兴趣爱好，为自己设计一个个人网站，合理的规划视 听元素，能表现出自己的性格特征。授课课题：第六章网页视觉风格授课时间：月日 第一周 星期一第一节 授课班级：教学目标、要求：掌握网

6、页视觉设计要点；理解不同的网页视觉风格。教学重点、难点：掌握不同视觉风格的网页适用于哪些不同类型的网站；在设计不同风格的 网页时能将网页视觉设计要点纳入其中。教学方法：讨论、演示结合教学手段：多媒体教学教时安排：教学过程：一、导入一一讨论网页界面设计中的视听元素有哪些，可以归纳为几类。二、知识点讲解.网页视觉设计要点1 .简约风格.影像风格2 .手绘风格.复古风格3 .立体风格三、上机实践（课时）一一接着上一次的作业，为自己的个人网站选择合适的视觉风格。授课课题：第七章网页静态页面制作授课时间：_月 日 第一周 星期第 节 授课班级：教学目标、要求：掌握Photoshop切图技巧；理解html

7、、css简单代码；掌握div+css页面 布局；掌握javascript脚本基础。教学重点、难点：熟练运用前端代码将已有的设计稿转换为静态网页。教学方法：练习、演示结合教学手段：多媒体教学教时安排：教学过程：一、知识点讲解一一PS网页切图软件实战案例html基础1) html简介html文档结构html文档主要由3部分组成：html部分、文档头head、文档体body：3)常用标签标题标签、段落标签、链接标签、图像标签、文本格式化标签、表格标签1. css基础css简介1) css编码规范一个css语法规则由两部分组成：选择器、一条或者多条样式语句。selector declarationl;

8、 declaration2; declarationN selector是选择器，表示需要改变的html元素。2) css属性选择器设置标签的布局。css定义了几种选择器：id选择器、类选择器、属性选择器等。4)网页中应用样式表这里介绍三种在html页面中插入css样式表的方法：一是链入外部样式表；二是内部样式 表、三是内嵌样式。5) css常用属性CSS背景、CSS文本属性、CSS字体属性6) css盒模型margin-topborder-topborder-rightg padding-topa.Q.contentI用 padding-bottomborder-bottommargin-b

9、ottomjavascript脚本基础1) JavaScript 的简介2)html 中使用 JavaScript3) javscript 的变量JavaScript 操作 html 标签4) JavaScript 的注释6)函数7) JavaScript的运算符JavaScript的三种流程控制8) JavaScript 与 html 的交互5.综合实训三、上机实践(32课时)创建自己的企业网站设计其首页，并用代码实现其静态页面的设计，含幻灯片动效。作业布置：创建自己的企业网站、理清其网站功能及产品服务，完成设计稿，并用代码实现其静态页面 的设计。分辨率与显示器；浏览器5、网站开发的团队与协

10、作前端开发工程师产品经理.后端开发工晨测试工猿网站开发团队. r 二 、网站策钮箫师.交互设计师UI设计师运维工程师6、网页的制作流程作业布置：1 .策划某一领域的垂直电商网站，对比其他的同类网站分析优劣势，规划其主要功能及商 业模式。2 .选择两类网站，每类各收集自己喜爱的20个网站，写出推荐原因。授课课题：第二章网页界面设计的内容授课时间：_月 日 第一周 星期一第一节 授课班级：教学目标、要求：理解网页界面设计的各大内容教学重点、难点：掌握网页中广告设计表现的方法技巧。教学方法：讨论、演示结合教学手段：多媒体教学教时安排：教学过程：一、导入一一讨论.以新浪网(http:/www. sin

11、a. com. cn/)为例,网页界面中有哪些内容？1 .试从一个维度进行分类，并举例说明。三、知识点讲解一一按照网站提供的功能诉求给界面内容分类，可大致分为网站形象、导航、信息内容、广 告、表单五大设计元素。1 .网站形象网站形象是指网站的整体风格与创意设计，它需要遵循企业的视觉识别系统(简称VI, Visual Identity System),通过统一的图形、色彩、字体等视觉元素来反映企业品牌的经营理 念与精神文化。视觉识别系统是以log。、标准字、标准色、宣传语等为核心展开的完整的、 系统的视觉表达体系，网站是系统中应用设计的一部分，具体体现在网站log。、网站色彩、 网站的图片形象等

12、方面。思考：网站的logo是静态的还是动态的？网站logo可分为静态logo与动态logOo静态logo是指由文字或是图文合成的logo,是 log。较常见的表现形式。动态log。则一般由图形、文字、动效、声音等多种形式合成，以 画面切换的形式来演绎。作为网站形象宣传的图片有的也出现在首页前的欢迎页面或某些加载页面。2 .导航系统导航是网站中的指路标，是网页界面设计中最重要的内容。从表现形式上来划分，网站 导航系统主要包括全局导航、局部导航、搜索引擎导航、面包屑导航和其他辅助导航五种类 型。全局导航就是网站中的一级菜单，也是我们通常所说的主导航。传统的全局导航菜单是顶部、底部或侧面固定。随着时

13、代的发展，全局导航也出现了更多新的形态，如顶部与底部 兼备，不过两者有主次之分，还有汉堡包导航等。局部导航常常与全局导航协同工作，是全局导航的补充和延伸。实际上局部导航就是网 站一级菜单下的二级菜单或三级菜单，其位置时常会被折叠隐藏。建议层级最好不要超过三 层。搜索引擎导航实际上就是搜索框，一般放置在网站的顶部或主导航附近，方便用户直接 通过搜索关键字查询结果。面包屑导航又称作层级菜单，它表明当前页面所处的位置及产品的从属关系，特别适用 于层级关系较深的网站。它往往位于全局导航与正文之间的左侧或者右侧的位置，一般样式 是用链接文字加上“”，横向排布。其他辅助导航是提供一些全站导航与辅助导航不能

14、快速到达的相关内容的快捷方式，多 以图片、图标、文字及视频链接等形式出现。其形式可以是静态，亦可以是动态。3 .信息内容用户浏览阶段用户浏览阶段首页信息展示是整个网站的全貌图，一般起到信息展示和分流的作用，是对用户对信息 进行初选的第一步，因此在首页内容设计时应当浓缩网站信息，筛选核心与重点，以吸引目 标用户易于浏览、理解的方式呈现出来。列表页面往往是通过首页中感兴趣的分类导航链接进入的,一个网站的列表页面有可能 不只一个。用户根据页面的标题或图片进行浏览、对比，进而选择目标进入。详细页面是用户浏览的最后阶段，此时的页面内容通常都聚焦在一个点上。所以，我们 设计此页面时，应按照用户的需求和浏览

15、习惯，需要对信息内容的重要性和逻辑性进行梳理。 4.广告网页广告按照广告的表现形式来分主要可以分为：旗帜广告，弹出式广告，浮动广告, 文字链接式广告。随着互联网技术的开发，将会出现更多的广告类型。思考：鲁班系统通过大数据运算已经对banner的设计带来极大的便利，设计师需要掌 握哪些技能才能不在人工智能时代失业呢？Banner中的版式设计的类型：左右结构、上下结构、前后结构。四、上机实践（2课时）以淘宝首页中的两处banner区域设计广告,广告主题、内容自拟。T主颂市场女装/男装/内衣 笈部/箱包/配件 童装玩具/孕产/用品 家电/数码/手机 美校/洗护/保健品 珠宝/眼潼/手表 运动/户外/

16、乐器 游戏/动漫/影视 美食/生鲜/等食 鲜花/宠物/衣资 房产/装修/建材 家具/家饰/家纺 汽车/二手车/用品 办公/DIY/五金电子 百货/餐厨/豕庭保健空上衣位新款连衣裙四件套XhBTtt时尚女畦taM半身傅男士外食增纸行，记录仪新款男鞋（机更多，THAU天后理想。活上天*O O落400送400湖牌男装折扣榜将案女装会大员轻拿反李特惠加让斯敦女装优患天豳聚划m 天市 可速拍卖 中I【点击购买GlOpO I 天指 6 78尖货特卖低至79酉宝入学云iMTK布内衣年中促津贴30（m30降价了 88元两件夏衣橱换新季Hr你好AiS：S_LSTVtfcB X施行篇庆 至险6出e回充话费d公益阿

17、公升发布“环境舱时好店直播S1gs恃色作业布置：在完善上机实践中的淘宝首页banner设计的基础上设计两个动图banner,广告主题、内容 自拟。注意视觉的层次性。授课课题：第三章信息架构设计授课时间：_月 日 第一周 星期第 节 授课班级：教学目标、要求：理解网站中的用户体验设计；掌握网站中的信息架构设计。教学重点、难点：理解网站中用户体验与网站架构之间的关系；掌握信息结构的类型。教学方法：讨论、演示结合教学手段：多媒体教学教时安排：教学过程：一、导入一一讨论.以本校的校园网为例，有哪些是你觉得不合理的地方？为什么？1 .试着给不合理的地方提出建议。二、知识点讲解一一问题推导，你之所以觉得不

18、合理就是因为存在着用户体验。1 .以用户为中心的网页设计用户体验包含了一个产品或系统被使用之前、使用期间和使用之后的全部感受。Jesse James Garrett在用户体验要素：以用户为中心的产品设计中将用户体验由抽象到具 体分为五个层次：战略层（产品的目标）、范围层（功能组合、信息内容的详细描述）、结构 层（信息空间中内容元素的分布）、框架层（用户如何与产品功能进行交互）、表现层（产品 的外观设计）。以用户为中心的方法适用于网页设计生命周期的各个阶段：第一阶段：用户研究。此阶段的目的是建立该该网站的用户类型，确定用户的需求。第二阶段：需求分析。此阶段的目的是通过市场调查，来梳理网站的功能特

19、点，确定该 网站最终要达到的效果。第三阶段：设计实现。此阶段着眼于网站的设计与制作，从界面内容架构、网站界面风 格分析、原型设计及详细设计，一一落实细节。第四阶段：评估与改进。此阶段的目的是收集用户对网站设计的体验反馈，有针对性地 及时改进。以用户为中心的设计方法及流程国内外研究有很多，如问卷调查、访问调研、数据分析、 人物角色、故事板、卡片分类、眼动测试、焦点小组和可用性测试等。自主学习：对比以用户为中心的设计研究方法的特点及适用范围。2 .网站的信息结构信息结构设计为信息内容提供了情境，它的目的是将若干信息有机的组织在一起，使用 户能够更容易地查询获取所需信息。网站信息结构的核心要素包括网

20、站的组合系统、导航系 统、搜索系统、标识系统。在组织方式中最为关键的是组织体系，也称分类依据。按照精度来划分，组织体系分为 精确性组织体系与模糊性组织体系两种。常见的精确性组织体系有：按字母顺序、按年代顺序、按地理位置。常见模糊性组织体系有：按主题，按任务、按用户、按隐喻。在网站界面信息中，从组织方式的维度出发，常见的有四种类型：层次结构，矩阵结构, 线性结构，自然结构。层次结构也叫树形结构，是最常见的网站信息架构模式。矩阵结构中的“节点”如同页面，而“轴”则是用户到达目标页面的方式。线性结构是以时间为轴，设定好起点和终点后，中间所能发生的所有的事情都被设计成 一种线性的体验。自然结构不会遵循

21、任何一致的模式。节点是逐一被连接起来的，同时这种结构没有太强 烈的分类概念。3 .网站整体结构到界面架构1）确定网站的导航：理解了网站的信息的组织方式与信息结构后，接下来就是确定网 站的导航栏目，再将信息对号入座的放置到它所在的功能页面中；2）提高用户体验的交互技巧：聚焦核心、排定信息优先级、不重要和不常用的功能隐 藏或转移；三、上机实践（课时）一一自己找一个电商网站，为其策划并设计双十一活动页面。作业布置：在完善上机实践中的电子商务网站活动页面的基础上，完善其他关联的banner及产品详细 页面设计。授课课题：第四章网页界面的布局授课时间：_月 日 第一周 星期第 节 授课班级：教学目标、要

22、求：掌握网站界面中的布局分类；掌握网站界面中不同布局方式的优缺点。教学重点、难点：掌握各种布局方式的特点，根据不同网站主题，活学活用；能设计并制作 网页的低保真原型。教学方法：讨论、演示结合教学手段：多媒体教学教时安排：教学过程：一、导入讨论你见过哪些类型的网页布局，用线框图勾出其布局特征。二、知识点讲解一一.界面的的布局原理对称与均衡；重点与主次；变化与统一.界面布局类型固定布局：网站内容被一个固定宽度的容器包裹，容器内的区块以像素作为页面的基本单位，只需设计一套尺寸，也只展现一种布局。流动布局：其实现方法则是大多数组件（包括主容器）都以百分比作为页面的基本单位,可以根据用户的屏幕分辨率自适

23、应，并能完美利用有效空间展现最佳效果。响应式布局：分别为不同的屏幕分辨率的终端定义布局。其布局原理是屏幕或浏览器的宽度，选择最合适的那套宽度布局。自主学习与思考：对比三种布局类型的优劣势及适用范围。网站中选择成为响应式断点的设计模式主要有基于设备和内容优先两种。1 .原型的构建1）确定页面的尺寸：浏览网页的平台主要分有桌面端和移动端，其中桌面端设备包括台式电脑、笔记本，而移动端设备包括智能手机、平板电脑等；2）页面设计的优先级：移动端优先与桌面端优先区别不大。但是，随着移动端设备的用量超越PC,移动端优先的设计自然应该成为常态；3）线框图设计：图内应当明确表达出页面功能内容，页面间的信息架构及用户交互界面的主视觉和描述。4）原型设计：要求比线框图/可交互式线框图要高，它要求尽可能真实地模拟用户和界面之间的交互。三、上机实践（课时）一一为某企业官网网站改版设计为响应式布局的低保真原型，注意其交互的逻辑性。作业布置：在完善上机实践中的企业官网低保真原型的基础上，完善高保真原型设计。