UI設(shè)計(jì)軟件測(cè)評(píng),Sketch、Adobe XD、Figma 、 Pixso對(duì)比

互聯(lián)網(wǎng)一直高速前進(jìn),UI設(shè)計(jì)領(lǐng)域同樣如此,十年前大家還在用PS做設(shè)計(jì),后來(lái)先后誕生了Sketch、Figma兩款產(chǎn)品,也誕生了不少的后起之秀,Sketch、Adobe XD、Figma 和 Pixso就是比較具有代表性的四款產(chǎn)品。

如果協(xié)作對(duì)你的UI設(shè)計(jì)過(guò)程至關(guān)重要,那么Figma 和 Pixso應(yīng)該是你的首選;如果你喜歡折騰各種插件,那Sketch可能更適合你;如果你已經(jīng)熟悉Adobe全家桶的界面,那么Adobe XD學(xué)習(xí)起來(lái)可能更輕松。

下面,我們將分別對(duì)這4 款UI設(shè)計(jì)軟件進(jìn)行介紹,方便你在挑選UI 設(shè)計(jì)工具時(shí),可以選擇到適合自己的那一款。

1. Pixso

Figma 誠(chéng)然是一款非常優(yōu)秀的UI設(shè)計(jì)工具,但對(duì)國(guó)內(nèi)的用戶而言,它也存在一些水土不服的地方。首先網(wǎng)頁(yè)加載慢、部分內(nèi)置字體不兼容中文,其次以及沒(méi)有推出中文版,這些無(wú)疑增加了軟件的使用門檻。

Pixso ,是由國(guó)內(nèi)本土團(tuán)隊(duì)打造的對(duì)標(biāo) Figma 的一站式協(xié)同設(shè)計(jì)工具,集UI設(shè)計(jì)、原型、交互、標(biāo)注和資源于一身,幾乎涵蓋了 Figma 的所有核心設(shè)計(jì)和協(xié)作功能,打通產(chǎn)品、設(shè)計(jì)和研發(fā)協(xié)作多款軟件間的壁壘,在一款軟件中就能完成產(chǎn)設(shè)研全流程,原生中文語(yǔ)言,更符合國(guó)人的使用習(xí)慣和需求。

基于對(duì)本土用戶需求的洞察和用戶反饋,在產(chǎn)品設(shè)計(jì)方面,相比國(guó)外的 Figma , Pixso 提供了不少差異化的功能和服務(wù):

① 獨(dú)特的矢量網(wǎng)格,繪圖效率拉滿

憑借在計(jì)算機(jī)圖形領(lǐng)域的深厚積累, Pixso 推出了獨(dú)特的矢量網(wǎng)格功能,支持在一個(gè)錨點(diǎn)上創(chuàng)建無(wú)數(shù)條路徑,可以連續(xù)創(chuàng)建多個(gè)開(kāi)口或閉合路徑。借助矢量網(wǎng)格,可以快速完成復(fù)雜圖形的繪制,無(wú)需像傳統(tǒng)工具繪制多個(gè)圖層進(jìn)行拼湊對(duì)齊。

②共享樣式和團(tuán)隊(duì)組件庫(kù)

在 Pixso 中,顏色、文本樣式、圖層樣式不僅可以一鍵保存為資源,還可發(fā)布為團(tuán)隊(duì)組件庫(kù),在團(tuán)隊(duì)內(nèi)部和多個(gè)項(xiàng)目中多次調(diào)用。

一旦資源修改后,項(xiàng)目中引用的所有實(shí)例將會(huì)自動(dòng)更新,可以大大提升設(shè)計(jì)創(chuàng)作及迭代的效率,并且所有資源都能共享到團(tuán)隊(duì),實(shí)現(xiàn)快速?gòu)?fù)用。

當(dāng)你在團(tuán)隊(duì)空間中新建了一個(gè)項(xiàng)目,可以看到團(tuán)隊(duì)先前發(fā)布的團(tuán)隊(duì)組件庫(kù),啟用組件庫(kù)之后,在左側(cè)面板就能看到來(lái)自團(tuán)隊(duì)組件庫(kù)的所有組件,這樣就實(shí)現(xiàn)了組件在不同設(shè)計(jì)項(xiàng)目中的共享和調(diào)用,減少不必要的重復(fù)勞動(dòng)。

 ?、圩詭е形拿赓M(fèi)商用字體

