我們今天生活的環(huán)境，互聯(lián)網(wǎng)的快速發(fā)展，新的意識(shí)形態(tài)的不斷涌現(xiàn)，工作方式的不斷變化，開(kāi)放的開(kāi)放.更多的行業(yè)和更多的人理解共享的概念，在這樣的環(huán)境中，效率變得越來(lái)越重要。好的工具和工作方法帶來(lái)先進(jìn)的生產(chǎn)力，比如Figma，js.design/special/figma作為互聯(lián)網(wǎng)設(shè)計(jì)師，我們應(yīng)該是互聯(lián)網(wǎng)中的前衛(wèi)者。

ProcessOn是一個(gè)web應(yīng)用，一個(gè)瀏覽器，一個(gè)窗口，全部完成。ProcessOn用戶(hù)零銷(xiāo)售成本超過(guò)100萬(wàn)。這在一定程度上反映了軟件的發(fā)展趨勢(shì)：云化.去平臺(tái)化.共享，傳統(tǒng)軟件將逐漸被云應(yīng)用所取代。

之后，2014年國(guó)內(nèi)墨刀和抄客上線，國(guó)外的墨刀和抄客Figma2015年上線，AdobeXD2017年在國(guó)內(nèi)推出xiaopiu上線，2020年9月xiaopiu推出“即時(shí)設(shè)計(jì)”，新版本的墨刀也增加了實(shí)時(shí)協(xié)作功能。很高興也很期待看到國(guó)產(chǎn)設(shè)計(jì)軟件越來(lái)越優(yōu)秀！2020年的突如其來(lái)的變化，讓更多的人關(guān)注到了無(wú)數(shù)工具和理念，比如在家工作、團(tuán)隊(duì)合作、遠(yuǎn)程辦公...

接下來(lái)我們來(lái)看看“后軟件時(shí)代”的UI設(shè)計(jì)軟件

我今天想說(shuō)的是當(dāng)前的主流UI設(shè)計(jì)軟件——Sketch.Figma.AdobeXD.InvisionStudio

可以發(fā)現(xiàn)這四種軟件的定位包括功能基本相同。

接下來(lái)看看軟件的核心功能

1.基礎(chǔ)功能

首先，讓我們談?wù)劵竟δ?。所謂的基本功能通常用于本地化設(shè)計(jì)。圖形繪制.路徑編輯.布爾運(yùn)算.文本設(shè)置.圖層樣式.蒙版.模糊.頁(yè)面設(shè)置.網(wǎng)格等。，這些功能和基本操作Sketch.Figma.AdobeXD.InvisionStudio差別不大，甚至很相似，相對(duì)簡(jiǎn)單，如果熟悉其中一個(gè)很容易上手，這里就不介紹了。

2.組件系統(tǒng)

組件系統(tǒng)，一般來(lái)說(shuō)，組件系統(tǒng)是方便設(shè)計(jì)者使用組件.樣式.顏色.文以統(tǒng)一修改文本樣式。

近年來(lái)，組件設(shè)計(jì)思維越來(lái)越受到重視。所有主要工廠都有自己的組件系統(tǒng)，這是一種有效的工作方法和思維模式。這里不再重復(fù)組件設(shè)計(jì)思維。感興趣的學(xué)生可以看看

他們的組件系統(tǒng)各有千秋，比如

Sketch.Figma.InvisionStudio可以組件時(shí)可以下拉選擇切換，XD切換是將組件直接拖到原組件上進(jìn)行更換，可以用斜杠/命名對(duì)組件進(jìn)行分組；

Figma.XD組件可以有多種狀態(tài)，并且可以直接識(shí)別sketch，js.design/special/sketch文件組件；

Sketch.InvisionStudio將組件分類(lèi)到一個(gè)單獨(dú)的頁(yè)面空間；

Figma.XD更靈活的組件；

3.團(tuán)隊(duì)組件庫(kù)

說(shuō)到組件庫(kù)，我們不得不說(shuō)，團(tuán)隊(duì)組件庫(kù)允許設(shè)計(jì)師管理單個(gè)文件的設(shè)計(jì)資源，而團(tuán)隊(duì)組件庫(kù)可以使我們的整個(gè)團(tuán)隊(duì)使用相同的規(guī)格。如果更改了一個(gè)組件，則將自動(dòng)更改使用該組件的所有文件，這對(duì)團(tuán)隊(duì)合作非常重要。

Sketch團(tuán)隊(duì)組件庫(kù)

可自行使用SketchLibraries，蘋(píng)果也可以使用iCloud，藍(lán)湖為Sketch量身打造的“設(shè)計(jì)規(guī)范云”使用體驗(yàn)也超級(jí)棒！

Figma團(tuán)隊(duì)組件庫(kù)

Figma團(tuán)隊(duì)合作本身就是一個(gè)專(zhuān)業(yè)的版本，每個(gè)人一起編輯同一個(gè)文件。免費(fèi)用戶(hù)只能在一個(gè)文件中使用組件。團(tuán)隊(duì)項(xiàng)目可以夸耀設(shè)計(jì)草案的使用，但需要付費(fèi)。

XD團(tuán)隊(duì)組件庫(kù)

與團(tuán)隊(duì)成員共享設(shè)計(jì)文件，團(tuán)隊(duì)成員可以使用文件中的組件，并且可以一起編輯。

InvisionStudio團(tuán)隊(duì)組件庫(kù)

