Invisionを使用すると、設計者はアプリケーションの設計のプロトタイプを顧客にデモンストレーションして、インタラクティブにすることができます。 さらに、NVisionのおかげで、プラットフォーム（macOs、Windows、Linux）に関係なく、デザイナー、プロジェクトマネージャー、レイアウトデザイナー、プログラマーの間でチーム内で調整された作業を整理できます。 Sketch + InVisionバンドルを使用するための便利なシナリオを紹介します。

スケッチプロトタイプのヒント

1.「Craft」プラグインセットをインストールします

Craftは、InVison LABSによって作成された素晴らしいプラグインセットです。 私たちはSyncプラグインに興味を持っています。これにより、Sketchエディターから直接NVからアートボードを直接ダウンロードできます。 これを行うには、最初にNVisionのWebサイトにプロジェクトを作成し、インターフェイスの種類（デスクトップ、タブレット、電話、または時計用のアプリケーション）を指定する必要があります。

その後、Sketchに戻り、リストから作成したプロジェクトを選択すると、デザインをアンロードできます。 アートボードは一度にアンロードされるか、選択されたものだけがアンロードされます。これは、たくさんある場合に非常に便利です。

さらに、デザインは@ 1xまたは@ 2xの解像度でアップロードできます。 これにより、Retinaディスプレイを搭載したデバイスでプロトタイプがきれいに表示されます。

2. 1つのセクション-1ページ

プロジェクトが大きく、多数のアートボードが含まれる場合、大きなセクションごとに個別のページをSketchで作成することをお勧めします。 その後、他のセクションのアートボードをロードせずに、1つのセクションのすべての画面を一度にアンロードすると便利です。

3.個々のアートボード上のモーダルウィンドウ

Invizhnを使用すると、モーダルウィンドウの「重複」コンテンツを表示できます。 以前は、モーダルウィンドウを表示するために、コンテンツを含むアートボードがコピーされ、上に半透明のオーバーレイが描画され、その上にモーダルウィンドウ自体が作成されていました。 今、不必要なジェスチャーを行うことはできません。 別のアートボードにモーダルウィンドウを作成します。 ウィンドウの位置、透明度、オーバーレイの色は、請求書で指定できます。

ウィンドウに影がある場合は、アートボード内にある必要があります。そうでない場合は、「クリッピング」されて表示されません。

NVision画面では同じ名前が付けられるため、Sketchでアートボードをすぐに正しく呼び出すことが重要です。 また、同期後にアーバボードの名前が変更された場合、NVision 2では、異なる名前の同一の画面が作成されますが、そのうちの1つを手動で削除する必要があります。

私の意見では、これはバグです。 私はそれがすぐに修正されることを願っていますが、今のところ、この点に留意する必要があります。

4.要素の状態

デスクトップ用のインターフェイスを開発している場合は、ドロップダウンリストおよびその他のインターフェイス要素について、「ホバー」状態（ホバー）を表示する必要があります。 これを行うには、モーダルウィンドウの場合と同様に、別のアートボードで、展開された形式でリストを描画し、NVisionにアップロードします。 このリストには別の画面があります。

次に、リストの見出しの上に領域を作成します。その上にマウスを置くと、展開されたメニューが表示され、「オーバーレイとして画面」を選択し、リストが開いた状態の画面を選択します。 すべてが均等に収まるようにするには、「位置-左上」、「トランジション-フェードイン」を選択し、位置パネルのスケッチに表示される座標を指定します。

5.ステータスバーは描画する必要はありません

モバイルおよびタブレット用のアプリケーションの設計では、ステータスバーを表示せず、その場所を残します。 実際、NVisionはブラウザーで表示するとステータスバーを表示します。 ステータスバーのデザインは、暗いと明るいの2つのオプションから選択できます。

6.エクスポート用のアイコンとグラフィックを準備する

検査の最近の革新のおかげで、検査モードが登場しました。これにより、タイプセッターやプログラマーは、要素の説明を確認したり、要素をエクスポートしたりできます。 INVISIONからエクスポートできる要素とそのサイズは、スケッチエディターのデザイナーが決定します。 アイテムを選択し、エクスポートする形式とサイズを指定するだけです。 これで、このアイテムを指定された形式でINVISIONから直接ダウンロードできます。

オブジェクトのエクスポートを設定するのを忘れましたか？ 関係ありません Sketchに移動して、要素のエクスポートを構成し、Craft Syncプラグインを介してアートボードを同期します。 完了、オブジェクトはNVisionからエクスポートできます。

InVisionのヒント

NVisionは価格設定において非常に民主的です。 機能を理解するために、何も支払う必要はありません。1つのプロトタイプの作成は無料です。 あなたが同時に3つ以下のプロジェクトを実行するフリーランサーである場合、「開始」料金は月額15ドルであなたに適しています。 このレートでは、最大3つのアクティブなプロトタイプを作成できます。 さらに、アーカイブ内にあるプロトタイプの数は重要ではありません。主なことは、アクティブなプロトタイプが3つ以下であることです。 私は月額25ドルの「プロフェッショナル」料金を使用します。 プロジェクトを無制限に作成できます。 複数の設計者がプロトタイプに取り組む企業には、より高価な計画が必要です。

上記で書いたように、NVisionでは、Windowsの開発者がSketchで作成されたレイアウトまたはアプリケーションをレイアウトできます。 同意します、月額25ドルはMacyチーム全体を購入するよりもはるかに安いです:-)

