组件工具集提供 组件Symbol 快速拖拽功能,秒级生产设计稿,🚀提速设计&维护效率。所有 Symbol 均按 📘财富体验设计GuideLine 建立。

目前只提供交互组件库,视觉组件部分等视觉 GuideLine 梳理完毕后跟进。

工具演示

导航类

Status 状态栏

状态栏位于界面顶端最上层,用户全局展示设备当前重要信息,包括时间、电量、网络,通知标识等。📘

Header 标题栏

标题栏为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。在iOS和Android展示有所不同。📘

TabBar 底部标签栏

应用屏幕底部会显示一个标签栏,并提供在应用的不同部分之间快速切换的功能。标签栏在所有屏幕方向上保持相同的高度,并在显示键盘时隐藏。📘

Tabs 标签选项卡

当需要展示二级以下内容时,屏幕顶部会展示一个标签栏,并提供在应用的不同部分之间快速切换的功能。标签栏在所有屏幕方向上保持相同的高度。📘

Footer 页脚

当页面内容加载完成时,可以在背景上通过文字形式给与用户提示。页脚可以通过透出平台品牌宣导,促进用户的理财安全感知;满足财富业务的法务合规需求,明确法律责任。📘

PopMenus 气泡菜单

气泡菜单作为用户快速启动任务的操作方式,具有较强的扩展性并且能够允许用户方便的进行取消操作。气泡菜单对当前页面的影响程度很小,很适合作为快捷菜单使用。📘

Panel 浮层面板

浮层面板作为临时的视图容器,可以在不改变或跳出当前页面的前提下,提供额外的信息展示或操作交互。📘

展示类

List 列表

列表将数据呈现为可以分为平铺和分组形式。使用列表以清单的形式干净,高效地显示大量或少量信息。一般来说,列表是基于文本内容的理想选择,也可以在列表中加入图标、按钮、箭头等其他元素扩展场景。📘

Gird 宫格

宫格主要作为信息聚合的目的,通过图标集合清晰展现各个入口。在这种界面中,用户的行为主要在寻找信息入口。信息呈现的内容比较少,效率比较高。用户也比较容易记住各入口位置,但是宫格不宜过多,宫格越多,用户的选择压力越多。📘

Cards 卡片

卡片是一种灵活的容器。卡片可以包含不同的信息,整合到一个明确边界的控件单元内,为用户提供一个独立的内容和交互操作。 📘

Tag 小标签

标签用来标志特定对象的分类或内容,例如产品属性标签,用户兴趣标签。📘

Progress 进度条

进度条能够很好的可视化呈现给用户当前的服务进度,并且让他能够对整个流程有更加清晰的了解。📘

输入类

Button 按钮

需要重点强调该操作并且引导用户去点击的入口通过按钮表达。📘

TextFields 输入框

当用户需要输入文字内容时点击文本框,它将自动打开键盘。使用文本字段来请求少量信息,例如买入基金等,用于产品的买入(转入/预约)、定投、卖出(转出)的金额输入。输入框控件应包含与用户操作相关的规则提示及反馈,例如交易规则、确认时间、报错反馈等。📘

Picker 选择器

选择器是为用户提供选项并实现选择的控件。选择器包括一个或多个不同值的可供选择,当用户正在编辑字段或点击菜单时,选择器通常会显示在屏幕底部,选择后需要配合按钮或完成当页页面所有表单后进入下一阶段。📘

ActionSheet 操作面板

底部面板是响应于控件或动作出现的特定风格的面板,并呈现与当前上下文相关的一组两个或多个选项。使用操作菜单让人们启动任务,或者在执行潜在的破坏性操作之前请求确认。在较小的屏幕上,操作页面从屏幕底部向上滑动。📘

Search 搜索框

Filter 筛选

反馈类

Dialog 对话框

当需要展示二级以下内容时,屏幕顶部会展示一个标签栏,并提供在应用的不同部分之间快速切换的功能。标签栏在所有屏幕方向上保持相同的高度。 📘

Toast 小提示

当页面出现短暂快速的提示时采用小提示,帮助用户了解当前的处境以及操作的相关结果。📘

Notice 顶部提示

当应用有重要公告或者由于用户的刷新操作产生提示反馈时可以使用顶部提示系统。顶部提示不会对用户浏览当前页面内容产生影响,但又能明显的引起用户的注意。📘

RedDot 红点

红点用来承载活动和消息的通知作用,红点分为数字红点和文字红点,查看后消失。📘

Tips 引导

其他

Agreement 协议组件

Refresh 刷新加载

Result 结果页

Empty 空值异常

Keyboard 键盘

Gesture 手势

🚧 施工中

更多组件正在制作中...