製品インタラクションデザイン: 実用的で美しいデザインドキュメントを作成する方法

はじめに：最近デザインドキュメントを共有しようと計画していましたが、キーノートを整理する時間がありませんでした。ここでは、デザインドキュメントのテンプレートと、テンプレート内の各要素を使用する理由と方法を共有します。以降の設計ドキュメントの共有では、分析と議論のためにさらに多くの設計ドキュメントの事例が追加されます。

さぁ行こう。

インタラクション デザイナーとして、製品の背景、ロジック、ユーザー エクスペリエンスを包括的に理解する必要があります。しかし、設計プロセスにおける非常に重要なステップである設計出力を無視することはできません。

電子メールやその他の大きなポスター形式を使用して設計ドキュメントを出力すると、製品マネージャーは理解できないと文句を言うでしょうか。開発者は使用中の効率が低いと文句を言うでしょうか。私の以前の仕事経験では、設計ドキュメントを出力するために常にInDesign + PDFという1つの方法を使用していました。以前の製品同僚や開発同僚から受け取ったフィードバックは良好でした。ここでも、この方法がテンセントの製品開発のリズムに適しているかどうかを共有し、議論したいと思います。

InDesign を使用して PDF デザイン ドキュメントを出力することには多くの利点があります。以下にいくつか例を挙げます。

1. 設計書類が整然として、読みやすさが向上します。

2. 設計文書は印刷に適しており、多くのレビュー状況では紙で読む方が効果的です。 （環境にも配慮してください）

3. すべてのシーンを 1 ページにまとめるのではなく、1 つのセクションでストーリーを明確かつ簡潔に伝えます。

4. InDesign では、テキストと画像のフォーマットを設定し、スタイルを通じて管理できるため、デザイン ドキュメントの修正効率が大幅に向上します。

5. ドキュメントのデザインはシンプルで美しく、読者がリラックスして幸せな気分になれるものでなければなりません。

6. インタラクティブ形式のメモは、設計図と組み合わせて使用​​されます。メモは包括的かつ焦点が絞られており、追加の注釈は必要ありません。

7. 完全なリファレンスとしてビジュアルデザインと連動したドキュメント出力が可能です。

8. 知識の保存と普及に役立ちます。

9. デザイナーは、製品設計プロセス全体を通じて設計ドキュメントを作成および維持することで、強い所有感と達成感を得られます。

最後に、ここで言及する設計ドキュメントは、製品設計が完了した後の要約や要約ではなく、設計者の作業プロセス全体を貫く唯一のアウトプットであることを強調したいと思います。

このデザインドキュメントテンプレートも変更可能です。デザイナーは自社製品のニーズに合わせて柔軟に変更できます。テンプレートに固執しないでください。

さあ、掘り始めましょう。

これは最初のページ、ドキュメントの表紙です。ドキュメントの表紙は、すべてのドキュメントの最初の表示です。この設計ドキュメントの基本情報を明確に伝える必要があります。 InDesign では、ページの上部をメイン テンプレートとして設定して、ドキュメント全体をサポートできます。

A. ドキュメント作成者のロゴ。設計ドキュメントがどのチームからのものなのかを示します。

B. チーム名またはプロジェクト名、およびドキュメント情報を再度表示します。

C. メインタイトル: このタイトルは製品の名前であり、ドキュメント全体にわたって表示されます。

D. バージョン番号は重要です。設計文書は厳密なバージョン管理が必要です。変更時刻は読者に文書の最新の更新を伝えることができます。もちろん、必要に応じて設計者の名前、ID、電子メール情報などを追加することもできます。

E. ページ番号は、特にリモート会議中は重要な位置情報となるため、目立つ位置に配置する必要がります。

F. 最初のページにはあまり多くの情報を載せないでください。読者の集中力を保つために、タイトルだけを載せるのがよいでしょう。F と C が同じになることもあります。

2ページ目は変更記録です。継続的に更新される製品設計ドキュメントには変更記録が欠かせません。開発者、製品管理者、設計者は変更記録に基づいて各バージョンの変更内容をすぐに把握できます。たとえば、この例では、7 月 12 日に 6 つのポイントが変更されました。変更記録がない場合、開発者は 100 ページのドキュメントを読んでどの部分が変更されたかを理解するのに 1 時間かかる可能性があります。

A. 変更記録は文書の 2 ページ目に記載する必要があり、これは非常に重要かつ価値があります。

