標籤：

InVision Studio 試玩體驗

04-29

InVision Studio 是啥？

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

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

The world』s most powerful screen design tool | InVision Studio?

www.invisionapp.com

InVision Studio - Product Hunt?

www.producthunt.com圖標

初體驗 (2018-3-27)

InVision Studio 申請地址：

The world』s most powerful screen design tool | InVision Studio?

www.invisionapp.com圖標

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

About 信息

Launcher 啟動界面

Release Notes

  • Welcome to InVision Studio

Welcome to InVision Studio?

www.youtube.com

Getting Started 入門指南

  • Introduction to InVision Studio
  • Studio UI Tour
  • Canvas and Layers
  • Inspector
  • Creating a New Prototype
  • Layers and Styling Layers
  • Importing and Migrating Content
  • Basic Prototyping Interactions
  • Prototyping with Advanced Animations
  • Introduction to Components
  • InVision Studio Jams

InVision Studio Jams?

www.youtube.com

2018-3-29更新：

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

演示地址：

微信讀書左右滑動切換效果?

projects.invisionapp.com

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 …


推薦閱讀：

TAG:invision | 產品設計 | 設計工具 |