Menu 导航菜单

导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转,它起着链接站点或者软件内的各个页面的作用。


水平导航

用于左右布局的页面,可搭配全局导航一起使用。顶部导航提供全局性的类目和功能,此处的水平导航一级和二级导航菜单,分别是默认水平导航、下拉菜单导航和水平菜单导航。

垂直导航

垂直菜单,子菜单内嵌在菜单区域。垂直导航也是用户依赖导航在各个页面中进行跳转,提供多级结构来收纳和排列网站架构。此处的垂直导航有图标和无图标两种类型,其中它们的共同特点是都可以折叠。

Breadcrumb面包屑

面包屑作为辅助和补充的导航方式,告诉用户当前所在位置以及页面层级关系,帮助用户返回或去往更高层级的页面。

何时使用

· 当系统拥有超过两级以上的层级结构时;
· 当需要告知用户《你在哪里》时;
· 当需要向上导航的功能时。

分页

采用分页的形式分隔长列表,每次只加载一个页面。

何时使用

· 当加载/渲染所有数据将花费很多时间时;
· 可切换页码浏览数据。

步骤条

引导用户按照流程完成任务的导航条。

何时使用

· 当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务。

标签页

选项卡切换组件。

何时使用

·· 用于标记事物的属性和维度。
· 进行分类。

折叠

对信息进行分组和收纳,帮助用户有条理地阅读内容。

何时使用

· 可以折叠/展开的内容区域。

页脚

Input 信息输入

提示信息应用于系统级的通知、推广类信息


领域

用于左右布局的页面,可搭配全局导航一起使用。顶部导航提供全局性的类目和功能,此处的水平导航一级和二级导航菜单,分别是默认水平导航、下拉菜单导航和水平菜单导航。

行为

五大状态

复选框

复选框允许用户从一个数据集中选择多个选项。如果在一个列表中有多个选项,你可以通过使用复选框而不是开/关切换来节省空间。如果你有一个单选项,不要用复选框,使用开/关切换。

行为

四大状态

下拉菜单

向下弹出的列表。

何时使用

· 当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。

行为

四大状态

穿梭框

双栏穿梭选择框。

何时使用

· 需要在多个可选项中进行多选时。
· 比起 Select 和 TreeSelect,穿梭框占据更大的空间,可以展示可选项的更多信息。

搜索框

通用原则

当搜索为高频操作功能或鼓励用户使用该功能的场景下,搜索入口需使用完整形态
当搜索在模块内,或为非高频操作的场景下,搜索入口可仅使用「搜索图标」
搜索均为实时搜索
当用户退出搜索时,通常直接清空搜索关键词,不做保留
业务中通常还可与「搜索推荐、历史搜索」等搭配使用

行为

激活搜索条件

鼠标任意点击容器,即可激活搜索组件

实时搜索

输入任意关键词,无需 Enter,实时反馈搜索结果

日期选择

通用原则

提供默认触发器,可按需定制触发器。默认触发器展示已选日期/时间,支持一键清除
默认触发器中必须有占位文案,如选择的目的或展示默认时间
日期显示格式请参考「文案与语气」中的规范
可嵌入时间选择器来提供同时选择日期与时间的能力
可选配操作栏,按需增加快捷选项提高用户的操作效率

上传组件

上传是将信息(网页、文字、图片、视频等)通过网页或者上传工具发布到远程服务器上的过程。

Default Upload

Drag Upload

Meessage 信息提示

提示信息应用于系统级的通知、推广类信息


通用原则

不会对用户浏览和操作当前页面产生阻碍
Notice 内嵌在页面中,不遮挡页面内容,消失时伴随动效
根据业务需要设定是否允许用户手动关闭
同种类型的通知,可合并后展示;页面中可同时存在多个不同类型的通知
通知中需要要明确的操作,引导用户解决问题
文案应该清晰的描述现状,解释原因,并给出明确的操作指引
描述文案应当采用易于用户阅读的结构化表达形式,避免长篇大论;允许在描述中使用文本链接

文字提示

简单的文字提示气泡框。

全局提示

全局展示操作反馈信息。

通知提醒框

全局展示通知提醒信息。

对话框

模态对话框。

Content 内容

提示信息应用于系统级的通知、推广类信息


Ioading 加载

用于页面和区块的加载中状态。

卡片

通用卡片容器。最基础的卡片容器,可承载文字、列表、图片、段落,常用于后台概览页面。

表格

用于左右布局的页面,可搭配全局导航一起使用。顶部导航提供全局性的类目和功能,此处的水平导航一级和二级导航菜单,分别是默认水平导航、下拉菜单导航和水平菜单导航。

列表

通用列表。最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。

Menu 导航菜单

导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转,它起着链接站点或者软件内的各个页面的作用。


水平导航

用于左右布局的页面,可搭配全局导航一起使用。顶部导航提供全局性的类目和功能,此处的水平导航一级和二级导航菜单,分别是默认水平导航、下拉菜单导航和水平菜单导航。