鑒于最近這些年字體侵權(quán)的案例時(shí)有發(fā)生,為減少設(shè)計(jì)師因字體使用不當(dāng)而帶來(lái)的侵權(quán)問(wèn)題, Pixso 自帶了多款免費(fèi)可商用的中文字體:思源黑體、OPPO Sans、站酷快樂(lè)體、優(yōu)設(shè)標(biāo)題黑體、思源宋體等等,這些字體存儲(chǔ)在Pixso云端,使用前無(wú)需手動(dòng)安裝,可一鍵調(diào)用。

④兼容多種設(shè)計(jì)文件,無(wú)縫銜接過(guò)往工作

在文件兼容方面, Pixso 支持導(dǎo)入來(lái)自 Figma 、 Sketch 、 XD 、 Axure 的文件,成為國(guó)內(nèi)首個(gè)兼容多種文件格式的設(shè)計(jì)協(xié)作平臺(tái)。

不僅如此,Pixso還支持企業(yè)級(jí)遷移功能,在遷移 Figma 、 Sketch文件的時(shí)候,能保持設(shè)計(jì)稿和組件庫(kù)的調(diào)用關(guān)系,后期修改組件庫(kù)內(nèi)容,實(shí)例也會(huì)自動(dòng)調(diào)整,這也是國(guó)內(nèi)首家實(shí)現(xiàn)這一功能的產(chǎn)品。

⑤ 支持私有化部署,滿足企業(yè)更高級(jí)別安全需求

Pixso 目前對(duì)所有個(gè)人用戶免費(fèi)開(kāi)放,個(gè)人用戶可以享受到 Pixso 會(huì)員的幾乎所有權(quán)益:無(wú)限文件數(shù)量、無(wú)協(xié)作者人數(shù)限制、無(wú)限云存儲(chǔ)空間等等,內(nèi)置的所有功能都可以免費(fèi)使用,對(duì)廣大國(guó)內(nèi) UI、UX 設(shè)計(jì)群里來(lái)說(shuō),誠(chéng)意十足。

默認(rèn)情況下,用戶創(chuàng)建的文件都存放在 Pixso 服務(wù)器上,考慮到企業(yè)想要自主掌握數(shù)據(jù)的需求,Pixso 也提供了私有化部署的方案,滿足企業(yè)更高級(jí)別安全需求。據(jù) Pixso 團(tuán)隊(duì)介紹,目前已經(jīng)有數(shù)十家各行業(yè)頭部企業(yè)的設(shè)計(jì)團(tuán)隊(duì)正在使用 Pixso 企業(yè)服務(wù)。

2. Figma

Figma ,是一款基于云端的UI設(shè)計(jì)工具,可以直接在瀏覽器中運(yùn)行,你可以在任何設(shè)備或平臺(tái)訪問(wèn)你的項(xiàng)目,也無(wú)需安裝軟件或購(gòu)買多個(gè)軟件許可證。

來(lái)自 UX TOOLS 發(fā)布的《2021設(shè)計(jì)工具調(diào)查報(bào)告》顯示,在 Windows 和 macOS 系統(tǒng)上, Figma 的使用人數(shù)都超過(guò)了先前推出的 Sketch 和 Adobe XD 。

在 Figma 之前,從最初的草圖到原型設(shè)計(jì),往往需要用到多款軟件,文件流轉(zhuǎn)次數(shù)多,迭代的周期比較長(zhǎng)。

有了 Figma 之后,同樣的對(duì)接流程大幅縮短,團(tuán)隊(duì)成員都能拿到最新版的文件。

Figma 最大的特色在于協(xié)作,在右上角會(huì)顯示當(dāng)前正在瀏覽和編輯文件的成員頭像,每個(gè)人的鼠標(biāo)指針會(huì)帶有各自的昵稱,可以很方便地查看誰(shuí)更改了什么,并將評(píng)論和反饋直接添加到需要溝通的位置。

