UI設(shè)計(jì)師的福利未來(lái)的UI設(shè)計(jì)工具：InVison Studio

Responsive Design | 響應(yīng)式設(shè)計(jì)

從這個(gè)視頻片段可以看出，使用 InVision Studio，針對(duì)移動(dòng)端和 web 端都可以設(shè)計(jì)出適應(yīng)不同屏寬的界面。具體實(shí)現(xiàn)機(jī)制應(yīng)該和 Sketch 的「Resizing」功能差不多，需要設(shè)置圖層的一些相關(guān)選項(xiàng)才能達(dá)到效果。

 

Share Design System | 設(shè)計(jì)系統(tǒng)共享

利用 InVision Studio，可以將團(tuán)隊(duì)的設(shè)計(jì)規(guī)范落地在設(shè)計(jì)工作中了。那些 UI Component，看上去像是 Sketch 中「Symbol」的升級(jí)版。當(dāng)設(shè)計(jì)系統(tǒng)中某些 UI Component 的樣式更新以后，整個(gè)設(shè)計(jì)文件中的相同 UI Component 都可以同步更新。

 

Rapid Prototyping | 快速原型搭建

在 InVision Studio 中根據(jù)跳轉(zhuǎn)邏輯連接控件和界面，制作可交互原型。這個(gè)本來(lái)就是 InVision 的拿手好戲，他們只是把原有的能力融進(jìn)了新產(chǎn)品，解決了整個(gè)設(shè)計(jì)流程的一些必要環(huán)節(jié)的痛點(diǎn)，例如設(shè)計(jì)評(píng)審、用戶(hù)測(cè)試。

 

Advanced Animation | 交互動(dòng)效調(diào)節(jié)

新工具中不但實(shí)現(xiàn)了界面跳轉(zhuǎn)，還可以做出花式跳轉(zhuǎn)，這個(gè)也是原本 InVision 的功能。

 

Collaboratively Connected | 設(shè)計(jì)協(xié)作

這一段信息量比較大，我給拆三段解釋一下。

這是 InVision 給 Sketch 開(kāi)發(fā)的插件 CRAFT 中帶的功能 ──Freehand，設(shè)計(jì)稿評(píng)審的時(shí)候大家可以針對(duì)陳列的界面各抒己見(jiàn)，實(shí)時(shí)溝通。不同顏色的評(píng)論和畫(huà)筆代表不同的參與者，非常方便識(shí)別。

這也是 InVision 中的一個(gè)功能，設(shè)計(jì)稿上傳到線(xiàn)上以后，團(tuán)隊(duì)中各種角色都可以標(biāo)注并給出意見(jiàn)。當(dāng)然，這不是一種同步溝通的功能，而是異步的。

有一點(diǎn)嚇人的是這個(gè)功能，之前在 Sketch Measure、Zeplin 和 PxCook 中也見(jiàn)過(guò)類(lèi)似的，如果 InVision Studio 實(shí)現(xiàn)的也只是簡(jiǎn)單 Layer 和 Text Layer 樣式代碼，那么并沒(méi)有多大實(shí)際用途。但是如果能和之前的 Share Design System 功能配合，對(duì)定義好的 UI Component 直接生成代碼，那就牛轟轟了。說(shuō)不準(zhǔn)很多前端工程師也要重新拿起書(shū)，開(kāi)始學(xué)習(xí)后端知識(shí)了。

 

「譯」引介 InVision Studio：世界上最贊的界面設(shè)計(jì)工具

優(yōu)秀的界面設(shè)計(jì)承載了用戶(hù)的交互行為。讓人愛(ài)不釋手的產(chǎn)品與不常使用的產(chǎn)品，不斷進(jìn)步的產(chǎn)品與逐漸落后的產(chǎn)品，他們的差別往往很明顯。因此，設(shè)計(jì)師比以往更樂(lè)于雕琢他們的作品。不幸的是，現(xiàn)在的設(shè)計(jì)工具并不能完全滿(mǎn)足設(shè)計(jì)師和設(shè)計(jì)團(tuán)隊(duì)的需求。更糟的是，這些零零碎碎的設(shè)計(jì)工具可能導(dǎo)致整個(gè)設(shè)計(jì)流程的脫節(jié)與紊亂。