B. コンテンツエリアの焦点は、変更日と変更内容の簡単な説明です。変更内容は、まずバージョン番号を示し、次に読者が簡単に確認できるように変更された部分とページ番号を記載する必要があります。

これは3ページ目、目次です。

A. 目次は設計書全体の索引であり、3 ページ目の重要な位置に配置されます。

B. InDesign で PDF を生成した後、PDF を使用してこのページの各インデックスをリンクに編集し、読者がこのページで読む必要があるページに簡単に直接ジャンプできるようにします。

これはページ 4: セクションです。設計ドキュメントを完全に開発する前に、各段落でどのようなストーリーを伝えるべきかを考えます。製品がどんなに複雑であっても、機能、シナリオ、ユーザー グループなどの要素に基づいて複数のストーリーに分割できます。すべての設計ドキュメントでは、製品マネージャー、開発者、デザイナー、マネージャー、ユーザー グループ向けにストーリーラインをどのように分割するかを検討する必要があります。理想的には、ストーリーの分割は、すべての人のグループに対応できる普遍的なものである必要があります。

A. テンプレートに書かれている通り、一度に 1 つのストーリーを伝えます。

これは5ページ目の内容です。コンテンツ領域には、豊富で多様なコンテンツが表示されます。ここではスタイルのみを示しており、スタイルを分析した後、ドキュメントに追加できるコンテンツをいくつか追加します。

A. サブタイトル。物語の名前でもあります。たとえば、ユーザー向け製品の一般的なタイトルは「QQ Beautiful Life」であり、サブタイトルは「Beautiful Life - Healthy Summer Drinks」のように、ストーリーの明確なサブセットになります。

B. 各設計図にはタイトルを付ける必要があり、リモート会議ではタイトルと数字を組み合わせることでコミュニケーション効率が大幅に向上します。

C. InDesign では、主に 2 つの方法でデザインを作成します。1 つは InDesign で直接デザインを生成する方法、もう 1 つは PSD ソース画像を直接 InDesign に配置する方法です。 1 つ目の利点は、InDesign のすべての設計図に統一されたスタイルを適用し、均一に変更できることです。 2 つ目の利点は、PSD はより明確なインタラクションと視覚的なイメージを出力でき、InDesign はパスを記録できることです。将来の変更では、ソース PSD を直接変更してから、InDesign ドキュメントを更新して、ドキュメント内のすべての PSD イメージを更新できます。

D. メモ領域は、メモが必要なすべてのページに適応されます。これは非常に重要であり、製品マネージャー、開発者、デザイナーが互いに質問し続ける時間を大幅に短縮できます。

E. 製品マネージャーや開発者への質問をメモに記録することもできます。各レビューでは、ドキュメント内で注意が必要なポイントを直接マークし、会議後に設計者の修正記録を直接作成できるようにします。たとえば、「これらの 6 つのグラフは 2 秒以内に抽出する必要があり、開発者に確認する必要があります。」

まとめ - - - - - - -

現在、私たちが提供しているのは、基本的なテンプレートと InDesign のデザイン エクスペリエンスのみです。設計ドキュメントではさらに多くのことが可能になります。たとえば、ビジュアル デザイナーと協力して、インタラクションとビジュアル デザインの両方を 1 つのドキュメントに記録できます。インタラクション、ビジュアル、フロントエンド開発コードを 1 つのドキュメントにまとめて記録することもできます。

PDF が生成されると、iPad などのモバイル デバイスに取り込むことができるため、上司と一緒に歩きながら 5 分以内にいくつかの優れたアイデアを説明するのに役立ちます。

ドキュメントの設計が難しいのは、最初にドキュメントを構築するのに多くの時間と労力がかかることです。しかし、ドキュメントの構造がいったん確立されれば、メンテナンスの労力は予想よりも少なくなります。その後の出力ごとに、ドキュメントを作成したデザイナーだけでなく、それを読む製品マネージャーや開発者も満足するはずです。 :)

まとめ - - - - - - -

以下は私が過去に制作した設計書の例ですので、ご参照ください:)

読んでくれてありがとう

（この記事はTencent CDC Blogからの引用です。転載の際は出典を明記してください）

原題: 製品インタラクションデザイン: 実用的で美しいデザインドキュメントを作成する方法

キーワード: 製品、インタラクション、作り方、実用的、美しい、デザイン ドキュメント、序文、準備、ウェブマスター、Web サイト、Web サイトのプロモーション、収益化