组件设计-网页交互组件设计特征-备课笔记.doc

编号10-01【web产品交互设计开发制作】 编号10-01 学习任务四、组件设计-网页交互组件设计特征 一、课程说明与要求 1.课程说明 UI设计组件就是用户界面成套元件，是界面设计常用控件或元件。 组件是具有标准规范和可复用场景的基本模块。从字面上理解：“组”：设计元素的组合方式，“件”由不同的元件组成。本质上，组件化设计就是将UI界面合理地划分为更小的，更易于管理的单元，并予以命名。 只要是几个元素的组合，都可以称之为组件。卡片，头像，导航栏都是经典的组件。但是，组件并非一定要视觉上看起来是成块的。每种组件都有其特定的用法，根据场景和信息内容优先级来判断如何使用才是正确的设计方法。 下面我们可以在组件详解中去了解组件的使用场景。在交互设计实践方面，培养学生使用Ps工具绘制web产品交互设计中的一些常用组件。 二、学情分析与课程导入 1.学情分析 本课程授课内容需要学生有一定的Ps软件使用基础，作为一门实践性较强的课程，本节课针对学生对交互设计方面的知识普遍认知不强，或者碎片化、不系统，强调进行引导教学，融入市场多元化理念。另一方面，学生对新兴的事物接受比较快，对所选择的专业感兴趣，获取知识的主动性较强。 2.课程导入 我们学习UI组件设计的特征，那么什么是UI组件设计，组件都有哪些分类， 在日常生活中我们通常见到的网站中的有哪些信誉好的足球投注网站、导航栏、都是交互组件设计的应用。 下面我们针对组件的分类对其做一个详细的讲解 三、理论知识讲解 （一）什么是UI设计组件 UI即（User Interface），用户界面的简称； 组件可以理解为是一个组合功能的控件； UI设计组件就是用户界面成套元件。 （二）组件规范的作用 1.一致性 与现实生活一致 在界面中一致 2.反馈用户 控制反馈 编号10-02页面反馈 编号10-02 3.提高效率，减少成本 简化流程 清晰明确 帮助用户识别 4.组件设计的优势 首先，可以统一交互设计规则，减少用户操作的迷惑感，提升产品的体验。 其次，减少制作组件控件的时间，不需要对组件重新下定义，提升设计效率，可将更多时间放在流程体验和设计推动上。 第三，可以有延续性，团队即使有成员离开或者加入，通过设计规范和组件库可以快速地接手和进行正常工作。 【课后思考：第一，什么是UI设计组件；第二，规范组件的作用】 （三）组件使用详解 ……………………………………………………………………【难点】 Web端设计组件根据用途，可以分为六大类 反馈feedback：各种提示、提醒框等，如;toast（吐司）提示、对话框、气泡提示等 表单form：如：输入框input、级联选择器、单选框、复选框等 基础basic：如：按钮button、布局layout 数据：包括：徽标数、上传、进度条、加载 导航：包括：导航菜单、面包屑、标签页、分页、步骤条、下拉菜单、 其他：包括：表格、列表、卡片等。 1.反馈类feedback 反馈类feedback：反馈就是用户做了某项操作之后，系统给用户的一个响应。 （1）Toast提示 用户产生操作，出现toast提示； toast的消息提示分类一共有三种类型：成功、失类、常规。 （2）Alert警告提示 当用户进行某些操作时，网站会出现对应的警告信息提示用户。 使用场景：当某个页面需要向用户显示警告的信息时。 编号10-03 编号10-03 （3）dialog对话框 用于提示用户当前操作，或是完成某个任务时需要的一些其他额外的信息。 使用场景： 用户在进行重要操作时，需要进行二次确认； 用于重要的反馈提示，让用户知道信息提示； 弹出式，减少页面的跳转。 （4）Notification通知提醒框 使用场景：较为复杂的通知内容；带有交互的通知，给出用户下一步的行动点；系统主动推送。 （5）tooltip气泡提示 使用场景： 鼠标移入则立即显示提示，移出则立即消失； 展示鼠标 hover（悬停） 时的提示信息。 编号10-04 编号10-04 2.表单form 表单在网页中主要负责数据采集功能 （1）input输入框 用于用户文本输入 使用场景：用户需要通过鼠标键盘输入内容；输入的文本通常置于输入框 （2）选择器（框）Select 当选项过多时，使用下拉菜单展示并选择内容。 使用场景：弹出一个下拉选项给用户选择操作 （3）日期选择器DatePicker 使用场景： 当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择 编号10-05 编号10-05 （4）时间选择器??TimePicker 使用场景： 输入或选择日期的控件，当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。 （5）Cascader级联选择 使用场景： 1、需要从一组相关联的数据集合进行选