簡単なプロトタイプ–InVisionStudioチュートリアル

2018年の前半に眠っていない限り、InVisionStudioアプリのリリースに至るまでのインタラクティブデザインコミュニティでの熱狂的な期待をおそらく痛感していました。 InVisionは、CraftのようなSketchおよびPhotoshopプラグインスイートで最もよく知られており、静的インターフェイスデザインをクリック可能で共有可能なプロトタイプにすばやく変換するための頼りになるプラットフォームです。 昨年の大胆な一歩で、彼らはSketchやFigmaのような業界のお気に入りと競争するための独自のデジタルデザインソフトウェアの開発を発表しました。

この製品は革新的なものとして誇大宣伝され、シームレスなデザインからプロトタイプへのワークフロー、複雑なインタラクション機能、息を呑むようなトランジションアニメーションを約束しました。そして、それは無料です。 InVisionは、デザイナーを興奮させるために、かなりエキサイティングなティーザービデオとデモを公開しました。 最初のベータリリースが年の初めに数回以上押し戻されたため、期待はさらに高まりました。

より多くのデザイナーがソフトウェアをいじり始めているので、アプリインターフェースデザインツールの基本を示すために、ますます多くのチュートリアルとガイドがポップアップしています。 InVisionはまた、InVisionStudioの基本にユーザーをオンボードするための独自のいくつかを作成しました。

早期アクセスリリースのレビューはまちまちですが、Studioにはいくつかの興味深い機能と多くの可能性があります。 このチュートリアルは、アーリーアダプターにInVision Studioプロトタイピングの基本を説明し、いくつかの基本的なプロトタイプアニメーションを追加することを目的としています。

このInVisionStudioチュートリアルに従って、スムーズなアニメーショントランジションを備えたインタラクティブなプロトタイプをすぐに作成してください。

InVisionStudioワークスペースのニッケルツアー

Studioの多くは、UIデザイナーや、Sketchなどのデジタルデザインソフトウェアを使用している人なら誰でも知っているはずです。 ワークスペースの多くは、SketchのUIからキューを借用しており、左側のパネルにはページ、レイヤー、およびグループが格納されています。 検査官用の右側のパネル。 上部にあるコンテキストツールバー。

一部の機能の名前が異なっていても、同じツールの多くが見つかります。 たとえば、Sketchの「シンボル」はStudioではコンポーネントと呼ばれます。

インタラクションパネル

このチュートリアルでは、インタラクションツールを利用して、画面間にインタラクティブなホットスポットを作成し、画面間のスムーズな遷移を作成することに焦点を当てます。 Studioワークスペースの右側にある「インタラクションパネル」で多くの魔法が起こります。

インタラクションを作成する簡単な方法は、トリガーレイヤーまたはグループを選択し、キーボードの「c」を押す（または上部ツールバーの稲妻アイコンをクリックする）ことです。これにより、宛先画面を選択するための青いピックホイップが開始されます。 次に、Studioは、イベントをトリガーするジェスチャまたはユーザー入力を選択し、一連のプリセットトランジションまたは「モーション」トランジションのいずれかを選択するようにデザイナーに促します。

InVisionスタジオアニメーション

優れたインタラクションデザインには多くの要素がありますが、ユーザーインターフェイスでのアニメーション化されたトランジションとマイクロインタラクションの正しい使用は、単なるウィンドウドレッシング以上のものです。

それらは使いやすさを向上させ、最愛の製品と紛らわしい混乱の違いを意味する可能性があります。

このチュートリアル全体を通して、プリセットトランジションとモーショントランジションの組み合わせを使用して、アプリのプロトタイプを作成します。 プリセットの移行はかなり簡単で、InVisionオンラインプロトタイププラットフォームのユーザーにはなじみがあります。

画面間でモーショントランジションがどのように機能するかを管理するルールは、もう少し不思議です。 ツールを構築する際に考慮される明らかな設計上の考慮事項はたくさんありますが（たとえば、画面間の要素の自動リンク）、トランジションにモーションを追加するときに特定の効果を実現するには、試行錯誤が必要です。 うまくいけば、このチュートリアルが、デザイナーがInVisionStudioが提供するものをもう少し快適に実験できるようになるのに役立つでしょう。

心に留めておくべきこと

Studioは、アニメーションに関する多くのスマートな機能を約束します。 たとえば、インタラクションを介して接続されたときに、あるアートボードから別のアートボードに複製されたオブジェクト間にモーショントランジションを作成できます。 デザイナーは、これらのアニメーションを必要に応じて微調整して、美しいイージングやその他のモーション効果を実現できます。 オブジェクトのスタックを特定の順序で遷移させようとするときにこれがどのように機能するかという偏心を学ぶには、忍耐とある程度の練習が必要です。

