InVision Studio 試玩體驗

InVision Studio 是啥？

官方的自我介紹很「低調」：The world』s most powerful screen design tool.

號稱要做一站式的設計工具，不再需要在多個設計工具里切來切去了。宣傳視頻做的 blingbling 的，看起來很不錯。

初體驗

幾個月前申請的，今天（2018-3-27）剛收到 Early Access Version 的下載郵件，目前只有 Mac 版，版本號：0.10.3

About 信息

Launcher 啟動界面Release Notes

做了一個常見的左右滑動切換頁面的效果（模仿微信讀書）。

UI設計

Studio 編輯界面，UI設計功能和快捷鍵都和 Sketch 兼容，可無縫過渡

可直接導入 Sketch 源文件，但兼容性還不好，直接打不開，或打開速度慢，各種彈提示不支持

點頂部的六角圖標，可將頁面元素創建為 Component，便於復用和維護，類似 Sketch 的 Symbols

Library 窗格，管理 Components 的模塊

基本交互

核心功能：Add Interaction； 先選中某個頁面元素，點擊頂部閃電??按鈕（或快捷鍵C），再點擊目標Artboard，會彈出交互設置窗口

事件觸發器 Trigger 默認為 Click 事件，有滑鼠事件和手勢事件兩類可選，基本包括了常用的交互事件

Transition 過渡效果設置可選擇 Preset 預設好的整頁級的過渡效果（比如淡入、滑入等），

或選擇 Motion 設定頁面元素級的運動效果，點 Edit Timeline 可進一步編輯每個頁面元素的動效時間軸

動效交互

甚至可以設定時間軸上每個頁面元素的動效運動曲線

預覽&發布

Studio 自帶模擬器演示效果，可操作交互

原型還可發布到 InVision 伺服器上

不過發布到 Web 上後發現有個大問題：不能顯示中文字元；並且交互動作效果不如 Studio 預覽流暢

協作

發布到 Web 端後，可向 stakeholders 演示原型，並直接在原型上標註評審意見

提供基本的設計標註信息和 CSS 代碼等，方便下游開發

小結

經過幾天的試用，已經能看清 InVision Studio 大致的雛形了，雖然目前不少能力還有些弱，需要進一步優化提效，但確實已經綜合了多種設計能力：

Sketch 模式的快速 UI 設計能力

直覺化、免 Coding 的基本交互設計能力

Flash 模式的時間軸動效設計能力

響應式設計能力

團隊協作能力

等等…

目前設計工具大戰還在繼續發酵，各大工具基本都在完善自身優勢的同時，補全其它設計趨勢能力，比如：

Sketch 在增強交互設計能力

Framer 在增強 UI 設計能力

繼續試玩中，To be continued …

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！