整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語： 組件庫是設計系統里的一個重要分支，一個合適的組件庫可以幫助設計師和開發者提高工作效率；本文作者分享了關于各個大廠已經成形的組件庫，一起來看一下。
最近為了給部門制定合理的設計規范，方便各個團隊更好的高效協作；為此參考了許多國內外優秀的設計規范，趁著這次機會做一個整理，而且這些設計規范基本上都是附帶 Sketch 源文件的。
但實際上組件庫的整理工作也是比較繁復的，我們在開始之前，需要去判斷什么情況下組件庫可以真正為我們節省工作量提升效率；而這些已經成形的組件庫，非常值得大家下載學習、參考和使用。
螞蟻金服出品，非常著名的框架；企業級產品的設計系統，很多公司的項目都在使用，而且提供了對設計師友好的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
AntV是螞蟻金服全新一代數據可視化解決方案，致力于提供一套簡單方便、專業可靠、無限可能的數據可視化最佳實踐。（包含PC和移動端）
源文件規范下載：https://antv-2018.alipay.com/zh-cn/vis/resource/index.html
附件下載： AntV.Charts.sketch
這是由餓了么 UED 設計開發的基于 Vue 的前端組件庫，雖然在很多交互模式和組件樣式以及設計理念上都參考了 Ant Design，但是也做了一些自己的修改和調整。
他們同樣也推出了 Axure 元件庫文件以及 Sketch 組件庫，有興趣的朋友可以參考研究一下。
源文件規范下載：https://element.eleme.cn/#/zh-CN/resource
附件下載： Element UI Kit_v2.0.sketch
服務于 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
面向金融場景的Vue移動端UI組件庫，豐富、靈活、實用，快速搭建優質的金融類產品，讓復雜的金融場景變簡單。
源文件規范下載：https://didi.github.io/mand-mobile/#/en-US/design/other/resource
Taro UI，一套基于 Taro 框架開發的多端 UI 組件庫，可以在微信小程序 / H5 / ReactNative 等多端適配運行。京東用戶體驗設計部的凹凸實驗室出品。
源文件規范下載：https://taro-ui.aotu.io/#/docs/resource
附件下載： TaroUI.sketch
Axure部件庫： taroui-rplib1565263474229.zip
AT-UI 是一款基于 Vue.js 2.0 的前端 UI 組件庫，主要用于快速開發 PC 網站中后臺產品。
源文件規范下載：https://at-ui.github.io/at-ui/#/zh/resource/design
附件下載： feather.sketch
由微信團隊推出的可以用于微信小程序設計的 Sketch 組件庫，用起來也很方便，有微信端設計需求的朋友可以參考。
源文件規范下載：https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87
QMUI，騰訊出品，分為Web、iOS、安卓三個端，都有相應的dome下載安裝；設計師可以下載安卓和iOS應用，經常看看里面的組件，熟悉后，和技術的協作會更有效率。
官方文檔：https://qmuiteam.com/web/page/widget.html
iOS 的設計規范其實并沒有 Material Design 那么具體和細節，但作為一個 iOS 平臺的設計人員還是需要把它們的設計理念爛熟于胸。
對于 iOS 平臺的 Sketch 組件庫，我只推薦兩個，一個是 Facebook 推出的 iOS 10 組件庫，另外一個是由 Apple 官方推出的組件庫，同樣都有 Sketch 源文件。
源文件規范下載：https://developer.apple.com/design/resources/
由 Google 設計團隊推出的 Material Design 一經發布就紅遍了全球設計界，多個富有突破性的設計理念，將理性與感性相結合的完美標準，使得越來越多的人基于 Material Design 制作了自己產品的設計規范。
除了谷歌官方的 Sketch 組件庫外，還有一個基于 Material Design 色板的 Sketch 源文件下載，用起來非常方便。
源文件規范下載：https://material.io/resources#sticker-sheets-icons-components
Material Design 官方相關源文件下載
Material Design 色板 Sketch 源文件下載
Teambition出品。Clarity Design 是一套全面的設計語言，從設計原則到字體排版，從交互到文案，從動效到樣式，從組件到設計工具…… 提供了各種解決方法和指導，設計師和工程師可以快速找到相關的指導內容，有效地幫助完善工作并且提高效率。
源文件規范下載：https://design.teambition.com/resource/design-resource
由國外 Shopify 團隊推出的 Polaris 設計規范也有比較不錯的參考價值，而且內容非常豐富完整，感興趣的朋友可以查看官方文檔好好研究一下，他們同樣提供 Sketch 組件庫。
源文件規范下載：https://polaris.shopify.com/resources/resources
由國外知名軟件企業 Atlassian 推出的設計語言，涵蓋了品牌、營銷、產品相關的設計規范和理念，其豐富程度僅次于 Material Design，可以說給了設計師很多參考與幫助，另外還提供了非常完整詳細的 Sketch 組件庫，強烈推薦大家研究學習！
源文件規范下載：https://atlassian.design/resources/sketch-library
Lightning Design System 是由 Salesforce 團隊推出的一個設計規范，它們的規范文檔也是相當完整而且可參考性很強，推薦大家研究，同時它們也有 Sketch 組件庫可供下載。
官方文檔：https://www.lightningdesignsystem.com/
源文件規范下載：https://github.com/salesforce-ux/design-system-ui-kit/blob/master/README.md
源文件規范下載：https://www.figma.com/community/ui_kits
https://www.figma.com/community/ui_kits
開源前端組件&交互Demo
官方文檔：http://vue.ydui.org/demo/#/
http://vue.ydui.org/demo/#/
一套基于 Vue.js 的高質量UI 組件庫。Vue.js 是一個JavaScriptMVVM庫，是一套構建用戶界面的漸進式框架；在網站中可以看到數量眾多的UI組件和對應代碼，本質上和我們制作UI規范是一樣的。
官方文檔：https://www.iviewui.com/
非官方，由 Sketch 團隊維護
源文件規范下載：https://www.sketch.com/downloads/mac/
規范文檔：https://mobile.ant.design/index-cn
Bootstrap是Twitter推出的一個用于前端開發的開源工具包，是一個CSS/HTML框架，目前世界上的很多網站開發都使用了這個。其中的柵格理論、響應式解決方案都變成了業界的參考規范。
官方文檔：https://v4.bootcss.com/
將設計規范做成 Sketch 組件庫甚至 Axure 元件庫其實任務量很大，但是這項工作做好了能夠大大提高產品、設計、開發團隊的協作效率！
但組件庫不是表面工作，畢竟，產品研發工作不是一蹴而就的，組件庫可以幫助研發團隊持續地維護產品。
在組件庫的研發工作中，我們需要思考：
本文由 @七分 翻譯發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
我們日常見到的網頁主要由文字、圖像和超鏈接等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash等。
代碼是如何形成網頁的呢? 那就需要瀏覽器引擎進行解析渲染了。
瀏覽器是網頁運行的平臺，常用的瀏覽器有：
根據市場調查機構 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 則在市場上展開了激烈的競爭。預計在未來幾個月內，這些產品將繼續保持穩定的增長態勢，并且會繼續影響著用戶的使用習慣和技術趨勢。
瀏覽器內核又可以分成兩部分：【渲染引擎】(layout engineer 或者 Rendering Engine) 和 【JS 引擎】。
內核通常只指渲染引擎：
最開始渲染引擎和 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。
通過了解以上瀏覽器的內核不同，我們知道他們工作原理、解析肯定不同，顯示就會有差別。
由于不同的瀏覽器解析出來的效果可能不一致，開發中通常需要為同個界面做多版本的開發。
1、讓Web的發展前景更廣闊
2、內容能被更廣泛的設備訪問
3、更容易被搜尋引擎搜索
4、降低網站流量費用
5、使網站更易于維護
6、提高頁面瀏覽速度
Web標準不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合。主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。
理想狀態下，我們的源碼由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，控件模板的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 SubHTML
<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
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