モーショントランジションは、互いに複製されたアートボード上のオブジェクトで最適に機能します。 アニメーション機能は、同じレイヤー名を持つ重複したオブジェクトを認識するという点で「スマート」です。したがって、画面間のキーレイヤーを削除したり、名前を変更したりしないように注意してください（これは、すばらしいアニメーションを台無しにする非常に簡単な方法です）。

Studioはまだ初期段階にあるため、設計者はかなりの数のバグに遭遇する準備をする必要があることに注意してください。 たとえば、「プレビュー」ボタンはプロトタイプのインタラクティブプレビューを起動しますが、インタラクションがまったくトリガーされない場合があります。その場合は、ファイルを保存して再度開く必要があります。

ソフトウェアを学習しているときに、複数のファイルが奇妙に破損しているように見えました。すべてのアートボードが削除され、すべてのツールパネルにアクセスできなくなりました。 私はバグを報告し、多くの作業を失わないようにファイルの複数のバージョンを保存することを学びました。

最後に、それは常に整理するのに役立ちます。 Studio、Sketch、Marvelのいずれのプラットフォームでもプロトタイプを作成する場合、オブジェクトとレイヤーラベルを追跡することで、時間とフラストレーションを節約できます。特に、チームで作業している場合や、ある時点でファイルを渡す場合はそうです。 相互作用を構築するときは、レイヤーとレイヤーグループの順序に注意してください。 これにより、目的のアニメーション効果を実現する上で大きな違いが生じることがよくあります。

チュートリアル！

さぁ、始めよう！ まだ行っていない場合は、InVision Studioにアクセスして、Studioアプリの早期アクセスバージョンをダウンロードしてください。 コンピューターにInVisionStudioをインストールしたら、ここからチュートリアルファイルをダウンロードします。 Studioソフトウェアを起動したら、保存した場所からファイルを開くことを選択します。

ステップ1：ファイルを開いて確認する

このインタラクティブなプロトタイプは、19世紀後半から20世紀初頭までの現代アーティストに関するモバイルアプリ向けです。 すべての画面は、モーショントランジション機能を適切に使用するために必要な慎重なアートボードの複製を使用して事前に作成されています。

階層には、「ホーム」から始まり、個々のアーティストの経歴、最後にアーティストの作品の4つの例のカルーセルまでの3つのレベルの深さがあります。 「ホーム」アートボードには、プロトタイプの開始アートボードを示す家の小さなアイコンがあります。

チュートリアルでは、これら3つのレベルの深さを接続する単純なナビゲーションパスの作成に焦点を当てます。 Studioのインタラクションツールとトランジションツールを使用して、プロトタイプを適切にインタラクティブなアプリのように感じさせます。

ステップ2：ArtistTileをArtistBioに接続する

最初のアートボードに移動します。 レイヤーグループ「ArtistTile1」を展開してください。 3つのネストされたグループに気付くでしょう。1つはアーティスト名用、もう1つは注目の画像用、そして3番目のレイヤーには「BioText」が含まれています。

アートボード画面を見ると、Studioがモーショントランジションを処理する方法が原因で、3番目のレイヤーグループがすぐには表示されません。これについては、すぐに説明します。 とりあえずメモしておいてください。

次のすべての要素を含むレイヤーグループを選択します：「ArtistTile1」。 このグループを選択した状態で、キーボードの「c」を押して（または、上部のツールバーにある稲妻アイコンをクリックして）、対話ツールを開始します。 カーソルの後に青いピックホイップが続き、インタラクションの宛先画面を選択します。

「ArtistBio1」というタイトルのすぐ右側にあるアートボードを選択すると、トリガーとトランジションのタイプを選択するように求められます。 トリガーとして「タップ」を選択し、トランジションとして「モーション」を選択します。 次に、移行の期間を選択できます。 このトランジションを2秒に設定し、「保存」をクリックしてみましょう。

再生ボタンをクリックして、プロトタイプをプレビューします。 画面に沿って物事がどのように動くか、そしてバイオレイヤーが画像の下からどのように滑り落ちるかを見ましたか？ おめでとうございます。これで、非常にスムーズなインタラクショントランジションが作成されました。

ステップ3：戻るボタンをホーム画面に接続する

次に、ユーザーにホーム画面に戻る方法を提供する必要があります。 「ArtistBio1」アートボードに移動し、左上隅にある「btn_back」コンポーネントを選択します。 ここで「c」を押して「ホーム」アートボードを選択してトリガーを作成します。

ここでも、トリガーを「タップ」に、インタラクションを「モーション」に、持続時間を2秒に設定しましょう。 [プレビュー]をクリックして、作成したばかりの滑らかな開閉トランジションを楽しんでください。 タイルを閉じることによってトリガーされるアニメーションが、タイルを開くときに再生されるアニメーションの反転であることに注意してください。

ステップ4：ギャラリーを接続する

