Ant Design Pro是款專(zhuān)業(yè)的UI設(shè)計(jì)工具和React組件庫(kù)。它可以為用戶(hù)提供專(zhuān)業(yè)的組件模型，非常適合UI設(shè)計(jì)人員實(shí)用。為大家提供全方面的前端UI設(shè)計(jì)輔助功能，同時(shí)還具備大量的UI設(shè)計(jì)方案，可以很好的激發(fā)用戶(hù)的設(shè)計(jì)靈感，非常不錯(cuò)。

　　Ant Design Pro軟件中內(nèi)置的功能組件以及設(shè)計(jì)模板十分豐富，軟件會(huì)經(jīng)常進(jìn)行更新改動(dòng)，及時(shí)更新最新的前端設(shè)計(jì)技術(shù)和組件；用戶(hù)通過(guò)抽象化軟件中內(nèi)置的一些相似組件和頁(yè)面，可以輕松設(shè)計(jì)出一些既穩(wěn)定，復(fù)用性又高的內(nèi)容；隨著全球商業(yè)化的發(fā)展，不少企業(yè)對(duì)于產(chǎn)品的設(shè)計(jì)要求也逐漸提升，為了讓用戶(hù)能夠有一個(gè)非常優(yōu)質(zhì)的產(chǎn)品體驗(yàn)，企業(yè)就必須在UI設(shè)計(jì)上有所突破；螞蟻集團(tuán)通過(guò)大量的項(xiàng)目實(shí)踐，經(jīng)過(guò)不斷的打磨和優(yōu)化終于推出了這款符合企業(yè)UI設(shè)計(jì)需求的設(shè)計(jì)軟件，需要的朋友歡迎下載。

【軟件特色】

　　1、更加專(zhuān)注內(nèi)容：試想一下，我們?cè)陔娪霸嚎措娪皶r(shí)，為什么要全場(chǎng)關(guān)燈？甚至有些 APP，在影片的下方也會(huì)有一個(gè)模擬關(guān)燈效果的操作，來(lái)讓整個(gè)手機(jī)屏幕變黑，只剩下視頻畫(huà)面的部分，這都幫助我們可以更專(zhuān)注、更沉浸在當(dāng)前的內(nèi)容下。

　　2、在暗光環(huán)境下更加適用：如今社會(huì)我們身處黑夜使用手機(jī)、電腦、ipad等設(shè)備的次數(shù)越來(lái)越多，環(huán)境光與屏幕亮度的明暗差距在夜間會(huì)被放大 ，亮度對(duì)比帶來(lái)視覺(jué)刺激也更加明顯，使用暗色模式可以縮小屏幕顯示內(nèi)容與環(huán)境光強(qiáng)度的差距，同時(shí)也可以為設(shè)備的續(xù)航帶來(lái)積極影響，可以保證使用者在暗光環(huán)境下使用 OLED 設(shè)備的舒適度

　　3、大眾喜愛(ài)：黑色一直以來(lái)就可以給人以高級(jí)、神秘的語(yǔ)義象征，相比于淺色模式，暗色模式藏著更多可能性

【軟件功能】

　　1、從企業(yè)級(jí)背景產(chǎn)品中提取的交互語(yǔ)言和視覺(jué)組件。

　　2、高質(zhì)量的開(kāi)箱即用組件。

　　3、使用打字稿開(kāi)發(fā)，提供完整的打字稿定義文件。

　　4、完整的鏈接開(kāi)發(fā)和設(shè)計(jì)工具系統(tǒng)。

　　5、數(shù)十種國(guó)際語(yǔ)言支持。

　　6、針對(duì)每個(gè)細(xì)節(jié)的深入主題定制功能。

　　7、Ant Design Pro為Web應(yīng)用程序提供了豐富的基本UI組件。

【軟件亮點(diǎn)】

　　1、對(duì)自然的感知：Ant Design Pro在某些情況下，添加其他感知渠道（如聽(tīng)覺(jué)和觸覺(jué)）可以創(chuàng)建更自然的產(chǎn)品體驗(yàn)。

　　2、自然行為：輔以行為分析，人工智能，幫助用戶(hù)做出決策等，使人機(jī)交互更加自然。

