Webサイトで階層データを使用するMetroフォームUIのレイアウトに関する推奨事項はありますか？
Metroデザインに関して私が見つけたガイドラインのほとんどは、テキスト入力コントロールがほとんどない読み取り専用またはメディアコンテンツを扱っています。階層データ（つまり、ネストされたグループボックス/セクション）および潜在的に多数のさまざまなタイプの入力コントロールを含む入力フォームの適切なレイアウトを示す設計ガイドライン/例/スクリーンショットはありますか？.
また、これはWebサイトになるため、対話は主にタッチではなくマウスで行われることにも触れておきます。でもタブレットにも使われるのでメトロルックにしたいです。情報は1つの垂直方向にスクロール可能なページにある必要があります（つまり、これはウィザードではありません）。
データのタイプの例：
- 一般情報
- ファーストネーム
- 苗字
- 年齢
- 連絡先
- 電話番号（さまざまなタイプの追加/編集/削除）
- ホーム
- 作業
- 細胞
- アドレス（さまざまなタイプを追加/編集/削除）
- ホーム
- 通り1
- 2丁目
- 市
- 状態（ドロップダウンリスト）
- 郵便番号
- 作業
- 学校
- ホーム
- 電話番号（さまざまなタイプの追加/編集/削除）
- グループA
- その他のフィールド
私は現在、テキストボックスの上にあるラベルを好み、コントロールの右側のヒントを助けています。データを視覚的にグループ化する方法（見出し、アウトライン、塗りつぶし、マージン）がわからない。
Metroのコンテキストであっても、フォームレイアウトに対するすべての解決策はありません。 Metroは別の デザイン言語 は、styledに似ていると想定されているが、必ずしも同じようにレイアウトする必要がない場合があることを意味します。
同様に、MetroスタイルのWebサイトにはガイドラインがないことに注意してください。
テキストボックスの上のラベルについてのあなたの考えについては、（私が見つけることができた）明示的に述べられていないが、それはしばらくの間彼らが傾いている方法であり、ガイドラインのスクリーンショットのほとんどすべてはそのようにフォーマットされたフィールドを持っています。 テキスト入力に関するWindows 8のガイドラインを考慮してください 例として。これは主にモバイルアプリケーションで見られますが、Microsoftの新しく再設計され、メトロ化されたWebサイトでは、あまり長い形式がないためあまり見られません。代わりに、ショートフォームの右揃えのラベルに傾いています。上部の配置がどのように優れていると考えられるか、フォームが大きいかどうかを確認できます。
Webアプリケーションの他の場所で一般的に使用するのと同じフォームガイドラインを考慮する必要があります。両方に適用される概念は、Metroの様式化されたWebサイトにも適用されます。ただし、検討する必要があるのは Windows 8シルエットとそのグリッドシステム で、デスクトップアプリ全体と一部のコンテンツ領域の特定のマージンを定義します。それとそのサイトに含まれている他のガイドラインを読むと、Metroのコンテキストでレイアウトを大幅に支援することができます。
これらの概念をレイアウトに適用する例は、すべての入力フィールドを分割する方法です。一般に、多くのフィールドがある場合、それらをセクションに分割し、一部のセクションが別のページに表示されることがあります。 Metroとあなたの例のコンテキストでは、おそらくそれをセクション/ページ（フォームのより大きなカテゴリにマップされます）に分割して、ユーザーが画面や画面に相当するデータをスクロールする必要がないようにします。セクションが展開または縮小する可能性があります。
ここで注意すべき主な点は、現時点ではMetro化されたWebサイトの明示的なガイドラインが実際にあることです。 Windows 8とWindows PhoneのMetroガイドラインを読んでから、それらの概念と一般化を適宜Webに移植してみてください。
実際に適用できるMetro Design Style Guideには多くの例があります（これも問題の一部です）。私の頭の上からの例のいくつかは次のとおりです。
- 左側の垂直メニューと右側のコンテンツウィンドウを使用して、左から右、上から下の階層を表示するOffice 2013ファイルタブ
- Microsoft OutlookまたはOutlook.com（Hotmailなど）のインターフェース。これも同様の階層を使用しますが、階層のレベルが高くなります。
- Metro UI Listviewのデザインスタイルですが、追加の階層レベルを適用する方法を考え出す必要があります。これは、非常に深いレベルのコンテンツネストを使用してはならないアプリ用にのみ設計されているためです。
デザインスタイルの非常に一貫したアプリケーションが本当にあるかどうかはわかりませんが、それはMetroデザイン言語の性質であり、意図したルックアンドフィールを実現するために、ユーザーインタラクションと強力なIAとデザイン要素の簡素化により依存しています。 。
私が持っている最も良い例は、Windows 8のコントロールパネルです。
Windowsから取得した画像 Windows for Devices
基本的な考え方は、トップレベルのナビゲーションはスクロール可能なリストであるということです。 1つを選択すると、それ以降の階層がタイポグラフィで達成されます（たとえば、[プライバシー]> [アプリの履歴]> [履歴にあるアプリの数]）。
フォームの長さによっては、これでもやり過ぎかもしれません。あなたが説明しているのは単純な視覚的階層であり、Metroはタイポグラフィ（ケース、フォントサイズ、リーディング、および空白）を使用してほぼ定義しています。