圖標畫不完，代碼敲不完，別擔心！Ant Design Pro 都替你做了

之前寫的那一篇關於 Ant Design 的文章反響非常好，我們經過一番精心準備之後這次推出了

Ant Design Pro 的原型資源。有些小夥伴可能就有疑問了，都有了Ant Design，為什麼還要做Ant Design Pro 的原型資源呢？這兩者有什麼關係和區別呢？

既然說到這了那我就來科普一波～

Ant Design Pro是什麼？

Ant Design和Ant Design Pro都屬於螞蟻金服的生態系統，Ant Design Pro官方給的說法是開箱即用的中台前端/設計解決方案，直接把所有的模版打包給你供你使用。

Ant Design和Ant Design pro 區別是什麼？

Ant Design和Ant Design pro說的淺顯一點就是組件和模板的關係，也可以這樣理解Ant Design是基礎庫而Ant Design pro是它的增強版，直接配套業務組件打包給你，供你使用。

Ant Design更多是著重致力於設計規範和基礎組件，如果你是一個產品經理或者是一個設計師，你在向程序員傳達想法的時候，肯定會出現理解上的偏差，你跟他說的 A 他理解成了 B ,但如果你們用的是同一套設計規範和基礎組件，你表達的 A ,他看到理解的也是 A ,中間不會再出現理解偏差這個問題。（如果你想要更加詳細的了解Ant Design可以點擊這裡）

而 Ant Design Pro 在設計規範和基礎組件的基礎上升級了，直接提煉出典型模板/業務組件/配套設計資源。你不需要重複設計那些復用性高的業務組件，直接引用集合好的業務組件，省事又省力。

Ant Design Pro 可以用來做什麼？

Ant Design Pro 面向的人群更多企業的中後台開發，企業的後台產品對界面的設計要求並沒有那麼嚴格，因為不是面向大眾使用的，一般也不過於追求 UI視覺效果，更多的是需要一些基礎性功能，它的對於數據的顯示和操作交互要求更高。而 Ant Design Pro 直接把典型模板/業務組件/配套的設計資源全部給你做齊了，等於說組件全部都封裝好了，你只需要按照 Ant Design Pro 中給到的配套資源和一套基於 React 的中後台管理控制台的腳手架，直接進行搭建就好了，這樣可以極大的縮減開發人員的時間成本。

怎麼在自己的原型設計中應用這些頁面呢？

原型圖設計工具平台：http://www.xiaopiu.com

全套 Ant Design Pro 頁面庫/組件庫：

1、進入 xiaopiu 精選廣場的組件庫/頁面庫，搜索「Ant Design Pro」，在搜索出的頁面庫右下角點擊「引用為我的公用庫」。（搜索頁面庫時，記得在右側切換為web端）

2、或直接進入「Ant Design pro」頁面庫 ，然後點擊右上角的引用按鈕~

3、引用成功後，在您的項目編輯頁左側【組件庫/頁面庫】就可以看到我們豐富的資源啦！拖拽組件到自己的頁面上改一改就是你的了喲！

資源分享：

Ant Design Pro 高保真原型資源

Ant Design Pro 組件庫

Ant Design Pro 頁面庫

往期文章：

zhuanlan.zhihu.com王二麻：「Ant Design」原型資源分享?

zhuanlan.zhihu.comMs.Piu：「優酷視頻」web版原型資源分享?

zhuanlan.zhihu.com
推薦閱讀：