7.アプリケーションアイコンを作成する

NVisionでモバイルアプリケーションのプロトタイプ用のアイコンを追加できます。 これを行うには、プロジェクト名の横にある「プラス」をクリックして、アイコンを選択します。 ブラウザで表示したときに表示されるだけでなく、モバイルにアプリケーションを「インストール」した場合にも表示されます（詳細については次のヒントを参照）。

8. iOにアプリケーションを「インストール」する

「パブリック共有リンク」でプロジェクトへのリンクをコピーし、Safariをモバイルブラウザーに貼り付けると、アプリケーションが開きます。 ブラウザの「共有」アイコンをクリックして、「ホーム画面で」を選択します。 これで、モバイルデスクトップにアプリケーションアイコンが表示され、ブラウザのアドレスバーなしでアプリケーション自体を表示できます。 人件費は最小限であり、顧客は喜んでおり、携帯電話の画面間を移動できます。

9.アプリケーションでヘッダーとフッターを作成する

多くの場合、コンテンツは複数の画面を占有し、スクロールするときはヘッダーとフッターを修正する必要があります。 これを行うには、「ビルドモード」で、スライダー「固定ヘッダー」と「固定フッター」を移動します。 これで、コンテンツはそれらの間でスクロールされます。

NVisionでは、プロトタイプのサイドバーを左右に固定する方法はありませんが、これはデスクトップインターフェイスで非常に便利です。 この機能がいつか追加されることを願っています。

10.テンプレートを使用してナビゲートする

長い間、私はこの非常に便利な機能に注意を払わず、各画面ごとに新しいクリック可能な領域を作成しました。 実際、スルーメニュー（サイトのすべてのページにあるメニュー）の場合、「テンプレート」に「クリック可能な」領域を追加する必要があります。 領域を作成し、クリックした場所を選択して、テンプレートに追加します（例：「サイドバー」）。

1つのテンプレートには、任意の数の「クリック可能な」領域を含めることができます。 ここで、新しい画面のテンプレートから領域を設定するには、目的のテンプレートを選択するだけです。

11.検査モード

先に、NVisionによるこのイノベーションについて言及しましたが、別の点に値します。 最近までWindowsでファイルを開けなかったことがデザイナーにとって大きな問題であり、SketchではなくPhotoshopを使用せざるを得ませんでした。 AvocodeやMarketchプラグインなどのさまざまなサービスがファイルの転送に使用されました。 また、最近、Icons8から無料のソリューションがありました。これにより、WindowsからSketchファイルを開くことができます。

問題を解決するオプションとして、Invisionの検査モードが適しています。 リストされたソリューションと同じ機能を提供します。

正しく機能するためには、Craft Syncプラグインを使用して画面をアンロードします。 開発者をプロジェクトに追加すると、開発者はこのモードにアクセスできます。

さらに、開発者が無料アカウントを持っているだけで、検査モードで任意の数のプロトタイプにアクセスできます。

12.コメントとツアーを作成する

多くのプロジェクトと画面がある場合、どのインターフェイス画面を編集する必要があるかを判断するのに多くの時間が費やされます。 この問題は、顧客にコメントへのアクセス権を与えると簡単に解決されます。 彼は適切な場所をクリックして、テキストコメントを作成します。 それについての通知はメールであなたに送信され、「コメント」タブのINVISIONで利用可能になります。 コメントに対する回答または明確な質問を書くか、タスクを完了してコメントに完了のマークを付けることができます（解決済みとしてマーク）。

完全なインターフェイスではなく、レビューツアーを作成する必要がある場合があります。 このため、Invisionにはツアーを作成する機能があります。 コメントの原則に基づいて機能します。 テキストの説明を使用して、画面上に1つ以上のポイントを作成します。 ポイントは、[前へ]ボタンと[次へ]ボタンを使用して、画面を一貫してユーザーに「誘導」します。 小さなプレゼンテーションの例 。

13.バージョン履歴を保持する

チームが検査モードを必要とせず、画像の形式で画面をロードするだけであれば、NVisionのバージョンストアを使用することができます。 これを行うには、「Craft Sync」プラグインではなく、「Desktop Sync App」を使用してレイアウトをダウンロードします。 以前のバージョンをダウンロードする機能を備えたレイアウトの変更の全履歴は、[資産]セクションで利用できます。 この機能についての短いビデオはこちらです。

残念ながら、Craft Syncプラグインでデータをアップロードするときにバージョン履歴が作成されません。 この機能がいつか機能することを願っています。

14.デザインをオンラインで提示する（LiveShare）

優れたデザイナーは、将来の製品のために高品質のインターフェースを作成できるだけでなく、それを適切に提示できる必要があります。 あなたのアイデアやソリューションを正当化して顧客に伝えることは非常に重要です。 もちろん、快適な会議室で会議を行う場合はこれを行うことをお勧めしますが、これは常に可能とは限りません。 このような場合、LiveShareインターフェースは非常に便利で、リアルタイムで画面を表示し、画面間を移動して、見たものについて話し合うことができます。 仕組みは次のとおりです。

Sketch and Motionを使用すると、ユーザーインターフェイスを作成、議論、改善できます。 間違いなく、NVisionには改善すべき点がありますが、今日では設計ソリューションのプレゼンテーションに最適な製品です。 NVisionで有意義な作業が絶えず実行されており、優れたソリューションが定期的に導入されていることを考慮した場合は、作業で試してみてください！