久久精-久久经典视频-久久加久久-久久极品视频-一区二区福利视频-一区二区不卡在线观看

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

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

【軟件特色】

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

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

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

【軟件功能】

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

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

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

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

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

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

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

【軟件亮點】

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

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

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

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

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

【使用方法】

　　布局

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

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

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

　　2、適應方案

　　3、網(wǎng)格單位

　　4、柵格

　　5、常用模度

　　統(tǒng)一畫板

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

　　適配

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

　　螞蟻設(shè)計有兩種典型的適應方案

　　1、左右布局的適應方案

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

　　2、上下布局的適應方案

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

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

　　網(wǎng)格單位

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

　　關(guān)于柵格

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

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

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

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

　　盡量保持思考

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

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

　　常用模度

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

　　圖標

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

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

　　設(shè)計師專屬

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

　　設(shè)計原則

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

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

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

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

　　愉悅：給予適度的情緒。

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

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

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

　　分層

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

　　大綱和模板＃

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

　　圖標設(shè)計準則

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

　　1.形式

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

　　2.韻律

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

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

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

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

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

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

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

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

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

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

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

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

　　3.平衡

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

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

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

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

　　4.辨識

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

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

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

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

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

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

　　合并圖形以方便導出。

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

　　整潔的圖層管理。

【常見問題】

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

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

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

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

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

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

【新功能】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　Drawer 新增 drawerStyle 和 headerStyle 屬性。

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

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

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

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

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

　　修復 Slider 組件設(shè)置 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 代替。