InVision Studio：概要とレビュー
公開: 2019-08-07InVision Studioは、柔軟なレイヤーと無限のキャンバスのおかげで、高度なベクターベースの画面デザインをすばやく作成できるプロトタイピングおよびアニメーションツールです。 これは、そこにある最高の忠実度の高いプロトタイピングツールの1つと見なされています。 InVision Studioを使用すると、ワークフローをスピードアップできます。 興味深いインタラクティブなプロトタイプを作成します。 あなたのデザインをチームとクライアントに伝えます。 デザインをテストします。 開発段階の前に、質問、懸念事項、および設計変更を排除します。
InVision Studioは、InVisionツールスイートの一部です。これには、完全な製品設計ワークフローを接続、保存、共有できるInVision Cloudと、すべての製品設計ワークフローを保存および制御できる設計システムマネージャーおよびライブラリであるInVisionDSMも含まれます。ブランドおよびUXコンポーネント。 InVisionStudioはMacとWindowsで使用できます。 Sketchファイルをインポートすることもできます。
InVisionStudioの機能
InVision Studioアプリをダウンロードすると、作成するプロジェクトを選択できます。 設計したいものを選択した後、インターフェースのツアーに参加します。
レイヤーまたはコンポーネントを追加するには、上部のプラス記号をクリックします。 コンポーネントを追加すると、すべてのオプションが右側に表示されます。
InVisionの注目すべき機能のいくつかを見てみましょう。
マスクなしで画像のサイズを変更してトリミングします。
インテリジェント画像トリミングと呼ばれるこの機能は、サイズを変更すると画像を自動トリミングします。 これは、Sketchで画像の塗りつぶしを作成してから「塗りつぶし」に設定するのと似ていますが、手順が少なく、より直感的な方法です。 インテリジェントな画像トリミングは、焦点が中心に近い画像用です。 円、長方形、または角丸長方形にトリミングする場合にも最適です。 焦点が異なる、またはより興味深い形状の画像の場合は、マスクを作成して、より多くのカスタマイズオプションにアクセスすることをお勧めします。
出典：LearnInVisionStudio.com
スクロールしながら要素を修正します。
ヘッダーとフッターの修正はInVisionにとって新しいものではありませんが、他の要素の修正は新しいものです。 スクロールを水平、垂直、またはその両方に設定し、右上のピンアイコンをクリックして修正する要素を選択します。
複数のアートボードを1つのアニメーションにリンクします。
タイマーを使用すると、1つのアニメーションに変換する複数のアートボードを制御できます。 アニメーションをループして、最後のアートボードが最初のアートボードを指すようにすることもできます。 または、デザインの別の部分に直接マルチステップアニメーションを作成することもできます。 このような複雑なアニメーションは、ビデオのイントロやアウトロに最適です。
視差アニメーションのスワイプトリガーを作成します。
スワイプトリガーは、スクロール時に発生する視差効果やその他の種類のアニメーションを作成できます。
コードを記述せずにレスポンシブプロトタイプを作成します。
レスポンシブプロトタイプを使用すると、すべてをパーセンテージベースにし、アートボードサイズに基づいてすべての要素のサイズを変更できます。 その後、あらゆる種類の画面に対応するプロトタイプを作成できます。 これにより、さまざまなサイズのモックアップを簡単に作成できます。 また、Studioでデザインを「サイズ変更可能」に設定すると、ブラウザーで表示したときにデザインのサイズが自動的に変更されます。
出典：LearnInVisionStudio.com
プロトタイプを携帯電話にミラーリングします。
携帯電話でアニメーションやプロトタイプをテストしたい場合は、それを共有し、「ミラーリング」を選択して、モバイルアプリでQRコードをスキャンできます。
スケッチのようなショートカットを使用します。
現在Sketchを使用している場合は、InVision Studioが使用するショートカットに既に精通しているはずです。特にインスペクター、レイヤー、ツールバーに関しては、ほぼすべて同じです。
明るいテーマと暗いテーマを切り替えます。
設計者以外の人は、この機能がどれほど有用であるかを理解していない可能性があります。 明るいインターフェイスを設計する場合、暗いテーマのコントラストを追加すると便利です（またはその逆）。
チームとリアルタイムでコラボレーションします。
コラボレーションとワークフローが簡素化され、チームメンバーはリアルタイムで設計とコメントを行うことができます。 グローバル同期とリアルタイム更新により、誰もループから外れることはありません。
ブラウザでInVisionStudioを使用して設計する
ブラウザ版のInVisionStudioでの作業がどのようなものかを簡単に説明したいと思います。 ボードの設計、プロトタイプの作成、フリーハンドモードの使用について簡単に説明します。
ボードの設計
コマンドセンターは画面の右上にあります。 5つのアイコンは次の略です。
- ヘッダーを編集する
- レイアウトタイプを設定する
- 設定
- コメント
- 共有
ヘッダーの編集
ヘッダーを少しいじってみました。 「ヘッダーの編集」をクリックすると、次のオプションが表示されます。
画像とテキストを置き換え、少しぼかし、テキストを目立たせるために少しオーバーレイを追加しました。 私は特に「サイズ」オプションが大好きです。マウスをその上に置いて、3つのサイズから選択するだけです。
レイアウトタイプの設定
次に、レイアウトタイプを「細心の注意」に変更しました。 これは、ヘッダーの下にあるコンテンツブロック用であり、下にスクロールすると表示されます。
追加セクションの編集
セクションタイトルの右側にカーソルを合わせると、3つのアイコンが表示されます。 下矢印は「セクションを下に移動」、「X」は「セクションタイトルを削除」です。 削除して気が変わった場合は、同じ領域にカーソルを合わせるだけで、新しいセクションタイトルを追加できます。
矢印の右側にあるプラス記号と「X」をクリックすると、新しいメニューが表示されます。 左から右に、アイコンは次の略です。
- 色見本を追加する
- メモを追加
- ファイルをアップロードする
コンテンツブロックにカーソルを合わせると、ヘッダーと同様に、サイズ変更オプションが再び表示されます。 別のサイズを選択すると、残りのレイアウトが自動的に更新され、ブロックが再調整されます。 コンテンツブロックをクリックすると、右側にウィンドウが開きます。
バーの色の1つにカーソルを合わせると、そのカラーコードが表示されます。 このウィンドウは、チームメンバーがこの特定のデザインブロックにコメントを残すこともできる場所です。
プロトタイプの作成
オプションが何であるかを示すために、プロトタイプのデモも試してみました。
ここでは、コントロールセンターが下部にあります。 左から右への目のアイコンから始めて、アイコンは次のとおりです。
- プレビューモード
- ビルドモード
- コメントモード
- 検査モード
- 履歴モード
- ソーシャルシェア
- 画面のアップロード
- 構成
- 画面ステータス
フリーハンドモード
フリーハンドモードは、インタラクティブなデモから始まり、その使用方法をすばやく示します。 次に、無限のキャンバスを使用してプロジェクトをまとめます。 アプリで作業している場合は、「Collaborate live with Freehand」リンクをチームメンバーに送信すると、チームメンバーがリアルタイムでプロジェクトにテキストを描画したり追加したりできます。
InVisionStudioの価格
無料プランには、無制限のコラボレーターとスクリーンを備えた1つのプロトタイプが含まれています。 それがあなたが必要とするすべてであるならば、あなたは決して支払う必要はありません。 デモは制限にカウントされません。 複数のプロトタイプを設計する場合は、無制限のプロトタイプを作成するために6日間無料でアクセスできます。 その後、追加のプロトタイプを作成して使用するには、アップグレードする必要があります。 アップグレードしたい場合は、次の計画があります。
最終的な考え
他のデザインツールと比較すると、InVision Studioは少し遅く、バグがある場合があります。これは、一般的に遅いということではなく、Adobe XD、Figma、Sketchなどの他の同様のツールよりも遅い（場合によっては）だけです。 私は個人的にその問題を経験しませんでした、しかしそれはレビューでたくさん現れます。 また、InVision Studioはプラグインのサポートを提供していないため、それが重要な場合は、代わりにSketchを検討してください。
ただし、プロトタイピングに関しては、特にチームとコラボレーションする必要がある場合、InVisionStudioに勝るものはありません。 Adobe XDほど強力ではないかもしれませんが、それでも最高のプロトタイピングツールの1つです。
InVision Studioのインターフェースは習得と使用が簡単で、アイコンは洗練されたモダンです。 チュートリアル、ツアー、その他のガイダンスへのリンクなど、多くのヘルプもあります。 （とはいえ、反対のレビューを読んだので、それは好みの問題だと思います。）InVision Studioの当て推量はほとんどなく、自分がしていること、つまり作成にすぐに取り掛かることができます。
設計するときの黄金比は、黄金比を使用することです。 黄金比を使用して理解するための私の究極のガイドをチェックしてください。
Visual Generation /shutterstock.comによる注目の画像