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

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

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

组件使用详解

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

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

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

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

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

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

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

…………组件使用详解-其他列表??list??使用场景：最基础的列表展示，可承载文字、列表、图片、段落；常用于后台数据展示页面?

组件使用详解-其他卡片?Card??使用场景：最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

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