UI設(shè)計工具InVision Studio

InVision Studio是一款非常前衛(wèi)的UI設(shè)計工具，這款軟件早在內(nèi)測的時候就吸引了不少設(shè)計師們的目光。InVision Studio不僅提供了設(shè)計師們都需要的一些界面設(shè)計工具該有的強大功能，它更是一個標(biāo)準(zhǔn)化的數(shù)字產(chǎn)品設(shè)計平臺，具備前所未有的創(chuàng)造和協(xié)作功能。

軟件體驗：

一、視覺設(shè)計

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

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

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

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

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

二、動效與原型設(shè)計

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

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

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

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

△ 觸發(fā)條件與緩動調(diào)節(jié)

△ 連接頁面跳轉(zhuǎn)

三、團(tuán)隊協(xié)作

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

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

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

△ Web端播放動效

△ 成員討論，添加批注

△ 標(biāo)注，CSS代碼與切圖

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

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

四、有待完善與已知 BUG

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

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

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

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

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

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

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

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

軟件特色：

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

自適應(yīng)布局引擎，輕松針對移動端和 Web 端設(shè)計出適應(yīng)不同屏寬的界面，和 Sketch 的 Resizing 功能差不多，設(shè)置圖層相關(guān)選項達(dá)到效果

設(shè)計系統(tǒng)共享

可將團(tuán)隊的設(shè)計規(guī)范落地在設(shè)計工作中，那些 UI Component 類似 Sketch 中 Symbol 的升級版，當(dāng)設(shè)計系統(tǒng)中某些 UI Component 的樣式更新以后，整個設(shè)計文件中的相同 UI Component 都可同步更新

快速原型搭建

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

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

新工具中不但實現(xiàn)了快速搭建可交互原型，還可對交互動效精細(xì)調(diào)節(jié)

設(shè)計協(xié)作

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