Ant Design Pro是款專業的UI設計工具和React組件庫。它可以為用戶提供專業的組件模型，非常適合UI設計人員實用。為大家提供全方面的前端UI設計輔助功能，同時還具備大量的UI設計方案，可以很好的激發用戶的設計靈感，非常不錯。

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

【軟件特色】

　　1、更加專注內容：試想一下，我們在電影院看電影時，為什么要全場關燈？甚至有些 APP，在影片的下方也會有一個模擬關燈效果的操作，來讓整個手機屏幕變黑，只剩下視頻畫面的部分，這都幫助我們可以更專注、更沉浸在當前的內容下。

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

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

【軟件功能】

　　1、從企業級背景產品中提取的交互語言和視覺組件。

　　2、高質量的開箱即用組件。

　　3、使用打字稿開發，提供完整的打字稿定義文件。

　　4、完整的鏈接開發和設計工具系統。

　　5、數十種國際語言支持。

　　6、針對每個細節的深入主題定制功能。

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

【軟件亮點】

　　1、對自然的感知：Ant Design Pro在某些情況下，添加其他感知渠道（如聽覺和觸覺）可以創建更自然的產品體驗。

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

　　3、模塊化設計：Ant Design Pro使用現有的組件/模板可以節省用戶的時間，并使“設計者”將自己的創造力集中在最需要的地方。

　　4、價值連接：讓產品價值被發現，并幫助用戶建立更有效和高效的工作方式。

　　5、人機共生：產品功能與用戶需求之間的更多聯系，使人機交互更加緊密，用戶與系統之間的共生。

【使用方法】

　　布局

　　空間布局是系統視覺設計的起點。與傳統的圖形設計不同，UI界面的布局空間應從“動態，系統”的角度進行開發。受建筑大師柯布西耶（Corbusier）的模塊化思想的啟發，基于“順序美”的原理，我們探索UI設計中的動態空間順序，并形成了螞蟻設計的界面布局模式，這為設計者利用其構建布局空間創造了條件。理性的美麗。

　　為了在背景視覺系統中定義布局系統，我們建議從五個方面入手：

　　1、統一繪圖板尺寸

　　2、適應方案

　　3、網格單位

　　4、柵格

　　5、常用模度

　　統一畫板

　　為了盡可能減少溝通和理解的成本，有必要在組織內部統一設計電路板尺寸。螞蟻中級設計團隊的統一畫板大小為1440。

　　適配

　　在設計過程中，設計人員還需要建立適應性概念，判斷系統是否需要根據特定情況進行適應性調整，以及哪些塊需要考慮動態布局。據統計，使用中端系統的用戶主流分辨率為1920、1440和1366，某些系統中有1280個顯示設備。

　　螞蟻設計有兩種典型的適應方案

　　1、左右布局的適應方案

　　它通常用于左右布局的設計中。常見的方法是將導航欄固定在左側，并動態縮放右側的工作區。

　　2、上下布局的適應方案

　　它通常用于上下布局的設計方案中。該方法是在兩側定義空白區域的最小值，然后在空白區域達到極限值之后動態縮放中間的主要內容區域。

　　這里僅提及兩個非常簡單的適應性想法。實際設計中的完美適應方案要求設計人員具有前端角度，平面組成角度和交互角度。

　　網格單位

　　螞蟻設計通過網格系統實現視覺系統的順序。網格的基數為8，不僅符合偶數的概念，而且可以匹配大多數主流顯示設備。通過建立網格的思維方式，可以幫助設計人員快速實現布局空間的設計決策，并且可以簡化從設計到開發的通信損耗。

　　關于柵格

　　螞蟻設計采用24格系統。對于上面的24，如下圖所示劃分網格結構。我們為頁面中網格的裝訂線設置一個固定值，即，如果瀏覽器在某個范圍內擴展或縮小，則網格的列寬將擴展或縮小，但是裝訂線的寬度值是固定的。

　　對于開發人員而言，網格是實現動態布局的一種手段，而設計師對網格的理解來自于圖形設計中的網格。在特定的著陸點上，不同的觀點很容易導致偏差，最終影響還原程度，進而增加溝通成本。

　　Ant Design的設計師通過四個方面與工程師溝通：

　　明確定義動態布局范圍

　　盡量保持思考

　　交付關鍵數據（裝訂線，列）

　　塊的定義以column開頭，以column結束

　　常用模度

　　螞蟻背景涵蓋了大量不同類型和大小的產品。為了幫助具有不同設計能力的設計人員在界面布局中具有一致的節奏感，使設計與布局語言的發展統一起來，并減少減少的損失，ant設計提出了UI模塊的概念。在大量實踐中，我們提取了一組可用于UI布局空間決策的數組。它們都保持8次運動的原理，并具有動態的節奏感。經過驗證，可以在一定程度上幫助我們更快更好地發展。

