Ant Design 有哪些神細節或者渣細節？

01-21

Ant Design 是一個 UI 設計語言，是一套提煉和應用於企業級後台產品的交互語言和視覺體系。
網站地址：A UI Design Language

作為ant design的使用者，嘗試回答一下：

先講好的方面：

可以說ant design的設計規範攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華原則，並做了理論之外最佳的設計實踐。其十大設計原則反過來是對書本理論的補充，我在看書的過程結合ant design能更好地理解那些原則的釋義。每一個原則都有非常讓人驚喜的案例來說明，這也是為什麼我一直很喜歡這套組件的原因。具體哪些好細節不再詳述，請直接看它的設計原則。

再說說不好的方面：

要說不好的就得講講組件本身了，畢竟它是一套通用性後台組件庫

1.缺失：

樹型選擇器中，缺少這種多層級且最後級元素較多的組件樣式

步驟條中（可能這個不一定屬於步驟條組件，但是兩者很像），缺少這類子任務完成狀態的組件，各任務之間不會相互影響，用戶可以隨時退出隨時進來此任務流，適用於每一步任務都比較複雜的場景，也許需要多天多人協同完成的大任務細分子任務。

表單中，缺少根據選項定義需填寫內容的組件

對於一些關鍵的置灰按鈕，可以提供滑鼠移入提示，幫助用戶理解置灰的原因及激活方法。

2.難用：

看到也有人說了講組件的網站，卻把組件隱藏太深；

提供的axure文件跟網站的組件排列方式、裡面的樣式都有出入；

sketch版文檔的組件樣式資源略少

不過這些也算是雞蛋裡挑骨頭了，ant design真心非常好！很細心也很用心！

什麼鬼，忽然有種知乎在監視我搜索記錄的感覺。近期機緣巧合剛拿ant design來寫後台管理，然後就從時間流發現了這個問題。另外graphql也是剛用，然後前幾天也從時間流就看到一個graphql的問題，巧合得詭異啊...

好吧不說廢話，總體來說目前用ant design有一些不順手的地方：

（1）Form的API設計比較非主流，用Form.create來把form實例傳遞給children感覺不是一個好方法，因為在render里又用了Form組件，從文檔API上看，基本就是form實例管數據收集和驗證，然後Form組件管布局樣式再加上html form標籤遺留下來的onSubmit事件，這種做法當然可行，只是我個人感覺「不太react」。數據流與布局肯定不是同一樣東西，不過既然把它稱為一個組件，從API上又獨立分成兩個名字相近的東西就是一種精神污染，於是我思考了一下這兩部分封成一個組件的可行性——在JSX里用閉包，拋棄Form.create這種詭異寫法（HOC這麼用我是拒絕的...）

class CustomizedForm extends React.Component { getForm = (form) =&> { this.form = form; }


  handleSubmit = () =&> {

    this.form.validateFieldAndScroll((err, values) =&> {

      if (!err)

        // 提交走起

    })

  }

}
&



{(form) =&> {

  let { List, Item, getFieldDecorator } = form;

  return &

    &

      {getFieldDecorator("field", {

        rules: ...

      })(&)}

    &

  &

}}

&

這樣一來form實例就接管了所有東西。不過其實我對這個寫法還是不太滿意，按我用Form組件之前的設想，基本是有Decorator（數據收集和驗證工具）提供我就滿足。加上布局就過了，因為布局本身柵格就可以勝任，搞三種預設布局做了也不太討好；反過來想，如果這三種布局本身就是為了應付不想自己折騰布局的懶惰用戶，那不如進一步封死，直接提供一種在props傳入一整個Decorator數組的方式會更符合期望，少搞一套Form和Form.Item。

（2）Table里filters重置後傳[]很糟糕，重置應該整個條件都沒有吧，不然這狀態就跟初始狀態不是一回事了，狀態不規整。

（3）Upload的圖片牆是個驚喜，唉不過不能拖動調整順序有點失望（好吧一個伸手黨說出這樣無恥的話我自己都想打自己，逃

