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

最近为了给部门制定合理的设计规范，方便各个团队更好的高效协作；为此参考了许多国内外优秀的设计规范，趁着这次机会做一个整理，而且这些设计规范基本上都是附带 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协议。

、认识网页

我们日常见到的网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。

代码是如何形成网页的呢? 那就需要浏览器引擎进行解析渲染了。

二、常见浏览器介绍

浏览器是网页运行的平台，常用的浏览器有：

• IE
• 火狐（Firefox）
• 谷歌（Chrome）
• Edge
• Safari
• Opera

2.1 浏览器占有的市场份额

根据市场调查机构 Statcounter 最新公布的数据，2023 年 11 月全球桌面浏览器市场份额排名前三名分别是谷歌 Chrome（62.06%）、苹果 Safari（13.3%）和 Edge 浏览器（5.5%）。虽然 Edge 浏览器在全球范围内均有分布，但其份额仍无法超过 Safari 浏览器。与上月相比，Chrome 的份额下降了 0.25 个百分点，Safari 的份额增加了 0.07 个百分点。Firefox 在该月的全球份额达到 3.24%，相比上月增长了 0.22 个百分点。

在桌面端浏览器市场中，Chrome 继续稳居第一，市场份额为 62.06%，尽管有所下降但也属于正常波动范围。Safari 以 13.3% 的份额紧随其后，在全球范围内享有较高的知名度。Edge 的市场份额从上月的 11.8% 下降到 11.23%，仍然保持着良好的增长趋势。

此外，Firefox 的全球份额也有所上升，达到 6.69%，与其他浏览器相比表现强劲。Opera、360 安全浏览器、IE 等其他浏览器也在全球范围内占有一定的市场份额。

总体而言，在桌面浏览器市场上，Chrome 继续保持着领先地位，而 Safari 和 Edge 则在市场上展开了激烈的竞争。预计在未来几个月内，这些产品将继续保持稳定的增长态势，并且会继续影响着用户的使用习惯和技术趋势。

2.2 浏览器内核（理解）

浏览器内核又可以分成两部分：【渲染引擎】(layout engineer 或者 Rendering Engine) 和 【JS 引擎】。

• 渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
• JS 引擎：解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

2.3 常见的渲染引擎

内核通常只指渲染引擎：

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来【JS 引擎越来越独立，内核就倾向于只指渲染引擎】。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

（1）Trident(IE内核)

Trident [?tra?dn:t]：n. 三叉戟

国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。

代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等（这些国产浏览器都是双内核）。

Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。

（2）Gecko(firefox)

Gecko [?geko?] n. 壁虎

Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该(渲染引擎)，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。

（3）webkit(Safari)

Safari 是苹果公司开发的浏览器，所用浏览器内核(渲染引擎)的名称是大名鼎鼎的开源引擎 WebKit。

现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。

代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 4.4之前的默认浏览器

（4）Chromium/Bink(chrome)

Blink [bi?k] n. 架子；长凳

在 Chromium 项目中研发 Blink 渲染引擎，内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支, 也是开源的。 （大名鼎鼎的 V8 是 Chrome 的 JS 引擎）

大部分国产浏览器最新版都采用Blink内核。

（5）Presto(Opera)