　　3、模塊化設(shè)計(jì)：Ant Design Pro使用現(xiàn)有的組件/模板可以節(jié)省用戶(hù)的時(shí)間，并使“設(shè)計(jì)者”將自己的創(chuàng)造力集中在最需要的地方。

　　4、價(jià)值連接：讓產(chǎn)品價(jià)值被發(fā)現(xiàn)，并幫助用戶(hù)建立更有效和高效的工作方式。

　　5、人機(jī)共生：產(chǎn)品功能與用戶(hù)需求之間的更多聯(lián)系，使人機(jī)交互更加緊密，用戶(hù)與系統(tǒng)之間的共生。

【使用方法】

　　布局

　　空間布局是系統(tǒng)視覺(jué)設(shè)計(jì)的起點(diǎn)。與傳統(tǒng)的圖形設(shè)計(jì)不同，UI界面的布局空間應(yīng)從“動(dòng)態(tài)，系統(tǒng)”的角度進(jìn)行開(kāi)發(fā)。受建筑大師柯布西耶（Corbusier）的模塊化思想的啟發(fā)，基于“順序美”的原理，我們探索UI設(shè)計(jì)中的動(dòng)態(tài)空間順序，并形成了螞蟻設(shè)計(jì)的界面布局模式，這為設(shè)計(jì)者利用其構(gòu)建布局空間創(chuàng)造了條件。理性的美麗。

　　為了在背景視覺(jué)系統(tǒng)中定義布局系統(tǒng)，我們建議從五個(gè)方面入手：

　　1、統(tǒng)一繪圖板尺寸

　　2、適應(yīng)方案

　　3、網(wǎng)格單位

　　4、柵格

　　5、常用模度

　　統(tǒng)一畫(huà)板

　　為了盡可能減少溝通和理解的成本，有必要在組織內(nèi)部統(tǒng)一設(shè)計(jì)電路板尺寸。螞蟻中級(jí)設(shè)計(jì)團(tuán)隊(duì)的統(tǒng)一畫(huà)板大小為1440。

　　適配

　　在設(shè)計(jì)過(guò)程中，設(shè)計(jì)人員還需要建立適應(yīng)性概念，判斷系統(tǒng)是否需要根據(jù)特定情況進(jìn)行適應(yīng)性調(diào)整，以及哪些塊需要考慮動(dòng)態(tài)布局。據(jù)統(tǒng)計(jì)，使用中端系統(tǒng)的用戶(hù)主流分辨率為1920、1440和1366，某些系統(tǒng)中有1280個(gè)顯示設(shè)備。

　　螞蟻設(shè)計(jì)有兩種典型的適應(yīng)方案

　　1、左右布局的適應(yīng)方案

　　它通常用于左右布局的設(shè)計(jì)中。常見(jiàn)的方法是將導(dǎo)航欄固定在左側(cè)，并動(dòng)態(tài)縮放右側(cè)的工作區(qū)。

　　2、上下布局的適應(yīng)方案

　　它通常用于上下布局的設(shè)計(jì)方案中。該方法是在兩側(cè)定義空白區(qū)域的最小值，然后在空白區(qū)域達(dá)到極限值之后動(dòng)態(tài)縮放中間的主要內(nèi)容區(qū)域。

　　這里僅提及兩個(gè)非常簡(jiǎn)單的適應(yīng)性想法。實(shí)際設(shè)計(jì)中的完美適應(yīng)方案要求設(shè)計(jì)人員具有前端角度，平面組成角度和交互角度。

　　網(wǎng)格單位

　　螞蟻設(shè)計(jì)通過(guò)網(wǎng)格系統(tǒng)實(shí)現(xiàn)視覺(jué)系統(tǒng)的順序。網(wǎng)格的基數(shù)為8，不僅符合偶數(shù)的概念，而且可以匹配大多數(shù)主流顯示設(shè)備。通過(guò)建立網(wǎng)格的思維方式，可以幫助設(shè)計(jì)人員快速實(shí)現(xiàn)布局空間的設(shè)計(jì)決策，并且可以簡(jiǎn)化從設(shè)計(jì)到開(kāi)發(fā)的通信損耗。

　　關(guān)于柵格

