大厂如何做设计系统?组件库规范源文件合集

3 评论 4240 浏览 59 收藏 11 分钟

编辑导语: 组件库是设计系统里的一个重要分支,一个合适的组件库可以帮助设计师和开发者提高工作效率;本文作者分享了关于各个大厂已经成形的组件库,一起来看一下。

最近为了给部门制定合理的设计规范,方便各个团队更好的高效协作;为此参考了许多国内外优秀的设计规范,趁着这次机会做一个整理,而且这些设计规范基本上都是附带 Sketch 源文件的。

但实际上组件库的整理工作也是比较繁复的,我们在开始之前,需要去判断什么情况下组件库可以真正为我们节省工作量提升效率;而这些已经成形的组件库,非常值得大家下载学习、参考和使用。

一、大厂

1. ANT Design(蚂蚁金服)

蚂蚁金服出品,非常著名的框架;企业级产品的设计系统,很多公司的项目都在使用,而且提供了对设计师友好的Sketch规范文件,可以直接拿来用。

官方链接:https://ant.design/

源文件规范下载:https://ant.design/docs/resources

移动端: AntDesignMobile Template V1.0.sketch

首页: Ant.Design.home-3.0.sketch

Pro: Ant.Design.Pro.sketch

web端: Ant.Design.3.0.Components.sketch

2. AntV Charts(蚂蚁金服)

AntV是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。(包含PC和移动端)

源文件规范下载:https://antv-2018.alipay.com/zh-cn/vis/resource/index.html

附件下载: AntV.Charts.sketch

3. Element UI(饿了么)

这是由饿了么 UED 设计开发的基于 Vue 的前端组件库,虽然在很多交互模式和组件样式以及设计理念上都参考了 Ant Design,但是也做了一些自己的修改和调整。

他们同样也推出了 Axure 元件库文件以及 Sketch 组件库,有兴趣的朋友可以参考研究一下。

源文件规范下载:https://element.eleme.cn/#/zh-CN/resource

附件下载: Element UI Kit_v2.0.sketch

3. Zan Design System(有赞)

服务于 SaaS 产品的设计体系。连接设计和开发,让协作变得高效简单;通过沉淀不同行业、场景的经验和思考,推动社交生态内的用户体验一致性。

源文件规范下载:https://design.youzan.com/resource/resource.html

桌面端视觉规范: Zan Desgin PC_2.0_beta.sketch

视觉规范: Zan Design Vant 视觉规范 V3.0 .sketch

元件库: Zan Design Vant 元件库 TC_ZY.zip

4. Mand Mobile(滴滴)

面向金融场景的Vue移动端UI组件库,丰富、灵活、实用,快速搭建优质的金融类产品,让复杂的金融场景变简单。

源文件规范下载:https://didi.github.io/mand-mobile/#/en-US/design/other/resource

5. Taro UI(京东)

Taro UI,一套基于 Taro 框架开发的多端 UI 组件库,可以在微信小程序 / H5 / ReactNative 等多端适配运行。京东用户体验设计部的凹凸实验室出品。

源文件规范下载:https://taro-ui.aotu.io/#/docs/resource

附件下载: TaroUI.sketch

Axure部件库: taroui-rplib1565263474229.zip

6. AT UI(京东)

AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库,主要用于快速开发 PC 网站中后台产品。

源文件规范下载:https://at-ui.github.io/at-ui/#/zh/resource/design

附件下载: feather.sketch

7. WeUI(微信)

由微信团队推出的可以用于微信小程序设计的 Sketch 组件库,用起来也很方便,有微信端设计需求的朋友可以参考。

源文件规范下载:https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87

8. QMUI(腾讯)

QMUI,腾讯出品,分为Web、iOS、安卓三个端,都有相应的dome下载安装;设计师可以下载安卓和iOS应用,经常看看里面的组件,熟悉后,和技术的协作会更有效率。

官方文档:https://qmuiteam.com/web/page/widget.html

二、国外

1. Apple UI Design Resources

iOS 的设计规范其实并没有 Material Design 那么具体和细节,但作为一个 iOS 平台的设计人员还是需要把它们的设计理念烂熟于胸。