呃逃一半發現忘記說神細節了，跑回來：

（1）其實對於伸手黨來說，組件默認樣式好看，功能覆蓋常見場景，文檔demo豐富而且實用性強（可以無腦複製黏貼），就很神了，果斷github star好頂贊。嗯這方面不是細節，是整體感覺，不過我覺得真正好的組件庫，單靠什麼令人眼前一亮的細節吹不起來，都是一個個實打實的業務場景去覆蓋去打磨。

（2）唯一對實現細節感興趣的可能只有可拖動樹形組件，回頭感覺可以讀一下實現。

（3）好吧再誇一個，有內置各種過渡動畫很不錯（別人通通做好不用自己做才是墜吼滴，真逃

利益相關：Ant Design 設計師。自賣自誇，先講點好的~

一、組件設計

1.1 Pagination 分頁

簡化了分頁的交互方式和組件體量，儘可能做的更小、更少
當滑鼠 hover 時，『...』變成『&>&>』批量切換的按鈕

1.2 InputNumber 數字輸入框

當滑鼠 hover 時，『箭頭』點擊區域會機智的變大

1.3 Button 按鈕

當按鈕中的中文字數等於 2 個時，組件會自動增加中文的空格，從而保持視覺美感和增大交互區域。
畢竟，在研發過程中口口相傳『當按鈕只有兩個字時，中間打空格』的方式，很難保證最終質量。所以這種方式非常符合 Ant Design 所推崇的基本理念-確定性。

二、文檔風格

2.1 盤古之白

Ant Design 是一個致力於提升『用戶』和『設計者』使用體驗的中台設計語言。它模糊了產品經理、交互設計師、視覺設計師、前端工程師、開發工程師等角色邊界，將進行 UE 設計和 UI 設計人員統稱為『設計者』，利用統一的規範進行設計賦能，全面提高中台產品體驗和研發效率。

在我進入這個團隊之前，完全不知道什麼叫做盤古之白，然而工程師對此有極強的迷戀，就好像『中英文之間添加了空格，感情之路就能一帆風順，順利找到女朋友 / 男朋友』。
但這種對細節的執著精神卻深深地影響著我們，所以我們將所有的設計文檔按照這個標準來撰寫，就是為了讓『設計者』在中英文閱讀中保持流暢的體驗。當然我不會告訴你，有個處女座老闆每周都會查盤古之白，逃~

大多數非常好，我也拍一個渣的：datepicker組件選擇時刻，被用戶、後端、交互、PM噴了無數次

組件中神細節太多了，比如看看彈框的動畫交互就知道了。渣細節也有，不過踩過坑才知道，不做評價

作為一個產品汪，我說說網站體驗的問題吧
1.首頁明顯就該用整屏切換效果嘛，目測你們的產品設計orUI設計就是設計的整屏切換。
2.部分頁面404了，比如右上角的版本切換（目測是這個）點擊最後一個，報錯了。
3.網站的重心是組件？組件藏得太深了而且層級不明顯不太好找。
說錯勿怪哈

A UI Design Language

在 Upload上傳這個組件的功能上我找不到用戶點擊才去上傳的api 都是選擇後直接上傳

很多細節都寫的很好，本來是做中後台設計規範的，但該網站自身的瀏覽體驗有待改善。

為什麼左側欄導航不支持單獨滾動呢？無論是導航菜單的數量還是頁面內容，基本都超過一屏了。每次看到下面想找導航欄時，都要再滾動到能夠看見導航欄的位置，體驗很不方便。

看下Ant design是怎麼介紹側邊導航欄的。。。

側邊導航菜單

還有為什麼頂部導航不固定呢，或者向下滑動時自動收起頂部導航。現在每次想回到最上面切換標籤，就要一直滑動滾輪。

謝謝邀請。等我去用用看再回來答

說一個 moblie的不知道現在改了沒有 row 是分三層的中間是文字如果要寫2行就gg