web-dev-qa-db-ja.com

大きなテーブルとフォームを1つの中央レイアウトに配置する

私は現在、レイアウトを中心とした非常に複雑で成長しているウェブサイトを開発しています。これらはいくつかのレイアウト規則です:

  • テーブルの幅はデフォルトで768pxですが、不可能(オーバーフロー)の場合は、テーブルを全幅に拡大する必要があります。
  • 他のすべての要素は中央に揃えられます。

そしてここに問題があります:

enter image description here

テーブルの位置に関係なくフォーム入力を中央揃えにすることは良い方法ですか?また、タイトルを入れるべきですか?表もフォームの一部なので。現在のようにすっきりしているように見えるかもしれませんが、次のようにデフォルトの外観からあまりレイアウトを変更したくありません。

enter image description here

または、このレイアウトを美しくする方法を他に考えていますか?助けてくれてありがとう。

編集:何らかの理由で家のどこにも表示されないので、これについて報奨金を出します。このような複雑なフォームでソリューションがうまく見えるようにしたい:

enter image description here

編集2:これがフォームの配置を中央揃えにする最後の試みです。単純なセクション化されていないフォームでは非常にうまく見えますが、列番号が異なるセクション化されたフォームでは、非常に醜く見えます The "fine" layoutThe ugly layout これで行き詰まっているので、フォームのレイアウトを左揃えonlyにすることを検討しています-フォームは1〜3列とテーブル。それは良い習慣ですか?

これを解決する他のアイデアはありません。助けてください。

1
Dolorosa

私の当面の考えは、特にあなたのウェブサイトがより大きくより複雑になるので、あなたは単純化する必要があるということです。複雑なソリューションをロックインすると、ほぼ確実に複雑さを継承する依存関係が作成されるため、最善の戦略は、できるだけ簡単に試すことです。

フォームとテーブルの配置に関しては、2つの基本的な戦略があります。

A.テーブルを作成し、(同じページで)2つの異なる要素を形成するOR

B.テーブルとフォームをリンクします(ポップアップまたはテーブルUI要素の拡張など)。

決定を行う際の考慮事項:

  • フォームは大きく複雑になりますか?その場合、両方の画面スペースを見つけることは困難です(スクロールしないと)。
  • このサイトはモバイルデバイスで使用されますか?その場合、ポップアップを実装するのは簡単ではなく、データ入力中に不快な遷移に頼らなければなりません。
  • テーブルのロジックと入力は明確で、いくつかのアイテムに限定されていますか?それ以外の場合、それらを分離すると、入力プロセスがより複雑になります

オプションAに関しては、通常、情報を入力する前に表を事前に参照する必要がない場合は、入力フォームを表の一番上に置く方が論理的です。ただし、新しいエントリを追加する前に重複や詳細を確認する場合は、表の後にフォームを配置する方が理にかなっています。

オプションBを使用すると、ポップアップフォームを作成してテーブルに新しいアイテムを追加する通常のトリガーを検討できます。または、ユーザーがテーブル自体に情報を直接入力できるようにすることもできます(つまり、表示モードと編集モードを切り替えます)。

フォームの入力フィールドの配置については、フォームの複雑さ(ほとんどのフィールドが複雑な場合はおそらく中間配置ではない)、複雑なフォームの数、人々がそれらを使用する頻度と重要な機能に使用されます。フォームの入力フィールドの配置がユーザーの操作方法にどのように影響するかについて、いくつかの一般的なルールがあります。経験則は、最初に一貫性を保ち、必要に応じて規則を破ることです。

おそらく、フォームのタイプ(およびそれらの十分なタイプ)の良いアイデアがある場合は、複雑なフォームをページの一部にして1つのタイプのレイアウトを作成し、シンプルなフォームをポップアップにして、異なるタイプのレイアウトを作成できます。ユーザーが特定の機能をトリガーしたときに何が起こるかを知っていること。

2
Michael Lai

フォームの複雑さに応じて、給与テンプレートを追加/編集するときにポップアップ/モーダルを開くことを検討できます。これにより、ユーザーはモーダルで情報をすばやく追加または編集しながら同じページにとどまることができます。これは、メインページをよりクリーンに保ちながら、ユーザーにとってはより速くなります(ページ上のフォームを表示/非表示にする必要はありません)。

モーダルを開く場合、タイトル、ラベル、フォームフィールドを2番目の画像のように左揃えのままにすることができます。

フォームをより複雑にすると、操作するためにより多くの画面領域が必要になる可能性があるため、このアプローチはあまり役に立ちません。

1
Jon Wellman