インタラクティブなウェブデザインをどのように提示しますか？

インタラクティブ性はWebのデザインでますます提示されるようになりますが、インタラクティブ性をクライアントに提示する良い方法を誰かが見つけましたか？私は主にこれらのような小さなアニメーションについて話します：

• ボタンにカーソルを合わせる
• ユーザーがスクロールしたときのナビゲーションバーへの影響
• ユーザーがスクロールすると移動するデザイン上の要素
• ポップアップオープニング
• ユーザーが要素をクリック/ホバーしたときに表示される情報ボックス
• ...

私は本当に好きな方法をまだ見つけていません。君たちがどうやってやるのか知りたい。

これは実際にはワークフローに依存します。最近の多くのWebデザイナーは、グラフィックソフトウェアの使用やブラウザーでの直接設計を控えていることに注意してください。このようにして、ブラウザでデザインを提示し、最終的にデザインを表示します。簡潔にする。

ワークフローのいずれかの部分で静的モックアップを使用する場合、計画しているインタラクティブなパーツを表示するためだけに、ブラウザーで小さな動的モックアップを常に作成できます。

私が通常とるオプションは、静的なビジュアルデザインよりも後の段階で、ウェブデザインにインタラクティブな要素を表示することです。静的設計に同意したら、コーディングを開始し、プレビューサイトを使用して、設計のインタラクティブな部分を紹介します。お客様の入力により、そのプレビューサイトはすぐに実際の製品に発展します。

私は、ブラウザでコーディングすることをお勧めする理由あなたの質問はある（参照：？ウェブサイトを設計する上での手順は何ですか）。サイト、アプリ、または何かで対話性を表示するための最良の方法は、それが使用されるメディアです。私は完全にサイトを開発して配信するとは言いません。私が言っているのは、設計/開発プロセスの段階を提供できるということです。

• 紙またはPDF形式の簡単な（手書きの）スケッチは、通常、ブレーンストーミングとして知られています。真面目な企業や個人の中には、アプリの表示方法についてのスケッチで覆われた4 'x 8'のドライ消去ボードを持っている人もいます。

• デバイスのテスト用のサイトの白黒のコード化されたモックアップと入札中の場合はクライアントへのデモ。私は通常、ベーコンイプサム（ベーコン参照「ウェブサイト用のLoremイプサムの代替（ダミーテキスト）」は好きではありません）をダミーコンテンツとして使用し、画像が必要な場合は、画像と言うモックアップ画像を配置します。
• デバイスのテストが完了したら、プロジェクトで具体的に要求された場合の相互作用と効果に移ります。
• サイトの色、グラデーション、深度を追加します。

インタラクティブなデザインでは、すべてがアニメーション化されている多くの「テーマ」で見つけた間違いを犯さないように提案します。私にとって、それは粘着性になり、サイトとその内容の意味を引き離します。目立たせる必要がある、または複数のコンテンツを表示する必要がある主要な領域にアニメーションを使用することをお勧めします。

これをホストする方法に興味があるなら、あなたがあなた自身のサイトを持っているウェブデザインをしているなら、私はフォローが適用されていないサブドメインをやると思います。

プレゼンテーションが印刷物である場合は、個人的にワイヤーフレームまたは最終設計案を描き、コメントと説明を付けます。そして、私はそのようなすべての可能な相互作用を提示します-例えば。

• たとえば、上部のナビゲーションバーにプルダウンメニューまたはメガメニューがある場合、開いているメニュー項目が1つあるナビゲーションバーを持つファイルをレンダリングします。
• パネルを開くシナリオがある場合、必要に応じてすべてのステップをレンダリングします。
• いつか、オンラインサンプルURL参照でデザイン/ワイヤフレームに注釈を付けます。
• ウェブページの要素はリーフとしてユーザーに表示されます。デザインにレンダリングします。

しかし、あなたのプレゼンテーションが視覚的なプレゼンテーションである場合、私はアニメーション、トランジション、サウンド、ビデオなどを使用して好きなことをします。プレゼンテーションソフトウェアの1つを使用してコンセプトを表示します。そしてこの方法はやる価値があります。あなたがクライアントに可能なすべてのやり取りを魅力的な方法で示し、設計のコピーを彼の手に保持することを心配しないでください。

UIインタラクションのアニメーションGIFを作成する傾向が最近あるようです（Dribbbleでクイック検索するとさらに明らかになります）。それらの多くはAfter Effectsを使用してまとめられていると思います。InVisionは最近、これを社内で行う方法を概説する記事を投稿しました。

これらの種類の成果物の魅力を理解することはできますが（それらは非常に魅力的で、非常に印象的で、簡単に持ち運びできます）、いくつかの面で本質的に問題があるように思われます。

1. 彼らはクライアントの観点から不正確な期待を設定しました-AEを使用すると、CSSに変換したときに実際には実現できない可能性があるあらゆる種類の視覚効果を追加できます
2. メディアクエリの意味でも、ユーザーがそれらを操作しなくても、応答しません。クライアントはホバーアクションを実際に試すことはできず、受動的に観察するだけです。
3. さらに作業が必要です。プロジェクトのある時点で、これらのアニメーションとインタラクションをCSSに変換する必要があります。単純にすべてを片付けてCSSで実行するのに、これらの要素を1つのメディアでアニメーション化するのに多くの時間を費やす必要がある

