Wizardコンポーネント-現在の状態とアクティブな状態

Question

このシステムは、テストの実行に使用されます。

各テストは、ユーザーによるシステムの操作を含むいくつかの段階を経る必要があります。つまり、各ステップには専用の画面もあります。

システムには、2つの目的を実際に果たすウィザードコンポーネントがあります。

テストの現在のステータスを示します。テストが常に1つのステータスで行われます。
さまざまなステップ間を移動して、その内容を表示できます。ユーザーは完了したステップをクリックして、現在のテストステータスを変更せずに情報を表示できます。つまり、監視のみです。たとえば、テストをステップ3/4にすることができますが、ユーザーはステップ1をクリックしてそこで情報を表示できます。テストはステップ3にありますが、ステップ1はアクティブです。

ジレンマ：コンポーネントは実際にはウィザードとしても、一種のタブシステムとしても使用されるため、アクティブなステップと現在のテストステップの表示が混同される可能性があります。

質問-

ウィザードUIコンポーネントを使用してタブと同様の方法でナビゲートする研究を知っている人はいますか？
2つの状態の区別は、ビジュアルデザインを効果的に使用することによってもできると思います。そのようなコンポーネントのビジュアルデザインの良い例を知っている人はいますか？
他の考え？代替案？

DaveAlger · Answer

一致するラベルと色を使用する

未完了のタスクを灰色で表示すると、作業中のタスクがハイライト表示され、別の色で表示されている場合は完了します。

選択されたものと実行されたものにユーザーを結び付けるいくつかの方法を次に示します。

出典： X Planet

moot · Answer

あなたの例と質問から、マテリアルデザインステッパーはあなたの質問をカバーします。例で明確に説明されており、マテリアルデザインのすべてがテストの産物です。

それはあなたの特定のナビゲーション質問をカバーします。

Yoav Barak · Answer

ループを閉じるために-これは最終的に私がやったことです。

4番目の例では、テストがすでに3番目のステップにあるときに、ユーザーが完全なステップ（経路を選択）を表示している挑戦的な状態を確認できます。