对于 iOS 平台的 Sketch 组件库,我只推荐两个,一个是 Facebook 推出的 iOS 10 组件库,另外一个是由 Apple 官方推出的组件库,同样都有 Sketch 源文件。

源文件规范下载:https://developer.apple.com/design/resources/

2. Android Material Design

由 Google 设计团队推出的 Material Design 一经发布就红遍了全球设计界,多个富有突破性的设计理念,将理性与感性相结合的完美标准,使得越来越多的人基于 Material Design 制作了自己产品的设计规范。

除了谷歌官方的 Sketch 组件库外,还有一个基于 Material Design 色板的 Sketch 源文件下载,用起来非常方便。

源文件规范下载:https://material.io/resources#sticker-sheets-icons-components

Material Design 官方相关源文件下载

Material Design 色板 Sketch 源文件下载

3. Clarity Design

Teambition出品。Clarity Design 是一套全面的设计语言,从设计原则到字体排版,从交互到文案,从动效到样式,从组件到设计工具…… 提供了各种解决方法和指导,设计师和工程师可以快速找到相关的指导内容,有效地帮助完善工作并且提高效率。

源文件规范下载:https://design.teambition.com/resource/design-resource

4. Polaris

由国外 Shopify 团队推出的 Polaris 设计规范也有比较不错的参考价值,而且内容非常丰富完整,感兴趣的朋友可以查看官方文档好好研究一下,他们同样提供 Sketch 组件库。

源文件规范下载:https://polaris.shopify.com/resources/resources

5. Atlassian Design

由国外知名软件企业 Atlassian 推出的设计语言,涵盖了品牌、营销、产品相关的设计规范和理念,其丰富程度仅次于 Material Design,可以说给了设计师很多参考与帮助,另外还提供了非常完整详细的 Sketch 组件库,强烈推荐大家研究学习!

源文件规范下载:https://atlassian.design/resources/sketch-library

6. Lightning Design System

Lightning Design System 是由 Salesforce 团队推出的一个设计规范,它们的规范文档也是相当完整而且可参考性很强,推荐大家研究,同时它们也有 Sketch 组件库可供下载。

官方文档:https://www.lightningdesignsystem.com/

源文件规范下载:https://github.com/salesforce-ux/design-system-ui-kit/blob/master/README.md

7. 全球大公司组件库集合

源文件规范下载:https://www.figma.com/community/ui_kits

https://www.figma.com/community/ui_kits

三、其他

1. H5/触屏

开源前端组件&交互Demo

官方文档:http://vue.ydui.org/demo/#/

http://vue.ydui.org/demo/#/

2. iview

一套基于 Vue.js 的高质量UI 组件库。Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架;在网站中可以看到数量众多的UI组件和对应代码,本质上和我们制作UI规范是一样的。

官方文档:https://www.iviewui.com/

3. MacOS UI Library

非官方,由 Sketch 团队维护

源文件规范下载:https://www.sketch.com/downloads/mac/

4. Ant V

规范文档:https://mobile.ant.design/index-cn

5. Bootstrap

Bootstrap是Twitter推出的一个用于前端开发的开源工具包,是一个CSS/HTML框架,目前世界上的很多网站开发都使用了这个。其中的栅格理论、响应式解决方案都变成了业界的参考规范。

官方文档:https://v4.bootcss.com/

四、写在最后

将设计规范做成 Sketch 组件库甚至 Axure 元件库其实任务量很大,但是这项工作做好了能够大大提高产品、设计、开发团队的协作效率!

但组件库不是表面工作,毕竟,产品研发工作不是一蹴而就的,组件库可以帮助研发团队持续地维护产品

在组件库的研发工作中,我们需要思考:

  • 组件库在每个项目中的使用率,如果使用率比较低,那么组件库可能太臃肿。所以要及时给臃肿的组件库瘦身,只保留常用组件,去除不通用的组件。
  • “合适” 比 “牛逼” 更重要。组件库不是越多越好,每个团队都与众不同,其产品和业务场景也各具特色。盲目追求 “大而全” 不可取。
  • 组件库只是作为参考规范,不是照猫画虎、一成不变的。在特别情况脱离现有组件库的前提下,要保持整体的一致性,帮助我们更好的统一语言规范。

 

本文由 @七分 翻译发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 感谢分享

    回复
  2. 回复
  3. cooool

    回复