　　螞蟻設(shè)計(jì)采用24格系統(tǒng)。對(duì)于上面的24，如下圖所示劃分網(wǎng)格結(jié)構(gòu)。我們?yōu)轫?yè)面中網(wǎng)格的裝訂線設(shè)置一個(gè)固定值，即，如果瀏覽器在某個(gè)范圍內(nèi)擴(kuò)展或縮小，則網(wǎng)格的列寬將擴(kuò)展或縮小，但是裝訂線的寬度值是固定的。

　　對(duì)于開(kāi)發(fā)人員而言，網(wǎng)格是實(shí)現(xiàn)動(dòng)態(tài)布局的一種手段，而設(shè)計(jì)師對(duì)網(wǎng)格的理解來(lái)自于圖形設(shè)計(jì)中的網(wǎng)格。在特定的著陸點(diǎn)上，不同的觀點(diǎn)很容易導(dǎo)致偏差，最終影響還原程度，進(jìn)而增加溝通成本。

　　Ant Design的設(shè)計(jì)師通過(guò)四個(gè)方面與工程師溝通：

　　明確定義動(dòng)態(tài)布局范圍

　　盡量保持思考

　　交付關(guān)鍵數(shù)據(jù)（裝訂線，列）

　　塊的定義以column開(kāi)頭，以column結(jié)束

　　常用模度

　　螞蟻背景涵蓋了大量不同類(lèi)型和大小的產(chǎn)品。為了幫助具有不同設(shè)計(jì)能力的設(shè)計(jì)人員在界面布局中具有一致的節(jié)奏感，使設(shè)計(jì)與布局語(yǔ)言的發(fā)展統(tǒng)一起來(lái)，并減少減少的損失，ant設(shè)計(jì)提出了UI模塊的概念。在大量實(shí)踐中，我們提取了一組可用于UI布局空間決策的數(shù)組。它們都保持8次運(yùn)動(dòng)的原理，并具有動(dòng)態(tài)的節(jié)奏感。經(jīng)過(guò)驗(yàn)證，可以在一定程度上幫助我們更快更好地發(fā)展。

　　圖標(biāo)

　　圖標(biāo)是UI設(shè)計(jì)中必不可少的組件。通常我們了解圖標(biāo)設(shè)計(jì)的含義，就是將一個(gè)概念轉(zhuǎn)換為清晰易讀的圖形，從而減少用戶(hù)的理解成本，提高界面的美觀度。在我們的企業(yè)應(yīng)用程序設(shè)計(jì)范圍內(nèi)，圖標(biāo)通常僅在界面設(shè)計(jì)的許多元素中占很小的比例，并且在被調(diào)用時(shí)，它們的大小將比設(shè)計(jì)草案小很多倍。此外，今天，當(dāng)圖形資料非常豐富且易于獲取時(shí)，通常不會(huì)在產(chǎn)品設(shè)計(jì)系統(tǒng)中實(shí)施一套漂亮，一致，易于使用，易于擴(kuò)展的圖標(biāo)系統(tǒng)。請(qǐng)小心忽略它。螞蟻設(shè)計(jì)認(rèn)為，一套完整的高質(zhì)量圖標(biāo)對(duì)設(shè)計(jì)質(zhì)量有很大影響，它測(cè)試了設(shè)計(jì)師在圖形建模方面的協(xié)作能力和系統(tǒng)思考，也反映了團(tuán)隊(duì)對(duì)細(xì)節(jié)的追求。

　　螞蟻設(shè)計(jì)在“確定性”和“自然”設(shè)計(jì)值的影響下，一套完整的基本系統(tǒng)圖標(biāo)已被轉(zhuǎn)換?，F(xiàn)在，您可以直接在我們的網(wǎng)站上查看和使用圖標(biāo)的新版本。同時(shí)，我們將在這里與您分享我們的系統(tǒng)想法。我們希望更多的設(shè)計(jì)師能夠參與這個(gè)孤獨(dú)的微世界，并一起設(shè)計(jì)圖形來(lái)做好工作。

　　設(shè)計(jì)師專(zhuān)屬

　　安裝Kitchen sketch插件，您可以一鍵拖放Ant Design和iconfont的大圖標(biāo)，還可以關(guān)聯(lián)自己的項(xiàng)目。

　　設(shè)計(jì)原則

