2022-6-20 純純
近年來界面設(shè)計(jì)工具不斷推陳出新，一些新興的實(shí)用界面設(shè)計(jì)工具漸漸走進(jìn)設(shè)計(jì)師們的視野，逐步改變著設(shè)計(jì)師的工作模式。作為互聯(lián)網(wǎng)設(shè)計(jì)師，效率至上的工作原則敦促我們不斷嘗試新工具，建立新的工作模式。本文將回顧界面設(shè)計(jì)工具的發(fā)展歷程，并著眼界面設(shè)計(jì)工具的發(fā)展趨勢(shì)，為大家推薦一些新興、高效的界面設(shè)計(jì)工具，涉及UI、動(dòng)效設(shè)計(jì)領(lǐng)域，希望對(duì)大家有所幫助。
隨著互聯(lián)網(wǎng)行業(yè)的日益繁榮，界面設(shè)計(jì)領(lǐng)域逐漸走向成熟，界面設(shè)計(jì)工具也一直在以驚人的速度發(fā)展。界面設(shè)計(jì)工具的發(fā)展歷經(jīng)了三個(gè)階段：
1. 第一階段是最早期界面設(shè)計(jì)領(lǐng)域剛剛起步，設(shè)計(jì)師普遍使用PS來制作界面。但PS是一個(gè)全面的而非專門針對(duì)界面設(shè)計(jì)的工具，因此界面設(shè)計(jì)師在界面的繪制、文件的交付上都存在一定不便。
2. 第二階段是Sketch的出現(xiàn)。雖然Sketch是一款Mac端軟件，但其作為一款專門針對(duì)界面設(shè)計(jì)的工具，以其高效、小巧的優(yōu)勢(shì)迅速占領(lǐng)界面設(shè)計(jì)市場(chǎng)，逐步取代PS成為各大設(shè)計(jì)團(tuán)隊(duì)的首選。由于Sketch在動(dòng)效制作方面的欠缺，出現(xiàn)了Principle、Flinto、Protopie等專門設(shè)計(jì)界面動(dòng)效的工具，一般設(shè)計(jì)師都會(huì)將其搭配使用。
3. 當(dāng)前階段各種新興設(shè)計(jì)工具如XD、Figma、Framer Web逐漸走進(jìn)設(shè)計(jì)師們的視野，它們專注于界面設(shè)計(jì)領(lǐng)域，不斷挖掘和突破Sketch的短板，為設(shè)計(jì)師們打造更良好的使用體驗(yàn)。
界面設(shè)計(jì)工具的發(fā)展改變著設(shè)計(jì)師們的工作方式。界面設(shè)計(jì)工具也漸漸從單一專注設(shè)計(jì)本身向云端性、協(xié)作性、通用性發(fā)展，旨在實(shí)現(xiàn)更高效的設(shè)計(jì)生產(chǎn)活動(dòng)。
云端性
隨著云計(jì)算的發(fā)展，界面設(shè)計(jì)工具也在逐步走向云端化。設(shè)計(jì)從本地轉(zhuǎn)向云端，不再依賴于本地硬件的性能，云端的計(jì)算能力讓使用性能得以提高。設(shè)計(jì)也不再受時(shí)間和空間的限制，只要有網(wǎng)絡(luò)，設(shè)計(jì)師可以隨時(shí)隨地的工作，臨時(shí)使用其他電腦工作時(shí)省去了安裝軟件、同步設(shè)計(jì)文件的麻煩。 設(shè)計(jì)文件的共享從傳送本地文件給對(duì)方，變成發(fā)送鏈接給對(duì)方。前者耗費(fèi)本地內(nèi)存與下載時(shí)間，后者有網(wǎng)即可打開。設(shè)計(jì)工具的云端性使得設(shè)計(jì)的靈活度增強(qiáng)，設(shè)計(jì)效率大大提高。
協(xié)作性
注重不同工種之間的高效協(xié)作也是設(shè)計(jì)工具的一個(gè)發(fā)展趨勢(shì)。新興的設(shè)計(jì)工具（如Figma、Framer Web）試圖將產(chǎn)品、設(shè)計(jì)、開發(fā)、測(cè)試融為一個(gè)整體，讓不同工種之間可以高效討論、同步設(shè)計(jì)方案。實(shí)現(xiàn)整個(gè)團(tuán)隊(duì)效率的最大化。利用技術(shù)降低反復(fù)溝通的成本、減少同步不一致情況的發(fā)生，掃除各工種之間的協(xié)作障礙。
通用性
今年9月Figma舉辦的第二屆Config Europe大會(huì)，其主題是讓設(shè)計(jì)和代碼連接更緊密?？梢钥闯鲈O(shè)計(jì)工具越來越注重其通用性，設(shè)計(jì)工具不僅可以幫助設(shè)計(jì)師輸出設(shè)計(jì)稿本身，而且致力于打破設(shè)計(jì)與代碼之間的壁壘，降低交接成本。讓設(shè)計(jì)實(shí)現(xiàn)變得更加輕松高效。
Figma是一款全平臺(tái)通用的在線界面設(shè)計(jì)軟件。2019年UXTOOLS設(shè)計(jì)工具使用報(bào)告中顯示，F(xiàn)igma的使用率從12%增長(zhǎng)至26%，在今年的Config Europe大會(huì)上Figma也預(yù)告了一些即將推出的功能迭代，其便捷高效的特性使其受到眾多設(shè)計(jì)師的追捧，正在逐步搶占sketch的用戶市場(chǎng)。
Figma與Sketch相比，亮點(diǎn)功能有哪些？
（1）Windows用戶也可隨心使用
與sketch只支持蘋果生態(tài)系統(tǒng)相比，F(xiàn)igma最大的好處是windows用戶也可以使用。他支持在Mac、windowsPC機(jī)甚至ipad上使用，理論上只要你能打開瀏覽器，就可以使用Figma愉快地設(shè)計(jì)。
（2）云端文件使用不卡頓，支持離線編輯
Figma創(chuàng)建的文件全部存儲(chǔ)在用戶的云端賬戶中，不占用本地內(nèi)存。當(dāng)文件過大時(shí)，sketch會(huì)出現(xiàn)卡頓現(xiàn)象，拖拽一個(gè)圖層都會(huì)變得很困難。而Figma對(duì)本地資源的消耗很小，大文件也幾乎不存在卡頓的情況。設(shè)計(jì)師們最關(guān)心的無網(wǎng)或若網(wǎng)情況下Figma的使用問題，F(xiàn)igma也給出了相應(yīng)的解決方案。其支持離線編輯，離線時(shí)會(huì)自動(dòng)把內(nèi)容保存在本地，當(dāng)網(wǎng)絡(luò)恢復(fù)后自動(dòng)同步到云端。
（3）一鍵導(dǎo)入sketch文件
Figma可導(dǎo)入Sketch文件，大大降低了文件遷移成本。如果你想遷移全部工作到Figma是十分便捷快速的。
（4）更強(qiáng)大的組件功能
Figma和Sketch都擁有組件功能。當(dāng)原始組件更改時(shí)，復(fù)制組件就會(huì)同步變化，在這點(diǎn)上二者是相同的。但Figma在組件邏輯上比Sketch更進(jìn)一步，復(fù)制組件可以靈活處理與原始組件的同步關(guān)系。當(dāng)設(shè)計(jì)師修改復(fù)制組件的樣式時(shí)，原始組件不受影響。此時(shí)二者的關(guān)聯(lián)邏輯仍然存在，當(dāng)再次修改原始組件，復(fù)制組件仍然會(huì)同步變化。相比于Sketch，F(xiàn)igma把組件做的更加靈活限制更少。
同時(shí)Figma也在不斷優(yōu)化其組件功能，在Config Europe大會(huì)上，F(xiàn)igma預(yù)告在今年11月會(huì)正式上線組件Variants功能。該功能是將一系列有關(guān)聯(lián)的內(nèi)容生成一個(gè)Variants組件，在使用時(shí)可以直接通過識(shí)別出來的組件屬性改變組件樣式。其優(yōu)勢(shì)在于使用組件時(shí)可以更輕松的切換所需組件的不同狀態(tài),再也不需要像在sketch中一樣逐級(jí)尋找了。
如下圖中的按鈕組件，設(shè)計(jì)師可以將所有的按鈕狀態(tài)都列舉出來并按層級(jí)、顏色、狀態(tài)、大小命名。然后選中所有按鈕將其組成一個(gè)Variants組件。
（5）與代碼緊密結(jié)合
在使用sketch輸出設(shè)計(jì)稿時(shí)，設(shè)計(jì)師往往需要借助藍(lán)湖或zeplin輸出標(biāo)注文件。Figma則與代碼緊密結(jié)合，本身自帶交付功能。 其文件中的每個(gè)模塊都有代碼模式，只需要將開發(fā)同學(xué)的賬號(hào)開通查看權(quán)限并發(fā)送鏈接，就可以直接在設(shè)計(jì)文件上獲取標(biāo)注，也可自行導(dǎo)出所需的CSS、ios、Android樣式。
（6）一鍵恢復(fù)歷史版本
Figma會(huì)將設(shè)計(jì)師的每一次修改存成對(duì)應(yīng)的歷史版本，當(dāng)老板說想要某一版時(shí)，設(shè)計(jì)師只要恢復(fù)至老板想要的版本就ok啦。如果其他設(shè)計(jì)師誤刪除或錯(cuò)誤修改文件，也有機(jī)會(huì)一鍵搶救。
（7）團(tuán)隊(duì)協(xié)作
團(tuán)隊(duì)協(xié)作功能可謂是Figma最大的核心競(jìng)爭(zhēng)力。當(dāng)幾位設(shè)計(jì)師需要維護(hù)同一份設(shè)計(jì)文件時(shí)，F(xiàn)igma可以支持幾位設(shè)計(jì)師同時(shí)在線修改，只要將文件鏈接分享給對(duì)方并給到相應(yīng)權(quán)限（查看、編輯權(quán)限）即可。如果使用sketch，設(shè)計(jì)師一般會(huì)發(fā)送源文件給對(duì)方修改來達(dá)到協(xié)作效果。來回傳輸源文件不僅容易造成文件同步出錯(cuò)，而且有一定的下載時(shí)間成本和存儲(chǔ)成本，相比之下Figma的優(yōu)勢(shì)顯而易見。
除了設(shè)計(jì)師之間的協(xié)作，F(xiàn)igma也有效提高了設(shè)計(jì)評(píng)審的效率。與在工作群截設(shè)計(jì)圖標(biāo)紅再描述相比，F(xiàn)igma的評(píng)論功能使得同事可以在設(shè)計(jì)文件中實(shí)時(shí)標(biāo)注討論方案，提高了線上評(píng)審效率。
設(shè)計(jì)師受文件本地存儲(chǔ)的限制，在工作中把源文件給同事、設(shè)計(jì)稿給產(chǎn)品、切圖給開發(fā)、一項(xiàng)簡(jiǎn)單的輸出對(duì)接任務(wù)變得瑣碎起來。Figma的出現(xiàn)打破了設(shè)計(jì)師長(zhǎng)久以來的孤島工作狀態(tài)，設(shè)計(jì)師只需分享一個(gè)鏈接，同事可以修改設(shè)計(jì)稿、產(chǎn)品可以評(píng)審、開發(fā)可以查看界面模塊的屬性甚至查看代碼，大大提升了設(shè)計(jì)師的工作效率。如果您的團(tuán)隊(duì)正在考慮更換設(shè)計(jì)工具,Figma是一個(gè)不錯(cuò)的選擇。
Framer Web是一款在線動(dòng)效設(shè)計(jì)軟件，于今年5月上線正式版，相比于Framer家族的前兩款產(chǎn)品Framer classic、Framer X, Framer Web突破了其以代碼為操作核心的理念，上線的新版本對(duì)設(shè)計(jì)師來說更加易用友好。
Framer Web的核心亮點(diǎn)是什么？
（1）網(wǎng)頁端全平臺(tái)可用
相比于Framer classic和Framer X作為本地客戶端軟件只支持Mac電腦，F(xiàn)ramer Web是一款基于瀏覽器的在線設(shè)計(jì)工具，因此windows用戶也可以安心使用。同時(shí)個(gè)人版本免費(fèi)，大大降低了設(shè)計(jì)師的使用成本。
（2）文件導(dǎo)入
Framer Web可通過import選項(xiàng)導(dǎo)入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真動(dòng)效。
（3）輕松實(shí)現(xiàn)復(fù)雜動(dòng)效
Framer一直主打利用代碼實(shí)現(xiàn)復(fù)雜可控的交互動(dòng)效,。雖然可以保證輸出高質(zhì)量的動(dòng)效，但對(duì)于設(shè)計(jì)師們來講十分不友好，學(xué)習(xí)成本過高。此次發(fā)布的Framer Web為了解決這一問題，增加了適合設(shè)計(jì)師使用的可視化界面控制動(dòng)效，設(shè)計(jì)師可以通過Magic Motion輕松實(shí)現(xiàn)復(fù)雜動(dòng)效。
Magic Motion與principle、keynote的動(dòng)畫實(shí)現(xiàn)原理類似。當(dāng)你選擇目標(biāo)元素添加了交互行為后，可以在Magic Motion中選擇一個(gè)過渡方式。只要兩個(gè)畫板中的元素名稱一致且在不同面板中擁有不同的形態(tài)，那么在畫板切換時(shí)該元素就會(huì)生成補(bǔ)間動(dòng)畫發(fā)生相應(yīng)變化。
同時(shí)Framer也新增了一些特別的交互控制實(shí)現(xiàn)一些特殊動(dòng)效。比如自帶控件中的video，本身會(huì)有一些獨(dú)特的交互行為如End、Pause、Play（播放、停止、暫停），當(dāng)進(jìn)行這些操作時(shí)，會(huì)觸發(fā)相應(yīng)的頁面變化。
（4）從設(shè)計(jì)到代碼
代碼一直是Framer的核心功能。Framer Web默認(rèn)隱藏了代碼面板，設(shè)計(jì)師還是可以在設(shè)定了動(dòng)效后，通過點(diǎn)擊頂部的handoff調(diào)出相應(yīng)代碼。如果你是一個(gè)需要使用代碼的設(shè)計(jì)師，你仍然可以通過編輯代碼實(shí)現(xiàn)更復(fù)雜的動(dòng)效。對(duì)于設(shè)計(jì)師來說，F(xiàn)ramer提供的豐富動(dòng)效已經(jīng)可以滿足絕大部分訴求。絕大部分設(shè)計(jì)師已經(jīng)無需再關(guān)注代碼部分，通過可視化界面完全可以做出很豐富的交互效果。而Framer Web最終的野心是希望設(shè)計(jì)師通過可視化界面設(shè)計(jì)出參數(shù)化的動(dòng)效，可以直接導(dǎo)出相應(yīng)的能交付生產(chǎn)端的代碼。目前Framer Web 已經(jīng)可以實(shí)現(xiàn)導(dǎo)出相應(yīng)動(dòng)效代碼，但導(dǎo)出的效果仍有待完善，只是可以導(dǎo)出Transiton的參數(shù)而已。
（5）高效協(xié)作
Framer Web和Figma一樣，也非常注重團(tuán)隊(duì)協(xié)作。設(shè)計(jì)師可以將鏈接分享對(duì)方進(jìn)行查看、編輯，方便幾位設(shè)計(jì)師合作一個(gè)項(xiàng)目的情況。與需要反復(fù)傳輸文件相比，F(xiàn)ramer Web省時(shí)省力，大大提高了設(shè)計(jì)師的工作效率。
小結(jié)
Framer Web放棄了攻占界面設(shè)計(jì)領(lǐng)域的策略，轉(zhuǎn)而和Figma官方達(dá)成積極的戰(zhàn)略合作，專注于做專業(yè)的動(dòng)效設(shè)計(jì)軟件。因此Framer Web非常適合和Figma搭配使用。隨著產(chǎn)品策略的調(diào)整，相信在不久的將來Framer Web還會(huì)為設(shè)計(jì)師們提供更豐富、高效的動(dòng)效設(shè)計(jì)功能，非常值得期待。
雖然云端化的設(shè)計(jì)工具正逐漸興起，但sketch仍然是目前較為主流的界面設(shè)計(jì)工具。因此接下來除了為大家介紹一些可以提升工作效率的Figma插件外，也會(huì)介紹一些好用的sketch插件，大家可以根據(jù)自己的需求自行嘗試體驗(yàn)。
3.1 Design Lint（Figma）
設(shè)計(jì)師在做較大項(xiàng)目時(shí)可能會(huì)繪制幾十個(gè)頁面，難免會(huì)存在界面丟失元素的情況。Design Lint就能幫助你解決這一問題。它可以在你工作的時(shí)候進(jìn)行實(shí)時(shí)更正，檢查不同界面直接的差異，包括顏色、字體、填充、半徑值等樣式差異并糾正錯(cuò)誤。如果你做了一些修改，Desgn Lint也會(huì)根據(jù)你的修改實(shí)時(shí)更新。這款插件可以讓你更專注于設(shè)計(jì)本身，而不用浪費(fèi)時(shí)間檢查不同頁面的元素是否使用正確，大大提高了設(shè)計(jì)師的工作效率。
https://www.figma.com/community/plugin/801195587640428208/Design-Lint
3.2 TinyImage Compressor（Figma）
設(shè)計(jì)師在做較大項(xiàng)目時(shí)導(dǎo)出的設(shè)計(jì)稿過大，存儲(chǔ)和傳播的成本高。用這款插件最多可以比Figma默認(rèn)導(dǎo)出的文件小90%。同時(shí)支持導(dǎo)出多格式文件，導(dǎo)出多個(gè)圖片時(shí)還會(huì)自動(dòng)生成一個(gè)zip壓縮包。
https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressorl
3.3 Design System Organizer（Figma）
這款插件幫助設(shè)計(jì)師在設(shè)計(jì)組件系統(tǒng)時(shí)管理組件系統(tǒng)。在設(shè)計(jì)組件系統(tǒng)時(shí)，會(huì)遇到如圖所示的：“Buttons-Small-Default...”的組織形式。該插件可以對(duì)組件進(jìn)行管理、如分組、取消分組、移動(dòng)、重命名。當(dāng)重命名組后，該組中所有組件的名稱都會(huì)隨之改變，十分方便。
https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer
3.4 Juuust Handoff（Figma）
Figma本身自帶交付功能，但該插件的好處是生成的是離線文件，導(dǎo)出的文件可直接交付開發(fā)。開發(fā)同學(xué)可以不受網(wǎng)絡(luò)影響隨時(shí)查看間距、色值等信息。
https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff
3.5 Image Optim （Sketch）
設(shè)計(jì)師在導(dǎo)出設(shè)計(jì)稿時(shí)有時(shí)圖片過大，Image Optim可以在導(dǎo)出圖片時(shí)壓縮圖片，但不會(huì)影響圖片的質(zhì)量。使用時(shí)需先安裝app再安裝Sketch插件。
https://oursketch.com/plugin/imageoptim
3.6 FontFinder（Sketch）
設(shè)計(jì)師在做較大項(xiàng)目時(shí)可能會(huì)繪制幾十個(gè)頁面，難免會(huì)存在字體使用錯(cuò)誤的情況，F(xiàn)ont FInder就能幫助你解決這一問題。它可以檢測(cè)出文件中存在的所有字體，你可以勾選想要更改的字體就可以一鍵將其改成目標(biāo)字體。再也不需要在幾十個(gè)頁面中逐個(gè)尋找更改，大大提升了工作效率。
https://oursketch.com/plugin/font-finder
3.7 Craft（Sketch）
Craft插件十分強(qiáng)大，其中填充功能可以大大提升設(shè)計(jì)師的效率。在設(shè)計(jì)如列表頁時(shí)，設(shè)計(jì)師為了效果需要編輯不同的標(biāo)題、圖片，都要冥思苦想編內(nèi)容。Craft可以一鍵填充文字，如姓名、文章、日期、郵箱、地址、國(guó)家等。不同類別下面也設(shè)置了一些分類，方便設(shè)計(jì)師選擇。除此之外，Craft還可以一鍵填充真實(shí)不重復(fù)的照片,為設(shè)計(jì)師節(jié)省了很多時(shí)間。
https://www.invisionapp.com/craft
3.8 BaseAlign（Sketch）
Sketch自帶的對(duì)齊工具對(duì)形狀來說很好用，但對(duì)于文字來講一般是文字的文本框?qū)R，并不是文字本身對(duì)齊。BaseAlign插件使用的是文字自身的基線對(duì)齊，這樣就以保證不同大小的文字都可以對(duì)齊，設(shè)計(jì)效果更完美。
https://oursketch.com/plugin/basealign
XSHOW是一款由ISUX研發(fā)的高效設(shè)計(jì)協(xié)作平臺(tái)。XSHOW連接了產(chǎn)品經(jīng)理、開發(fā)等各個(gè)不同工種，提高了設(shè)計(jì)資源輸出和分發(fā)效率。設(shè)計(jì)師將設(shè)計(jì)文件上傳到XSHOW，就可以將文件鏈接分享給產(chǎn)品經(jīng)理、開發(fā)等同學(xué)。產(chǎn)品經(jīng)理在手機(jī)小程序上就可以預(yù)覽方案，設(shè)計(jì)師每次更新的方案也可以直接預(yù)覽。開發(fā)同學(xué)可以直接查看標(biāo)注和切片。同組設(shè)計(jì)師也可以直接下載源文件、甚至查看歷史迭代版本。
網(wǎng)址：https://xshow.tencent.com
（1）可視化上傳文件
設(shè)計(jì)師先在Sketch中安裝XSHOW插件，可使用快捷鍵或直接點(diǎn)選需要上傳的文件畫板，接著直接選擇XSHOW中的“導(dǎo)出”，就可直觀快速的將文件上傳到XSHOW。
（2）記錄所有版本迭代，輕松找回第一稿
設(shè)計(jì)師每一次上傳的文件都會(huì)有云端記錄，設(shè)計(jì)師可以通過時(shí)間軸便捷找回歷史文件，輕松找回第一稿。
（3）靈活豐富的分享權(quán)限
對(duì)于項(xiàng)目分享的權(quán)限，XSHOW的設(shè)置更為靈活，除了支持私密、公開、指定人或團(tuán)隊(duì)可見外，也可以控制權(quán)限的時(shí)效。
（1） 直觀了解團(tuán)隊(duì)輸出,組建團(tuán)隊(duì)展示能力空間
XSHOW除了個(gè)人使用外還可以組建團(tuán)隊(duì)。項(xiàng)目管理者可以通過XSHOW直觀查看整個(gè)團(tuán)隊(duì)的設(shè)計(jì)稿件輸出修改情況，同時(shí)可以組件團(tuán)隊(duì)展示能力空間。
（2）方案變更及時(shí)知道
XSHOW有記錄所有版本迭代的能力，因此作為項(xiàng)目管理者可以及時(shí)知道團(tuán)隊(duì)成員對(duì)方案的修改變更，解決了團(tuán)隊(duì)內(nèi)部有時(shí)同步不及時(shí)的問題。
（3）便捷組建項(xiàng)目和管理團(tuán)隊(duì)成員
項(xiàng)目管理者可以在XSHOW便捷組建項(xiàng)目和管理團(tuán)隊(duì)成員，大大提高了項(xiàng)目管理者的管理效率。
（1）多端查看更方便
XSHOW支持web和小程序兩種沉浸式查看方案的方式。在小程序上查看方案方便合作方直觀感受方案在手機(jī)上的真實(shí)效果，如果合作方身邊沒有電腦也可以及時(shí)查看稿件。
2. 查看歷史變更
XSHOW的歷史變更功能可以使合作方也及時(shí)了解方案的變更情況，大大提升了信息同步效率。
（1）便捷查看標(biāo)注與管理切片
設(shè)計(jì)師將文件上傳到XSHOW后，只要將鏈接分享給開發(fā)，開發(fā)就可以直接在線查看文件標(biāo)注、下載切片。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com