垂直导航

垂直菜单,子菜单内嵌在菜单区域。垂直导航也是用户依赖导航在各个页面中进行跳转,提供多级结构来收纳和排列网站架构。此处的垂直导航有图标和无图标两种类型,其中它们的共同特点是都可以折叠。

Breadcrumb面包屑

面包屑作为辅助和补充的导航方式,告诉用户当前所在位置以及页面层级关系,帮助用户返回或去往更高层级的页面。

何时使用

· 当系统拥有超过两级以上的层级结构时;
· 当需要告知用户《你在哪里》时;
· 当需要向上导航的功能时。

分页

采用分页的形式分隔长列表,每次只加载一个页面。

何时使用

· 当加载/渲染所有数据将花费很多时间时;
· 可切换页码浏览数据。

步骤条

引导用户按照流程完成任务的导航条。

何时使用

· 当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务。

标签页

选项卡切换组件。

何时使用

·· 用于标记事物的属性和维度。
· 进行分类。

折叠

对信息进行分组和收纳,帮助用户有条理地阅读内容。

何时使用

· 可以折叠/展开的内容区域。

页脚

Input 信息输入

提示信息应用于系统级的通知、推广类信息


领域

需要给用户提供组合型输入框、带搜索的输入框以及大小的选择。

行为

不同状态

复选框

复选框允许用户从一个数据集中选择多个选项。如果在一个列表中有多个选项,你可以通过使用复选框而不是开/关切换来节省空间。如果你有一个单选项,不要用复选框,使用开/关切换。

行为

不同状态

下拉菜单

向下弹出的列表。

何时使用

· 当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。

行为

不同状态

搜索框

通用原则

当搜索为高频操作功能或鼓励用户使用该功能的场景下,搜索入口需使用完整形态
当搜索在模块内,或为非高频操作的场景下,搜索入口可仅使用「搜索图标」
搜索均为实时搜索
当用户退出搜索时,通常直接清空搜索关键词,不做保留
业务中通常还可与「搜索推荐、历史搜索」等搭配使用

行为

激活搜索条件

鼠标任意点击容器,即可激活搜索组件

实时搜索

输入任意关键词,无需 Enter,实时反馈搜索结果

日期范围选择

通用原则

提供默认触发器,可按需定制触发器。默认触发器展示已选日期/时间,支持一键清除
默认触发器中必须有占位文案,如选择的目的或展示默认时间
日期显示格式请参考「文案与语气」中的规范
可嵌入时间选择器来提供同时选择日期与时间的能力
可选配操作栏,按需增加快捷选项提高用户的操作效率

上传组件

上传是将信息(网页、文字、图片、视频等)通过网页或者上传工具发布到远程服务器上的过程。

Default Upload

Meessage 信息提示

提示信息应用于系统级的通知、推广类信息


通用原则

不会对用户浏览和操作当前页面产生阻碍
Notice 内嵌在页面中,不遮挡页面内容,消失时伴随动效
根据业务需要设定是否允许用户手动关闭
同种类型的通知,可合并后展示;页面中可同时存在多个不同类型的通知
通知中需要要明确的操作,引导用户解决问题
文案应该清晰的描述现状,解释原因,并给出明确的操作指引
描述文案应当采用易于用户阅读的结构化表达形式,避免长篇大论;允许在描述中使用文本链接

工具提示

用于左右布局的页面,可搭配全局导航一起使用。顶部导航提供全局性的类目和功能,此处的水平导航一级和二级导航菜单,分别是默认水平导航、下拉菜单导航和水平菜单导航。

安卓控件

用于左右布局的页面,可搭配全局导航一起使用。顶部导航提供全局性的类目和功能,此处的水平导航一级和二级导航菜单,分别是默认水平导航、下拉菜单导航和水平菜单导航。

提示框

用于左右布局的页面,可搭配全局导航一起使用。顶部导航提供全局性的类目和功能,此处的水平导航一级和二级导航菜单,分别是默认水平导航、下拉菜单导航和水平菜单导航。

提示框

用于左右布局的页面,可搭配全局导航一起使用。顶部导航提供全局性的类目和功能,此处的水平导航一级和二级导航菜单,分别是默认水平导航、下拉菜单导航和水平菜单导航。

Content 内容

提示信息应用于系统级的通知、推广类信息


Ioading 加载

用于页面和区块的加载中状态。

卡片

通用卡片容器。最基础的卡片容器,可承载文字、列表、图片、段落,常用于后台概览页面。

表格

用于左右布局的页面,可搭配全局导航一起使用。顶部导航提供全局性的类目和功能,此处的水平导航一级和二级导航菜单,分别是默认水平导航、下拉菜单导航和水平菜单导航。

列表

通用列表。最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。

资源

这里汇总了UI设计所需的相关资源。


设计规范

这里提供了移动端设计规范、PC端设计规范可供下载。

组件库

这里提供了PC端组件库、Axure组件库的相关资源下载。