我們拿到了InVision Studio 的內測資格，設計師們關心的都在這里

為什么說 Studio 是最值得期待的設計工具？因為這是一款集成了視覺設計，快速原型，動效制作，團隊協作于一體的全能設計工具。得益于移動互聯網的快速發展，Sketch 最近幾年的發展也是順風順水，近乎行業標桿，價格也由最初的 $99 (大版本內的) 一次性付費，變成了 $99/year 的訂閱付費。由于 Sketch 的先發優勢，即使后來者如 Figma、Adobe XD 是如此優秀然而也并沒有攪局成功，那么隨著 Studio 的到來，UI 設計圈即將迎來怎樣的變化讓人期待。

知名設計協作服務提供商 InVision 于2017年10月18日放出了新一代設計軟件 Studio 的宣傳視頻并開放內測申請，團隊原計劃于2018年1月發放 Early Access，由于某些原因延期至3月份。另外，由于多達20多萬的申請人數已經遠遠超過官方預期，轉而實行分批隨機發放。

機智的我們使用了多個 Email 在官宣當天便申請內測，經過半年的等待， 終于拿到了期待已久的 Early Access，本文將基于版本 Version 0.10.40 展開介紹 Studio 的各種特性。

一、視覺設計

打開 Studio，首先彈出的是歡迎窗口，可以看到右側列表里會出現你最近打開的 .sketch 文件。沒錯，Studio 能夠兼容 Sketch 的文件格式，不過當前還不能做到完美兼容，比如導入我們常用的帶有 Symbol 的 Sketch 文件時，Symbol 將無法顯示。

進入 Studio，頁面布局和 Sketch 類似，也是 macOS 上較為常見的布局樣式，左側圖層列表與組件庫，頂部的工具欄，右側的檢查器。擁有暗色和亮色兩套主題是個比較好的設計。一來在不同環境光下選擇不同的主題能幫助緩解視覺疲勞，二是根據不同色彩的設計稿選擇對比更舒適的主題也更容易專注。（Sketch 也有改暗色的付費插件，訪問 midnightsketch.com）

Studio 作為后來者，在交互、功能以及快捷鍵上很大程度借鑒了 Sketch， 是否抄襲見仁見智，但這么做的好處是很大程度降低了學習成本，方便設計師遷移至 Studio，如果你精通 Sketch、XD，那么 Studio 對你來說上手將會相當容易。

我們嘗試做了四張簡單的頁面，在這幾張頁面的繪制過程中，Studio 基本能滿足常用的功能需求，比較遺憾的是對位圖的編輯功能還不豐富，比如基本的模糊，裁剪，投影，混合模式等暫不支持。Studio 當前 Bug 較多，流暢度一般，圖片邊緣渲染精度不高，抗鋸齒效果有待加強，距離成為主力的設計工具還有一段路要走。但如果你是產品經理或交互設計師，那是完全夠用的，可能還會有驚喜喲。

Studio 也提供類似 Sketch Mirror 一樣的預覽 APP（安卓暫不支持預覽僅可查看線上項目），在 iPhone 上預覽設計稿暫不支持數據線連接，只能通過 WiFi，那么問題來了，在復雜網絡環境下（比如在有上千臺設備同時在線的公司內網）的刷新有極大延遲，跟 Sketch Mirror 早期類似，相信后面會支持數據線連接來預覽。

二、動效與原型設計

早在2016年，InVision 收購了一款名叫 Silver Flows 的工具，這是一款 Sketch 插件，能在 Sketch 里實現原型設計（頁面跳轉，轉場效果，調用iOS系統控件等），被收購時，Silver Flows 還處于內測階段，而后做功能閹割后整合在 InVision Craft 插件內，那么現在也將順其自然的集成在 Studio 中。

說起動效制作，大家首先想到的必定會是強大而性感的 After Effect，然而 Studio 也不弱，雖比不上 AE 的全能，但勝在輕量，易上手。Studio 的動效實現原理和 Keynote 的「神奇移動」頗有幾分相似（同時也類似 Principle），通過2個畫板來固定一組動作的首尾關鍵幀，同一元素會自動補全中間的過渡幀，非同一個元素會以漸隱漸現的形式展現。

我們通過上部分的4張圖片，制作了一組動效來演示喜馬拉雅用戶在購買付費專輯時的試聽與支付過程。動效中用到了遮罩，變形，位移，縮放，旋轉，漸隱等常見效果，可以看到 Studio 是可以輕松完成的，不過偶爾會出現 Bug（比如2個畫板之間的同一個元素不能識別導致無法鏈接）。而眼尖的朋友可能發現了，動效中的封面圖在矩形與圓形切換的過程中，畫面會出現卡頓。

