InVision Studio：概述和回顧

InVision Studio 是一種原型製作和動畫工具，借助靈活的圖層和無限的畫布，您可以快速創建基於矢量的高級屏幕設計。 它被認為是目前最好的高保真原型製作工具之一。 使用 InVision Studio，您可以加快工作流程； 創建有趣的交互式原型； 將您的設計傳達給團隊和客戶； 測試您的設計； 並在開發階段之前解決問題、顧慮和設計變更。

InVision Studio 是 InVision 工具套件的一部分，其中還包括 InVision Cloud，您可以在其中連接、存儲和共享完整的產品設計工作流程，以及 InVision DSM，一個設計系統管理器和庫，您可以在其中存儲和控制所有品牌和用戶體驗組件。 InVision Studio 可用於 Mac 和 Windows。 您也可以導入 Sketch 文件。

InVision Studio 的特點

下載 InVision Studio 應用程序後，您可以選擇要創建的項目。 選擇要設計的內容後，您將瀏覽界面。

要添加圖層或組件，請單擊頂部的加號。 添加組件時，所有選項都會出現在右側。

讓我們回顧一下 InVision 的一些值得注意的功能。

無需遮罩即可調整大小和裁剪圖像。

此功能稱為智能圖像裁剪，可在您更改大小時自動裁剪圖像。 它類似於在 Sketch 中創建圖像填充，然後將其設置為“填充”，但步驟更少，方式更直觀。 智能圖像裁剪適用於焦點靠近中心的圖像。 如果您想裁剪成圓形、矩形或圓角矩形，這也是最好的選擇。 對於具有不同焦點或更有趣形狀的圖像，您需要創建蒙版以訪問更多自定義選項。

來源：LearnInVisionStudio.com

滾動時修復元素。

修復頁眉和頁腳對 InVision 來說並不陌生，但修復其他元素是。 將滾動設置為水平、垂直或兩者，然後通過單擊右上角的圖釘圖標選擇要修復的元素。

將多個畫板鏈接到一個動畫中。

計時器可讓您控制要轉換為一個動畫的多個畫板。 您還可以循環播放動畫，讓最後一個畫板指向第一個。 或者，您可以將多步動畫直接用於設計的另一部分。 像這樣的複雜動畫非常適合視頻片頭和片尾。

為視差動畫創建滑動觸發器。

滑動觸發器可以創建視差效果和滾動時發生的其他類型的動畫。

無需編寫代碼即可創建響應式原型。

使用響應式原型，您可以使所有內容都基於百分比並根據畫板大小調整每個元素的大小。 然後，您可以創建響應各種屏幕的原型。 這使得創建不同大小的模型變得更加容易。 此外，在 Studio 中將設計設置為“可調整大小”會在瀏覽器中查看時自動調整大小。

來源：LearnInVisionStudio.com

將原型鏡像到您的手機。

如果你想在手機上測試一個動畫或原型，你可以分享它，選擇“鏡像”，然後掃描手機應用程序中的二維碼。

使用類似 Sketch 的快捷鍵。

如果您目前使用 Sketch，那麼您將已經熟悉 InVision Studio 使用的快捷方式 - 幾乎所有快捷方式都相同，尤其是在檢查器、圖層和工具欄方面。

在明暗主題之間切換。

非設計師可能沒有意識到這個功能有多有用。 在設計淺色界面時，增加深色主題的對比度會很有幫助（反之亦然）。

與團隊實時協作。

協作和工作流程得到簡化，團隊成員可以實時設計和評論。 通過全局同步和實時更新，沒有人會被排除在外。

在瀏覽器上使用 InVision Studio 進行設計

我想快速向您展示使用 InVision Studio 的瀏覽器版本是什麼感覺。 我們將簡要介紹設計電路板、創建原型和使用手繪模式。

設計電路板

您的命令中心位於屏幕的右上角。 這五個圖標代表：

• 編輯標題
• 設置佈局類型
• 設置
• 註釋
• 分享

編輯標題

我玩了一下標題。 單擊“編輯標題”後，會彈出以下選項：

我替換了圖像和文本，稍微模糊了它，並添加了一個輕微的疊加以使文本突出。 我特別喜歡“尺寸”選項——你只需將鼠標懸停在它上面並從三種尺寸中進行選擇。

設置佈局類型

然後我將佈局類型更改為“Meticulous”。 這是用於標題下方的內容塊，當您向下滾動時會顯示出來。

編輯附加部分

如果您將鼠標懸停在部分標題的右側，您將看到三個圖標。 向下箭頭是“向下移動部分”，“X”是“刪除部分標題”。 如果您刪除它然後改變主意，您只需將鼠標懸停在同一區域上，您就可以選擇添加新的部分標題。

單擊箭頭右側的加號和“X”，您將獲得一個新菜單。 從左到右，圖標代表：

• 添加色板
• 添加註釋
• 上傳文件

將鼠標懸停在內容塊上，您將再次看到調整大小選項，就像標題一樣。 選擇不同的尺寸將自動更新佈局的其餘部分以重新適應塊。 單擊內容塊會在右側打開一個窗口。

將鼠標懸停在欄中的一種顏色上將顯示其顏色代碼。 這個窗口也是團隊成員可以對這個特定的設計塊發表評論的地方。

創建原型

我也玩了原型演示，只是為了向您展示選項是什麼。

在這裡，您的控制中心位於底部。 從左到右從眼睛圖標開始，圖標如下：

• 預覽模式
• 建造模式
• 評論模式
• 檢查模式
• 歷史模式
• 社交分享
• 上傳畫面
• 配置
• 屏幕狀態

手繪模式

手繪模式從交互式演示開始，快速向您展示如何使用它。 然後，您使用無限的畫布將您的項目組合在一起。 如果您在應用程序中工作，您可以將“與手繪實時協作”鏈接發送給團隊成員，他們可以實時在項目中繪圖和添加文本。

InVision Studio 定價

免費計劃包括一個具有無限合作者和屏幕的原型。 如果這就是你所需要的，那麼你永遠不必付錢。 演示不計入限制。 如果您設計了多個原型，您將獲得 6 天的免費訪問權限來創建無限的原型。 之後，您必須升級以創建和使用其他原型。 如果你想升級，這裡是他們的計劃：

最後的想法

與其他設計工具相比，您可能會發現 InVision Studio 有點慢，有時還有問題——這並不是說它總體上很慢，只是（有時）比其他類似工具（如 Adob​​e XD、Figma 和 Sketch）慢。 我個人沒有遇到過這個問題，但它在評論中出現了很多。 此外，InVision Studio 不提供插件支持，因此如果這對您很重要，請考慮使用 Sketch。

但是，在原型製作方面，InVision Studio 很難被擊敗，尤其是在您必須與團隊合作的情況下。 它可能不如 Adob​​e XD 強大，但它仍然是您會發現的最好的原型製作工具之一。

InVision Studio 的界面易於學習和使用，圖標時尚現代。 還有很多幫助，包括教程、導覽和指向更多指導的鏈接。 （現在，也就是說，我讀過一些相反的評論，所以我想這是一個品味問題。）使用 InVision Studio 幾乎不需要猜測，您可以直接了解您在那裡要做的事情：創建。

在設計時，黃金比例是使用黃金比例。 查看我使用和理解黃金比例的終極指南。

特色圖片來自 Visual Generation/shutterstock.com