InVision Studio 初體驗

去年 InVision 對外發布了集界面設計與原型製作為一體的設計工具 — Studio， 五個月過去，終於收到內測邀請，體驗了一把「世界上最好的屏幕設計工具」。

從啟動界面就能看出 Studio 的核心定位：界面設計。值得一提的是 Tutorials 部分，同時承擔著介紹特性和新手教學的作用：響應式布局、動畫、頁面滾動。點擊 Tutorial 會打開一個設計文件，裡面提供了設計半成品與說明文字，按照指示操作，就能明白相應功能是如何生效的。

比如上圖是「動畫」的新手教學，通過 3 步操作「點擊圖層 → 創建頁面連接 → 播放動畫」，就掌握了如何製作和預覽動效。這個過程中，既能學到功能用法，也熟悉了工具界面，可以稱得上是一個 Aha! moment 了。

學習完 Tutorial，用 Studio 試著做了一個 Demo。

https://www.zhihu.com/video/962809965739782144

體驗下來印象深刻的幾點：

• 界面設計的部分絕大多數操作與 Sketch 一樣，幾乎沒有學習成本。
• 支持不同精度的原型動畫，從簡單的頁面切換到跨頁面元素轉場；提供時間軸進行細微調整、自定義動畫曲線等；支持頁面滾動。整體功能與 Principle 類似。
• 除了提供與 Sketch 類似的自適應布局，也支用百分比定義寬高。
• 每個畫板可單獨設置網格和柵格參考線。
• 提供黑白兩色主題，在視覺風格上比 Sketch 更扁平現代。

不足的地方也比較明顯：

• 對中文的支持還不成熟，無法顯示選定的中文字體。
• 一些常用功能缺失，如圖片填充形狀、模糊效果，圖層複製粘貼、切片等。
• 雖然支持 Sketch 文件導入，但目前有許多兼容性問題。
• 宣傳片中提到的「設計系統共享」「生成代碼」功能暫時沒有看到。

另外，用 Studio 設計界面時，我會下意識考慮每個元素在整個體驗流中的變化，而不僅僅局限於單個界面。這是我在 Sketch + Principle 的流程里沒有的感受。在之前的工具形態下，我會先設計靜態界面，再打開原型工具設計動態效果，而 Studio 整合了這兩個步驟，在設計界面樣式的時候，你需要同時考慮界面元素是如何變化的。

人創造工具，工具反過來也會影響人。Photoshop 時代我們著重關心設計圖本身的質量；Sketch 推出後人們開始製造周邊工具來銜接設計過程；而 Studio 的出現，似乎標誌著設計工具的重心由「關注設計圖稿」變成了「關注設計工作流」。

在現有的設計流程中，工具的使用仍是碎片化的。近幾年湧出了許多各式各樣的針對單一痛點的工具，我們在流程中的某個節點遇到問題，然後挑選對應的工具來解決問題，但不同工具之間的協作並不順暢，工具與工作流之間仍然存在不小的鴻溝。

InVision 的野心或許並不限於取代 Sketch。從 Studio 這個名字也能看出，InVision 想打造的是一個可服務於整個設計流程的一體化工作室，而不僅僅是畫出一張精美界面的工具。

對於 Studio 後續會給界面設計師帶來什麼，我保持期待 ??

推薦閱讀：