请留下您的联系方式 我们将尽快联系您,提供解决方案咨询服务

获取验证码

  • 200-500人
  • 501-5000人
  • 5000人以上
接入场景
基于企业培训行业优质品牌,依托多项专利技术,与合作伙伴,共创共赢培训新生态
平安知鸟开放平台

技术赋能

新一代智能教育平台

技术赋能

依托智能推荐、智能直播、智能考试、智能陪练、智能做课、智能学习助理和智能培训管家七大智能引擎,为合作伙伴提供综合性智能化培训解决方案,打造企业综合性培训平台
平安知鸟开放平台

内容赋能

优质内容赋能产品形态升级

内容赋能

平台百万精品内容资源储备,覆盖多行业通用与专业课程,促进合作伙伴系统化搭建内容矩阵
平安知鸟开放平台

营销赋能

智能推荐数千万知鸟用户

营销赋能

千万级用户体系驱动流量快速变现,提供灵活便捷的接入方式,低成本、高效率,帮助合作伙伴快速置换流量的高回报价值
平安知鸟开放平台

人才赋能

为人才提供全职生涯服务

人才赋能

通过智能招聘、智能测评、智慧咨询、智能健康管家等系列创新技术,为个人提供全链路人文服务,全面助力人才自我赋能
平安知鸟开放平台

品牌赋能

合作共赢提升品牌价值

品牌赋能

平台依托全球500强平安集团和1500家政企客户品牌合作方,帮助合作伙伴快速提升公司及品牌公信力
平台优势
平安知鸟开放平台

专属支持

建立一对一专属合作群
全流程提供支持
平安知鸟开放平台

精准推荐

优质应用获得官方流量扶持
精准触达潜在用户
平安知鸟开放平台

智能运营

动态数据看板及关键指标预警
提升用户活跃留存
平安知鸟开放平台

账务结算

实时交易对账记录
清晰的结算明细便于合作伙伴查询
合作伙伴 平安知鸟开放平台
成为我们的合作伙伴
平安知鸟开放平台 入驻开放平台
平安知鸟开放平台
平安知鸟开放平台 创建开发应用
平安知鸟开放平台
平安知鸟开放平台 应用上线推广
  • 平台介绍
  • 快速入门
  • 技术文档
一、平台介绍

知鸟开放平台是一个专业、开放的职业培训生态平台,基于丰富的内容和完善的服务帮助您创建更具竞争力的应用。

通过接入知鸟开放平台,我们将从基础能力、内容、运营、数据等多个维度赋能您的应用,帮助您获得更多的流量、用户和收益,共建开放共赢新生态。

二、平台提供的服务

丰富的资源:提供多行业优质音视频课程资源对接。

专业培训:提供直播、智能陪练、监学、学习地图、考试、作业、培训班等一站式培训技术。

精准推荐:便捷场景化的内容挑选和运营,大数据智能生成学习行为画像,助力高效精准运营,提升用户活跃留存,获取更高收益。

开发者社区:加入专属技术沟通群,提供实时的在线支持,免除您接入的后顾之忧。

健全的资料库和工具:业务对接文档,技术开发文档(API、SDK文档等)助力快速接入。

Step1 注册登录

使用知鸟账号登录知鸟开放平台(如果还没有知鸟账号请先完成知鸟账号注册)。

Step2 申请开发者认证

登录后,需要先认证成为知鸟开放平台开发者,信息填写完整后即可提交审核,会在1-3天内审核信息并反馈结果,请及时查收邮件。

Step3 创建开发应用

请按要求填写应用信息,加入技术对接群开始技术接入。

Step4 应用审核与上线

