Sketch，F(xiàn)igma，Pixso，安裝3款UI設(shè)計(jì)工具深度分析

2022-02-10 點(diǎn)擊量：

作為一名大廠UI設(shè)計(jì)師，使用Sketch已經(jīng)有三年以上，對(duì)這個(gè)出圖神速的設(shè)計(jì)工具高舉五星好評(píng)。但2020年后，因?yàn)橐咔榈脑?，所有打工人都必須適應(yīng)隔離在家辦公的現(xiàn)狀。以往使用體驗(yàn)優(yōu)秀的Sketch由于不能支持暢快地開(kāi)展遠(yuǎn)程辦公，也促使我們考慮尋找新的生產(chǎn)工具。

在遷移的過(guò)程中，我們也曾試用過(guò)評(píng)價(jià)比較好的Figma，但因?yàn)樾畔踩脑蚬静辉试S繼續(xù)使用，所以我們只能考慮國(guó)產(chǎn)Figma類軟件。在使用過(guò)全網(wǎng)10+ui在線協(xié)作工具，終于還是找到了一款從設(shè)計(jì)、交互、穩(wěn)定、功能都與Figma差異不大的設(shè)計(jì)工具Pixso，既能滿足在線設(shè)計(jì)的需求，也能擁有Sketch的大部分優(yōu)點(diǎn)。

一個(gè)好用的UI設(shè)計(jì)工具是可以從設(shè)計(jì)體驗(yàn)、協(xié)作能力、和使用穩(wěn)定性、遷移成本等維度進(jìn)行評(píng)分的，我會(huì)從這幾個(gè)重要維度來(lái)對(duì)比 Sketch與Pixso這兩個(gè)UI設(shè)計(jì)工具在使用上的差異，以供大家參考。

一、設(shè)計(jì)體驗(yàn)=效率+易用

從工作流程上來(lái)講，Pixso和Sketch對(duì)比最大的區(qū)別是在于團(tuán)隊(duì)協(xié)作方面中。以往使用Sketch，如果除了跟產(chǎn)品經(jīng)理還有研發(fā)需要日常重復(fù)溝通以外，想實(shí)現(xiàn)多人在線，或者切圖，又或者版本管理，都只能靠依賴插件進(jìn)行。但插件使用步驟也相對(duì)更復(fù)雜，導(dǎo)出也容易出錯(cuò) 。

而對(duì)比Sketch，Pixso可以實(shí)現(xiàn)產(chǎn)品設(shè)計(jì)工作在同一平臺(tái)完成。它既可以畫原型、設(shè)計(jì)界面，也可以自動(dòng)標(biāo)注、切圖和使用鏈接完成交付。團(tuán)隊(duì)的其他伙伴可以在同一個(gè)軟件共享項(xiàng)目進(jìn)度，避免出現(xiàn)版本修改更新不及時(shí)的現(xiàn)象，也更符合目前國(guó)內(nèi)的產(chǎn)品快速迭代的發(fā)展模式（一周一個(gè)版不再是夢(mèng)想）。

除了在線協(xié)作帶來(lái)的便利。在某些細(xì)節(jié)上，Pixso類設(shè)計(jì)工具的功能適應(yīng)國(guó)內(nèi)設(shè)計(jì)師的使用需求。

1、原生中文軟件，學(xué)習(xí)成本低

Sketch對(duì)中文的支持并不太友好，即時(shí)現(xiàn)在有了官方中文版SKetch，但日常在安裝新中文字體后，字體包在字體選擇界面顯示的名稱會(huì)存在顯示亂碼的現(xiàn)象。而Pixso因?yàn)槭菄?guó)產(chǎn)軟件，內(nèi)嵌豐富的中文字體，嘉瑞廣告，使用時(shí)既不需要再花時(shí)間去同步本地字體或者重新安裝，也避免了安裝后要解決亂碼的麻煩。

2、默認(rèn)圖形無(wú)邊框

Sketch在創(chuàng)建新圖形時(shí)，默認(rèn)填充圖形灰色且自帶邊框。照現(xiàn)在的設(shè)計(jì)趨勢(shì)，界面上大多圖形（彈窗、按鈕等）都不帶邊框的，所以使用Sketch創(chuàng)建圖形后還需要修改邊框，過(guò)程就比較繁瑣；而Pixso在創(chuàng)建圖形是默認(rèn)是無(wú)邊框的，沒(méi)有修改邊框這個(gè)步驟，算是針對(duì)設(shè)計(jì)趨勢(shì)的一個(gè)小優(yōu)化。

3、實(shí)例修改更便捷

Sketch的實(shí)例修改相對(duì)比較麻煩，需要返回到原組件進(jìn)行修改。如果是組件單獨(dú)修改，還需先分離組件庫(kù)再改動(dòng)，無(wú)法直接選中圖層完成修改。但是在Pixso，它像Figma一樣允許設(shè)計(jì)師直接選中圖層后批量修改，不用找回原組件或者分離，節(jié)省了組件檢索的時(shí)間。

4、組件查找精準(zhǔn)清晰

組件檢索在Sketch也是一個(gè)比較繁瑣的操作。在套用組件時(shí)，Sketch若選擇列表查找組件，組件名稱太長(zhǎng)不易分辨清晰。如果選擇使用右鍵按分類查找套用，雖然可以顯示縮略圖，但是縮略圖也不夠清晰需要花時(shí)間去辨別。而在Pixso，設(shè)計(jì)師可以點(diǎn)擊組件列表分欄即可查看組件的縮略圖，顯示面積更大，更方面檢索，也有效減少選錯(cuò)組件的重復(fù)操作。

5、組件命名小改動(dòng)，提升檢索速度

Sketch組件的命名邏輯為分類 / 模塊 / 組織 / 分子 / 原子，命名依次是從大到小，因?yàn)镾ketch的組件名稱非常的長(zhǎng)，不利于搜索查找。如果選擇使用右鍵按分類查找套用，

Pixso的組件命名除了[/]之外，還可以使用Page以及 Frame/Group 的方式，而這部分的名稱是不會(huì)出現(xiàn)在組件名上，這意味著按組件名稱查找更便捷。

6、 原子級(jí)組件系統(tǒng)搭載變體功能，有效解決重復(fù)勞動(dòng)

Pixso與Sketch都可以創(chuàng)立組件庫(kù)，但用戶體驗(yàn)略有不同。

Sketch中的組件樣式由于不是原子級(jí)的，當(dāng)設(shè)計(jì)師想要構(gòu)建組件庫(kù)時(shí)，需要列出組件所有的可能性，容易導(dǎo)致的組件數(shù)量臃腫冗雜，查找費(fèi)勁。而且在Sketch，修改被定義的文本或圖層組件樣式需要重新創(chuàng)建組件，或者將子組件與父組件進(jìn)行分離再進(jìn)行修改，嘉瑞廣告，非常不便。

（sketch建立一個(gè)組件庫(kù)需要窮舉所有樣式）

而Pixso因?yàn)檠匾u了Figma的使用為設(shè)計(jì)師提供的組件系統(tǒng)，以及組件樣式切換更方便的功能—“變體”。