web-dev-qa-db-ja.com

サイドバイサイド、スタックド、または他の何か?

CMSのプロパティマネージャーモジュールを作成しています。フォームの1つは非常に基本的なものですが、フォームに最も適したレイアウトを取得するのに問題があります。

以下は2つの可能なレイアウトのスクリーンショットです。3つ目は、エディターを別のタブ([イメージ]タブと同様)に配置することですが、最初のタブは欠けているように見えます。

並べて: フルサイズ

Side by side


積み上げ: フルサイズ

Stacked

5
Hailwood

オプション2を使用すると、さらに柔軟に対応できます。要件が変更され、「プロパティ」コンテンツタイプに追加するプロパティがさらにある場合、オプション2は新しい要素を展開するための十分なスペースを提供します。

オプション1は、テキストボックスやブール値などの単純なプロパティがあり、持っているものに加えて1〜2を超えない場合に適しています。

しかし、プロパティにガレージがあるかどうか、ガスや電気の熱があるかどうかなど、「機能」チェックボックスリストを追加する必要がある場合は、サイディングまたは屋根でできている材料の種類を教えてください。

所有者による売り、空売り、オークション、または不動産業者による売りかどうかのラジオボタンリストを追加する必要がある場合はどうでしょうか。

CMツールに関しては1つの定数が変更されるため、現在の例の要素だけでもオプション2を使用します。

追加する要素がさらにいくつかある場合は、オプション2の余地があります。

追加する多くの新しい要素がある場合は、ページスクロールナビゲーションの左側の列 this を使用して、関連する要素をグループにグループ化できます。しかし、それでも、最初からユーザーに教える、すべての項目がスタックされた垂直方向のパターンが維持されます。

6
Charles Wesley

最初のレイアウトが最適だと思います。すべてが1か所にあり、どこに何があるかについての混乱はありません。画像のような別のタブにテキストエディターを非表示にすると、プロセスの大部分が非表示になります。あなたは常にメインのアクションを前面に出し、中央に置きたいと思っています。ユーザービューからアクションを切断しないでください。

オプションを並べて配置すると、投稿ユーザーの生活が非常に簡単になると思います。

お役に立てれば! :)

3
HeyCameron

これはis CMSであり、フォーム要素の数はページごとに異なる可能性があるため、スタックレイアウトの方が適していると思います。ただし、次の場合は、よりクリーンでまとまりのある外観にすることができます...

  1. フォームコントロールに2番目の列を追加します。トグルをそこに移動すると、フォームを少しまとまりのあるものに見せながら、耳障りな空白が失われます。
  2. できるだけ多くのテキスト形式のコントロールを非表示にします。現在、ページはボタンの混乱のように見えます。ユーザーが最もよく使用するもの(おそらく基本的なテキスト形式+画像)を把握し、残りを[詳細設定]または[詳細]ボタンの後ろに配置します。
1
Mr. S