概要

inVisionのproject上でページ遷移以外の表現方法を備忘録として残しておきます。

Sketch上で設定する場合

下記は、inVisionの公式の文献(Blog)と動画(Youtube)です。

inVisionのproject(ブラウザ)上で設定する

※ 対象がPhotoshopでデザインされたものを想定します。
(Photoshop エクステンションに、Craftのsyncを追加済みのもとします。)

00. 完成系のイメージ

inVision(Craft)のScreen as Overlay機能を使ってtoggleを再現する。

コメント種類の絞り込み
設定後のイメージ

デザイン中部にある「New Posted」と言うテキスト部分をタップすると、
toggleが着火するイメージです。

01. 対象のアートボードをsyncする

アートボードをsyncする。

アートボードをsyncする。
アートボードをsyncする。
  • Photoshop上に、”アクション前のデザイン”と”アクション後のパーツ”のアートボードを用意します。
  • 画像右側、craft(Photoshopメニュー:ウィンドウ > エクステンション)の”sync”で対象のアートボードを選択し同期します(”Sync to inVision”を押します)。

02. Screen as Overlayを選択する

Screen as Overlayを選択する

Screen as Overlayを選択する。
Screen as Overlayを選択する。

プロジェクト上に同期されたアートボード(ページ)に、
toggleを再現するための設定をしていきます。

BUILD MODE(ショートカット「B」キー)で対象範囲を指定するとメニューが表示されます。

  1. Link Toには、”Screen as Overlay“を選択します。
  2. Gestureには、再現したい画面の操作方法を設定します。
    今回は、”Tap“にします。

03. toggleアクション用のテンプレートを選択する

toggleアクション用のテンプレートを選択する。

toggleアクション用のテンプレートを選択する。
toggleアクション用のテンプレートを選択する。

Gesture下のメニューでアクション後のアートボードを選択します。
template名を選択すると、左側の青枠のようにデザインが表示されます。

04. 位置やインタラクションを選択する。

位置設定の種類を選択する。

位置設定の種類を選択する。
位置設定の種類を選択する。
  1. POSITION:アクション後のアートボートの位置を設定します。
    下記に詳細が続きます。
  2. TRANSITION:アクション(または遷移)中のインタラクションを選択できます。
  3. BG:タップ後のOverlayに対するopacity(透明度)を設定します。

05. toggle後のテンプレートの位置を調整する。

toggle後のテンプレートの位置を設定する。

toggle後のテンプレートの位置を設定する。
toggle後のテンプレートの位置を設定する。
  1. POSITIONで”Custom“を選択すると任意の位置に設定できます。
  2. Customを選択すると、上記工程で選択した”Gesture”のアートボードが表示されます。
  3. 表示させたい位置に配置した後”「Enter(return)」キーを押すと完了“します。

06. アクション後のタップ範囲の設定をする

アクション後の設定

アクション後の設定
アクション後の設定
  1. Reverse transition on Close link:設定した選択範囲を、もう一度クリック(タップ)すると閉じる。
  2. close on clicking out side of overlay:オーバーレイ部分外をクリック(タップ)すると閉じる。
  3. include hotspot in template:共通パーツなどの遷移先をグループ保存し設定する。
    参考URL:プロトタイピングツールInVisionの使い方(テンプレートの設定方法) – 株式会社GEEKクリエイターズブログ

以上の6工程ほどで、toggle表現が再現できました。

Tags