　　圖標

　　圖標是UI設計中必不可少的組件。通常我們了解圖標設計的含義，就是將一個概念轉換為清晰易讀的圖形，從而減少用戶的理解成本，提高界面的美觀度。在我們的企業應用程序設計范圍內，圖標通常僅在界面設計的許多元素中占很小的比例，并且在被調用時，它們的大小將比設計草案小很多倍。此外，今天，當圖形資料非常豐富且易于獲取時，通常不會在產品設計系統中實施一套漂亮，一致，易于使用，易于擴展的圖標系統。請小心忽略它。螞蟻設計認為，一套完整的高質量圖標對設計質量有很大影響，它測試了設計師在圖形建模方面的協作能力和系統思考，也反映了團隊對細節的追求。

　　螞蟻設計在“確定性”和“自然”設計值的影響下，一套完整的基本系統圖標已被轉換。現在，您可以直接在我們的網站上查看和使用圖標的新版本。同時，我們將在這里與您分享我們的系統想法。我們希望更多的設計師能夠參與這個孤獨的微世界，并一起設計圖形來做好工作。

　　設計師專屬

　　安裝Kitchen sketch插件，您可以一鍵拖放Ant Design和iconfont的大圖標，還可以關聯自己的項目。

　　設計原則

　　Ant Design的圖標設計原則源自“確定性”和“自然”，并在圖標設計領域中實現。共有四項原則，即：

　　準確性：以準確的造型設計圖標（保留偶數原則，去掉小數點）；選擇具有正確含義的圖標，不會對用戶的認知造成麻煩。

　　簡單：在清晰準確的表達基礎上，盡量使圖形簡潔，不要做多余的裝飾。

　　節奏：發掘順序中的美。

　　愉悅：給予適度的情緒。

　　設計規格

　　畫板：螞蟻設計的系統圖標全部根據1024 x 1024的畫板制作

　　出血位置：在圖標的設計過程中保留出血空間的做法可以防止在某些形狀的圖標的特定應用中出現切掉邊緣的風險；同時，在設計過程中，還為設計師留出了把握圖標之間平衡的空間。在新的設計規范中，圖形外圍保留了64px的出血空間。對于設計中的大多數圖標，我們建議不要超出此范圍。

　　分層

　　螞蟻設計的圖標設計對設計稿的分層也有一定要求。其目的不僅是使設計人員能夠實現有序的文檔管理，而且還便于團隊之間的文檔傳輸。統一的設計框架就像一個看不見的共識，可以進一步增進彼此之間的理解。

　　大綱和模板＃

　　我們優化設計模板，根據出血位置的大小調整輪廓線的寬度和高度，并同時添加兩個等邊三角形和一個圓。這些是圖標設計中最常用的基本形式，設計人員可以在此基礎上快速調用和變形。

　　圖標設計準則

　　根據“確定性”和“自然”的價值觀，當構圖的含義明確時，圖標設計所追求的就是秩序之美。 Ant Design的圖標主要通過形式，節奏，平衡和識別四個方面來實現“秩序的美”。

　　1.形式

　　形式是圖形的初始結構。 Ant Design的整個基本圖標集基本上是從圓形，正方形和三角形演變而來的。順序美感的第一步是追求圖形初始結構的合理性，而不是直觀的設計。

　　2.韻律

　　螞蟻設計圖標的節奏感體現在兩個方面：元素的節奏和構圖的節奏。系統圖標中最常見的元素可以概括為：點，線，圓角，三角形。

　　2-1、元素節奏＃

　　點：點是出現在許多圖形中的元素。螞蟻設計將在一組圖標中挖掘相同元素的規則，并加以克制。在選擇點大小時，我們將保留16的倍數原則。例如，在選擇點時，最常用的圖標新版本是四種大小的點，分別是80、96、112和128。如果有特殊的大小要求，它將擴展為16的倍數。

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

　　圓角：圓角的規格采用8倍的原則。最常用的是8、16和32。它們之間有兩次。圖標內部空間的圓角以直角處理。

　　三角形：新圖標的角度受美國戰斗機F-14雄貓的啟發，常用角度設置為約76度。在日常設計中，大多數系統圖標可以從76度開始，可以根據實際情況靈活應用。

　　除了定義角度，我們還對新圖標中實心箭頭的規格進行了收斂。在保持頂角約76度的基礎上，最常用的是四個。它們的寬度是8倍，間隔是24:00