InvisionStudio目前還沒(méi)有團(tuán)隊(duì)組件庫(kù)，但是它可以導(dǎo)入其他文件的組件，我們可以通過(guò)文件傳輸?shù)姆绞介g接共享。

4.智能布局

智能布局是“后現(xiàn)代設(shè)計(jì)軟件”它可以幫助我們快速實(shí)現(xiàn)響應(yīng)式布局。

盡管它們的名稱(chēng)不同，但功能基本相同。

Sketch叫SmartLayout“聰明布局”(這翻譯好別扭o(*￣︶￣*)o）

Figma叫AutoLayout“智能布局”；

AdobeXD叫Content-AwareLayout“內(nèi)容感知布局”；

InvisionStudio叫ResponsiveLayouts“響應(yīng)式布局”；

其中Figma的AutoLayout同時(shí)，嵌套邏輯也可以達(dá)到更復(fù)雜的效果。

InvisionStudio的ResponsiveLayouts功能稍弱，只能達(dá)到一些簡(jiǎn)單的自適應(yīng)效果。InvisionStudio使用百分比的單位是響應(yīng)式布局的核心。

5.數(shù)據(jù)填充

數(shù)據(jù)填充是我們?cè)谠O(shè)計(jì)時(shí)經(jīng)常遇到的一個(gè)問(wèn)題，即填充一些化身.圖片.文字等模擬數(shù)據(jù)，可以讓我們的設(shè)計(jì)效果看起來(lái)更真實(shí)，代入感更強(qiáng)。

數(shù)據(jù)填充可分為兩類(lèi)：

一是隨機(jī)數(shù)據(jù)

隨機(jī)數(shù)據(jù)的內(nèi)容是不可控的，它們都有這樣的插件，包括sketch自帶這個(gè)功能。

二是自定義數(shù)據(jù)

定義你想要的文字和圖片。例如同時(shí)支持Figma.AdobeXD的GoogleSheets插件。

Sketch您可以自定義本地圖片和文本或使用插件，例如Kitchen等；

Figma可以通過(guò)GoogleSheets插件實(shí)現(xiàn)自定義數(shù)據(jù)，或使用其他插件進(jìn)行隨機(jī)數(shù)據(jù)；

AdobeXD可直接拖動(dòng)本地圖片和文字進(jìn)行填充，或使用其他插件；

InvisionStudio可以通過(guò)“Data”實(shí)現(xiàn)插件隨機(jī)數(shù)據(jù)或定義本地?cái)?shù)據(jù)。

6.原型

在一站式設(shè)計(jì)中，原型功能是不可或缺的。Figma.AdobeXD.InvisionStudio經(jīng)驗(yàn)比較一致。

點(diǎn)擊可以實(shí)現(xiàn)不同的交互模式，例如點(diǎn)擊.滑動(dòng).長(zhǎng)按等等；

可以實(shí)現(xiàn)不同的交互效果，如緩慢進(jìn)入.緩出.線性等等；

可以以連接的形式與他人分享；

可以在手機(jī)上預(yù)覽和實(shí)際操作；

Sketch當(dāng)然，簡(jiǎn)單的跳躍和過(guò)渡只能實(shí)現(xiàn)，Sketch可以用它最好的搭檔Principle完成復(fù)雜的互動(dòng)效應(yīng)。

Figma.AdobeXD具有過(guò)渡效果的動(dòng)態(tài)效果可以實(shí)現(xiàn)，即補(bǔ)間動(dòng)畫(huà)。所以可以完成更真實(shí)的交互效果。

InvisionStudio原型功能是最完美的，因?yàn)樗旧鞩nvisionStudio就是同時(shí)借鑒Sketch設(shè)計(jì)部分和principle動(dòng)態(tài)效果部分，可以調(diào)整動(dòng)態(tài)效果的關(guān)鍵幀和動(dòng)畫(huà)曲線。InvisionStudio可以達(dá)到更復(fù)雜的交互效果。InvisionStudio沒(méi)有彈性效果Principle所以自定義張力和摩擦，即彈性幅度。

7.實(shí)時(shí)協(xié)作

實(shí)時(shí)合作是團(tuán)隊(duì)合作的重要體現(xiàn)。實(shí)時(shí)協(xié)作的概述是，許多人實(shí)時(shí)編輯相同的文件，就像玩游戲一樣，就像玩游戲一樣LOL同樣的。它不僅給我們帶來(lái)了工作流程的修改，也逐漸改變了我們的思維方式和工作方式。

這也是很多軟件的發(fā)展趨勢(shì)，比如前面提到的各種協(xié)作文檔ProcessOn，而最新版本的墨刀也增加了實(shí)時(shí)協(xié)作功能。相信實(shí)時(shí)協(xié)作會(huì)在不久的將來(lái)大放異彩！

就實(shí)時(shí)協(xié)作而言Figma毫無(wú)疑問(wèn)，這四個(gè)軟件中出現(xiàn)的最早，F(xiàn)igma也很穩(wěn)定。

AdobeXD，js.design/special/xd緊隨其后，而且Adobe實(shí)時(shí)協(xié)作體驗(yàn)也很好，但是免費(fèi)用戶(hù)只能由兩個(gè)用戶(hù)編輯。

Sketch實(shí)時(shí)合作也有所增加，目前仍處于測(cè)試階段。

InvisionStudio實(shí)時(shí)協(xié)作不是共同編輯設(shè)計(jì)稿，而是在設(shè)計(jì)稿上進(jìn)行實(shí)時(shí)涂鴉討論。