数字媒体交互设计（慕课版） 课件 10组件设计-网页交互组件设计特征.pptx

网页交互组件设计特征设计组件天津电子信息职业技术学院 知识要点1、什么是UI设计组件2、组件规范的作用3、组件使用详解4、了解Ps文件如何存储 web格式 什么是UI设计组件第一部分 … …… …什么是UI设计组件 UI设计组件UI即（User Interface），用户界面的简称；组件可以理解为是一个组合功能的控件；UI设计组件就是用户界面成套元件。 组件规范的作用第二部分 组件规范的作用 一致性 反馈用户 提高效率，减少成本与现实生活一致在界面中一致控制反馈页面反馈简化流程清晰明确帮助用户识别 组件使用详解 组件使用详解Web端设计组件根据用途，可以分为六大类反馈 feedback ：Toast提示、Alert警告提示、 dialog对话框、 Notification通知提醒框、 tooltip气泡提示表单form：输入框input、选择器（框）Select、日期选择器DatePicker、时间选择器TimePicker、级联选择器（组件）Cascader、计数器/数字输入框InputNumber、单选框（组件）Radio、复选框Checkbox、开关 Switch、树选择TreeSelect基础basic：按钮 Button、布局Layout数据data:标记/徽标数Badge、上传Upload、进度条Progress、加载Loading导航navigation :导航菜单 NavMenu、面包屑Breadcrumb、标签页Tabs、分页Pagination、步骤条Steps、下拉菜单Dropdown其他other：表格Table、列表list、卡片Card 组件使用详解-反馈Toast提示反馈类feedback：反馈就是用户做了某项操作之后，系统给用户的一个响应。用户产生操作，出现toast提示；toast的消息提示分类一共有三种类型：成功、失类、常规。组件样式有两种：可点击操作使其消失、不可点击操作使其消失。 组件使用详解-反馈Alert警告提示当用户进行某些操作时，网站会出现对应的警告信息提示用户。使用场景：当某个页面需要向用户显示警告的信息时。alert警示组件样式有两种：带有删除操作，不带有删除操作。alert警示提示的消息一共有三种类型：成功、失败、常规。 组件使用详解-反馈dialog对话框用于提示用户当前操作，或是完成某个任务时需要的一些其他额外的信息。使用场景：用户在进行重要操作时，需要进行二次确认。用于重要的反馈提示，让用户知道信息提示。弹出式，减少页面的跳转。表单对话框、提示类、轻量级提示类、表单类样式都是基于二次确认类对话框样式的改变而得到不同的样式。 组件使用详解-反馈Notification通知提醒框使用场景：较为复杂的通知内容。带有交互的通知，给出用户下一步的行动点。系统主动推送。 组件使用详解-反馈tooltip气泡提示使用场景：鼠标移入则立即显示提示，移出则立即消失；展示鼠标 hover（悬停） 时的提示信息。 组件使用详解-表单input输入框表单form表单在网页中主要负责数据采集功能用于用户文本输入使用场景：用户需要通过鼠标键盘输入内容；输入的文本通常置于输入框输入框组件存在的状态有：初始、激活、报错、完成和禁用。 组件使用详解-表单选择器（框）Select当选项过多时，使用下拉菜单展示并选择内容。使用场景：弹出一个下拉选项给用户选择操作选择器分为多选和单选 组件使用详解-表单日期选择器DatePicker使用场景：当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择 组件使用详解-表单时间选择器??TimePicker使用场景：输入或选择日期的控件，当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。 组件使用详解-表单Cascader级联选择使用场景：1、需要从一组相关联的数据集合进行选择2、从一组数据集合中进行选择时，用多级分类进行分隔，方便选择。3、比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。 组件使用详解-表单计数器/数字输入框???InputNumber使用场景：当需要获取标准数值时。 组件使用详解-表单单选框? Radio使用场景：用于在多个备选项中选中单个状态。和 Select选择器 的区别是，单选框 所有选项默认可见，方便用户在比较中选择，但选项不宜过多。 组件使用详解-表单复选框?Checkbox使用场景：在一组可选项中进行多项选择时； … …… …组件使用详解-表单 Switch开关开关选择器使用场景：表示两种相互对立的状态间的切换，多用于触发「开/关」。 组件使用详解-表单树选择?TreeSelect树型选择控件，用清晰的层级结构展示信息。使用场景：可选择的数据结构是一个树形结构时，可以使