輕鬆製作原型 - InVision Studio 教程

除非您在 2018 年上半年睡著了，否則您可能敏銳地意識到交互式設計社區對 InVision Studio 應用程序發布的狂熱期待。 InVision 以其 Sketch 和 Photoshop 插件套件（如 Craft）而聞名，並且是快速將靜態界面設計轉變為可點擊和可共享原型的首選平台。 去年，他們邁出了大膽的一步，宣布開發自己的數字設計軟件，以與 Sketch 和 Figma 等行業寵兒競爭。

該產品被宣傳為革命性的，並為無縫的設計到原型工作流程、複雜的交互功能、令人驚嘆的過渡動畫做出了一些重要的承諾——而且它將是免費的。 InVision 發布了一些非常令人興奮的預告視頻和演示，以吸引設計師。 隨著最初的 beta 版本在年初被推遲了幾次以上，人們的預期進一步增加。

隨著越來越多的設計師開始使用該軟件，越來越多的教程和指南正在彈出來演示應用程序界面設計工具的基礎知識。 InVision 還創建了一些自己的內容，以便讓用戶了解 InVision Studio 基礎知識。

儘管早期訪問版本的評價褒貶不一，但 Studio 有一些有趣的功能和巨大的潛力。 本教程旨在引導早期採用者了解 InVision Studio 原型製作的基礎知識並添加一些基本的原型動畫。

按照這個 InVision Studio 教程，立即創建具有流暢動畫過渡的交互式原型！

InVision Studio 工作區的鎳之旅

UI 設計師和任何使用過 Sketch 等數字設計軟件的人都應該熟悉 Studio 的大部分內容。 大部分工作空間都藉鑑了 Sketch 的 UI，左側面板包含頁面、圖層和組； 檢查員的右側面板； 以及頂部的上下文工具欄。

您還會發現許多相同的工具，即使某些功能的名稱不同。 例如，Sketch “符號”在 Studio 中稱為組件。

交互面板

出於本教程的目的，我們將專注於利用交互工具在屏幕之間創建交互熱點並在它們之間創建平滑過渡。 在 Studio 工作區右側的“交互面板”中會發生很多神奇的事情。

創建交互的簡單方法是選擇一個觸發層或組，然後在鍵盤上點擊“c”（或單擊頂部工具欄中的閃電圖標），這會啟動一個藍色的選擇鞭子來選擇目標屏幕。 然後 Studio 將提示設計人員選擇觸發事件的手勢或用戶輸入，並在一組預設轉換或“運動”轉換之間進行選擇。

InVision Studio 動畫

優秀的交互設計有很多元素，但在用戶界面中正確使用動畫過渡和微交互不僅僅是裝飾門面。

它們增強了可用性，並可能意味著心愛的產品和令人困惑的混亂之間的區別。

在本教程中，我們使用預設過渡和運動過渡的組合來創建我們的應用原型。 預設轉換相當簡單，並且對於 InVision 在線原型平台的用戶來說是熟悉的。

控制屏幕之間的運動轉換如何工作的規則有點神秘。 雖然在構建該工具時考慮了許多明顯的設計師考慮因素——例如，屏幕之間元素的自動鏈接——但在為過渡添加運動時需要一些試驗和錯誤才能實現某些效果。 希望本教程能幫助設計師更輕鬆地嘗試 InVision Studio 所提供的功能。

要記住的事情

Studio 承諾圍繞動畫提供許多智能功能。 例如，當通過交互連接時，它可以在從一個畫板複製到另一個畫板的對象之間創建運動過渡。 然後，設計師可以根據需要調整這些動畫，以完成一些漂亮的緩動和其他運動效果。 在嘗試以特定順序轉換一堆對象時，了解其工作原理的古怪之處可能需要耐心和一些練習。

運動過渡最適用於畫板上相互複製的對象。 動畫功能是“智能”的，因為它可以識別具有相同圖層名稱的重複對象，因此請注意不要在屏幕之間刪除或重命名關鍵圖層（這是破壞出色動畫的令人沮喪的簡單方法）。