私はお勧め-そして使用-2つの異なるアプローチ：

まず、紙のプロトタイピングを使用して、高レベルの相互作用とコンテンツの関係を構築します。これにより、クライアントはプロジェクトのかなり早い段階でメンタルモデルを形成できます。私は、既存のプロトタイピングフレームワークやキット（ブートストラップのようなもの）よりも紙のプロトタイプを好みます。これらは最小限であるはずですが、それでも視覚的な影響が大きすぎるため、最終製品が実際にどのように見えるかをクライアントに気を取らせてしまうことがあります。ペンと紙のスケッチを使用している場合、これはあまり起こりません。

より詳細なインタラクション（あなたが興味を持っているように聞こえるかもしれません）には、さまざまなコンポーネントの束を持つ単純化された単一のページであるスタイルタイルを使用します。これらの優れた点は次のとおりです。

1. クライアントはブラウザでそれらを表示するので、インタラクションをテストでき、応答があることを確認できます
2. 同じCSSが最終製品/サイトで使用されます
3. CSSは、ビルド全体を通して徹底的に文書化でき、スタイルガイドの開発に使用できます。

それは私たちにとってはうまくいきます、私たちはかなり速く繰り返すことができます。もちろん、これはかなり長い間開発に費やしてきたかなり堅牢なワークフローに依存しますが、後続の各プロジェクトがどんどん速くなるにつれて、それは継続的な投資と見なしています。

これを行うためのさまざまなアプリケーションがあります。無料の優れた機能がいくつかありますが、クライアントにデモンストレーションできる機能に制限される場合があります。Invisionは素晴らしく無料ですが、モバイルデバイスの機能はデスクトップデバイスの場合よりも多くなっています。それはあなたがクライアントにリンクを送ることを可能にし、そして彼らがコメントをしそして送り返すことを可能にする。これらの人への警告の言葉。飛び込む前に、アプリケーションが必要なすべてを実行することを確認してください。

機能の完全なギャンビットを可能にする他のアプリケーションが世の中にありますが、あなたはそれらにお金を払わなければなりません。コーディングを開始する前に機能を試すことができるので、私の意見では十分に価値があります。

デザインやコードを開始する前に、Axureを使用しています。このアプリケーションは驚くべきインタラクティブなワイヤーフレーミングツールです。ロジックを含む完全なアプリケーションを構築できます。これにより、設計やコーディングを行う前に、完全なアプリケーション/ウェブサイトを構築できます。また、デザインを提示できるデモモードで起動するボタンもありました。このアプリはUXデザイナーの間でお気に入りです。

そして、私の最後の推奨事項はIndesignです。Indesignを使用すると、設計ファイルを使用して本格的な実用的なウェブサイトのデモを作成できます。ドキュメント内の他のページへのロールオーバー状態とクリックスルーをデモできます。

これらの助けを願っています。作業中のプロジェクトに費やした時間と予算に応じて、これらすべての方法を使用します。

私はインタラクションを作成してブラウザに表示することを好みます。それらを表示できるようになる前に、通常は相互作用に注釈を付けますが、Webコードの外部でそれらを複製しようとはしません。Webコード（After Effects、アニメーションGIF、Axureなど）の外部で相互作用を複製しようとすると、実際の製品で使用される実際のコードではなく、その特定のソフトウェアを中心に設計するリスクが生じます。

私はhtml / cssとjavascriptを使用して複雑な相互作用を表示することがよくありますが、変更が単純な場合は、レイヤーカンプにさまざまな状態を表示し（大きすぎるカーソルアイコンを使用）、さまざまな状態を表示します。

1. 元の状態
2. 必要に応じてマウスアイコンと注釈を表示する
3. 状態変化を表示...

それはあなたが提示しているものに依存します。

低レベルのアニメーションと体験を提示する場合は、最終製品のメディアで行う必要があります。それ以外は、近似が不十分であるか、実装不可能です。紙がどのように折り畳まれるのか、手触りや微妙な香りが画面にどのように感じられるのかを提示することは決してありません。

ユーザーとコンポーネント間の高レベルの相互作用を提示している場合、構築に膨大な時間を費やすことなしにそれらを適切に構築することはできないため、スタンドインが必要です。また、実際の媒体で行われる高レベルの提示は、ほぼ完了した、または実際には現在のプレゼンテーションのメイントピックではない低レベルの詳細に設定されている、つまり高レベルの相互作用であるという誤った印象を与えます。大ざっぱなプレゼンテーションは、クライアントを詳細に圧倒することなく、高レベルの概要を伝えます。

また、重要なのは、低レベルのアニメーションの詳細を表示するときは、それらが使用されるコンテキストに配置する必要があるということです。したがって、メニューバーを表示する場合は、表示するときに、残りのページとフレームを合わせてください。ホバー効果。フォームで使用するときに提示します。人々が現在のポイントに焦点を合わせることができるように、これらのコンテキスト要素の強調を解除するように注意してください（たとえば、色をミュートする、一般的なニュートラルイメージを使用する、lorem ipsumテキストを使用するなど）。

これらのアニメーションを最終メディアで提示することで、同時に実現可能性の調査を行うこともできます。非常に優れたデザインを約束し、クライアントがAfter EffectsでLOVEするだけで、メディアでは実現できないので、実際に配信できなくなるだけです。