对接完成后,你需要提交应用上线申请,上线申请通过后应用的接口调用额度会扩容以满足你产品的线上调用量需求(应用未上线不影响开发联调)。
注:提交应用审核后一般1~3个工作日完成审核,为不影响计划发布时间,请至少提前两个工作日提交应用审核。

    综述
    介绍
    设计原则
    国际化
    框架
    间距
    布局
    栅格
    通用
    色彩
    图标
    文字
    按钮
    纵横比
    导航
    菜单
    面包屑
    步骤条
    分页
    数据录入
    输入框
    数字输入框
    单选框
    复选框
    选择器(含树选择,级联)
    穿梭框
    日期选择框
    时间选择框
    上传
    开关
    评分
    表单
    数据展示
    统计数值
    图片
    标签
    气泡卡片
    文字提示
    资源卡片
    标签页
    列表
    折叠面板
    树形控件
    表格
    空状态
    时间轴
    反馈
    警告提示
    抽屉
    全局提示
    对话框(确认弹窗)
    进度条
    结果
    加载中

    介绍

    Zhi-Design 是一个设计系统,它定义了一套中后台设计与前端基础组件,帮助我们更容易地创造更加一致的用户体验。

    Zhi-Design

    Zhi-Design 是专为知鸟设计系统建设提供的交互与视觉设计指引,旨在通过定义一致的产品UI的元素和结构,包括色彩、布局、字体、图标等全局样式,来保持知鸟设计系统界面风格的一致。

    • 一是统一知鸟设计系统的视觉和使用体验,提升用户的愉悦感,降低学习成本,提升使用效率,激发使用欲望,提升用户粘性;
    • 二是提升用户的品牌认知,提升知鸟设计系统的品牌形象;
    • 三是提高产品UI设计的工作效率,方便未来迭代。

    根据渠道类型,Zhi-Design 界面风格分为三大类。一是移动端 UI 风格;二是 PC 端 UI 风格,主要包括现有的 toB 类系统的 UI 风格;三是单独设计的大屏端 UI 风格。本指引文档主要针对三代 toB 类产品的UI设计提供指引。采用其它已有UI风格的系统的UI设计,需遵循原有的UI设计要求。

    本指引配套提供设计组件库与前端代码组件库,其中组件内容会根据 Zhi-Design 建设迭代更新。
    使用对象:产品人员、设计人员、前端开发人员、测试人员。

    设计原则

    设计原则相当于整个语言体系中的修辞手法。

    体验一致

    Zhi-Design 系统建设包含多个系统、平台和产品,用户在不同系统中应有一致的使用体验和品牌感受,从而建立信任感。 在界面设计遵循业务习惯、使用统的业务概念的语言描述;操作流程设计符合业务工作流程、逻辑与业务逻辑保持一致;为相同问题提供相同解决方案以减轻用户在各平台操作的认知负担。

    提升效率

    在逻辑复杂、信息庞大的 B 端产品中,核心目标是简化工作流程,提高工作效率。在逻辑上需要结构层次清晰,各角色用户专注自己的工作流程。在设计上需要遵循易用原则、容错原则、即时反馈等。

    开放包容

    Zhi-Design 自带各类完整的模板和典型场景,同时提供独立、通用的原子级组件,根据业务特性自由组合,用小组件拼接出符合业务需要的模块与页面;也可以根据自身的产品需求灵活选择,直接使用现有的典型页面模板。

    简洁大方

    B端工作台从页面的颜色、图标、组件到整体布局都应保持简洁优雅,为客户营造沉浸式工作体验。在信息传达上减少冗杂信息堆叠,内容避免歧义,重点突出当前操作所需信息让用户一目了然快速上手;页面视觉上应具有优雅克制的美感,不盲目装饰。 根据 B 端 C 化设计理念,B 端用户慢慢变得挑剔,在底层功能、数据处理完善的基础上,B端交互体验和视觉体验可以借鉴 C 端,从复杂、高门槛、难用蜕变为高效、简单、易用。

    数据可视

    数据可视化视图是数据统计类、监控类场景的重要组成部分。页面设计要注重美学也要保持信息的准确传达,避免过度追求形式美感而导致信息易读性差或造成误解。应运用直观的图表类型、密度合理的信息布局和适宜当前主题的的色彩,为目标用户提供有价值的决策依据。

    国际化

    国际化是设计软件应用程序的过程,以便它可以在不进行工程更改的情况下适应各种语言和地区。

    颜色文化含义不同

    例如,红色在西方文化中与警告和危险有关,而在中国和日本等亚洲文化中,它象征着幸运和幸福。

    避免使用标志来表示语言

    语言和国家是不同的概念。旗帜是代表国家或民族的符号,而语言则代表人与人之间共享的交流方式。例如,西班牙语在 29 个国家使用,而西班牙只是其中之一。像加拿大这样的国家有不止一种官方语言。在设计语言选择器时,请使用纯文本,尽管它缺乏视觉吸引力。只使用标志来代表国家,而不是语言。

    文字扩展设计

    • 当中文本被翻译成另一种语言时,翻译后的文本可能会长两倍。
    • 尽可能使 UI 组件可扩展,尽量不要为 UI 组件分配固定宽度或高度。
    • 对于较长的文本,换行是一个很好的解决方案。
    • 用文本截断可能是一种妥协,但是这会带来降低 UI 效率的风险。

    使您的 CSS 本地化友好

    • 开发人员避免使用 CSS 来处理大小写非常重要。将大小写留给翻译人员,因为他们是他们自己语言的样式规则方面的专家。
    • 以智能方式强制文本对齐:让内容自动居中而不是刻意写死距离。

    文本长度和大小扩展注意事项

    • 当 UI 文本被翻译成另一种语言时,文本长度经常会发生变化。例如,英语是一种非常紧凑的语言,在大多数情况下会导致翻译文本更长。文本扩展的一般规则是:“英文文本越短,翻译文本可能越长”。
    • 除了英文文本长度外,目标语言对扩展量也有影响。下表显示了英文文本“Share”在各种语言中的扩展系数:
    • 英文单词扩展指南:例如:英文文本“Share”在各种语言中的扩展系数;一般来说,亚洲语言更节省空间,因为它们比欧洲语言更紧凑。但没有“总是”。CJK(中文、日文和韩文)语言的字符比拉丁字符复杂,而且它们的字符往往更方正,因此单个字符占用更多的横向空间。日语尤其成问题,因为它使用片假名来音译外来词。例如,英语和日语中的“Follow”都有 6 个字符,但日语由于字符更宽而比英语长 20%。

    间距 Space

    设置组件之间的间距。

    尺寸

    间距有5个尺寸,8px、12px、24px、32px。

    内容区域环绕间距

    内容区域环绕间距为20px。

    内容到边距

    内容到边距为24px。

    按钮水平间距

    矩形按钮水平间距为12px。
    文字按钮水平间距为24px。

    复合组件垂直间距

    复合组件垂直为24px。

    垂直间距示例

    内容与上下边界的垂直距离为32px,表单组之间的距离为32px。
    同组表单项之间的垂直距离为24px。
    表单项和子内容的垂直距离为12px。

    布局 Layout

    页面的基础布局框架,常与组件嵌套使用,构建页面整体布局。

    页面兼容

    1. 页面大小兼容自适应1440*900px及以上的分辨率默认窗口,不采用水平滚动条,内容过多时允许垂直滚动条。表格过宽时允许出现局部滚动条。
    2. 弹窗、弹页要保证768高度的分辨率显示正常。弹出框宽度不超过1200,高度为不超过600px,常规模态弹窗需要显示在内容页面相对水平、垂直相对居中位置;非模态弹窗可按需显示。
    3. 浏览器兼容兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。

    基本用法

    典型的页面布局;Sider(侧边栏)宽度不变,Header(顶部栏)、Content(内容区)、Footer(页脚)根据页面宽度自适应。

    表单布局

    基础表单用法,输入框在内容区居中;标题右对齐,最大范围值为左侧边距24px进行适应。

    复合筛选兼容

    筛选区等比分为三块,容器间隔20px,筛选条件容器内右对齐,间隔不变容器宽度根据页面宽度适应。

    栅格 Grid

    栅格可以有效的保证页面的一致性、逻辑性、加强团队协作和统一。

    基础布局

    使用单一分栏创建基础的栅格布局。

    混合布局

    通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

    分栏偏移

    支持偏移指定的栏数。

    对齐方式

    分栏灵活对齐。

    响应式布局

    自适应布局。

    色彩 Color

    为了避免视觉传达差异,使用一套特定的调色板来规定颜色,为你所搭建的产品提供一致的外观视觉感受。

    主色

    品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时,需要先明确品牌色在界面中的使用场景及范围。 Zhi-Design 的品牌色取自基础色板的橙色,Hex 值为 #FF8839,应用场景包括:关键行动点,操作状态、重要信息高亮,图形化等场景。

    功能色

    功能色代表了明确的信息以及状态,比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下,功能色尽量保持一致,不要有过多的自定义干扰用户的认知体验。

    中性色

    Zhi-Design 的中性色主要被大量的应用在界面的文字部分,此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异,同时结合 WCAG 2.0 标准。

    基础色板

    Zhi-Design 的基础色板共计 72 个颜色,包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。

    数据可视化色板

    在可视化设计中,色板的运用原则上优先保障准确性,考虑在操作指引、交互反馈上起到强化或凸显的作用。其次需兼顾色障碍群体,帮助有色盲色弱的人群也能在数据可视化中获取洞见。

    图标 Icon

    这里有 Z-Design 内置的大量图标。

    通用线性-Line

    主要用于中台表单和编辑页面的通用操作和提示,大部分需要和文字搭配使用,尺寸统一为14*14。

    通用面性-Fill

    主要用于中台表格和表单中通用操作与提示,尺寸统一为14*14。

    文字 Typography

    用于展示标题、段落、文本内容。

    字体

    字体的基本用法。

    字号

    字号的基本用法。

    字重

    通常情况下标题类使用 Medium,以突出层级关系,让信息更清晰。特殊场景下可使用 Semibold 强调。

    段落

    文本段落样式。

    按钮 Button

    按钮是一种命令组件,可发起一个即时操作。

    概述

    常用类型:

    • 主要按钮:用于主行动点,一个操作区域只能有一个主按钮。
    • 次要按钮:次级操作,弱化操作权重。
    • 虚线按钮:常用于添加操作,与容器等宽。
    • 文本按钮:置于控件容器内,表格操作、卡片操作等。

    适配规则:

    • 默认按钮左右固定间距为16px,小按钮为12px。
    • 默认按钮最小宽度分别为65px,小按钮为57px。

    基本用法

    按钮分为 主要按钮、次要按钮、虚线按钮和文本按钮四种。

    按钮尺寸

    按钮分为:小、默认,两种尺寸。高度分别为:28px/32px。推荐为默认尺寸。可在不同场景及不同业务需求选择适合尺寸。

    图标按钮

    按钮可以嵌入图标。

    长按钮

    按钮宽度随着容器宽度进行适配。

    下拉菜单按钮基本用法

    基础下拉菜单按钮。

    下拉菜单样式

    选项高度/间距;选项默认色值/悬停色值。

    下拉菜单弹出方向

    下拉菜单支持六种弹出方向,分别是:正下方,左下,右下,正上方,左上,右上。

    纵横比 Aspect ratio

    图像显示在屏幕宽度和高度的比例。

    如何使用

    通过使用纵横比进行设计,依据场景使用一致的图像比例,便于使用组件快速构建UI。除提供的固定纵横比之外,还支持自定义比例。

    1:1

    用于

    • 学习地图列表封面图。
    • 视频卡片列表封面图。
    • 头像、小图标等。

    3:1

    用于

    • 专题列表封面图。
    • 智能陪练列表封面图。
    • 证书列表封面图等。

    3:2

    用于

    • 资源选择器封面图。
    • 证书列表封面图。
    • 图文列表封面图等。

    8:5

    用于

    • 上传缩略展示图等。

    16:9

    用于

    • 视频播放封面图等。

    10:13

    用于

    • 纵向尺寸的图像。

    5:7

    用于

    • 栏目配置图片。

    自定义尺寸

    用于

    • 自定义运营图片。
    • 不属于以上纵横比的图片。

    菜单 Menu

    收纳、排列并展示一系列选项的列表。

    顶部导航菜单

    水平的顶部导航菜单:企培中台、云校中台的一级菜单。

    垂直菜单(内嵌菜单)

    左侧垂直方向,子菜单通过下拉展开。 交互说明:
    1.默认打开第一个二级导航界面,展开其他一级导航时,收起已展开的一级导航。一次只允许展开一个一级导航,可同时收起所有一级导航;
    2.导航字数限制:2~6字。
    3.加“V”的是增值应用菜单,开通了才能打开。

    视觉说明:
    垂直菜单固定宽度160px,可选择深色版和白色版两种风格。

    面包屑 Breadcrumb

    面包屑是辅助导航模式,用于识别页面在层次结构内的位置,并根据需要向上返回。

    何时使用

    当页面拥有超过两级以上的层级结构时;
    当需要告知用户『你在哪里』时;
    当需要向上导航的功能时。

    组件样式

    设计指南

    1.布局相关:位于顶部导航下方,宽度按屏幕规格适配。
    2.交互说明:点击回到上一层级界面;页面滚动后,面包屑盖住顶部导航,固定在顶部。

    步骤条 Steps

    明示任务流程和当前完成程度,引导用户按照步骤完成任务。

    文字步骤条

    这是文字步骤条组件的基础用法。点击文字可跳转步骤。

    新建流程步骤条

    从第1步开始创建,不能跳到后面的步骤编辑,填完后点“下一步”,暂存填好的信息并进入下一步。
    在第2、3步时,支持点击流程节点回到前面的步骤;切换步骤的时候,需暂存已修改的信息。

    编辑流程步骤条

    支持点击流程节点编辑信息,跳转时暂存修改信息。
    每个步骤都有“完成”按钮,点“完成”后修改信息生效。

    基本用法

    这是步骤条组件的基础用法。适用于5±2个步骤。

    等待处理

    等待处理为为未到达步骤;该类型步骤置灰不可点。

    正在处理

    正在处理为当前停留步骤。

    完成处理

    完成处理为已完成步骤;点击可进行跳转。

    分页 Pagination

    采用分页控制单页内的信息数量,也可进行页面跳转。

    基本用法

    最简单的用法。

    更多页码

    页码数较大时,使用多页码的分页样式。

    尺寸

    根据不同使用场景,可以使用不同尺寸的分页器。

    简洁

    在空间有限的场景下,使用较为简单的文本分页方式。

    输入框 Input

    文字录入的基本表单组件。

    单行文本框

    简短的内容输入使用,例如名称、短语等。
    交互说明:输入框失去焦点后,系统校验内容是否符合输入要求,如果内容不符合要求,输入框变红色,并且在输入框下方显示红字提示。

    多行文本框(文本域)

    适用于简介、描述等字数较多的内容输入。
    默认3行文字高度,如超过3行,提供滚动条。

    字数统计

    需在前端(app、h5、小程序、智门户)显示的内容,在中后台输入时,需要限制字数。 交互说明:
    1.中文、字母、数字、符号、空格都按具体数目计数,不按字符数计数。例如1个字母、1个数字、1个空格都记为1个字。
    2.输入过程中,实时统计已输入字数。
    3.字数超限后,无法继续输入内容。

    前置/后置标签

    有前置/后置内容不可随意输入时,可在输入框前后加入特定的内容。

    搜索输入框

    用于表格数据查询。

    密码输入框

    密码输入时,可切换明文/密文显示。

    数字输入框 InputNumber

    仅允许输入数字格式的输入框。

    基本用法

    通过鼠标或者键盘输入范围内的标准数值。
    数字超限后,自动改为最大值。

    不可用

    数字输入框不可用状态。

    不可点

    超过最小数值时,下箭头不可点;超过最大数值时,上箭头不可点。

    精度

    根据实际场景设置精度。

    单选框 Radio

    在一组相关且互斥数据中,用户仅能选择一个选项。

    基本用法

    单选框的基本用法。建议5个以内选项采用单选框。

    水平单选框组

    这是水平单选框组。水平间距为24px。

    垂直单选框组

    当选项内容较多时,使用垂直单选框组。垂直间距为12px。

    带说明单选框

    这是带说明单选框。

    复选框 Checkbox

    在一组数据中,用户可通过复选框选择一个或多个数据。

    基本用法

    最基本的点击选中操作。

    带说明复选框

    这是带说明复选框。

    全选

    可以选择复选框组。 a、图标大小为16px*16px,文本最少1个字符;
    b、当选项内容较多时,可使用多行选框组。垂直间距为12px。

    选择器 Select

    当选项过多(≥5项)时,使用下拉菜单展示并选择内容。少于5项时建议使用单选框或者复选框。

    1.下拉选择器

    当用户需要从一组同类数据中选择一个或多个时,可以使用下拉选择器,点击后选择对应项。

    基础用法

    点击选择器触发下拉菜单,点击下拉菜单选中选项。

    选择器状态

    带搜索框的选择器

    展开后可对选项进行搜索。

    当选项数据量过大,技术上无法实现实时搜索的话,采用以下方案,点击选择器,触发下拉菜单,下拉菜单带有输入框,输入关键词后,需点击右侧搜索图标进行搜索,然后在搜索结果里选择选项。

    多选

    从下拉选项中选择多个选项。

    带搜索框的多选

    可以输入关键词搜索,从搜索结果中选择多个选项。

    2.树选择

    可选择的数据结构是一个树形结构时适用,例如公司层级、学科系统、分类目录等。

    基础用法

    点击选择器触发下拉菜单,点击下拉菜单选中选项。

    多选

    点击选择器触发下拉菜单,在下拉菜单选中可以选择多个选项。

    带搜索框的树选择

    展开后可对选项进行搜索。

    3.级联选择器

    指在选择器选项数量较多时,采用多级分类的方式将选项进行分隔。

    何时使用

    • 需要从一组相关联的数据集合进行选择,例如省市区,公司层级,事物分类等。
    • 从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。
    • 比起下拉选择器组件,可以在同一个浮层中完成选择,有较好的体验。

    基础用法

    禁用选项

    用灰色来表明该项禁用。

    穿梭框 Transfer

    两栏布局的多选组件,将元素从一栏即时移到另一栏。

    基本用法

    两栏布局的多选组件,分为候选区和已选区,让用户以直观的方式将数据从一栏即时移到另一栏,完成选择或移除数据的交互行为。

    选择方式说明

    选择方式一:按组织,支持按组织架构选择某个组织下的全部员工;
    选择方式二:按员工,支持按编号、账号进行检索导入员工,同时支持搜索。

    组件状态

    选项根据操作的不同,状态分为:选中态,悬停态,默认态,禁用态。

    日期选择框 DatePicker

    选择日期。支持年、月、周、日类型,支持范围选择等。

    基本用法

    日期输入器的基础使用。

    范围选择框

    可以选择输入一个日期范围。

    带时间的日期选择

    使用带时间的日期选择。

    禁用

    禁用状态。

    时间选择框 TimePicker

    在弹出面板上选择时间,以便捷完成时间输入的控件。

    基本用法

    时间输入器的基础用法。

    范围选择框

    可以选择输入一个时间范围。

    定制时分

    时间间隔一刻钟供选择。

    禁用

    禁用状态。

    默认值

    时间输入器的有默认值的情况。

    上传 Upload

    将本地文件上传到服务器。

    图片上传

    主要用于资源封面图的上传,需给出对图片的要求(比例、格式、大小)。
    点击上传区域,打开系统文件选择弹窗,显示满足要求的图片;如果对图片比例有要求,图片上传后,需提供裁切框。

    文件上传

    主要用于附件的上传,不需要预览图,需给出对的要求(格式、大小)。
    点击上传按钮,打开系统文件选择弹窗,显示满足要求的文件。
    可展示上传进度。
    上传完成后,文件支持删除,可选择支持下载。
    可批量上传多个文件,具体数目根据使用场景确定;同名同类型文件会覆盖。

    小图标上传

    用于上传简单的小图标,例如头像、徽章、app快捷入口等。
    可支持gif、png、jpg等格式。
    图片比例固定1:1,不提供裁切框,当图片比例非1:1时,拉伸适配,填充整个圆形。
    上传后,点击图片直接重新上传。

    开关 Switch

    互斥性的操作控件,用户可打开或关闭某个功能。

    基本用法

    最基础的应用。

    自定义文案

    自定义开关打开(关闭)时需要显示的文字或者图标。

    禁用状态

    通过状态设置开关为禁用状态。

    不同尺寸的开关

    通过指定大小可以得到不同尺寸的开关。开关常规尺寸高度22px,最小尺寸高度16px。

    评分 Rate

    评分打星组件。

    基本用法

    基础评分。

    半选

    支持半选评分。

    附有文案

    含有文案的评分组件。

    支持清除

    支持通过再次点击,来清除评分。

    只读

    只读,无法进行鼠标交互。

    其他评分字符

    可以将星星替换为其他字符,比如表情、字母,数字,字体图标甚至中文。

    任意长度的评分

    支持自定义评分组件长度。

    表单 Form

    具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。

    基本用法

    表单在容器中的对齐方式,输入框居中。
    表单标签建议10个字以内。

    表单输入

    表单输入中、已输入状态。

    表单禁用

    表单禁用状态。

    表单校验

    展示了表单校验的使用方法。

    统计数值 Statistic

    突出展示某个或某组数字、带描述的统计类数据。

    基本用法

    当需要突出某个或某组数字或展示带描述的统计类数据时使用。

    趋势对比

    趋势数值:红色代表增长,绿色代表下降,灰色代表持平。

    计时组件

    倒计时组件。

    时间格式

    时间显示。

    图片 Image

    展示和预览图片。

    基本用法

    展示图片缩略图,单击缩略图后图片可放大显示。

    预览展示

    单击缩略图后放大显示的预览图,展示原图尺寸与比例,点击关闭按钮或空白处可关闭预览图片。

    错误状态

    当加载图片失败的时候显示图片占位符。

    多图展示

    展示多张图片缩略图,可单击任一图片放大展示。

    多图预览

    展示多张图片缩略图的预览图片,可单击任一图片放大,点击左右切换预览多张图片。

    渐进加载

    大图在加载时,通过给自定义加载状态效果传递一个小一些的图片,让其原图在未被加载成功时显示,以此来模拟渐进加载。

    显示描述

    缩略图状态下,可以将图片的标题等信息显示在图片内部或底部,仅展示于缩略图。

    额外操作

    缩略图状态下,可以将对图片的操作内容显示在图片内部,点击进行相应操作,仅展示于缩略图。

    标签 Tag

    用于信息的选择、筛选、分类。用户通过标签进行信息反馈和交互操作。

    基本用法

    基本标签的用法,可以通过添加可关闭变为可关闭标签。

    添加和删除

    标签可以动态添加和删除。

    多彩标签

    我们添加了多种预设色彩的标签样式,用作不同场景使用。

    气泡卡片 Popover

    鼠标悬停、聚焦或点击在某个组件时,弹出的气泡式的卡片浮层。可以对卡片上的元素进行操作。

    基本用法

    鼠标移入或点击,弹出气泡,可对浮层上元素进行操作,承载复杂内容和操作。

    触发方式

    通过设置,可以指定不同的触发方式。

    位置

    悬浮层支持 12 个不同的方位。分别为: 上左 上右 下左 下右 左上 左下 右上 右下

    文字提示 Tooltip

    鼠标悬停、聚焦或点击在某个组件时,弹出的文字提示。

    基本用法

    鼠标移入,气泡出现,鼠标移出,气泡消失。

    箭头指向

    设置了箭头指向中心后,箭头将指向目标元素的中心。

    位置

    文字提示支持 12 个不同的方位。分别为: 上左 上右 下左 下右 左上 左下 右上 右下

    资源卡片 Card

    常规的内容容器,可承载文字、列表、图片、段落。

    何时使用

    封面效果比较重要的时候,可以使用资源卡片。

    设计指南

    1. 新增的卡片排在第一页的第一个。
    2. 所有列表页面默认按数据新增时间倒序排列。
    3. 显示器宽度适配说明:卡片大小固定,显示器宽度变化时,应根据实际大小确定每一行的卡片数量。
    4.鼠标hover在卡片上时,显示操作按钮。
    5.在左上角/右上角可按需增加标签。

    基础样式

    卡片宽高按具体内容确定,封面图片是静态图片,且有固定尺寸。
    使用场景:学习地图列表、专题列表。

    封面图多种比例

    封面图区域固定,但图片有多种比例。
    使用场景:证书列表。

    封面图上带有变量文字

    封面图上的文字是可配置的。
    使用场景:智能陪练列表。

    视频卡片

    点击封面可以直接播放视频。
    使用场景:小视频。
    鼠标hover在封面上的时候,显示播放按钮,点击后可以直接播放视频。

    标签页 Tabs

    分隔内容上有关联但属于不同类别的内容集合。

    基本用法

    默认展示第一个标签,一次可查看一个标签内容,可点击切换标签查看其他内容。

    带禁用的标签页

    带有禁用状态的标签,被禁用的标签既不可用,也不可点击,鼠标悬停显示禁用符号。

    带二级标签页

    支持标签页带二级标签栏,分为纵向二级标签栏和横向二级标签栏,默认选择二级第一个标签,可点击切换标签查看其他内容。

    不同类型

    支持展示不同类型的页签,分别为:基础样式、卡片样式。

    附加内容

    支持在页签右侧添加附加内容。

    动态删减标签页

    支持标签的关闭选项,仅支持关闭新开标签,默认标签不可关闭。

    可滑动标签页

    可容纳更多标签,点击左右箭头查看未展示标签。

    列表 List

    用来展示信息,可承载文字、列表、图片、段落,常用于数据展示页面。

    概述

    用来展示信息,可承载文字、列表、图片、段落,常用于数据展示页面。

    文字列表

    采用纯文字的表现方式,简明扼要的展示出列表信息的基本内容。

    图文列表

    采用图片+文字的表现方式,更加直观的展示出列表信息的基本内容。

    折叠面板 Collapse

    对复杂区域进行分组和隐藏,保持页面的整洁。

    基本用法

    通过折叠面板收纳内容区域,可折叠/展开单个或多个面板,面板之间不受影响。

    混合模式

    标题面板和折叠面板的混合模式,标题面板默认展开,不可进行折叠/收起操作,折叠面板使用基本用法。

    树形控件 Tree

    用清晰的层级结构展示信息,可展开或折叠。

    何时使用

    组织架构、岗位体系、课程分类等,使用树形控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。

    基础用法

    基础的树形结构展示。

    可选择

    适用于需要选择层级时使用。

    禁用选项

    用灰色来表明该项禁用。

    可自定义的树形控件

    节点的内容支持自定义,鼠标hover在节点上时,出现操作图标,可以点击图标来增加、编辑、删除节点。

    表格 Table

    用于数据收集展示、分析整理、操作处理。

    组件定义

    表格是用行列的形式,结构化展示信息的组件;方便用户查看、分析数据。当需要时对数据进行排序、搜索、分页、自定义操作等复杂行为。

    组件构成

    • 表头 (必有):说明这一列的信息类别,也可以在表头放置一些排序、筛选等操作按钮。
    • 单元格(必有) :表格的主体由多个单元格组成,单元格内支持文字、图标、按钮、标签、单选框、复选框等元素。
    • 行列分割线(非必有):从视觉上分隔信息。

    基础表格

    由表头和单元格组成,无其他拓展操作,对数据进行最基础展示。

    固定列表格

    用于在内容展示不全场景,出现滚动条可滑动预览。

    单选/多选表格

    表格可进行单选/多选。

    可编辑的表格

    带行编辑功能的表格。

    可控的筛选和排序

    使用受控属性对筛选和排序状态进行控制。

    可展开的表格

    表格行可以展开,以展示更多信息。

    空状态 Empty

    指当前场景没有对应的数据内容,呈现出的一种状态。

    概述

    指当前场景没有对应的数据内容,呈现出的一种状态。

    基本用法

    空状态由自定义图标或自定义插图加文字组成。

    时间轴 Timeline

    垂直展示的时间流信息。

    基本用法

    当有一系列信息需要按时间进行排列时,可用一条时间轴进行视觉上的串联,可正序或倒序。

    显示节点状态

    当时间流信息中,需要展示各个时间节点不同的状态时,可以采用不同的颜色表示。

    绿色:表示【已完成】或【成功】状态
    红色:表示【警告】或【错误】状态
    蓝色:表示【正在进行】状态
    灰色:表示【未完成】或【失效】状态

    强调节点

    当时间流信息中,有需要强调的重点信息时,可以设置不同的图标或其他元素进行强调区分。

    审批流时间轴

    在审批流信息中,有较多审批步骤时,需要将审批步骤用时间轴的方式串联起来,方便用户阅读。

    警告提示 Alert

    向用户显示警告的信息时,通过警告提示,展现需要关注的信息。

    基本用法

    数据提交后的系统反馈,一般使用简短的语句,长度根据文字适配,提示3秒。

    不同类型

    显示关闭按钮,点击可关闭警告提示。

    含有标题

    通过设置可以添加标题,将内容变为辅助性介绍文字。

    顶部公告

    可以当作顶部公告使用。

    操作项

    可以在右上角自定义操作项。

    抽屉 Drawer

    触发命令后,从屏幕一侧滑出的抽屉式的面板。

    何时使用

    抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到原任务。
    当需要一个附加的面板来控制父窗体内容,这个面板在需要时呼出。比如,往界面中添加内容。

    信息编辑的抽屉

    点击右上角“关闭”和“取消”按钮,需给出确认弹窗:请确认是否关闭,关闭后将丢失尚未保存的内容。
    点击“确定”,保存已修改的内容,并收起抽屉。

    信息查看的抽屉

    点击蒙层和右上角关闭按钮都可关闭抽屉。

    设计指南

    1.布局相关:上下通栏,抽屉宽度不超过界面的1/2,信息超出一屏时,提供抽屉范围内的滚动条。
    2.搭配使用:抽屉是一种容器,可以搭配任何内容。
    3.交互说明:在父窗体触发后,从右侧向左展开;点击右抽屉上角关闭按钮,往右侧收起。

    全局提示 Message

    操作触发的轻量级全局反馈。

    基本用法

    提供用户操作反馈信息。
    顶部居中显示并3秒后自动消失,是一种不打断用户操作的轻量级提示方式。

    提示类型

    分为成功、警告和错误三种类型。

    对话框 Modal

    在当前页面打开一个弹窗,承载响应的操作。

    基本用法

    需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用对话框在当前页面正中打开一个浮层,承载相应的操作。
    另外当需要一个简洁的确认框询问用户时,可以使用信息提示对话框。

    基础弹窗

    文本信息对话框。

    信息提示

    各种类型的信息提示,只提供一个按钮用于关闭。

    确认对话框

    提示用户确认其已经触发的动作,并询问是否进行此操作时会用到此对话框。

    进度条 Progress

    给予用户当前系统执行中任务运行状态的反馈,多用于运行一段时间的场景,有效减轻用户在等待中产生的焦虑感。

    基本用法

    简单的进度条,适合放在较狭窄的区域内。

    进度条状态

    颜色属性用于设置进度条的颜色。

    结果 Result

    用于反馈一系列操作任务的处理结果。
    当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用。

    _403

    没有当前页面的访问权限。

    _404

    此页面未找到。

    _500

    通常表示服务器错误。

    加载中 Spin

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

    基本用法

    两个简单的 loading动态。页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

    刷新页面loading样式

    页面、文本类刷新时候的加载样式。