web-dev-qa-db-ja.com

ステップ内のステップの進行をどのように表現しますか?

steps within steps

3つのメインステップの進行状況を表示し、次に各メインステップ内の4〜10のサブステップを表示するかなり複雑なウィザードを作成する必要があります。左側にサブステップを垂直に配置するのは理にかなっているように見えますが、メインステップの下の上部で水平に実行する必要があるという要件があります。どのステップも選択できないため、先にスキップしたり戻ったりすることはできません。ステップは、他の複数の小さな機能が発生する可能性がある個別の機能を構成します複数の写真をギャラリーに繰り返しアップロードする。

これを視覚的にどのように解決しますか?私が参照できる実用的な例はありますか?

UXの混乱に巻き込まれたUIデザイナーから事前に感謝します!

5
Mopo123

Material Design-Steppers をご覧ください。ステッパーを別のステッパーの中に組み合わせると混乱を招くため、お勧めできません。

ステッパー内にステッパーを埋め込んだり、1つのページで複数のステッパーを使用したりしないでください。

あなたが変更するオプションがないので、私がお勧めします:

  • 同じステッパーですべてのステップを結合します。これは理解しやすいかもしれませんが、長くなる可能性があります。マテリアルデザインでは、ステップ数が長すぎる場合は、モバイルのプログレスバーを使用することをお勧めします。

  • 各レベルで異なる種類のステップを使用します。プロセス全体またはその逆の進行状況バーを使用できます。

1
Alvaro

この問題は、パンくずリストを使用することで解決されました ドリブルリファレンス そして、モバイル上のGoogle写真には、パンくずリストにスライダーがありました。ただし、この方法で使用することは好ましくありません。最良の例は、Android設定>メニューがAndroidで現在の状態を表示することにより、さらに深く進み続けることです。

1
Harshith

いくつかの提案:

  • (1- =)を超えてラベル付けされていない限り、everyサブステップを表示することの価値はわかりません。これは要件ですか?あなたはこれに反論したいと思うかもしれません。

  • ネストされた番号付けは混乱を招きます。主なステップは3つしかないので、番号の代わりにラベルを付けることができますか?

  • コンテンツペイン内でサブステップインジケーターを移動して、「より近い」関係を表示します。これは、フォーカスポイントではないメインステップとは対照的です。

enter image description here

1
Bowen