web-dev-qa-db-ja.com

モバイルサイトで画像をクリックできることをどのように示すことができますか?

ポートフォリオページを含むモバイルサイトを作成しました。デスクトップ版では、画像の上にマウスを置くと、マウスポインターが指に変わり、画像がハイパーリンクされていることを示します。

モバイルで同じ効果を得ようとするために、ハイパーリンクされたすべての画像の上に「小さな脈動する指のポインター」を配置しましたが、しばらくすると煩わしく感じられます。

もっと良い方法はありますか?

3
Naz

画像の隅にある色あせた「指のポインター」アイコンを使用しましたが、適切な量の色あせではそれほど煩わしくありません。 「脈動するもの」も試しましたが、それが煩わしさをもたらしました。色あせたものの悪いフィードバックを聞いていないので、それは私の聴衆とのテストに少なくとも合格しました。したがって、一部の画像がタッチスクリーンでクリック可能であることを誰もが自覚できない場合は、色あせたヒントを利用できます。

2
Samuel M

タッチスクリーンを備えたモバイルデバイスのユーザーは、妥当なサイズのすべてのオブジェクトをクリックできると考える傾向があります。モバイルアプリを見ると、ほとんどの画像がクリック可能であることがわかりますが、通常はそれを示すものはありません。

4

ほとんどのタッチユーザーはページ上のほとんどの画像をリンク可能として表示することに同意しますが、画像の背後の影と画像の周りの細い白い境界線は、ページからの目に見える分離を作成します。

点滅する指は私を悩ませます。

1
Steven Carlton

画像にはアフォーダンスを与える必要があります。 Webには多くの記事がありますが、ここに「UIデザインアフォーダンス」に関するGoogle検索のトップ記事があります。

http://www.joelonsoftware.com/uibook/chapters/fog0000000060.html

「脈動する指」(おかしな音)なしでビジュアルオブジェクトにアフォーダンスを与えるには、さまざまな方法があります。アフォーダンスを提供する最も一般的な方法は、アフォーダンスを必要とするオブジェクトとその周囲のコンテキストを対比させることです。

0
mawcsco

インターネット標準は、ハイパーテキストリンクと同じ色の境界線で画像を囲むことです。

<a href=""><img src="something.png></a>

CSSを変更しないHTMLは、画像をクリックできることを示す境界線付きの画像を生成します。

0
Reactgular