Part1 界面設(shè)計(jì)工具的發(fā)展歷程

• 1. 第一階段是最早期界面設(shè)計(jì)領(lǐng)域剛剛起步，設(shè)計(jì)師普遍使用PS來(lái)制作界面。但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)。

Part2 界面設(shè)計(jì)工具的未來(lái)發(fā)展趨勢(shì)

界面設(shè)計(jì)工具的發(fā)展改變著設(shè)計(jì)師們的工作方式。界面設(shè)計(jì)工具也漸漸從單一專注設(shè)計(jì)本身向云端性、協(xié)作性、通用性發(fā)展，旨在實(shí)現(xiàn)更高效的設(shè)計(jì)生產(chǎn)活動(dòng)。

1. 云端性

隨著云計(jì)算的發(fā)展，界面設(shè)計(jì)工具也在逐步走向云端化。設(shè)計(jì)從本地轉(zhuǎn)向云端，不再依賴于本地硬件的性能，云端的計(jì)算能力讓使用性能得以提高。設(shè)計(jì)也不再受時(shí)間和空間的限制，只要有網(wǎng)絡(luò)，設(shè)計(jì)師可以隨時(shí)隨地的工作，臨時(shí)使用其他電腦工作時(shí)省去了安裝軟件、同步設(shè)計(jì)文件的麻煩。

2. 協(xié)作性

3. 通用性

Part3 界面設(shè)計(jì)工具推薦 

1. UI工具篇

1）Windows用戶也可隨心使用

2）云端文件使用不卡頓，支持離線編輯

Figma創(chuàng)建的文件全部存儲(chǔ)在用戶的云端賬戶中，不占用本地內(nèi)存。當(dāng)文件過(guò)大時(shí)，sketch會(huì)出現(xiàn)卡頓現(xiàn)象，拖拽一個(gè)圖層都會(huì)變得很困難。而Figma對(duì)本地資源的消耗很小，大文件也幾乎不存在卡頓的情況。

3）一鍵導(dǎo)入sketch文件

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í)可以直接通過(guò)識(shí)別出來(lái)的組件屬性改變組件樣式。其優(yōu)勢(shì)在于使用組件時(shí)可以更輕松的切換所需組件的不同狀態(tài),再也不需要像在sketch中一樣逐級(jí)尋找了。

如下圖中的按鈕組件，設(shè)計(jì)師可以將所有的按鈕狀態(tài)都列舉出來(lái)并按層級(jí)、顏色、狀態(tài)、大小命名。然后選中所有按鈕將其組成一個(gè)Variants組件。

5）與代碼緊密結(jié)合

6）一鍵恢復(fù)歷史版本

7）團(tuán)隊(duì)協(xié)作

除了設(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)審效率。

2. 動(dòng)效工具篇

Framer Web的核心亮點(diǎn)是什么？

1）網(wǎng)頁(yè)端全平臺(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可通過(guò)import選項(xiàng)導(dǎo)入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真動(dòng)效。

3）輕松實(shí)現(xiàn)復(fù)雜動(dòng)效

Magic Motion與principle、keynote的動(dòng)畫(huà)實(shí)現(xiàn)原理類似。當(dāng)你選擇目標(biāo)元素添加了交互行為后，可以在Magic Motion中選擇一個(gè)過(guò)渡方式。只要兩個(gè)畫(huà)板中的元素名稱一致且在不同面板中擁有不同的形態(tài)，那么在畫(huà)板切換時(shí)該元素就會(huì)生成補(bǔ)間動(dòng)畫(huà)發(fā)生相應(yīng)變化。

4）從設(shè)計(jì)到代碼

目前Framer Web 已經(jīng)可以實(shí)現(xiàn)導(dǎo)出相應(yīng)動(dòng)效代碼，但導(dǎo)出的效果仍有待完善，只是可以導(dǎo)出Transiton的參數(shù)而已。

Framer Web放棄了攻占界面設(shè)計(jì)領(lǐng)域的策略，轉(zhuǎn)而和Figma官方達(dá)成積極的戰(zhàn)略合作，專注于做專業(yè)的動(dòng)效設(shè)計(jì)軟件。因此Framer Web非常適合和Figma搭配使用。隨著產(chǎn)品策略的調(diào)整，相信在不久的將來(lái)Framer Web還會(huì)為設(shè)計(jì)師們提供更豐富、高效的動(dòng)效設(shè)計(jì)功能，非常值得期待。

3. 插件篇

4. 協(xié)作工具篇

4.1 XSHOW

XSHOW是一款由ISUX研發(fā)的高效設(shè)計(jì)協(xié)作平臺(tái)。XSHOW連接了產(chǎn)品經(jīng)理、開(kāi)發(fā)等各個(gè)不同工種，提高了設(shè)計(jì)資源輸出和分發(fā)效率。設(shè)計(jì)師將設(shè)計(jì)文件上傳到XSHOW，就可以將文件鏈接分享給產(chǎn)品經(jīng)理、開(kāi)發(fā)等同學(xué)。

產(chǎn)品經(jīng)理在手機(jī)小程序上就可以預(yù)覽方案，設(shè)計(jì)師每次更新的方案也可以直接預(yù)覽。開(kāi)發(fā)同學(xué)可以直接查看標(biāo)注和切片。同組設(shè)計(jì)師也可以直接下載源文件、甚至查看歷史迭代版本。

XSHOW是如何實(shí)現(xiàn)高效協(xié)作的？

對(duì)于設(shè)計(jì)師

1）可視化上傳文件

2）記錄所有版本迭代，輕松找回第一稿

3）靈活豐富的分享權(quán)限

對(duì)于項(xiàng)目管理者

1） 直觀了解團(tuán)隊(duì)輸出,組建團(tuán)隊(duì)展示能力空間

2）方案變更及時(shí)知道

 

1 

3）便捷組建項(xiàng)目和管理團(tuán)隊(duì)成員

對(duì)于合作產(chǎn)品經(jīng)理或甲方

1）多端查看更方便

 

2）查看歷史變更

Part 4 結(jié)語(yǔ)

原文地址：騰訊ISUX（公眾號(hào)）

作者：ISUX