您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

面向企业中后台产品的设计系统大合集

原创文章 分类: 行业资讯 版权:
4865 49 27 1
更新于:2019-02-13
25.3



最新干货:做中后台设计必须了解的优秀设计体系



Lightning Design System



Image title


所属企业


Salesforce是一家客户关系管理(CRM) 软件服务提供商,总部设于旧金山。虽然其大部分收入来自客户关系管理(CRM)产品,但Salesforce还销售一套补充的企业应用程序,专注于客户服务,营销自动化,分析和应用程序开发。



产品目标


Create the world's best enterprise app experiences.



官方最新设计资源直达


点击下载




Atlassian Design



Image title



所属企业


Atlassian是澳大利亚的企业软件公司,它以其问题跟踪应用程序Jira及其团队协作和维基产品Confluence而闻名,2017年收购协作服务Trello。



产品目标


Use Atlassian's end-to-end design language to create straightforward and beautiful experiences.



官方最新设计资源直达


点击下载




Shopify Polaris


Image title


所属企业


Shopify是一个加拿大的电子商务公司,总部设在渥太华,安大略省。它也是其专有的在线商店和零售销售点系统电子商务平台的名称。Shopify为在线零售商提供一套服务“包括支付,营销,运输和客户互动工具,以简化为小商户运营在线商店的过程。”



产品使命


Make commerce better for everyone, no matter where they’re located or their level of experience



官方最新设计资源直达


点击下载






写在前面



本文适合从事企业中后台系统设计或者对这方面感兴趣的设计师,以及在做前端组件化的开发小伙伴阅读。给大家整理了一些Sketch UI Kit链接放在文末,作为小福利送给大家,感兴趣的可以下载研究~

Image title



笔者近期在从事企业级中后台产品的组件化设计,为了更好的开展工作,做了一些关于组件化和设计系统的市场调研,过程中收集了一些竞品。现在把收集到的这些产品分享出来,目前不做深度分析和评价,对这方面感兴趣的小伙伴可以另行研究或者添加本人微信(WeChat ID:627270092),相互交流学习。后面我也会结合自己的实际工作对于如何从0开始做一套Design System做一些技术和方法论的分享。



下面给大家分享13个关于前端设计系统的网站,开发框架涉及React、Vue、Angular、Bootstrap , 移动端和web端组件库都有



01 Ant Design 蚂蚁出品

Image title


官方实现:React、Angular , 支持web端和移动端 ,同时提供强大的AntV数据可视化解决方案


最近风头正火的蚂蚁金服在2018年年初更新的 Ant Design 3.0 , 基于Atomic Design思想打造的面向行业提供解决方案的设计系统,相信已经有跟多前端小伙伴已经尝到了使用这套系统的甜头。


官方提供的设计资源 Ant.Design.3.0.Components.sketch 密码:yn5f



02 iView TalkingData的Aresn出品

Image title


实现框架:Vue , 支持web端



Aresn的这套基于 Vue.js 的开源 UI 组件库可以说是在Ant Design官方推出Vue实现之前对其实现方式的补充,当然现在蚂蚁已经自己也实现了Vue版。但这并不妨碍iView的继续发展。



无相关设计资源可供下载



03 Zan UI 有赞出品

Image title


官方实现:web端采用React、移动端和微信小程序基于Vue



Zent ( \ˈzent\ ) 是有赞 PC 端 WebUI 规范的 React 实现,提供了一整套基础的 UI 组件以及一些常用的业务组件。目前我们有 50+ 组件,这些组件都已经在有赞的各类 PC 业务中使用,我们会在此基础上,持续开发一些新组件。



无相关设计资源可供下载


Vant是一套轻量、可靠的移动端 Vue 组件库。 具有以下特性:

1.50+ 个经过有赞线上业务检验的组件;


2.单元测试覆盖率超过 90%;


3.完善的文档和示例;


4.支持 babel-plugin-import;


5.支持 TypeScript;


6,支持 SSR;



04 Cube UI 滴滴出品

Image title


官方实现:Vue ,支持移动端



滴滴的移动组件库,具有明显的滴滴风格。感兴趣的可以研究。



无相关设计资源可供下载



05 Element 饿了么出品

Image title


官方实现: Vue 2.0、 Angular ,支持web端



官方提供的设计资源 Element UI Kit_v2.0.sketch 密码:plnx



06 SHINEOUT

Image title




官方实现:React ,支持web端



07 飞冰 阿里出品

Image title




官方实现:React,支持web端



飞冰是一套基于 React 的中后台应用解决方案,在阿里巴巴内部,已经有 270 多个来自几乎所有 BU 的项目在使用。经过 2 年的发展,飞冰已经是中后台 2.0 体系,这个阶段中我们的目标是赋能企业、组织搭建自己的中后台体系。飞冰包含了一条从设计端到开发端的完整链路,帮助我们的用户快速搭建属于自己的中后台应用。



08 RSUITE

Image title



官方实现:React ,支持web端



09 袋鼠UI 美团外卖出品

Image title


官方实现:Bootstrap ,支持web端



KangarooUI(又称袋鼠UI) 是美团外卖组件生态平台构建的基石,服务于提供标准化规范化的组件。当前推出的版本基于 Bootstrap 3.3.7 进行扩展,后续会持续推出Vue等版本。由于目前大部分业务线是jQuery和requireJs来进行开发的,所以引入袋鼠UI时,需要先引入jQuery(1.11.1以上版本)。另外需要特别注意的是袋鼠UI在1.0向2.0更新之后,所有 扩展组件 都必须通过 Kangaroo-Loader 进行加载。



10 Muse UI

Image title



官方实现:Vue2.0 ,支持web端



基于 Vue 2.0 优雅的 Material Design UI 组件库。Muse UI 拥有40多个UI 组件,用于适应不同业务环境。Muse UI 自定义主题方式极为优雅,仅需少量代码即可完成主题样式替换。



11 CARBON IBM出品

Image title




官方实现:React、Angular ,支持web端


官方提供的设计资源 Carbon Design Kit.sketch 密码:yyjj



12 Blueprint Palantir出品

Image title




官方实现:React ,支持web端



13 LIGHTNING Salesforce出品

Image title




官方实现:未知 ,支持web端和移动端


官方提供的设计资源 SLDS Component Library.sketch 密码:frba



福利



笔者收集整理的一些关于搭建一套设计系统的组件库参考 设计资源大礼包  提取码: wgix ,欢迎下载~




谢谢阅读!希望读完能对你有一点帮忙~




Z清晖

道阻且长,越努力越幸运

18粉丝/30关注

叫兽收藏家lv.3原创小生勤学标兵lv.1
Sketch的日常,好用的快捷键及插件分享TSAPP改版设计总结
0
Slipper

挺全

精彩!

扫描二维码
去手机端查看海报

Z清晖

TA已经获得7枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN