[UIkit]Ant Design for Web 改良版
改良版的Antdesign for web 3.0 sketch元件庫奉上。
最近,由於工作中專案團隊用到了Ant Design釋出的元件和框架來開發,因此作為設計師也不得不使用Ant Design釋出的UIkit來進行介面的拼接,這裡為什麼說是拼接呢?因為在這個階段已經不具備視覺設計工作了,只是根據原型圖的需要,從元件庫中選擇適合的元件來拼裝介面,這個工作其實也可以繞過UI設計師,只要你們的開發者足夠強大,否則拼裝出來的介面只能說一塌糊塗,你能想象一個缺乏搭配技巧和常識的人從名品服飾店買了一身不合適的衣服穿出來的樣子嗎?雖然每一件衣服脫下來都是精品,但是它們被不恰當的穿在了一個人的身上。
所以,在這個時候,無論是不是要繞開UI設計師,都不能缺少一份搭配指南,上個月我在做這個專案的時候,還沒有看到相關的指南。而在開啟Ant Design官網的時候,我還是覺得很開心的,因為螞蟻金服把這個元件庫連同框架和程式碼都開放了,一個可用的框架。
現在貌似都流行把自家的元件開放出來給別人用,降低了設計成本,設計的同質化日益嚴重,以後低階UI設計師真的怕是沒什麼活路了,而高階設計師就是生產元件庫給他人使用吧。
說回螞蟻的這個Ant Design元件庫,提供了桌面端、移動端兩個版本,我是從桌面端開始工作的,下載了Sketch檔案,開啟看了一下,挺好的,內容齊全,有圖示、色板、各種基礎表單、表格元素,還做了大中小尺寸。
在開始著手工作時,我將其匯入了Sketch的library,剛開始覺得沒什麼問題,後來,我一邊檢視官方demo網頁,一邊在library中尋找對應的合適的元件,發現了一個問題:
我找不到我在demo上看到的元件,我明明記得我在匯入library之前看到過,為什麼現在找不到呢?於是我去分析原因,一查才知道,這個庫壓根就是半成品。
具體問題如下:
1. 主題色並沒有與所有相關元素建立關聯關係;
2. tab類元素全都沒有建立為symbol;
3. icons都沒有建立為symbol;
4. 範例文字樣式與實際定義的樣式不一致。
針對以上問題,為了能夠在工作中能實際使用,我花了兩天時間對上述問題進行了修正,當然,時至今日我也沒去看官網是否更新了版本,但是我打算基於這一套東西改造一個自己公司能用的元件庫,所以也就不打算更新,有問題咱就自己修復。
下面提供下載地址,安裝方法就是將其放在您自己習慣放置uikit的資料夾,然後開啟它,點選Sketch-file-add as library即可。
連結: ofollow,noindex" target="_blank">https://pan.baidu.com/s/1DyKhPXn0NKljdBGU4KWE1Q
密碼: 1mfm
感謝您的閱讀,希望您能幫助轉發給您的朋友。