當(dāng)涉及矢量操作時(shí), Figma 的鋼筆工具更加靈活。 Figma 內(nèi)置的矢量網(wǎng)絡(luò),允許你把多條線連接到一個(gè)點(diǎn)上,在移動(dòng)線段時(shí),連接成線的點(diǎn)也會(huì)自動(dòng)跟隨,這加快了矢量繪圖的效率。

對(duì)于選定的畫板或?qū)ο螅?Figma 可以 CSS 、 iOS 或 Android 格式顯示代碼片段,供開(kāi)發(fā)人員在查看設(shè)計(jì)文件時(shí)使用。此外,開(kāi)發(fā)人員可以在設(shè)計(jì)文件中直接獲取標(biāo)注信息,沒(méi)有必要使用第三方工具。

在價(jià)格方面, Figma 有免費(fèi)和收費(fèi)兩種模式,免費(fèi)用戶最多創(chuàng)建 1 個(gè)項(xiàng)目和 3 個(gè)文件,每個(gè)文件只能包含 3 個(gè)頁(yè)面,保存 30 天的版本歷史記錄,無(wú)法使用共享團(tuán)隊(duì)庫(kù);收費(fèi)版分為兩檔,專業(yè)版每人每月 12 美元,組織版每人每月 45 美元,整體價(jià)格較高。

3. Sketch

過(guò)去十年,Sketch 一直是主流 UI 設(shè)計(jì)工具之一,雖然它到現(xiàn)在都不支持 Windows 系統(tǒng),但仍有一大批忠實(shí)追隨者。

回顧它的背景,它是由荷蘭公司 Sketch BV 于 2010 年推出的 macOS 桌面矢量圖形處理軟件。Sketch 在設(shè)計(jì)之初,就被設(shè)計(jì)成盡可能輕量和快速響應(yīng),去除了Adobe Photoshop 和IIustrator 內(nèi)置的許多附加功能。

與 IIustrator CS4 相比,早期的 Sketch 界面極其簡(jiǎn)單,不像 Adobe 擁有復(fù)雜的嵌套工具欄,Sketch 頂部的圖標(biāo)就是它的核心功能。

Sketch Mirror App 是 Sketch 最有用也最受歡迎的功能之一,設(shè)計(jì)師將 iPhone 連接到 Mac 電腦,可以在移動(dòng)設(shè)備上實(shí)時(shí)測(cè)試他們的設(shè)計(jì)。

這在現(xiàn)在看來(lái)可能不夠驚艷,但在 2010 年,這可以稱得上一個(gè)改變游戲規(guī)則的功能,即便是行業(yè)標(biāo)桿 Adobe 也沒(méi)有類似的功能。

Sketch 最初不支持多人實(shí)時(shí)在線協(xié)作,團(tuán)隊(duì)成員編輯稿件時(shí),需要頻繁來(lái)回傳輸文件,效率非常低下。

直到 2020 年底, Sketch 才發(fā)布了實(shí)時(shí)協(xié)作功能,試圖在這一領(lǐng)域趕上 Figma 。不過(guò)這個(gè)功能并沒(méi)有集成到 Sketch 客戶端,開(kāi)始協(xié)作之前,本地的 Sketch 文件需要先上傳到 Sketch Cloud 中,在瀏覽器打開(kāi)分享鏈接,才能參與協(xié)作。

在價(jià)格方面,Sketch采用免費(fèi)試用+訂閱制的方案,提供30天免費(fèi)試用,到期后每位編輯者每月9美元,按年付費(fèi)99美元,整體費(fèi)用對(duì)設(shè)計(jì)師來(lái)說(shuō)沒(méi)有吸引力。

4. Adobe XD

Sketch 的優(yōu)點(diǎn)很明顯,但一直沒(méi)有推出 Windows 版本,有人為了能用 Sketch 進(jìn)行 UI 設(shè)計(jì),不得不先去購(gòu)買一臺(tái)蘋果電腦…天下苦 Sketch 久矣。

2016年, Adobe 公司推出了基于矢量的 UI 設(shè)計(jì)工具 Adobe XD ,支持 macOS 和 Windows 系統(tǒng),作為 Sketch 在 Windows 上的替代品,讓跨平臺(tái)協(xié)作的團(tuán)隊(duì)能夠順暢溝通。

