web-dev-qa-db-ja.com

小さな画像/アイコンの除去のためのアフォーダンス

比較的狭い列に配置すると、次のような画像/アイコンの積み重なったコレクションがあります。

Stacked icons

これらは1つずつ削除できます。現在、これを行う方法は、画像を暗くして赤い十字を重ねることで、この画像(再作成は不十分ですが正しくスケーリングされています)に似ています。

enter image description here

どうしようもないのですが、これを行うには最善の方法ではないと思います。

それぞれの下にクロスを配置するか、おそらく右上隅に部分的にオーバーレイを配置することを検討しましたが、これにより、それぞれが占めるスペースが増えます。

私が見逃している代替案はありますか、それとも余分なスペースを使用する価値がある削除のためのアフォーダンスですか?

1
Dan

「ビッグプレーヤー」がこれらのタイプのやり取りをどのように処理しているかを常に確認したいと思っています。彼らは通常、最も完璧なソリューションを思いつくための時間とリソースを持っていました。

この例では、Googleの写真アプリについて考えています。削除(または画像に対して他のアクションを実行)するには、チェックマークの付いた小さな円を押して画像を選択する必要があります。 1つまたは複数の画像を選択すると、ヘッダーに削除オプションが表示されます。これにより、一括削除も可能になります。

このパターンはあなたの状況に非常に当てはまると思います。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

画像やアイコンを選択した状態にし(境界線を追加するなど)、選択したときに削除オプションを表示します。

発見の可能性が心配な場合は、ユーザーが画像やアイコンを削除できることがわかっていれば、いつでも元に戻すことができます。
「画像の削除」リンクまたはゴミ箱アイコンを表示します。クリックしたら、画像/アイコンの状態を変更して、クリックしやすく表示します。かろうじて見える境界線を追加し、選択したときにそれを色付けする(または透明度を低くする)ことによって、これを実現できます。

1