　　下表總結了基本元素的規格，建議設計師在設計圖標集時要保持克制的態度。

　　2-2、構圖的韻律

　　在圖標系統中，除了重復元素的管理外，我們還建議考慮整體設計節奏。

　　在構造中保持相似圖標的一致性也是建立圖標系統節奏的一種方法。

　　此外，在單個圖標的設計過程中，還建議適當，合理地處理元素之間的比例關系，而不要直觀地繪制。

　　3.平衡

　　在很多工作上要使整個圖標保持平衡并不容易。圖標的形狀，線條的放置角度甚至空白區域都是影響視覺平衡的因素。因此，設計人員有必要通過微調基本元素規格來實現圖標的平衡。

　　彎曲的線條看起來比垂直的線條細，因此，我們將通過4PX調整72px的大小。

　　斜線看起來也比垂直線細。因此，傾斜的線也將被微調4像素。

　　圖形的空白也是值得思考的主題。當某些圖形的空白空間不足時，可以通過調整線條的粗細來實現視覺重量的平衡。

　　4.辨識

　　區分性是一組圖標的可感知特征，通常與系統本身的品牌基因有關。這次，除了遵循“確定性”和“自然”的值，螞蟻設計的系統圖標還在識別方面做了兩次小嘗試。

　　讓技術具有溫度：通過定義圓角，將圓角（72）調整為（32），以使圖標看起來更加僵化和合理（與技術感相對應），但又不會太尖銳（隨溫度變化） 。

　　讓圖形栩栩如生：在某些圖標設計中，擬人化元素將被適度注入以使圖標具有生命力。

　　給設計師的一些建議

　　完成圖標設計后，保持圖形的清潔和層結構的清晰也是構建圖標系統的重要部分。螞蟻設計對設計師的建議如下：

　　卸下冗余節點并保持圖形清潔。

　　合并圖形以方便導出。

　　進行最后的遍歷并校正到小數點和奇數。

　　整潔的圖層管理。

【常見問題】

　　問：軟件會提供 Sass/Stylus 等格式的樣式文件嗎？

　　答：不會提供。但你可以使用工具將 Less 轉換成 Sass/Stylus 等。

　　問：使用時點擊“Select Dropdown DatePicker TimePicker Popover Popconfirm”內的另一個 popup 組件時它會消失，如何解決？

　　答：該問題在3.11.0后續版本中已經得到解決。但如果您使用的仍然是舊版本，可以通過在 Popover 中渲染組件，或者使用其他的 getXxxxContainer 參數進行解決。

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

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

【新功能】

　　新增 tableLayout 屬性，支持設置表格的 table-layout 布局，并在固定表頭/列下默認開啟 tableLayout="fixed"，解決因為表格自動根據內容排版造成的列對齊問題。

　　新增 column.ellipsis 支持單元格內容自動省略。

　　新增 scroll.scrollToFirstRowOnChange 屬性，用于設置在翻頁后是否滾動到表格頂部。

　　filterDropdown 新增 visible 參數，用于獲取下拉框的顯示狀態。

　　title 方法新增 sortColumn 參數，用于獲取當前排序的列。

　　排序時 onChange 的 sorter 參數將始終包含 column 信息。

　　修復過濾下拉菜單的間距問題。

　　Anchor 新增 onChange 屬性，用于監聽錨點鏈接的改變。

　　新增 showDownloadIcon 屬性，用于展示下載圖標。

　　支持 onRemove 對上傳中斷的控制。

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

　　Grid 的 gutter 屬性新增垂直間距的支持，現在你可以給 gutter 設置一個數組，數組的第二個值就表示垂直間距。

　　message 新增支持通過唯一的 key 來更新內容。

　　Layout 新增 zeroWidthTriggerStyle 屬性以控制當 collapsedWidth 為 0 時，出現的特殊 trigger 的樣式。

　　Drawer 新增 drawerStyle 和 headerStyle 屬性。

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

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

　　修復 moment 不能被 tree shaking 的問題。

　　修復 TreeSelect 的 removeIcon 和 clearIcon 屬性不生效的問題。

　　修復 Tree 設置 showLine 后 switcherIcon 不生效的問題。

　　修復 Slider 組件設置 handle 大小后定位錯誤的問題。

　　修復在 IE 11 下的圖標樣式。

　　修復 expandIcon 的 className 會被覆蓋的問題。

　　修復 Tree.DirectoryTree 組件傳入 treeData 時 defaultExpandAll 不生效的問題。

　　修復 Dropdown 下部分 Menu 樣式錯亂的問題。

　　修復 Cascader 的 placeholder 國際化錯誤。

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

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