請記住，Studio 仍處於起步階段，因此設計師應該準備好遇到相當多的錯誤。 例如，“預覽”按鈕啟動原型的交互式預覽，但有時交互根本不會觸發，在這種情況下，您需要保存並重新打開文件。

在學習該軟件時，我發現不止一個文件似乎奇怪地損壞了自身——刪除了所有畫板並使所有工具面板都無法訪問。 我已經報告了這個錯誤，並且已經學會了保存我的文件的多個版本，以免丟失太多的工作。

最後，它總是有助於組織起來。 在任何平台上創建原型時，無論是 Studio、Sketch 還是 Marvel，跟踪對象和圖層標籤將節省時間和挫敗感——尤其是當您與團隊合作或在某個時候提交文件時。 在構建交互時注意層和層組的順序； 這通常會對實現所需的動畫效果產生很大的影響。

教程！

讓我們開始！ 如果您還沒有，請前往 InVision Studio 下載 Studio 應用程序的早期訪問版本。 在您的計算機上安裝 InVision Studio 後，請在此處下載教程文件。 啟動 Studio 軟件後，選擇從您保存文件的位置打開文件。

第 1 步：打開文件並查看

這個交互式原型將用於一個關於 19 世紀末至 20 世紀初現代藝術家的移動應用程序。 所有屏幕都是使用仔細的畫板複製預先創建的，這是正確使用運動過渡功能所必需的。

層次結構有 3 個深度級別，從“家”開始，然後是每個藝術家的個人簡歷，最後是藝術家作品的四個示例的輪播。 您會注意到“主頁”畫板有一個房子的小圖標，它指定了原型的起始畫板。

本教程將著重於創建連接這三個深度級別的簡單導航路徑。 我們將利用 Studio 的交互和過渡工具使原型感覺像是一個適當交互的應用程序。

第 2 步：將 Artist Tile 連接到 Artist Bio

轉到第一個畫板。 花點時間展開圖層組“Artist Tile 1”。 您會注意到三個嵌套組：一個用於藝術家姓名，一個用於特色圖像，第三層包含“生物文本”。

查看畫板屏幕，由於 Studio 處理運動轉換的方式，第三層組不會立即可見 - 我們稍後會談到。 暫時記下它。

選擇包含所有這些元素的圖層組：“Artist Tile 1”。 選擇此組後，點擊鍵盤上的“c”（或單擊頂部工具欄中的閃電圖標）以啟動交互工具。 您的光標將跟隨一個藍色的鞭子來選擇您交互的目標屏幕。

選擇右側標題為“Artist Bio 1”的畫板，系統將提示您選擇觸發器和過渡類型。 對於觸發器，選擇“Tap”，然後選擇“Motion”作為過渡。 然後，您可以選擇過渡的持續時間。 讓我們將此過渡設置為 2 秒，然後點擊“保存”。

點擊播放按鈕預覽原型。 你有沒有看到屏幕上的東西是如何移動的，以及生物層是如何從圖像下方滑落的？ 恭喜——你已經創建了一個非常流暢的交互過渡！

第 3 步：將返回按鈕連接到主屏幕

現在我們應該為用戶提供一種返回主屏幕的方法。 進入“Artist Bio 1”畫板，選擇左上角的“btn_back”組件。 通過點擊“c”並選擇“主頁”畫板在此處創建觸發器。

同樣，讓我們將觸發器設置為“Tap”，將交互設置為“Motion”，並將持續時間設置為 2 秒。 單擊預覽並欣賞您剛剛創建的流暢的打開和關閉過渡。 注意關閉磁貼觸發的動畫是如何反轉打開磁貼時播放的動畫。

第 4 步：連接畫廊

如果您注意第一個和第二個畫板中的圖層名稱，您可能會注意到它們是相同的。 這是因為，如前所述，Studio 動畫會自動將重複的圖層從一個畫板鏈接到下一個畫板（如果它們共享名稱）。 更改這些圖層的名稱將中斷動畫鏈接，並且過渡將默認為簡單的淡入淡出——對於那些痴迷於有意義的圖層標籤的人來說尤其具有挑戰性。

