web-dev-qa-db-ja.com

リストアイテムの現在の状態/アクティブな状態の規則

現在アクティブな状態になるアイテムのリストがあります。たとえば、それは優れた仕事のリストだとしましょう。しかし、現在取り組んでいる仕事と、やるべきことを区別する必要があります。

次に、同じモックアップの3つの例を示します。

enter image description here

1 (Left)

異なる色とテキストラベルを使用して、これが現在の仕事であることを明確にします。これで基本的にはうまくいくと思いますが、テキストがなければ、それが私が取り組んでいた仕事だったと自動的に想定することはできません。 「経過時間」も追加したので、この「ジョブ」がアクティブである時間を確認できます。

2 (Middle)

現在のアイテムをインデントし、他のアイテムと区別するためのインジケーターを追加しますが、それが現在のアイテムであることを直感的な方法で正確に伝えるわけではありません。

3 (Right)

アクティブな要素を下にドッキングしました(おそらくフィルターの上にある可能性があります)。これを行うと、常に現在のアイテムが画面上に保持されますが、その場合はコンテキストが失われます。


類推としてタブを使用すると、アクティブなタブは通常大きくなるか、さらに「前方」になり(確かに変形型のデザイン)、それが表すコンテンツに流れ込むことはほとんどありません。

リスト内の現在/アクティブな状態を強調表示する標準または従来の方法はありますか?それとも私は全体を考えすぎていて、色だけで十分ですか?

1
Chris Spittles

最初のオプションは、コントラストのためにユーザーがすぐに変化を確認できるため、ユーザーにとって最も直感的だと思います。

真ん中の2番目は少し見えにくくなりますが、3番目のオプションはアクティブな要素を見つけるのが非常に困難になります。

ユーザーは最も注意を払わないリソース(視覚的な検索)を使用して強調表示された要素を見つけるなので、最初のオプションを使用することをお勧めします。

2

オプション1と3をマージしてみてください

進行中のタスクのドッキングされたアイテムは、リスト内の進行中のタスクアイテムがスクロールされて表示されなくなった場合にすばやくアクセスするのに役立ちます。オプション3のように、メインリストからそれをなくさないでください。ただし、追加して、色/アイコン/テキストで区別する必要があります。アクティブなタスクであることを示すドッキングされたアイテムと組み合わせると(以下の例を参照)、メインリストのアイテムの色を変更するだけで済むようになります。そうでなければ、色だけに頼ることはできません。

また、オプション1をそのまま使用した場合、アイテムは単にUIでアクティブなアイテム、つまり最後にタップされたアイテムなどのように見えます。


曲の再生中にSpotifyがどのようにドッキングされているかを考えて、曲にすばやくアクセスできるようにします。ただし、メインのスクロールビューの曲リストから曲が消えることはありません。あなたの状況でクイックアクセスが便利だと思われる場合は、そのオプションを試してみます。

enter image description here

0
Dave Haigh