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

编号12-01【web产品交互设计开发制作】编号12-01学习任务六、组件设计-网页交互元素的合理归类与模块排序一、课程说明与要求1.课程说明本次课包括网页元素的分类、界面的构成基础、模块排序三大方面的内容，界面基础是：控件、布局、流程，也就是在交互稿上肉眼可见的部分。入门时先学界面基础可以让同学们快速体验到到交互设计的应用，并建立一些兴趣和信心。下面我们可以在设计的案例中去了解模块排序布局的作用。在交互设计实践方面，培养学生对交互流程的理解和思考能力，提高专业素质。二、学情分析与课程导入1.学情分析本课程授课对象为艺术类学生，没有接触过交互设计方面的知识，或认知不强，作为一门实践性较强的课程，强调进行引导教学，融入市场多元化理念。另一方面，学生对新兴的事物接受比较快，有助于建立学习的兴趣和信心，同时获取知识的主动性较强。2.课程导入我们学习网页元素的合理归类和排序布局，那么就会产生疑问，元素如何分类、依据什么排序布局，交互流程是如何设计的等等问题，实际在日常生活中我们通常见到的网站中的列表、加入购物车、都是依据排序布局理论、交互流程设计的步骤设计出来的。下面我们针对组件的分类对其做一个详细的讲解三、理论知识讲解（一）网页组成元素及归类1.按基础分类（1）基础图文内容为：图片加文字（2）多媒体（音视频）编号12-02内容为：文字+图片+音频+视频等多种媒体格式编号12-022.按框架分类………………【举例思政融入（感受电商助农发展现状及前景）】我们来看网页案例，这个网页属于一个交易类电商平台，电商营销的模式帮助农户出售滞销的农产品，这种线上售卖的新营销模式在短时间内就很好的促进了农产品的销售，帮助农户解决了滞销问题，不仅给当地农户带来了切实的收益，也助力了当地的可持续发展，《关于促进农村电子商务加快发展的指导意见》中明确提出了“鼓励和支持开拓创新”措施，鼓励地方、企业等因地制宜，积极探索农村电子商务新模式。引导各类媒体加大农村电子商务宣传力度，发掘典型案例，推广成功经验。目前，电商助农在应用方面也日趋常态化，市场前景很大，在我们今后从事交互设计工作时也会接触到这个领域。编号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的打扰性很小，但只能放很短的文字,几秒后就消失，用户很容易忽略。具体要看设计师想要什么样的效果，根据具体的用途选择一个合适的方式。编号12-07（2）布局编号12-07布局就是把“控件”和“内容”放到界面上合适的位置并赋予合适的视觉重量。在网页端，布局设计是是设计基础中重要的一部分。但在移动端，布局设计相对没有那么被看重。主要原因是移动端的布局设计趋同性比较大，设计诉求和设计空间都相对较小。1）布局的基本理论常用的布局理论包括：格式塔原理、网格系统、7±2法则、席克定律、费茨定律、奥卡姆剃刀原理、复杂度守恒定律等等；这些基本理论可以成为设计师的“标尺”和“依据”，会融入在我们平时的设计工作中。2）布局设计的基本步骤布局设计简单可以分为以下4个步骤：列举：将界面中所需要的元素列举出来，比如：商品图片、商品标题、价格、优惠券、收藏、分享……归类：将上述列举的元素归为几类，每一类就是一个模块。比如“收藏、购买、加入购物车”可以归为“操作模块”排序：将上面归类好的模块进行排序，排序的依据一般是：用户场景中的浏览顺序、元素的重要性、业务期望调整：布局排布的影响因素很多，最后需要综合其他因素对布局进行调整。并对各元素的视觉重量进行定义调整编号12-08编号12-08（3）流程流程设计的基本步骤是：1）确定“任务”；2）将“任务”拆成“动作”；3）将“动作”对应成界面。功能的实现也是交互流程设计的体现；交互流程设计的基本步骤是：确定“任务”>将“任务”拆成“动作”>将“动作”对应成界面。举个例子，我们来看图。比如我们做一个“购买”的功能，购买功能中有一个“添加购物车”的小功能。我们可以把“添加1件商品”看做是一个“任务”，用户想要完成这个任务，就必须有一系列“动作”。编号12-09编号12-09我们通过流程图来表示下：我们看中一件商品、进入到商品详情页面、选中要添加商品的颜色、尺码等信息、加入到购物车、添加成功；这样就通过系列动作完成了一个任务；列出这些动作后，我们再针对每个动作（或多个动作）设计相应的界面，这就得到了交互流程。对于复杂的交互流程，需要在绘制界面前搭建“流程图”，这样可以让我们思路更加清晰，表达更加清楚。四、实践技能训练（一）布置训练任务任务1：从网页案例中找出网页构成的元素，并进行模块归类任务2：利用手机电脑等工具，搜索网上的几大门户网站，并分析各个页面的组成任务3：流程设计的步骤分析（二）实战项目案例运用所学的网页界面的构成基础与模块排序布局的应用场景，尝试使用流程图或思维导图描述出页面流程设计的步骤，如完成添加到购物车的流程步骤。……【难点】教师重点指导：排序布局设计的基本步骤【实训指导：学生初次接触模块排序布局的交互流程并进行设计制作实践，教师应多引导，帮助学生分析交互设计体验，指导学生完成流程设计步骤的绘制】编号12-10五、课堂总结编号12-10今天，我们主要学习了网页组成的元素及归类，以及交互界面的构成基础、模块的排序布局等相关理论，也结合交互设计案例相关理论做了一些练习，想必同学们通过练习对网页交互元素的归类和布局排序有了一定的了解和掌握。希望同学们课后继续对你所接触到的相关作品或产品，用专业的眼光，分析界面构成的控件、布局和流程在交互设计中的应用，这样有助于你们对知识点的更深入的理解。六、课后思考前面我们讲到交互界面的构成基础：控件、布局、流程，对交互设计起到了很重要的作用，大家有必要深入了解一下。另外，请同学们从现实生活中