質問: モックアップで相互作用をどのように定義しますか? 私はプログラマーであり、ux/uiデザイナーでもあります。物事をデザインするとき、私は通常、インターフェイスがどのように見えるかの静的な画像を作成します。問題は、ほとんどのuiが静的でないことです。これらはユーザー入力から変更およびサイズ変更されます。もちろん、私はインターフェースがそのような入力にどのように応答するかを正確に知っていますが、大規模なプロジェクトでは、クライアントと他のプログラマーが私のモックアップを取り、相互作用を理解できなければなりません。では、モックアップで、デザインがユーザーにどのように相互作用し、応答するかをどのように示しますか?
回答: 相互作用を説明する最良の方法は、インタラクティブなプロトタイプでモデル化することです。axureや開発中のツールhandcraftなど、さまざまなプロトタイピングツールがあります。どちらを使用しても、ポイントは、モックアップの要素を操作したときに何が起こるかをクライアントやピアなどに示すことができるということです。ただし、プロトタイプを使用してインタラクティブ性を示すと、クリック可能なモックアップを使用する場合よりもはるかに優れた結果が得られます。基本的な状態の変化をモックアップで表示することは可能であり、設計プロセスにはこれが役立つフェーズがありますが、アニメーション(特定の状況で重要)、応答性(インタラクティブ性の重要な要素)、ネイティブアプリやウェブアプリの場合は、その特定のプラットフォームを使用する「感触」。 7signals は、ワイヤーフレームをスキップしてhtmlに直接進む方法について多くのことを話します。私は ブログ投稿 を数か月前に書いて、彼らが彼らのプロセスについて説明した講演について話しました。ただし、静的モックアップを充実させたい場合は、umlのような相互作用を説明するための出発点として jakub linowskiのinteractive sketching notation が適しています。同様の議論については psdとhtmlのモックアップの賛否両論 を参照してください。 webサイトまたはアプリケーションを構築している場合、できるだけ最終製品に近い形式でモックアップを設計するため、htmlモックアップははるかに優れています。これにより、期待をはるかに簡単に設定できるようになり、最終製品で可能なことだけに制限され、柔軟性が大幅に向上します。