一周前，Ant Design 更新了它們的 5.0 版本，看了發布會過後，本想等着發布會所涉及到的具體功能面市過後，體驗一下再寫文章。但是等着等着，很多內容都打上了 Coming Soon 的標籤，那就不等了，今天就從發布會的視頻入手，講講 Ant Design 5.0 的更新內容，以及我的看法。緣起：簡單回顧 Ant 的發展、設計目標 以及 資產狀態系統元規範：對組件設計進行拆解，講解這次改版關於組件部分的具體思路（推薦）設計工程化：講解這個的工程化思路，這方面我並不擅長，所以就暫時就不講解更美、更靈活：講解 Ant Design 的視覺優化，主要是 顏色、字體、圖標、圓角 ... 的調整。後續單獨聊了聊非常神秘的 Pro Components（推薦大家查看視頻）當然還會有工程師來分享他們的研發思路，我們這群臭設計就先不聊研發的事兒~上面提到的內容在 B 站 up：支付寶體驗科技 都有視頻的回顧內容，如果覺得太長，我們也會拆開為大家一起聊聊。這裡還是再次感謝 支付寶體驗設計部 給大家帶來的分享~~ 裡面有很多非常棒的內容。首先簡單用 26 個字來概括這次更新的內容，顏色更藍、字體更深、圓角更大、線條更少、按鈕更易用、風格更多樣。顏色更藍：之前的顏色過於陳舊，於是乎由 # 1890FF 變為現在的 # 1677FF字體更深：最主要的字體顏色加深，由 # 000000 85% 變為 # 000000 88%，並且在特殊場景當中，會將 65% 也使用 88% 的顏色作為字體顏色圓角更大：圓角加大，由最初的 2px 一躍成為 6px （有點不能接受 ...）線條減少：減少線條的使用，使用區塊來對內容進行調整，比如：輸入框部分更多使用 底色去進行區分按鈕更好點：增加圖標按鈕的點擊區域，有點按鈕的點擊動畫風格更多樣：預設多種樣式風格，優化單個頁面的整體樣式整體來看設計風格變化較大，一會兒我們會結合視頻當中講解的內容，幫助大家理解這次發布的新內容，並且注意到很多沒有提起的細節。在元規範之前，還有一個緣起的視頻，主要就是簡單回顧，以及目前的項目背景，這裡就不單獨拎出來講了。關於系統元規範，其實 梓義 講述了一個非常好的思路：組件的邊界究竟在哪？舉了一個我經常在課程當中說的例子：兩個完全相同的組件，Tab與錨點導航它們之間的差別是什麼？正在閱讀的小夥伴也可以思考思考~ 會在文章後面公布答案~分析了它們的差異過後，也講到了基礎組件與業務組件如何定義？（主要關於 日曆）其實有點與我之前寫的文章不謀而合，簡單來說就是業務組件是可以隨着不斷發展變為基礎組件，並最終做到頁面當中的。元規範就是就是能夠幫助我們去確定：組件的有多少、需要做到什麼程度、組件本身如何評估質量、以及業務表現的合理性。能夠通過元規範了解到組件的後續發展思路。緊接着舉例：如何使用紙箱設計一把椅子？我們可能首先想到的是各種奇形怪狀的椅子，但是我們在設計時，考慮的更多是如何使用紙箱來滿足用戶坐着的需求。目的是分析：我們設計組件，其實是需要研究用戶的行為，也就是用戶通過組件你需要去做什麼？比如日期選擇：為什麼要增加 快捷選擇、瀏覽日期附屬信息 的組件，其實是因為我們可以分析使用使用日期選擇的 目的、行為快捷選擇：其實就是因為在很多篩選的場景當中，我們會使用快捷選擇來選擇對應日期。比如 神策數據、簡道雲 產品里就會有對應組件設計。瀏覽日期附屬信息：其實就是幫助用戶在日期選擇當中，查看更多相關的信息，用戶信息展示。因此我們在去做組件時，可以將設計系統當中的組件行為部分進行剝離，要分析的不是組件樣式，而是用戶的行為目的。（由於日期選擇目前的 Ant Design 5.0 沒有更新，只能夠去看視頻的講解）梓義 先講解了傳統的度量思路，比如：人機模型、數據埋點、問卷調研、用戶觀察，但是這些方法都是針對特定業務所展開的，不適合對於 設計系統 去做驗證。這裡簡單補充 GOMS模型 的內容，1983 年 Card , Moran &Newall 在《人機交互心理學》提出用於評估人機交互界面好壞的方法。- Operations操作：在任務實現過程中所產生的行為- Methods方法：即實現目標的一系列操作過程- Selection rules選擇：是用戶要遵守的判定規則，以確定在特定環境下所使用的方法簡單來說，就是將你完成任務的整個流程進行量化，然後進行分析，與之相似的是 KML擊鍵模型，它是一種時間評估的方法，可以將用戶的交互行為分解為幾個動作了解了過後，再來看 Ant Design 給出的 GOMS-X 模型，其實就是基於以上兩個模型理論而來，主要目的就是判斷用戶的操作時長。也就是說，他們在做設計驗證的時候，首先考慮的是用戶在這些組件當中，所花費了多少時間，通過減少來去驗證這個結果。並且將這個時間進行分析，得到「元動作」的評估模型，針對不同的動作去做合理的優化。關於驗證的思路如何落地，這裡作者講述了一個 多選按鈕 組件的驗證思路。也就是圖一圖二到底哪一個方案會更好？（大家也可以想一想）最後以一個案例作為結尾，關於 兩個組件的設計方案對比這裡會選擇方案二，是因為方案一方案二的差別主要在按鈕形態上，一個按鈕選中過後需要挪動，一個不需要挪動。整體來看，系統元規範就是教會我們如何理解組件，並且分享了 Ant Design 設計師在設計優化組件時他們的一些思考，從最開始的產品，到最後的落地，都可以通過這裡視頻。分享的結尾很有意思，梓義留下一個小作業，關於 3.0 與 4.0 日期時間段選擇器，做出了什麼改變？其實按照剛才的思路，就能得到結果。具體結果就在公眾號文章的評論區里公布吧~由於 「設計工程化」 我確實不太了解，所以不敢妄加分析。我們就還是着眼於理解起來較為簡單的「更美更靈活」。這部分內容圍繞着視覺部分展開，主要是講 Ant Design 視覺的「調整」，從 ：更聚焦、去干擾、輕鬆感 去調整設計頁面。顏色的改變，能夠讓頁面更為聚焦。其實從設計來看就是將 Ant Design 的藍色變得更深，由之前的 # 1890FF 變為現在的 # 1677FF 。單純從視覺上來說，其實就是將頁面的整體設計變得更深、更藍；之前的藍色確實給人感覺 舊舊的，比如與白色的字體搭配，按鈕的凸顯程度不夠。更藍過後，整個頁面更為清晰，這個改動我認為還不錯。加深字體顏色的對比度，由之前的 83% 變為 88% ，其實目的都相同，能夠讓重要的信息更為清晰，在頁面上更肯定，所以在字體選擇上，我們整體的頁面設計也要做到這樣的優化。只是在案例當中，出乎我的意料，Ant Design 也將部分 65% 的黑色字體去做了調整，也改為 88%，主要出現在 列表、警告提示、對話框 等等，都進行了調整。圖標上，在系統層面增加了圖標的 hover 態的內容顯示。由以前的只展示 hover 的顏色，變為現在增加背景色，並且圖標還會隨之進行放大，這是能說是一個小優化。之前就一直在吐槽 圖標的 hover 態就應該使用背景去做呈現，就如同文字按鈕一般，否則整體的設計不夠準確。將頁面當中的多數分割線個去除，取而代之的是通過間距來去做區分，這種方法非常的明智，因為 Ant Design 之前的組件當中，確實存在很多分割線，也就導致了線條割裂頁面，目前的設計風格已經不太適合這中頁面形式，因此需要調整。這個設計也非常不錯~2px 改為 6px ，圓角確實有些太大。說實話我最開始喜歡 Ant 就是因為它的 2px 圓角對於我來說剛剛合適。其實我剛開始是完全不能接受圓角的調整，因為對於我而言，我認為太大的圓角不適合 B 端產品，因此這個改動對我影響很大。隨後 Ant Design 關於圓角說了它的優化，可以根據算法來去對所有的組件進行優化，也就是說可以通過算法優化回2px 如果真是我想想這樣的話，那我就覺得還不錯~ 希望是這樣~~視覺風格就和我之前的預判一樣，大家統一的方式都是減少頁面當中的視覺層級，更多去凸顯設計的內容。這次 Ant Design 在整體分享當中，多次出現了他們認為比較合理的頁面設計，其中包含頁面減少層級，減少過多的信息對於用戶的干擾。並且關於視覺風格部分，會極少去使用顏色的分割，因為這樣可以降低程序員基於組件搭建頁面的難度（少給他們使用內容，別搞太多漸變）而這個趨勢，目前也正在很多產品進行落地，關於視覺風格，可以去查看這篇文章，有所講解。主題編輯我認為是一個非常常見的需求，因為大多數企業都需要去做定製，那針對於一個領域設計系統來說，也必須做到如此才行。所以對於主題編輯我是舉雙手贊成。但是隨着主題編輯開放，我遇到了兩個問題：1.編輯主題過後過於卡頓。最近在進入 Ant Design 時，會發現進入頁面時非常卡頓緩慢，這樣也就導致了我開始懷疑這個功能的性能問題。2.編輯完主題過後不知道如何恢復。因為添加主題過後因為卡頓，想着恢復默認應該會好很多，但是找不到恢復的入口（有可能是我沒有找到，大家可以在評論區說說入口在哪 - - ）其實這次 Ant Design 5.0 的更新為我們提供了一個非常好的思路，看到了一個設計系統是如何一步一步去做更新，去做相應的設計優化。當然 Ant Design 5.0 的改版遠遠不止於此（篇幅有限，很多沒法在文章上寫），如果感興趣的話，大家可以去到 B 站再去看看視頻，了解作為一個 B 端設計師，我們究竟應該如何表達自己的想法。於此同時後續也會讓我們的程序員先試用一下目前的 5.0 版本，看看到底會有什麼問題，有問題後續再寫篇文章來進行反饋~行，這就是這次 5.0 的全部內容，如果喜歡這種復盤文章，也別忘了 點讚評論關注~如果對於系統的 B 端知識比較感興趣，不妨了解一下我們的B端交互體驗設計訓練營 第六期，兩個半月的集中學習，趕上金三銀四的黃金招聘旺季，讓你的 B 端設計不迷茫。課程已經開課，現在為報名的最後階段，想要報名的同學一定要抓緊，感興趣可以掃碼了解課程詳情或者查看課程完整介紹
鑽石舞台 發表在 痞客邦 留言(0) 人氣()
留言列表
留言列表