web-dev-qa-db-ja.com

モバイルフォーム+マスター/詳細リスト

私は現在、レビューに関連するすべての情報を1つのコンテキストでのみ表示する必要がある自動車のレビューアプリに取り組んでいます。レビュー構造は、4つのフィールドのフォームとセクションのリストに基づいており、各セクションの項目を詳細に説明できます(下の画像を参照してください)。モバイルアプリに関して、推奨される構造は何ですか?私は自動車のレビューを3つのタブに分割することを考えていましたが、2つのリストが同じ「情報レベル」にないため、これは私にとって最良のアプローチとは思えません。

mockup

2
Samuel Waskow

非常に少量の詳細情報の場合、詳細を表示する標準的な方法は、「インテリア」の横に+を付けることです。これをクリックすると、追加の詳細を表示するために下にスライドします。

情報量が多い場合は、「内部」の横に矢印(画面の外に出て別の画面が利用可能であることを示す)を付けると、クリックすると別の詳細画面に移動します。

編集:

「一般」を「カテゴリ」にリンクするには、ユーザーが概要を離れて、より高度な/詳細なオプションを見ていることを示す何らかのアフォーダンスが必要です。これを表す一般的な方法は、省略記号を使用することです。

省略記号は、省略や未完成の考えのために英語で使用される一般的なマークであるため、うまく機能します。認知レベルでは、ユーザーはエリプシスアフォーダンスを理解し、まだ表示されていないタスクを完了するために利用できるオプションが他にもあることを意味します。省略記号は、アクションが即時ではないことをユーザーに通知します。これにより、ユーザーはボタンまたはメニュー選択をクリックして、その背後にあるさまざまなオプションを調べることができます。 Ellipsisアフォーダンスがない場合、ユーザーはすべてのアクションと選択が即時でないと想定します。

完全な記事 ここ

一般的な画面の下部に、「詳細...」、「詳細...」、または「カテゴリ...」というボタンを配置できます。

2
Franchesca

あなたがしている小麦は正しいアプローチです。これはガイド付きアプローチになります。いくつかの小さな改善により、ユーザーインタラクションを強化できます。

  1. 前のページラベルが付いた戻るボタン
  2. すべてのページとヘッダーに保存ボタンが表示されますが、ユースケースに保存ボタンは必要ありませんか?必要に応じて、ユーザーが決定してプロパティを変更したページに配置する必要があります。添付画像で私の提案を見てください。

enter image description here

0
Rupesh Nath