我們對(duì)這些時(shí)常發(fā)生的挫敗感同身受，并認(rèn)為設(shè)計(jì)團(tuán)隊(duì)更應(yīng)將時(shí)間和精力投入在設(shè)計(jì)絕倫的體驗(yàn)中。這就是為什么我們創(chuàng)造了世界上最強(qiáng)大的界面設(shè)計(jì)工具 ──InVision Studio，幫助設(shè)計(jì)師不斷提升自己視野和作品。

 

InVision Studio

為深陷困境中的設(shè)計(jì)師尋找一個(gè)大膽的，全新的出路，當(dāng)我們的 Studio 團(tuán)隊(duì)接受了這個(gè)挑戰(zhàn)后，他們帶著對(duì)設(shè)計(jì)數(shù)字產(chǎn)品的藝術(shù)和科學(xué)的欣賞進(jìn)行工作，在與一些世界一流設(shè)計(jì)團(tuán)隊(duì)緊密合作中洞悉需求，并在這些團(tuán)隊(duì)創(chuàng)造世界一流產(chǎn)品的工作方式中獲得啟發(fā)。

我們對(duì) InVision Studio 的每一個(gè)像素精雕細(xì)琢，以此回應(yīng)設(shè)計(jì)師群體的期望，幫助他們駕馭自己能力。

• 在 Airbnb，設(shè)計(jì)團(tuán)隊(duì)的一部分工作是使我們的用戶(hù)體驗(yàn)產(chǎn)品時(shí)毫不費(fèi)力。 InVision 現(xiàn)有的工具已經(jīng)成為我們工作流程的重要組成部分，而這一新產(chǎn)品將絕對(duì)有助于我們簡(jiǎn)化流程并跨越最初設(shè)計(jì)構(gòu)思和最終產(chǎn)品落地之間的鴻溝。──Lucas Smith，Airbnb 設(shè)計(jì)工具經(jīng)理

InVision Studio 不僅僅是一個(gè)界面設(shè)計(jì)工具。它更是一個(gè)標(biāo)準(zhǔn)化的數(shù)字產(chǎn)品設(shè)計(jì)平臺(tái)，具備前所未有的創(chuàng)造和協(xié)作功能：

• 自適應(yīng)布局引擎，輕松實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。
• 快速搭建可交互原型和交互動(dòng)效精細(xì)調(diào)節(jié)。
• 共享設(shè)計(jì)系統(tǒng)，幫助設(shè)計(jì)團(tuán)隊(duì)時(shí)刻保持一致，聯(lián)系。
• 與 InVision 基于云端的工作流程無(wú)縫協(xié)作，實(shí)現(xiàn)無(wú)損反饋。
• 通過(guò)我們的應(yīng)用商店提供一個(gè)用戶(hù)制作插件和 Kit 的開(kāi)放平臺(tái)。

上面說(shuō)的這些功能都被做進(jìn)產(chǎn)品里了。這才是我們夢(mèng)寐以求的設(shè)計(jì)工具。

 

總結(jié)：

其實(shí)懂行的都看得出來(lái)，很多功能都是原本 CRAFT 和 InVision 中做好的。InVision 的打法就是「農(nóng)村包圍城市」，先放著 Sketch 不動(dòng)，針對(duì)設(shè)計(jì)流程中其他環(huán)節(jié)的需求開(kāi)發(fā)功能，然后創(chuàng)造一個(gè)代替 Sketch 的產(chǎn)品，和原有功能組成 InVision Studio，徹底吃下設(shè)計(jì)場(chǎng)景的蛋糕。