web-dev-qa-db-ja.com

IxD / UIデザインパターンを文書化するための業界標準？

デザインパターンを文書化する業界標準の方法は何ですか？

私は i-patterns.com や patternry.com のようなWebサイトを見て、デザインパターンをホストして共有していますが、デザインパターンを再利用して作成する場合、標準化された方法があります。スクリーンショットと説明だけではなく、そのパターンを文書化しますか？

たとえば、次の "Slideshow Pattern" on UI-Patterns のスクリーンショットと説明は次のとおりですが、「プロのやり方」ですか？

これらのスクリーンショットと説明を含むある種の図があるべきではありませんか？

Design Patterns

design-patternsux-fielddocumentation
8
Andy Fleming

私たちはこの構造にある程度従います（ソフトウェア設計で再利用可能なコンポーネントを文書化するプロセスの適応を認めます）

パターン名と分類-パターンの短い、意味のある名前、名前は、パターンの使用とアプリケーション、および定義済みの用語。たとえば、デザインパターンがカルーセルのアダプテーションである場合、単一の左スクローラーカルーサルと名付けます。

スクリーンショット-ほとんどが高忠実度のものですが、パターンの感じ方の定義のレベルに応じて、低忠実度のものもあります。

問題ステートメント-デザインパターンが解決しようとしている問題と制約の一般的な説明。私たちは通常、そのようなニーズが存在するユースケースシナリオを定義し、ユーザーがパターンを使用してそれを処理する方法を定義することによって、これを行います。問題の説明は、パターンを適用できる状況を認識する際に他の人を支援するためのガイダンスを提供する必要があります。

技術設計仕様-これはより技術的な側面ですが、ここでは通常、それがどのように実装されたかなどの詳細を強調します（例：Jquery、ASP.NET） 、Webパーツ）、それをシステムに統合する方法、および関連する依存関係は何か（どこから情報を取得するか、特定のJqueryファイルが必要かなど）

結果-これは通常、パターンを適用した結果とトレードオフの説明です。代替バリエーションとオプションも強調表示されています

既知の用途-実際のシステムおよびパターンを適用できるシナリオでのパターンの例。

設計パターンがかなり大きい場合、または多数の「可動部品」がある場合は、それらの「可動部品」のそれぞれの機能を強調する表も作成します。テーブルのフォーマットは次のようなものです：

enter image description here

グーグル検索はこれを持ち出しました layout これは私の意見では素晴らしいです：

  • 名前
  • スクリーンショット/作業ソリューション
  • これはどのような問題を解決しますか？
  • このパターンを使用するタイミング
  • このパターンを使用する理由
  • 特殊なケース
  • パターンライブラリ

レイアウトの他の例： カルーセルUIパターン

6
Mervin

デザインパターンを文書化する「正式な」方法は実際にはないと言われていますが、これは効果的なフォーマットのようです。

  • パターンのタイトル
  • パターンの他の名前
  • スクリーンショット
  • 図
  • コンテキスト
    • それが解決する問題
    • いつ使うか
    • 使用しない場合
  • 使い方
  • 追加リソース
    • リンク集
    • 例
    • コードスニペット

私が特に「そこに」見たことがないのは、本当に追加した唯一のものはダイアグラムです。デザインパターンの多くの説明には、パターンの構造や相互作用を示す何かが欠けているように感じます。

1
Andy Fleming