在使用 Adobe XD 之前,如果你用過(guò) Adobe 的軟件,并且熟悉軟件的界面,那么當(dāng)你接觸XD,就會(huì)感到很親切,可以很快上手,唯一的區(qū)別在于更復(fù)雜的設(shè)計(jì)系統(tǒng)和元件復(fù)用上。

背靠 Adobe 打造的多款軟件,可以說(shuō)是 XD 最大的賣點(diǎn)之一,從位圖到矢量到動(dòng)效, Adobe 都有對(duì)應(yīng)的工具來(lái)滿足設(shè)計(jì)師的需求,可以與 XD 很絲滑地聯(lián)動(dòng)工作。

為了追趕 Sketch 形成的插件生態(tài), Adobe 公司設(shè)立了 1000 萬(wàn)美元的基金,鼓勵(lì)眾多開(kāi)發(fā)者開(kāi)發(fā)面向 XD 的插件,目前 XD 已集成了 RenameIt 、 Pixel Perfect 、 Data Generator 等插件。

在多人協(xié)作方面,XD 支持將本地的文件保存為云文檔,之后向協(xié)作者發(fā)送郵件邀請(qǐng),收到邀請(qǐng)的人打開(kāi)文檔就可以參與設(shè)計(jì)協(xié)作。

不過(guò), XD 的協(xié)作功能存在著一定的限制,對(duì)于付費(fèi)用戶創(chuàng)建的文檔,免費(fèi)用戶試用 30 天協(xié)同編輯后就只能查看,無(wú)法再進(jìn)行編輯。

本文提及的 4 款常用的 UI 設(shè)計(jì)軟件,可以說(shuō) UI 設(shè)計(jì)工具的演變和發(fā)展,實(shí)際上也是一個(gè)行業(yè)工作模式發(fā)生變化的縮影。

從最開(kāi)始有一個(gè)好用的 UI 設(shè)計(jì)工具就夠了,到后來(lái)誕生了具備多人實(shí)時(shí)協(xié)作、打通產(chǎn)設(shè)研流程的一站式 UI 設(shè)計(jì)工具,工具的演變軌跡,也越來(lái)越貼合UI設(shè)計(jì)師的需求和協(xié)作流程。經(jīng)過(guò)對(duì)比之后,無(wú)論是 Sktech 強(qiáng)大的原型設(shè)計(jì)功能, Figma 的社區(qū)生態(tài),還是 Pixso 的原型+UI設(shè)計(jì)+交付的流暢體驗(yàn),都并沒(méi)有限制你必須選擇哪一款工具,而是了解并選擇更適合團(tuán)隊(duì)工作節(jié)奏和語(yǔ)言環(huán)境的工具。

(免責(zé)聲明:本網(wǎng)站內(nèi)容主要來(lái)自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿,凡在本網(wǎng)站出現(xiàn)的信息,均僅供參考。本網(wǎng)站將盡力確保所提供信息的準(zhǔn)確性及可靠性,但不保證有關(guān)資料的準(zhǔn)確性及可靠性,讀者在使用前請(qǐng)進(jìn)一步核實(shí),并對(duì)任何自主決定的行為負(fù)責(zé)。本網(wǎng)站對(duì)有關(guān)資料所引致的錯(cuò)誤、不確或遺漏,概不負(fù)任何法律責(zé)任。
任何單位或個(gè)人認(rèn)為本網(wǎng)站中的網(wǎng)頁(yè)或鏈接內(nèi)容可能涉嫌侵犯其知識(shí)產(chǎn)權(quán)或存在不實(shí)內(nèi)容時(shí),應(yīng)及時(shí)向本網(wǎng)站提出書面權(quán)利通知或不實(shí)情況說(shuō)明,并提供身份證明、權(quán)屬證明及詳細(xì)侵權(quán)或不實(shí)情況證明。本網(wǎng)站在收到上述法律文件后,將會(huì)依法盡快聯(lián)系相關(guān)文章源頭核實(shí),溝通刪除相關(guān)內(nèi)容或斷開(kāi)相關(guān)鏈接。 )