组件设计-网页交互组件设计特征-备课笔记.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、需要从一组相关联的数据集合进行选