网页交互组件设计特征设计组件85课件.pptxVIP

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

1、什么是UI设计组件2、组件规范的作用3、组件使用详解4、了解Ps文件如何存储web格式目录

组件使用详解

组件使用详解-基础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使用场景：加载数据时显示动效

本课内容结束祝学习顺利设计组件