UI设计工具比较:Sketch、Adobe XD、墨刀、Mockplus、Axure RP
UI設計工具,分為2個派系。
其中,最大、最主流的派系,是Sketch、Adobe XD、墨刀這個派系。
這個派系的軟件,操作方式、思路都非常接近,連常用快捷鍵都一樣,會一個就等于都會了。
在一個無限大的畫布上,用戶可以創建任意數量的頁面,創建的內容,可以包裝成組件,復制粘貼到別的項目用。
比如,adobe xd,就是軟件本體不自帶任何UI套件,而是把UI套件的項目文件給你,你打開來,找到喜歡的UI組件,復制到自己的項目去就行了。
類似于,Photoshop里,可以在不同圖片之間復制粘貼。
這個派系的軟件,分2大功能區。上圖你看到的是頁面設計區,還有個交互設計區。就是你點什么按鈕,跳到哪個頁面,發生什么變化,都能連線連出來,模擬出程序最終面貌。
另外,軟件自帶功能不多,但都支持插件。類似于chrome功能不多,主要靠擴展。
比如,紅框標注的插件,可以自動填充大量用戶頭像,模擬用戶列表。
大部分插件是免費的,但也有收費插件。
這個派系內,幾個軟件的區別:
- Sketch是這個派系的開創者,是龍頭老大,但是只有mac版,而且官方聲明不會開發windows版本。
?
- 墨刀,是國產高仿Sketch版,而且是基于網頁的,所以跨平臺。但是幾乎不免費。免費帳號只能創建3個項目,最多20個頁面。等于完全不免費。
由于sketch不支持windows,過去幾年,墨刀作為國內唯一近似產品,在國內很受歡迎。
- Adobe XD,adobe的高仿Sketch產品,支持win/mac,有官方中文,100%完全免費,而且各種套件、模板、插件,都在飛速增長,而且大都是免費的。
Adobe XD最吃虧的,就是面市比較晚,它在2019年,功能才追上它的前輩。如果它早幾年面世,就沒墨刀什么事了,XD就會像Photoshop一樣,全面占領windows市場。
現在,雖然Adobe XD來的晚,但新用戶也是飛速增長狀態。畢竟,完全不要錢。
如果要使用這個派系的軟件,推薦Adobe XD。首先,完全不花錢,就已經是巨大優勢了。而且,還有來自全球的設計師提供免費組件。功能,大家都一樣,全是高仿Sketch。
?
這個派系,能較容易做出漂亮頁面,模擬豐富的頁面互動和切換。但這個派系,實際上并不完美。它有個巨大問題:做功能草圖低效。
在設計最初期,我們關注的是頁面功能,是布局,完全無視美觀。要求軟件,能以最快速度,精確反映頁面功能。
而Sketch, adobe xd這個派系,你會不停陷入修改組件圖層的細節中。
比如,下圖的按鈕組件,當你點選時,你會發現右邊不能修改顏色、文字。
那是因為,這個按鈕,由很多基本圖形組成,類似于Photoshop一張圖片有很多圖層。你要精確選到對應區域,才能修改對應屬性。
而且,這個派系,你頁面上的UI元素,是從各個不同的文件復制過來的小組件,顏色混雜、文字不統一,你都要一個個去修改。
這會導致,設計師不斷陷入對美術細節的調整,而無暇專注于頁面功能設計。
?
也就是說,這個派系,實際上不適合初期頁面功能設計,而是在頁面內容精確定型之后,用來做美工上的精確實現+互動模擬。
所以,這里,另一個高效的派系就要登場了:Balsamiq、Mockplus和Axure RP派系。
這個派系的特點是,自帶完善、風格統一的組件庫,組件沒有圖層,所有內容直接修改屬性,也沒有復雜顏色,不會干擾視覺。
這樣,這個派系,能夠迅速完成頁面功能設計,完全不會被任何因素干擾。
?
但是,和Sketch派系各個軟件幾乎一模一樣不同,這個派系的3個軟件,差異其實很大。
Balsamiq,是模擬手繪草圖風格,類似下面這種:
它只有黑白,不能設置顏色,模擬互動只有基本的點擊跳轉。優點是,他的簡潔,讓它能飛速完成功能設計,因此多年來都廣受歡迎。
很多時候,有了上面這種草圖,前端其實就可以寫代碼了,無需再整那些花里胡哨的,尤其是小團隊、全棧開發的情況。
大名鼎鼎的Axure RP,是個古老的軟件,它是在開發windows軟件的時代的產物,如今來看一切都現得很過時。
如今來看,它自帶的組件庫非常過時,常用組件欠缺,大量過時組件永遠用不上。它的互動設置也是,每個組件,都能夠設置大量行為,然而,如今這個觸屏、web為主的時代,95%的設置你都用不上,放在那純屬礙眼。
從很多角度講,Axure RP是個應該被時代淘汰的產品。
?
Mockplus,實際上是介于Axure RP 和 Sketch派系之間的國貨精品。
它的開發者曾經是Axure RP的用戶,卻不滿于Axure RP的各種問題。于是,Mockplus很多方面,都像是個改良版的Axure RP。
Mockplus擁有Axure RP類似的界面、操作方式,但提供了與時俱進的組件,去掉了如今永遠用不上的互動方式。
這樣,它能像Axure RP那樣,通過簡潔便利的組件設置,初期只專注功能,快速完成頁面功能設計,并模擬互動。等功能布局精確定型,又能通過樣式設置,實現和Sketch派系一致的最終成果。
聽起來很美好,然而,這是有代價的:
- 組件靠官方提供,沒有全球藝術家為它構造龐大內容庫。
- 從毫無美術感的功能草圖,最終改成華麗的頁面成品,需要手動設置非常多的內容。
- 沒有節點式互動設計。它在左上角有個頁面列表,每個頁面內,可以給按鈕、鏈接,添加行為。比如跳轉到其他頁面,或改變本頁某些內容。
MockPlus依然是非常傳統的軟件設計方式。對于復雜任務,不如Sketch派的節點式操作靈活。這種設計,能夠高效的滿足常見、基本需求,但無法適應復雜、高定制化的需求。
MockPlus顯然意識到了這一點,于是推出了單獨的節點式交互設計產品,叫iDoc。他是網頁版,你把做好的UI設計圖,上傳之后,再拖線設計交互。這種專用的交互設計工具,提供審批、修訂等團隊工作流程。
國內有個叫藍湖的產品,也是這樣,只做交互,不做UI。藍湖因為做得早,已經是一統天下的狀態。功能上,這一類產品功能幾乎完全一樣,而且大都免費,所以用哪個都差不多。
?
用戶量上,Mockplus 和 Sketch派的國貨墨刀,用戶都在50萬左右。而且我相信會有一定重疊。因為這兩個流派,有一定互補關系。
最終建議:
在頁面功能設計階段,使用Balsamiq或Mockplus,做到功能布局上,精確定型。
如果有進一步模擬的必要,再換用Adobe XD,升華美工,模擬互動。
總結
以上是生活随笔為你收集整理的UI设计工具比较:Sketch、Adobe XD、墨刀、Mockplus、Axure RP的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Azure Table storage
- 下一篇: 人民币升值的优缺点,这些利弊要了解!