web-dev-qa-db-ja.com

Webバージョンとモバイルバージョンの両方でのホバー状態のヒント

リスト写真を掲載したポートフォリオページをデザインしています。以下は青写真と疑問です。

enter image description here

疑問:

  • ユーザーは、ポートフォリオアイテムがhoverの状態について説明していることをどのように知るでしょうか?。同じことについてヒントを置く必要がありますか?.
  • モバイルデバイスでは、マウスオーバーの概念はありません。では、モバイルデザインで同じアイデア(ホバー状態を置き換える)を表現するにはどうすればよいでしょうか。

Advancedに感謝

1

以下に私の提案を示します。

デスクトップ上

mockup

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

モバイル

特にブログ/静的サイト向けに設計している場合、ユーザーはモバイルデバイスでより多くスクロールする傾向があります。おそらく、ユーザーが個々の写真を非表示にしてタップするのではなく、すべてを表示したいと思うでしょう。写真の下に切り詰めた説明を置くだけです。興味があれば、ユーザーはクリックして詳細を読むことができます。

mockup

bmmlソースをダウンロード

**

2
adamsoh