　　Ant Design的圖標(biāo)設(shè)計(jì)原則源自“確定性”和“自然”，并在圖標(biāo)設(shè)計(jì)領(lǐng)域中實(shí)現(xiàn)。共有四項(xiàng)原則，即：

　　準(zhǔn)確性：以準(zhǔn)確的造型設(shè)計(jì)圖標(biāo)（保留偶數(shù)原則，去掉小數(shù)點(diǎn)）；選擇具有正確含義的圖標(biāo)，不會(huì)對(duì)用戶(hù)的認(rèn)知造成麻煩。

　　簡(jiǎn)單：在清晰準(zhǔn)確的表達(dá)基礎(chǔ)上，盡量使圖形簡(jiǎn)潔，不要做多余的裝飾。

　　節(jié)奏：發(fā)掘順序中的美。

　　愉悅：給予適度的情緒。

　　設(shè)計(jì)規(guī)格

　　畫(huà)板：螞蟻設(shè)計(jì)的系統(tǒng)圖標(biāo)全部根據(jù)1024 x 1024的畫(huà)板制作

　　出血位置：在圖標(biāo)的設(shè)計(jì)過(guò)程中保留出血空間的做法可以防止在某些形狀的圖標(biāo)的特定應(yīng)用中出現(xiàn)切掉邊緣的風(fēng)險(xiǎn)；同時(shí)，在設(shè)計(jì)過(guò)程中，還為設(shè)計(jì)師留出了把握?qǐng)D標(biāo)之間平衡的空間。在新的設(shè)計(jì)規(guī)范中，圖形外圍保留了64px的出血空間。對(duì)于設(shè)計(jì)中的大多數(shù)圖標(biāo)，我們建議不要超出此范圍。

　　分層

　　螞蟻設(shè)計(jì)的圖標(biāo)設(shè)計(jì)對(duì)設(shè)計(jì)稿的分層也有一定要求。其目的不僅是使設(shè)計(jì)人員能夠?qū)崿F(xiàn)有序的文檔管理，而且還便于團(tuán)隊(duì)之間的文檔傳輸。統(tǒng)一的設(shè)計(jì)框架就像一個(gè)看不見(jiàn)的共識(shí)，可以進(jìn)一步增進(jìn)彼此之間的理解。

　　大綱和模板＃

　　我們優(yōu)化設(shè)計(jì)模板，根據(jù)出血位置的大小調(diào)整輪廓線的寬度和高度，并同時(shí)添加兩個(gè)等邊三角形和一個(gè)圓。這些是圖標(biāo)設(shè)計(jì)中最常用的基本形式，設(shè)計(jì)人員可以在此基礎(chǔ)上快速調(diào)用和變形。

　　圖標(biāo)設(shè)計(jì)準(zhǔn)則

　　根據(jù)“確定性”和“自然”的價(jià)值觀，當(dāng)構(gòu)圖的含義明確時(shí)，圖標(biāo)設(shè)計(jì)所追求的就是秩序之美。 Ant Design的圖標(biāo)主要通過(guò)形式，節(jié)奏，平衡和識(shí)別四個(gè)方面來(lái)實(shí)現(xiàn)“秩序的美”。

　　1.形式

　　形式是圖形的初始結(jié)構(gòu)。 Ant Design的整個(gè)基本圖標(biāo)集基本上是從圓形，正方形和三角形演變而來(lái)的。順序美感的第一步是追求圖形初始結(jié)構(gòu)的合理性，而不是直觀的設(shè)計(jì)。

　　2.韻律

　　螞蟻設(shè)計(jì)圖標(biāo)的節(jié)奏感體現(xiàn)在兩個(gè)方面：元素的節(jié)奏和構(gòu)圖的節(jié)奏。系統(tǒng)圖標(biāo)中最常見(jiàn)的元素可以概括為：點(diǎn)，線，圓角，三角形。

　　2-1、元素節(jié)奏＃

　　點(diǎn)：點(diǎn)是出現(xiàn)在許多圖形中的元素。螞蟻設(shè)計(jì)將在一組圖標(biāo)中挖掘相同元素的規(guī)則，并加以克制。在選擇點(diǎn)大小時(shí)，我們將保留16的倍數(shù)原則。例如，在選擇點(diǎn)時(shí)，最常用的圖標(biāo)新版本是四種大小的點(diǎn)，分別是80、96、112和128。如果有特殊的大小要求，它將擴(kuò)展為16的倍數(shù)。

