UI オブジェクト

効果的な UI オブジェクトの命名およびレイアウトの実践により、可読性、保守性、パフォーマンスが向上します。このセクションでは、明確さと一貫性を確保するために UI 要素の命名、整理、設計の慣例について概説します。

UI オブジェクトに名前を付ける

ロールベースのプレフィックスを使用するのではなく、冗長性を避けながら、UI オブジェクト名を最小限かつ明確で意味のあるものにしてください。
  • 不必要な接頭辞なしでオブジェクトの機能を定義する簡潔でわかりやすい名前を使用してください。例:
    • StartAction
       の代わりに
      btnStart
    • TemperatureString
       の代わりに
      lblTemperature
    • Username
       の代わりに
      txtUsername
重要:
Object1
 や
UIElement
 のような曖昧な名前は避けてください。

グループ化と階層

グループ化とオブジェクトの整理は、共同作業環境には不可欠であり、プロジェクトの作成時に時間を節約するためにも重要です。
  • UI オブジェクトをボタン、ラベル、グラフ、コンテナなどの機能ごとに整理します。
  • より優れた構造とスケーラビリティのために入れ子階層を利用してください。
  • 冗長なプロパティを回避して、ノード数を最小限に抑えます。
  • デザイン時のみ必要となる不必要なダイナミックリンクを減らしてください。
    ヒント: このテーマの詳細については、「ダイナミックリンク」を参照してください。

サイズとレイアウト

オブジェクトのサイズと配置の一貫性を保ち、アプリケーション内でよりバランスの取れたレイアウトを実現しましょう。
  • 同種の UI オブジェクトについてサイズの一貫性を保ちます。
    ヒント: このテーマの詳細については、「グラフィックオブジェクトのレイアウト」を参照してください。
  • 相対位置 (アンカー) を使用して、さまざまな画面サイズに対応します。
  • フォントサイズなどのコンテンツ変更にウィジェットを自動で適応させたい場合は、サイズの
    [自動]
     機能を使用してください。
    ヒント:
    [自動]
     機能は、コンテンツ合わせのシナリオ向けに設計されており、コンテナがコンテンツに合わせて調整する必要がある場合や、テキストがコンテナの次元に適応する必要がある場合に最適です。
    [自動]
     をアクティブ化するには、
    [プロパティ]
     パネルを開き、
    [高さ]
     または
    [幅]
     フィールドの値を削除します。値をクリアすると、フィールドは自動的に
    [自動]
     に切り替わり、コンテンツに応じて動的なサイズ変更が可能になります。

一貫性のある設計

完成度の高いアプリケーションに一貫性を持たせましょう。
  • 色、フォント、罫線には統一されたテーマを適用してください。
  • UI 要素を揃えて、構造的でプロフェッショナルな外観を実現します。
ヒント: 詳細については、「グラフィックオブジェクト」とそのサブチャプターを参照してください。

再利用可能なタイプ

再利用可能なタイプとグローバルスタイルを使用して、UI コンポーネント間の一貫性を確保し、メンテナンスを簡素化します。
  • ボタンやテキストフィールドなど、一般的な UI オブジェクトのために再利用可能なタイプを作成します。
  • テキストやボタンにグローバルスタイルを適用して、統一性を保ちます。

間隔、配置、グリッドシステム

一貫した間隔とレイアウト配置を適用して、すっきりとしたスケーラブルで視覚的にバランスの取れた UI レイアウトを作成しましょう。
  • 8 ピクセルルールに従います。間隔と余白は 8px (8px, 16px, 24px) の単位で維持しましょう。
  • より優れた UI 構造のためにグリッドベースのレイアウトを使用します。
  • 統一感のある外観のため、一貫したパディングと余白を確保します。
ご質問やご意見
このドキュメントに関するご質問やご意見は、こちらまでお寄せください。 こちらからご意見をお寄せください。
Normal