哈喽,刀友们!

今天给大家分享一些在B端设计中常用的开源组件库,都是非常nice的设计案例参考,需要的小伙伴可以保存收藏。

01 Ant Design

antdesign table 大数据 ant design tabs_素材

图片来源:墨刀素材广场

Ant Design是蚂蚁集团基于大量的项目实践和总结,研发的服务于企业级产品的设计体系。

Ant Design提供了丰富的基础 UI 组件,以及各个组件的使用方法。

不仅有通用业务模块页面,还有各种表单、列表、导航、落地页、按钮等组件库,非常多参考模板。

antdesign table 大数据 ant design tabs_原型设计_02


antdesign table 大数据 ant design tabs_antdesign table 大数据_03

除了多元化的组件库,Ant Design 的图标也尽力保持图形的简洁,表意准确直接,让用户能一目了然。

能上能下的方向性图标,可以满足多种场景需要。

antdesign table 大数据 ant design tabs_素材_04

数据类图标包含了射线图、饼状图等多种类型,完全满足原型设计的需求。

antdesign table 大数据 ant design tabs_原型设计_05

02 TDesign

antdesign table 大数据 ant design tabs_表单_06

TDesign 是腾讯内部团队联合开发者一起打造的企业级设计体系。

TDesign 汇集了腾讯众多优秀组件库能力和设计研发经验,包含桌面端、移动端、小程序等组件库源文件资源。

墨刀素材广场在前不久刚上线了29组实用性超高的TDesign桌面端组件资源,包括表格、表单、进度条、导航菜单、日历等,非常实用。

antdesign table 大数据 ant design tabs_表单_07

(来源:墨刀素材广场)

antdesign table 大数据 ant design tabs_企业级_08

不仅如此,TDesign还提供了整体的设计语言,色彩、字体、动效、图标、布局、暗黑模式等组件,大家可根据自己需求进行下载。

03 Element

antdesign table 大数据 ant design tabs_表单_09

Element 是一套由饿了么团队为开发者、设计师和产品经理精心设计的 Web 组件。

使用这些组件,能帮助产品经理更加快速搭建原型,提升效率,体现交互细节。

并且,使用前端框架封装的代码还能帮助工程师们快速开发。

墨刀素材广场已经上线了Element的全系组件,包括表单类、提示类、导航类、基础类、数据类、输入框类等等。

共 380 多个组件,满足了后台原型设计中所有需求。

表单类:

antdesign table 大数据 ant design tabs_企业级_10

输入框:

antdesign table 大数据 ant design tabs_原型设计_11

导航类:

antdesign table 大数据 ant design tabs_表单_12

04 Semi Design

Semi Design是由抖音前端团队,MED 产品设计团队设计、开发并维护的设计系统。

Semi Design 包含了设计语言、React 组件、主题等开箱即用的中后台解决方案,可用于快速搭建美观的 React 应用。

antdesign table 大数据 ant design tabs_原型设计_13

Semi Design开源不久被发现有Ant Design 的痕迹,Semi Design团队也承认早期使用了 Ant Design 的文案没有注明出处。

总体来看,Semi Design 已持续稳定维护了两年多,它高质量组件和强大的主题定制特性也获得一众用户的青睐。

墨刀素材广场上线了Semi Design 10个组件库,包括日期、评分、按钮、选择、输入方式,还有1组图标库,扩充了原型设计的素材选择。

antdesign table 大数据 ant design tabs_antdesign table 大数据_14

图片来源:墨刀素材广场

antdesign table 大数据 ant design tabs_素材_15

05 Arco Design

antdesign table 大数据 ant design tabs_素材_16

ArcoDesign是字节跳动旗下企业级产品设计系统。

提供了sketch、figma、Axure等组件源文件,还提供了仪表盘、表单、列表、结果页 、个人中心、数据可视化、异常页等样式在线查看。

墨刀素材广场可以直接下载ArcoDesign的方向性图标库,更多资源敬请期待后续上线。

antdesign table 大数据 ant design tabs_表单_17

以上是今天的优秀素材案例,后面会继续上线更多素材资源、案例模版,也欢迎留言告诉我你们的需求哦~

如何快速复用原型

1.在素材广场中搜索到想要的素材,点击使用。

2.保存到个人空间中,点击打开素材,即可复用。