　　線條：線條也是最常見(jiàn)的元素之一。新版本圖標(biāo)的線條之間的關(guān)系采用8倍的原理，并按照8的規(guī)則從小到大增加。有四種常見(jiàn)規(guī)格，即56、64、72和80。

　　圓角：圓角的規(guī)格采用8倍的原則。最常用的是8、16和32。它們之間有兩次。圖標(biāo)內(nèi)部空間的圓角以直角處理。

　　三角形：新圖標(biāo)的角度受美國(guó)戰(zhàn)斗機(jī)F-14雄貓的啟發(fā)，常用角度設(shè)置為約76度。在日常設(shè)計(jì)中，大多數(shù)系統(tǒng)圖標(biāo)可以從76度開(kāi)始，可以根據(jù)實(shí)際情況靈活應(yīng)用。

　　除了定義角度，我們還對(duì)新圖標(biāo)中實(shí)心箭頭的規(guī)格進(jìn)行了收斂。在保持頂角約76度的基礎(chǔ)上，最常用的是四個(gè)。它們的寬度是8倍，間隔是24:00

　　下表總結(jié)了基本元素的規(guī)格，建議設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)集時(shí)要保持克制的態(tài)度。

　　2-2、構(gòu)圖的韻律

　　在圖標(biāo)系統(tǒng)中，除了重復(fù)元素的管理外，我們還建議考慮整體設(shè)計(jì)節(jié)奏。

　　在構(gòu)造中保持相似圖標(biāo)的一致性也是建立圖標(biāo)系統(tǒng)節(jié)奏的一種方法。

　　此外，在單個(gè)圖標(biāo)的設(shè)計(jì)過(guò)程中，還建議適當(dāng)，合理地處理元素之間的比例關(guān)系，而不要直觀地繪制。

　　3.平衡

　　在很多工作上要使整個(gè)圖標(biāo)保持平衡并不容易。圖標(biāo)的形狀，線條的放置角度甚至空白區(qū)域都是影響視覺(jué)平衡的因素。因此，設(shè)計(jì)人員有必要通過(guò)微調(diào)基本元素規(guī)格來(lái)實(shí)現(xiàn)圖標(biāo)的平衡。

　　彎曲的線條看起來(lái)比垂直的線條細(xì)，因此，我們將通過(guò)4PX調(diào)整72px的大小。

　　斜線看起來(lái)也比垂直線細(xì)。因此，傾斜的線也將被微調(diào)4像素。

　　圖形的空白也是值得思考的主題。當(dāng)某些圖形的空白空間不足時(shí)，可以通過(guò)調(diào)整線條的粗細(xì)來(lái)實(shí)現(xiàn)視覺(jué)重量的平衡。

　　4.辨識(shí)

　　區(qū)分性是一組圖標(biāo)的可感知特征，通常與系統(tǒng)本身的品牌基因有關(guān)。這次，除了遵循“確定性”和“自然”的值，螞蟻設(shè)計(jì)的系統(tǒng)圖標(biāo)還在識(shí)別方面做了兩次小嘗試。

　　讓技術(shù)具有溫度：通過(guò)定義圓角，將圓角（72）調(diào)整為（32），以使圖標(biāo)看起來(lái)更加僵化和合理（與技術(shù)感相對(duì)應(yīng)），但又不會(huì)太尖銳（隨溫度變化） 。

　　讓圖形栩栩如生：在某些圖標(biāo)設(shè)計(jì)中，擬人化元素將被適度注入以使圖標(biāo)具有生命力。

　　給設(shè)計(jì)師的一些建議

　　完成圖標(biāo)設(shè)計(jì)后，保持圖形的清潔和層結(jié)構(gòu)的清晰也是構(gòu)建圖標(biāo)系統(tǒng)的重要部分。螞蟻設(shè)計(jì)對(duì)設(shè)計(jì)師的建議如下：

　　卸下冗余節(jié)點(diǎn)并保持圖形清潔。

　　合并圖形以方便導(dǎo)出。

　　進(jìn)行最后的遍歷并校正到小數(shù)點(diǎn)和奇數(shù)。

　　整潔的圖層管理。

