10组件设计-网页交互组件设计特征

网页交互组件设计特征设计组件天津电子信息职业技术学院知识要点1、什么是UI设计组件2、组件规范的作用3、组件使用详解4、了解Ps文件如何存储web格式什么是UI设计组件第一部分…………什么是UI设计组件

UI设计组件UI即（UserInterface），用户界面的简称；组件可以理解为是一个组合功能的控件；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树型选择控件，用清晰的层级结构展示信息。使用场景：可选择的数据结构是一个树形结构时，可以使用TreeSelect。组件使用详解-基础Button按钮基础basic使用场景：标记了一个操作命令，响应用户点击行为，触发相应的业务逻辑。在设计中，基本有五种按钮类型：主要按钮、默认按钮、线性按钮、文本按钮、链接按钮四种状态属性危险、幽灵、禁用、加载中…………组件使用详解-基础

布局

Layout

使用场景：顶部-侧边布局-通栏布局，多用于应用型的网站侧边栏布局，采用侧边栏的页面，多用于展示类网站

组件使用详解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组件使用详解-数据标记/徽标数

Badge数据data使用场景：一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。组件使用详解-数据上传

Upload通过点击或者拖拽上传文件使用场景：当需要上传一个或一些文件时；当需要展现上传的进度时；当需要使用拖拽交互时；组件使用详解-数据进度条

Progress

使用场景：在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；当需要显示一个操作完成的百分比时。组件使用详解-数据加载

Loading使用场景：加载数据时显示动效组件使用详解-导航导航菜单NavMenu

导航navigation使用场景：一般分为顶部导航和侧边导航；顶部导航提供全局性的菜单分类和功能，方便浏览信息；顶部宽度限制了导航的数量和文本长度。侧边导航提供多级结构来收纳和排列网站架构，可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；

…………组件使用详解-导航面包屑

Breadcrumb

使用场景：1、当系统拥有超过两级以上的层级结构时；2、当需要告知用户“你在哪里”时；3、当需要向上导航的功能时。组件使用详解-导航标签页

Tabs使用场景：卡片式的页签，提供可关闭的样式，常用于容器顶部。标准线条式页签，用于容器内部的主功能切换，这是最常用的Tabs。组件使用详解-导航分页

Pagination使用场景：当数据量过多时，使用分页分解数据。当加载/渲染所有数据将花费很多时间时；可切换页码浏览数据。组件使用详解-导航步骤条

Steps使用场景：当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。组件使用详解-导航下拉菜单

Dropdown使用场景：当页面上的操作命令过多时，点击或移入触点，会出现一个下拉菜单；可在列表中进行选择，并执行相应的命令。组件使用详解-其他表格

Table

其他other使用场景：展示多条结构类似的数据；当有大量结构化的数据需要展现时；当需要对数据进行排序、搜索、分页等复杂行为时。

…………组件使用详解-其他列表

list

使用场景：最基础的列表展示，可承载文字、列表、图片、段落；常用于后台数据展示页面

组件使用详解-其他卡片

Card

使用场景：最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。了解Photoshop文件如何存储web格式第四部分

…………了解Photoshop文件如何存储web格式如何用PHOTOSHOP保存网页格式

web格式是专门用于网页浏览的一种图片格式，体积比普通图片要更小。

了解Photoshop文件如何存储web格式存储web所用格式点击“存储为web所用格