web-dev-qa-db-ja.com

1つのページでさまざまなアクションのコントロールを提供する方法は？

これはCMS用です。ユーザーは、単一ページのテーブルを追加、削除、更新、および検索できる必要があります。

enter image description here

ボタン

最初はADDが表示され、
edit pencil iconをクリックするとUPDATEボタンのみが表示され、
チェックボックスがオンの場合、DELETE SELECTEDボタンのみが表示されます

「編集用のメッセージ/フォーム」ボックス

  1. すべてのアクションの確認が表示されます（LikeRow（s）Deleted Successfully！）
  2. edit pencil iconのクリックで更新するための事前入力されたフォームが表示されます
  3. テーブル内のそれぞれのheadingをクリックすると、その行の情報が表示されます

ここで、ページなしcrowdingなしで検索コントロールをどこにどのように適合させますか？検索は複数のパラメーターに基づいているため、複数の入力があります。何かアイデアはありますか？現在のレイアウトについての考えも歓迎します。

formstableswireframe
1
user36789

デザインのいくつかの考え。

  • すべて選択/選択解除アクションのコントロールとして選択ヘッダーを使用する
  • 見出しとリンク列を組み合わせる
  • 珍しい/危険なアクションを各行から削除し、選択のみに適用することにより、再編成します。ミスやスリップを排除するために長いパスを作成します
  • 追加、編集、詳細検索のポップアップダイアログを使用して、複雑な相互作用を分離する
  • 選択した行の選択に近い追加情報を表示します（上部の固定位置ではなくインプレース）。
  • 消えるメッセージを使用します。それらはコンテンツと重なりますが、自動的に消えるか、ユーザーによって閉じられます。より自然なだけでなく、スペースも節約できます。
  • 隠されたルールを発見するためにより多くの認知的負荷が必要になるため、主要なツールを隠さないでください。

enter image description here

2
Alexey Kolchenko

  1. 検索基準を紹介します。ユーザーは、条件に一部またはすべてのフィールドを入力して、検索ボタンをクリックできます。下のグリッド/テーブルは検索ボタンがクリックされるたびに更新されます。

  2. グリッド/テーブルの行を選択すると、行の詳細が下のDetailsフレームに表示されます。

  3. ユーザーがレコードを追加する場合、彼は新規ボタンをクリックします。空白の詳細フレームが表示されます。ユーザーが詳細を入力した後、彼は追加ボタンをクリックします

  4. ユーザーがテーブルの任意の行で削除オプションを選択すると、対応する行の詳細が詳細フレームに表示され、ユーザーは選択項目の削除ボタンをクリックして最後にレコードを削除します。

  5. ユーザーがテーブルの任意の行で編集オプションを選択すると、対応する行の詳細が詳細フレームに表示され、ユーザーは作成後に更新ボタンをクリックできます既存の詳細への変更。

これが役に立てば幸い...

enter image description here

0
rags