Presto ['pr?sto] adj. 迅速的

Presto 是挪威产浏览器 opera 的 "前任" 内核(渲染引擎)，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

了解一点：

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

三、Web标准（重点）

通过了解以上浏览器的内核不同，我们知道他们工作原理、解析肯定不同，显示就会有差别。

由于不同的浏览器解析出来的效果可能不一致，开发中通常需要为同个界面做多版本的开发。

3.1 Web 标准的好处

1、让Web的发展前景更广阔

2、内容能被更广泛的设备访问

3、更容易被搜寻引擎搜索

4、降低网站流量费用

5、使网站更易于维护

6、提高页面浏览速度

3.2 Web 标准构成

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

• 结构标准：用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分（我们主要学习XHTML）。
• 样式标准：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
• 行为标准：是指网页模型的定义及交互的编写，主要包括 W3C标准(BOM、DOM) 和 ECMAScript 两个部分

理想状态下，我们的源码由3部分组成： .HTML 文件(定义结构) .css 文件(定义样式) .js 文件(定义行为)

这样代码的结构清晰，好维护

打个比方：

evExpress WinForm拥有180+组件和UI库，能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForm能完美构建流畅、美观且易于使用的应用程序，无论是Office风格的界面，还是分析处理大批量的业务数据，它都能轻松胜任！

注意：目前基于HTML & CSS的控件正在积极研发中，可以作为技术预览提供，如果需要使用请下载最新版组件体验哦~

DevExpress WinForms Subscription官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网

一组控件和组件允许开发人员构建HTML格式的UI，并使用CSS样式自定义UI元素的外观设置、大小、填充和布局选项，不再需要处理自定义绘制事件或更改大量属性来修改控件以匹配UI规范，可以使用HTML和CSS标记的知识为桌面应用程序构建布局。

主要功能包括：

• 在HTML标记中指定数据绑定表达式，以显示来自底层数据源的值。
• 使用CSS创建响应式UI——当用户鼠标指针悬停在或单击特定元素上时添加效果。
• 向UI添加外部控件(例如，文本框)。
• 处理控件事件来响应UI元素鼠标动作。
• 启用DirectX硬件加速来获得更好的性能。

HTML-CSS标记

支持HTML和CSS的控件和组件从模板呈现它们的UI，控件模板的HTML标记指定控件的内容(UI元素)，而模板的CSS代码指定应用于UI元素的样式、显示和布局设置。

使用控件的HtmlTemplate属性来指定模板，在设计时，开发人员可以在HTML Template Editor（HTML模板编辑器）中创建模板。

该编辑器支持语法高亮显示、智能感知(一种代码完成辅助工具)和预览面板，预览面板允许开发人员检查可视元素——将鼠标悬停在元素上时定位的HTML标记。

示例

下面的示例演示了一个HtmlContentControl从指定的HTML-CSS模板呈现一个UI，该控件被绑定到Employee对象的列表。模板的HTML代码包含数据绑定表达式，用于显示来自数据源的值。

C#

public class Employee {
public string DisplayName { get; set; }
public string FullName { get; set; }
public SvgImage Photo { get; set; }
}
//...
Employee emp=new Employee();
emp.DisplayName="Leah Test Coordinator";
emp.FullName="Leah Simpson";
SvgImageCollection imageCollection=new SvgImageCollection();
imageCollection.Add("photo", "image://svgimages/icon builder/business_businesswoman.svg");
emp.Photo=imageCollection["photo"];
List<Employee> list=new List<Employee>();
list.Add(emp);
htmlContentControl1.DataContext=list;
//...
void OnButtonClick(object sender, DxHtmlElementMouseEventArgs args) {
if(args.ElementId=="uploadBtn") {
//...
}
if (args.ElementId=="removeBtn") {
//...
}
XtraMessageBox.Show("Button " + args.ElementId + " clicked");
}

VB.NET

Public Class Employee
Public Property DisplayName() As String
Public Property FullName() As String
Public Property Photo() As SvgImage
End Class
'...
Dim emp As Employee=New Employee()
emp.DisplayName="Leah Test Coordinator"
emp.FullName="Leah Simpson"
Dim imageCollection As SvgImageCollection=New SvgImageCollection()
imageCollection.Add("photo", "image://svgimages/icon builder/business_businesswoman.svg")
emp.Photo=imageCollection("photo")
Dim list As New List(Of Employee)()
list.Add(emp)
htmlContentControl1.DataContext=list
'...
Private Sub OnButtonClick(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)
If args.ElementId="uploadBtn" Then
'...
End If
If args.ElementId="removeBtn" Then
'...
End If
XtraMessageBox.Show("Button " & args.ElementId & " clicked")
End Sub

HTML

<div class="container" id="container">
<div class="avatarContainer">
<img src="${Photo}" class="avatar">
<div id="uploadBtn" onclick="OnButtonClick" class="centered button">Upload</div>
<div id="removeBtn" onclick="OnButtonClick" class="centered button">Remove</div>
</div>
<div class="separator"></div>
<div class="avatarContainer ">
<div class="field-container">
<div class="field-header">
<b>Display name</b><b class="hint">Visible to other members</b>
</div>
<p>${DisplayName}</p>
</div>
<div class="field-container with-left-margin">
<div class="field-header">
<b>Full name</b><b class="hint">Not visible to other members</b>
</div>
<p>${FullName}</p>
</div>
</div>
</div>

CSS