1番目と2番目のアートボードのレイヤー名に注意している場合、それらが同一であることに気付くかもしれません。 これは、前述のように、Studioアニメーションは、名前を共有している場合、複製されたレイヤーを1つのアートボードから次のアートボードに自動的にリンクするためです。 これらのレイヤーの名前を変更すると、アニメーションリンクが壊れ、トランジションはデフォルトで単純なフェードになります。特に、意味のあるレイヤーラベルに夢中になっている人にとっては困難です。

画像のカルーセルギャラリーを開くために、もう1つのきちんとしたモーショントランジションを適用したいと思います。 「Artist1-Image1」というタイトルのアートボードには、「Artist Bio 1」アートボードから複製された要素が含まれており、サンプル画像をより多く表示するようにサイズが変更されています。

まず、「Artist Bio 1」レイヤーをクリックして、「注目の画像」グループを選択します。 これがギャラリーを開くきっかけになります。 ここで「タップ」インタラクションを作成し、ギャラリーの最初のアートボードに接続して、「モーション」を選択します。 今回は、継続時間を少し速く設定します：1秒。

ギャラリーを閉じるための適切なトランジションを作成するには、「Artist 1-Image 1」アートボードで閉じるボタンレイヤーを選択し、以前と同じ設定で「ArtistBio1」アートボードに接続し直します。

このアニメーションをプレビューして、プロトタイプがアーティストのバイオ画面から画像のカルーセルに、そしてその逆にどれほどうまく移行するかに驚嘆してください。 これで、アプリの階層の3つのレベルを介してナビゲーションが接続されました。

ステップ5：すべてのギャラリー画像を接続する

必要なモーショントランジションのほとんどを実行しました。次に、ギャラリーの残りの部分でアニメーションプリセットの一部を使用し始めます。

ユーザーがこのカルーセルの画像をめくるためのここでのインタラクションパターンは、おなじみのスワイプジェスチャになります。 幸いなことに、この最後の部分は非常に単純で、Studioのアニメーションプリセットを使用するとまったく時間がかかりません。

「Artist1-Image1」アートボードを選択し、次のアートボード「Artist1-Image2」につながるインタラクションを作成します。 今回は、トリガーを「左にスワイプ」に設定します。 トランジションの場合は、「プリセット」を選択し、ドロップダウンから「左に押す」を選択します。

逆のインタラクションを作成するには、「Artist 1-Image 2」アートボードを選択し、前のアートボードに接続します。今回は、「SwipeRight」ジェスチャと「PushRight」トランジションを使用します。

次のいくつかのアートボードでこのパターンを繰り返し、画像2から画像3、画像3から画像4のアートボードを接続します。簡単です。

これをさらに現実的にするために、画像1と画像4の間のループを閉じましょう。画像4のアートボードを選択し、画像1に接続します。「左にスワイプ」トリガーと「左に押す」トランジションを選択します。シリーズの次の画像。 リバースとプレストを使用して、画像1のアートボードを画像4に接続します。これで、ループギャラリーが作成されました。

最後に、画像ギャラリーのアートボードで「btn_close」コンポーネントをそれぞれ選択し、それらをバイオアートボードにリンクします。 ここでは好きなトランジションを選択できますが、私は「PushRight」を使用しました。

これで、目立つようにかなり適切に順序付けられたナビゲーションパスができました。 プレビューをクリックして試してみてください。 プロトタイプは、このチュートリアルの冒頭のgifのように機能するはずです。 十分に稼いだ背中を軽くたたいてください。

ステップ6：繰り返す

最初のアーティストの例のすべての画面を滑らかなインタラクションでリンクしたので、チュートリアルファイルの他の2つの画面セットに対して手順を繰り返します。 それらは同様の方法で編成されており、Studioの動作に慣れるための良い習慣になります。

次のステップ

うまくいけば、このチュートリアルは、InVisionStudioプロトタイピングのいくつかのクールな機能の紹介を提供しました。 Studioのコツをつかんでいる間は、高度なアニメーションツールを使用してトランジションを微調整してみてください。 ワークスペース内の他のツールを試して、そこにある他のInVisionStudioチュートリアルに従ってみてください。 練習すれば、フロントランニングのInVisionStudioデザインの達人の1人になることができます。

途中でいくつかのバグや予期しない動作に遭遇した可能性がありますが、それは新しいソフトウェアを試す性質です。 InVisionの人々はフィードバックに非常に敏感であり、間違いなくStudioを改善し続け、Studioをこれまで以上に安定して便利にします。

Studioは試してみるのに楽しいツールです。そして、無料のアプリプロトタイピングツールを試してみない理由はありません。 今日のデザインコミュニティでSketchのような頼りになるソフトウェアに取って代わる可能性は低いですが、多くの可能性があります。

Toptal Designブログでさらに読む：

• UXデザインプロセスを完璧にする–プロトタイプデザインのガイド
• デザインツールとしてのFigmaの力
• 実際のデータを使用したプロトタイピング-フレーマーチュートリアル
• モバイルユーザビリティの基本ガイド
• モバイルアプリの設計のベストプラクティスと間違い