??八分鐘了解來自未來的 UI 設計工具：InVison Studio

今早打開郵箱時，收到 InVision 的郵件，得知他們推出了一個全新的 UI 設計工具 InVision Studio。介紹頁面中有一段一分四十二秒的視頻，足足讓我暗嗨了一整天。非常希望可以及時和大家分享這款全新設計工具的信息。目前網上還沒有什麼信息，找到一段宣傳視頻和 InVision CEO 寫的新產品引介文章。我在這裡先解讀一下視頻，再把文章譯給大家。

??閱讀信息：

• 閱讀時間：約8分鐘
• 視頻地址：Vimeo
• 原文作者：Clark Volberg@InVision, CEO
• 原文地址：InVision Blog

Responsive Design | 響應式設計

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

Share Design System | 設計系統共享

利用 InVision Studio，可以將團隊的設計規範落地在設計工作中了。那些 UI Component，看上去像是 Sketch 中「Symbol」的升級版。當設計系統中某些 UI Component 的樣式更新以後，整個設計文件中的相同 UI Component 都可以同步更新。

Rapid Prototyping | 快速原型搭建

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

Advanced Animation | 交互動效調節

新工具中不但實現了界面跳轉，還可以做出花式跳轉，這個也是原本 InVision 的功能。我覺得 Framer、Protopie、Flinto 以及 Kite 的同學們最近要加班了。

Collaboratively Connected | 設計協作

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

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

這也是 InVision 中的一個功能，設計稿上傳到線上以後，團隊中各種角色都可以標註並給出意見。當然，這不是一種同步溝通的功能，而是非同步的。

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

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

優秀的界面設計承載了用戶的交互行為。讓人愛不釋手的產品與不常使用的產品，不斷進步的產品與逐漸落後的產品，他們的差別往往很明顯。因此，設計師比以往更樂於雕琢他們的作品。不幸的是，現在的設計工具並不能完全滿足設計師和設計團隊的需求。更糟的是，這些零零碎碎的設計工具可能導致整個設計流程的脫節與紊亂。

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

InVision Studio

為深陷困境中的設計師尋找一個大膽的，全新的出路，當我們的 Studio 團隊接受了這個挑戰後，他們帶著對設計數字產品的藝術和科學的欣賞進行工作，在與一些世界一流設計團隊緊密合作中洞悉需求，並在這些團隊創造世界一流產品的工作方式中獲得啟發。

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

現在，我把盜來的火種給你們。

在 Airbnb，設計團隊的一部分工作是使我們的用戶體驗產品時毫不費力。 InVision 現有的工具已經成為我們工作流程的重要組成部分，而這一新產品將絕對有助於我們簡化流程並跨越最初設計構思和最終產品落地之間的鴻溝。

Lucas Smith，Airbnb 設計工具經理

InVision Studio 不僅僅是一個界面設計工具。它更是一個標準化的數字產品設計平台，具備前所未有的創造和協作功能：

• 自適應布局引擎，輕鬆實現響應式設計；
• 快速搭建可交互原型和交互動效精細調節；
• 共享設計系統，幫助設計團隊時刻保持一致，聯繫；
• 與 InVision 基於雲端的工作流程無縫協作，實現無損反饋；
• 通過我們的應用商店提供一個用戶製作插件和 Kit 的開放平台。

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

我們歡欣鼓舞，與你分享。

??文章總結：

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

??擴展閱讀：

• Sketch 插件：CRAFT | Sketch Material | WeSketch | Runner
• Sketch 教程：Library | 換色文字 symbol | Symbol 嵌套 | 字體樣式庫
• Graffle 教程：繪製流程圖 | 搭建文檔 | 繪製表格
• 其他譯文：Swarm 改版 | Do & Don』t | YouTube 換 logo | Uber 商務 | iPhone X HIG | Oscar 2.0

??感謝閱讀：

我是 Teambition 的交互設計師徐小馬（微信：heiheilaugh），歡迎交流。