组件设计-网页交互元素的合理归类与模块排序-备课笔记.doc

编号12-01【web产品交互设计开发制作】 编号12-01 学习任务六、组件设计-网页交互元素的合理归类与模块排序 一、课程说明与要求 1.课程说明 本次课包括网页元素的分类、界面的构成基础、模块排序三大方面的内容，界面基础是：控件、布局、流程，也就是在交互稿上肉眼可见的部分。入门时先学界面基础可以让同学们快速体验到到交互设计的应用，并建立一些兴趣和信心。 下面我们可以在设计的案例中去了解模块排序布局的作用。在交互设计实践方面，培养学生对交互流程的理解和思考能力，提高专业素质。 二、学情分析与课程导入 1.学情分析 本课程授课对象为艺术类学生，没有接触过交互设计方面的知识，或认知不强，作为一门实践性较强的课程，强调进行引导教学，融入市场多元化理念。另一方面，学生对新兴的事物接受比较快，有助于建立学习的兴趣和信心，同时获取知识的主动性较强。 2.课程导入 我们学习网页元素的合理归类和排序布局，那么就会产生疑问，元素如何分类、依据什么排序布局，交互流程是如何设计的等等问题， 实际在日常生活中我们通常见到的网站中的列表、加入购物车、都是依据排序布局理论、交互流程设计的步骤设计出来的。 下面我们针对组件的分类对其做一个详细的讲解 三、理论知识讲解 （一）网页组成元素及归类 1.按基础分类 （1）基础图文 内容为：图片加文字 （2）多媒体（音视频） 编号12-02内容为：文字+图片+音频+视频等多种媒体格式 编号12-02 2.按框架分类 ………………【举例思政融入（感受电商助农发展现状及前景）】 我们来看网页案例，这个网页属于一个交易类电商平台，电商营销的模式帮助农户出售滞销的农产品，这种线上售卖的新营销模式在短时间内就很好的促进了农产品的销售，帮助农户解决了滞销问题，不仅给当地农户带来了切实的收益，也助力了当地的可持续发展，《关于促进农村电子商务加快发展的指导意见》中明确提出了“鼓励和支持开拓创新”措施，鼓励地方、企业等因地制宜，积极探索农村电子商务新模式。引导各类媒体加大农村电子商务宣传力度，发掘典型案例，推广成功经验。目前，电商助农在应用方面也日趋常态化，市场前景很大，在我们今后从事交互设计工作时也会接触到这个领域。 编号12-03下面我们来看它的构成，包含页头，导航，主要内容区域，页脚和备案信息； 编号12-03 一般情况下，导航和logo是一块，整体组成了页头。 大多数整体可以分为三块，页头、主体内容区和页脚。 【互动，引导学生浏览不同的页面，分析各页面元素的构成，教师做总结】 再比如邮箱网站，我们可以看到 ，虽然它展示的内容比较少 ，但是它也是包含了页头 ，导航，内容区域 ，页脚 ，页面主要内容区域没有再细分 ，如果细分的话会分出更丰富的内容 ；这就涉及到界面的布局，以后会单独讲解常用的布局有哪些，以上就是我们网页设计之前需要了解的网页组成元素及归类的内容。 编号12-04 编号12-04 （二）Web交互设计界面的构成基础与模块排序布局………………………………………【重点】 Web交互设计界面的构成基础 包含：控件、布局、流程。 （1）控件 控件是界面上最小的有效单元；如的“有哪些信誉好的足球投注网站框”、“单选按钮”、“复选框”、“下拉框”。 1）了解控件的交互流程： 了解控件的交互流程，可以帮助我们更立体地了解一个控件。 举例：网页的“登录页面”：用户点击用户名文本框后，会出现光标；输入第一个字符后，会出现“清空按钮”图标。输入超过设定字符后，会有截断效果。”这就是一个控件的交互流程 编号12-05 编号12-05 了解控件的交互流程，可以帮助我们更立体地了解一个控件。在实际的交互稿绘制中，也经常会细致地描述某个控件的交互流程。 想要学习每个控件的交互流程，比较简单的方法就是找一些成熟的网页产品试用，观察每进行一个动作下一步会发生什么，然后临摹下来。 2）了解控件的属性 可以理解为可设置的参数 举例：“列表”可以定义的属性有：排序规则、加载规则、刷新规则、适配规则、截断规则等。 比如图中订单列表，他的“排序规则”可以是按照首字母或数字排列的，也可以是按照时间先后顺序排列的。 编号12-06加载规则:比如我们可以设定单次加载100条，后续每次下拉加载30条 编号12-06 刷新规则:手动 或 下拉加载 刷新 适配规则:左对齐，或者右边适配 截断规则︰文字距离靠近右边缘截断显示等等。 3）了解控件的使用 举例：当用户输入手机号错误的时候，需要给用户一个错误提示，提示方式所用的控件可以有很多种：行内提示、toast(吐司提示)、气泡提示（tooltip）、弹窗。同时区分各种提示的轻重级别体验。 比如“弹窗”的缺点是打扰性很强，但优点是可以承载大段文字，用户关注度也更高。toast的打扰性很小，但只能放很短的文字,几秒后就消失，用户很容易忽