【常見(jiàn)問(wèn)題】

　　問(wèn)：軟件會(huì)提供 Sass/Stylus 等格式的樣式文件嗎？

　　答：不會(huì)提供。但你可以使用工具將 Less 轉(zhuǎn)換成 Sass/Stylus 等。

　　問(wèn)：使用時(shí)點(diǎn)擊“Select Dropdown DatePicker TimePicker Popover Popconfirm”內(nèi)的另一個(gè) popup 組件時(shí)它會(huì)消失，如何解決？

　　答：該問(wèn)題在3.11.0后續(xù)版本中已經(jīng)得到解決。但如果您使用的仍然是舊版本，可以通過(guò)在 Popover 中渲染組件，或者使用其他的 getXxxxContainer 參數(shù)進(jìn)行解決。

　　問(wèn)：如果只想使用 Menu/Button 等，是不是必須 import 整個(gè) antd 和它的樣式文件？

　　答：可以試試 babel-plugin-import，或者（ES6 支持的 tree shaking 方式）：

【新功能】

　　新增 tableLayout 屬性，支持設(shè)置表格的 table-layout 布局，并在固定表頭/列下默認(rèn)開(kāi)啟 tableLayout="fixed"，解決因?yàn)楸砀褡詣?dòng)根據(jù)內(nèi)容排版造成的列對(duì)齊問(wèn)題。

　　新增 column.ellipsis 支持單元格內(nèi)容自動(dòng)省略。

　　新增 scroll.scrollToFirstRowOnChange 屬性，用于設(shè)置在翻頁(yè)后是否滾動(dòng)到表格頂部。

　　filterDropdown 新增 visible 參數(shù)，用于獲取下拉框的顯示狀態(tài)。

　　title 方法新增 sortColumn 參數(shù)，用于獲取當(dāng)前排序的列。

　　排序時(shí) onChange 的 sorter 參數(shù)將始終包含 column 信息。

　　修復(fù)過(guò)濾下拉菜單的間距問(wèn)題。

　　Anchor 新增 onChange 屬性，用于監(jiān)聽(tīng)錨點(diǎn)鏈接的改變。

　　新增 showDownloadIcon 屬性，用于展示下載圖標(biāo)。

　　支持 onRemove 對(duì)上傳中斷的控制。

　　Input.Search 新增 loading 屬性，用于展示加載中的狀態(tài)。

　　Grid 的 gutter 屬性新增垂直間距的支持，現(xiàn)在你可以給 gutter 設(shè)置一個(gè)數(shù)組，數(shù)組的第二個(gè)值就表示垂直間距。

　　message 新增支持通過(guò)唯一的 key 來(lái)更新內(nèi)容。

　　Layout 新增 zeroWidthTriggerStyle 屬性以控制當(dāng) collapsedWidth 為 0 時(shí)，出現(xiàn)的特殊 trigger 的樣式。

　　Drawer 新增 drawerStyle 和 headerStyle 屬性。

　　新增 ghost 屬性，用于設(shè)置是否需要白底背景。

　　新增 pageHeader 用于全局控制 PageHeader 的樣式。

　　修復(fù) moment 不能被 tree shaking 的問(wèn)題。

　　修復(fù) TreeSelect 的 removeIcon 和 clearIcon 屬性不生效的問(wèn)題。

　　修復(fù) Tree 設(shè)置 showLine 后 switcherIcon 不生效的問(wèn)題。

　　修復(fù) Slider 組件設(shè)置 handle 大小后定位錯(cuò)誤的問(wèn)題。

　　修復(fù)在 IE 11 下的圖標(biāo)樣式。

　　修復(fù) expandIcon 的 className 會(huì)被覆蓋的問(wèn)題。

　　修復(fù) Tree.DirectoryTree 組件傳入 treeData 時(shí) defaultExpandAll 不生效的問(wèn)題。

　　修復(fù) Dropdown 下部分 Menu 樣式錯(cuò)亂的問(wèn)題。

　　修復(fù) Cascader 的 placeholder 國(guó)際化錯(cuò)誤。

　　新增 less 變量 @typography-title-margin-top 和 @typography-title-margin-bottom。

　　提示：廢棄 Input.TextArea 的 autosize 屬性，請(qǐng)使用 autoSize 代替。