在時間軸編輯面板里，可以對圖層逐個編輯時間關系，在預覽時，最慢可選擇0.1倍速播放，方便你觀察調整動效細節。Studio 也支持動效緩動節奏的調整，自帶 POP 彈性效果，讓你告別 AE 表達式。不過目前使用下來的感覺是緩動調節在靈敏度和精度上距離 AE 還有一點差距。

△ 觸發條件與緩動調節

△ 連接頁面跳轉

三、團隊協作

協作是 InVision 的老本行，早期憑借優雅的產品設計，強大的原型能力，且宣稱永久免費等優點俘獲了一大批用戶（后更改為1個項目免費），現在我們可以通過 Studio 將設計稿上傳至 InVision 服務器，隨后即可在 Web 端使用協作功能了。

Tips：Sketch 用戶也可通過官方插件直接上傳設計稿。

在 Web 端，我們同樣可以查看動效與頁面跳轉，同時還具有組內成員討論與標注功能（標注里包含參數屬性，切片，CSS代碼以及文件圖層），對需要遠程協作的團隊來說會相當方便，唯一的缺點是服務器在國外，由于沒有國內 CDN 節點的緣故，訪問速度較慢，有科學上網的加成會比較順滑。

△ Web端播放動效

△ 成員討論，添加批注

△ 標注，CSS代碼與切圖

在 Web 端里還有「隨手畫」的功能，方便大家在腦暴時做快速原型工具闡述想法。

比較遺憾的是，目前的版本并沒有找到官方視頻里宣傳的「共享設計系統」的功能，視頻截圖可以看到，該功能看上去類似程序員們使用的 Git，通過 Pull 拉取的方式來更新規范化的設計組件，集中管理的方式將大大方便大型 UED 團隊的設計規范版本控制，且組件庫將會提供角色管理與權限管理，讓不同項目成員互不打擾。

四、有待完善與已知 BUG

當前版本還不支持安裝第三方插件，不過官方承諾會開放豐富的公共 API 給開發者。

缺少了三角形、星星、多邊形、直線、箭頭等形狀工具。

自家 Craft 插件也暫不支持 Studio；暫不支持按最近的操作再制；暫不支持版本控制；對齊像素偶爾失靈；暫不支持形狀圖層填充位圖；不能像 Principle 一樣導出動效視頻或 GIF。

官方宣稱支持響應式設計，試用下來好像功能不完善，不支持同時固定左右或上下邊距。

沒有類似 Adobe XD 的跳轉路徑圖，當修改跳轉邏輯較為復雜的文件時可能會難以定位到，也不方便他人二次編輯。

對位圖編輯的支持暫時一般，比如基本的模糊、裁剪、添加投影、混合模式等都還不支持。

目前不支持導入 Svg，但是可以通過 Sketch 中轉后使用 Svg 素材，也不支持 Svg 切片導出。

中文字體無法修改字重，且無法通過手機預覽，某些特殊字體在電腦上的預覽也無法正常顯示。

五、問與答

1. 目前對 Sketch 的兼容性如何？

官方未給出完整的不兼容屬性列表，目前已知不兼容 Symbols，以及部分未知屬性不能完全還原（也可能是 Bug）。

2. 怎么申請內測資格？

訪問 https://www.invisionapp.com/studio ，填寫郵箱即可。

3. 是否支持中文或多語言？

暫時僅支持英文。

4. 是否支持 Windows？

即將支持（開發中）。

5. 軟件是否收費？

未知，內測期間免費，官網也注明會永久免費（按 InVision 的套路，未來大概會在功能限制下免費吧，當然收費也是無可厚非的）。

六、在哪里下載Studio

好消息，我們發現即使沒有獲得 Early Access 邀請，只要是 InVision 注冊用戶，也是可以正常使用的，安裝后登錄即可。

關注「喜馬拉雅XUED」公眾號，回復「Studio」即可獲取下載鏈接。

歡迎關注作者微信公眾號：「喜馬拉雅XUED」

「好神器遠不止這些」

• 基礎了解 | ?《8分鐘了解來自未來的 UI 設計工具：InVison Studio》
• 基礎工具 | ?《Adobe CC 2018全家桶全線更新！附官方試用版下載鏈接》
• 提高效率 | 《最佳助攻！25款輕巧實用的Sketch插件大合集》
• 迭代更新 | ?《來收神器！UI設計師常用的版本控制工具有哪些？》
• 實時交互 |?《8個視覺稿設計工具，頁面視覺和實時交互就靠它們》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com