UI設(shè)計師的福利未來的UI設(shè)計工具：InVison Studio

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

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

 

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

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

 

Rapid Prototyping | 快速原型搭建

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

 

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

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

 

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

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

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

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

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

 

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

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

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

 

InVision Studio

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

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

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

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

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

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

 

總結(jié)：

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