我們想應用一種更簡潔的運動過渡來打開圖像的輪播庫。 標題為“Artist 1 - Image 1”的畫板包含從“Artist Bio 1”畫板複製的元素，重新調整大小以顯示更多示例圖像。

首先單擊“Artist Bio 1”圖層以選擇“特色圖像”組。 這將是打開畫廊的觸發器。 在此處創建一個“點擊”交互，連接到畫廊中的第一個畫板，然後選擇“運動”。 這一次，將持續時間設置得快一點：1 秒。

要為關閉畫廊創建一個漂亮的過渡，只需選擇“Artist 1 - Image 1”畫板中的關閉按鈕圖層並將其連接回“Artist Bio 1”畫板，設置與以前相同。

預覽此動畫並驚嘆於原型從藝術家生物屏幕過渡到圖像輪播並返回的效果。 現在，我們已經通過應用程序層次結構的三個級別連接了導航！

第 5 步：連接所有圖庫圖像

我們已經完成了我們需要做的大部分運動過渡，現在將開始為畫廊的其餘部分使用一些動畫預設。

我們的用戶在這裡翻閱這個輪播圖像的交互模式將是一個熟悉的滑動手勢。 好消息是最後一部分非常簡單，使用 Studio 的動畫預設完全不需要時間。

選擇“藝術家 1 - 圖像 1”畫板並創建一個交互，引導到下一個畫板“藝術家 1 - 圖像 2”。 這一次，將觸發器設置為“向左滑動”。 對於過渡，選擇“預設”並從下拉列表中選擇“向左推”。

要創建反向交互，請選擇“藝術家 1 - 圖像 2”畫板並將其連接到前一個畫板，只是這次使用“向右滑動”手勢和“向右推”過渡。

在接下來的幾個畫板上重複此模式，將圖像 2 的畫板連接到圖像 3，將圖像 3 連接到圖像 4。簡單！

為了使這一點更加逼真，讓我們關閉圖像 1 和圖像 4 之間的循環。選擇圖像 4 的畫板並將其連接到圖像 1。選擇“向左滑動”觸發器和“向左推”過渡，就像為系列中的下一張圖片。 將 Image 1 畫板連接到 Image 4 並反向連接——你已經創建了一個循環畫廊！

最後，選​​擇圖庫畫板中的每個“btn_close”組件並將它們鏈接回生物畫板。 你可以在這裡選擇你喜歡的任何過渡，但我選擇了“向右推”。

到現在為止，您已經有一個非常有序的導航路徑可以展示了。 點擊預覽試一試； 你的原型應該很像本教程開頭的 gif。 給自己一個當之無愧的後背。

第 6 步：重複

既然您已經將第一個藝術家示例的所有屏幕與流暢的交互聯繫起來，請對教程文件中的其他兩組屏幕重複這些步驟。 它們以類似的方式組織，這將是習慣 Studio 工作方式的好習慣。

下一步

希望本教程介紹了 InVision Studio 原型設計的一些很酷的功能。 在掌握 Studio 的竅門時，您應該嘗試使用高級動畫工具調整過渡。 試用工作區中的其他工具，並嘗試按照其他一些 InVision Studio 教程進行操作。 通過練習，您可以成為領先的 InVision Studio 設計大師之一。

您可能在此過程中遇到了一些錯誤或意外行為，但這就是嘗試新軟件的本質。 InVision 的人員對反饋非常敏感，並且肯定會繼續改進 Studio，使其更加穩定和有用。

Studio 是一款有趣的試用工具，沒有理由不試用免費的應用程序原型製作工具。 雖然它不太可能取代當今設計界的 Sketch 等首選軟件，但它具有很大的潛力。

進一步閱讀 Toptal 設計博客：

• 完善你的用戶體驗設計過程——原型設計指南
• Figma 作為設計工具的力量
• 使用真實數據進行原型設計 - 成幀器教程
• 移動可用性基本指南
• 移動應用程序設計最佳實踐和錯誤