Ant Design是前端代碼實現方案可不是搭建靜態的界面這麽簡單,還包含動效的解決方案,也提供動效設計風格和原則。
眾所周知螞蟻集團的B端產品是壹個龐大的系統,數量多且功能復雜,而且變動頻繁,常常需要設計師和開發人員能快速做出工作上的配合。
同時這類產品中有存在很多類似的頁面以及組件,根據原子設計理論可以得到壹些穩定且高復用性的內容。隨著這兩年B端產品的逐漸白熱化,越來越多的用戶對更好的用戶體驗有了進壹步的要求。帶著這樣的壹個終極目標。
螞蟻集團體經過大量項目實踐和總結,逐步打磨出壹個服務於企業級產品的設計體系——Ant Design。通過組件化設計規範,降低冗余的生產成本,讓設計者專註於更好的用戶體驗。
『Ant Design設計原則是什麽』
針對B端產品反復出現的壹些設計體驗等問題,Ant Design給出標準的設計原則,實現跨應用交互壹致性的有效融合。依照這些原則使用Ant Design組件設計界面,既減少了不必要的認知成本,又能夠提升設計的效率。
考慮到需要適應各種定制化的業務場景,設計原則具有壹定的靈活性,萬變不離其宗,通過了解設計原則的構建邏輯,高效組織信息、幫助建立用戶與界面的互動等原則性要求,可以衍生出更具場景特性的設計方案。
①Ant Design設計原則的由來:
可以說Ant design的設計規範攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華原則,並做了理論之外最佳的設計實踐。
其十大設計原則反過來是對書本理論的補充,我在看書的過程結合『Ant Design』能更好地理解那些原則的釋義。每壹個原則都用了大量通俗易懂的案例來補充說明,這也是為什麽國內的企業壹直以來都很喜歡使用這套組件的原因。
②Ant Design設計原則的適用範圍:
1.我們先說說『Ant Design』的適用範圍:
稍微了解Ant Design的小夥伴都知道,本系統是針對B端後臺系統,承載媒介是PC端的瀏覽器。使用的人員主要包括:用戶體驗設計師、交互設計師、UI設計師、前端程序員等。
2.再說說『Ant Design設計原則』的適用範圍:
顧名思義『設計原則』主要是針對設計師在創作頁面時依照的標準。雖然『Ant Design的設計原則』是Ant Design系統的壹部分,但是前文已經提到。
此原則是攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華,所以設計師可以把這些原則運用到任何的設計領域,並不要局限於企業後臺系統的PC端產品。
為了方便大家理解,講壹個小故事。故事來自於《寫給大家看的設計書》,作者有壹年聖誕節收到壹份禮物——壹本關於植物的百科全書。
作者翻閱之後,發現其中有壹顆叫約書亞樹的樹,造型奇特,自己從未見過。於是決定出門轉轉,然而發現外面到處都是這種樹。故事到這裏就完了。
可能大家會想,這個故事要講壹個什麽道理呢?簡單來說就是,當妳手中有個錘子,滿世界都是釘子。當妳了解到下面要講的十個設計原則後,妳會發現它們處處都適用。
③Ant Design設計原則的內容:
十大原則如下:1親密原則(Proximity)2對齊原則(Alignment)3對比原則(Contrast)4重復原則(Repetition)5直截了當(Make it Direct)。
6簡化交互(Keep it Lightweight)7足不出戶(Stay on the Page)8提供邀請(ProvideInvitation)9即時反應(React Immediately)10巧用過渡(Use Transition)。
『如何運用Ant Design的設計原則』:
對於壹個初級設計師而言,想要了解UI用戶體驗等知識,學習Ant Design的設計原則算是比較快能上道的,因為Ant Design是吸取了很多前輩的精華,提煉而成的系統。
打個簡單的比喻,對於設計師而言Ant Design就是設計師學習『視覺規範』,掌握『設計原則』最好的字典。
接下來我就給大家說說我是如何快速理解Ant Design的這10條設計原則並運用到工作當中。
Ant Design定義了10條設計原則,根據『席克定律』選項太多不易記憶,於是我找到了這些設計原則的***通性,將其歸為4類,也就是大家只需記住四類設計原則,在工作中適當延展即可。