web-dev-qa-db-ja.com

モバイルデバイスで画像スライダーのコンテンツを表示する方法は?

私は このような画像+テキストスライダー がモバイルデバイスで最も使いやすいものではないのではないかと考えていますが、それらのコンテンツをどのように表示するのですか?静的にスライダーを積み重ねることが頭に浮かびますが、スライドが3つ以上ある場合は、多くのスペースが必要になります。なにか提案を?

3
drake035

可能な解決策に関して、いくつかのことが頭に浮かびます。スタッキングはモバイル画面で多くのスペースを占有するため、おそらく次のようになります。

  1. インフォグラフィックと同じように、モバイルで画像を入れ替えて、はるかに単純なものにします。画像にコミュニケーションを行わせることで、テキストの必要性をなくします。

2.現在のスライドに関連する、スライダーの下の小さなテキストの現在のコンテンツ。

2
David Sheridan

はい、スタッキングは良いソリューションではありません。

モバイルビューに対する私の提案は、テキストを保持し、画像をドロップすることです。いくつかのサイトがこれを行っているのを見てきました。これは、多くの場合、画像だけでは付随するテキストなしにメッセージを伝えることができないためです。ただし、ペアの画像がない場合でも、テキストはメッセージを伝えることができます。

0
Liv Beng

それらを積み重ねます。

はい、テキストはスペースを占有しますが、これは携帯電話では貴重です...しかし、テキストを削除するとどうなりますか?

enter image description here

モニターの写真。それは私に何を伝えますか?何もない。


画面サイズを小さくしてコンテンツを間引いてもかまいませんが、ユーザーがすべてを理解できることを確認してください。

たとえば、自分のサイトに、私が書いた最後の2つの記事をリストします。十分に大きな画面では、次のようになります。

最初の記事のタイトル

最新の記事のいくつかの紹介文。読者をつかんでトピックを紹介するには、多すぎず、1つの段落、短い数文で十分です。私はそれをリード(またはリード)と呼びますが、20から25ではなく50ワードであるため、実際には少し長いです。

第二の記事のタイトル

3番目と最後の記事のタイトル

しかし、小さな画面では最初の記事の先頭を削除しているので、タイトルだけです。

最初の記事のタイトル

第二の記事のタイトル

3番目と最後の記事のタイトル

これにより、約半分のスペースを節約できますが、残りのコンテンツは引き続き使用できます。


コンテンツの種類とその重要性を正確に予測できない限り、何も削除しないでください。

それが場所とカメラの設定を備えた単なる写真ブラウザである場合、おそらくそのテキストは第2層のコンテンツと考えることができます。 (しかし、なぜフルサイズの画像を使用しないのですか?)さまざまなPCオプションを表示するスライダーの場合は、テクニカルシートのほうが重要です。


この場合、おそらく私の記事のソリューションをシングルタブ アコーディオン または他の種類の折りたたみ可能/非表示の要素と組み合わせます。これにより、画像とタイトルを常に表示し、大画面またはクリック後にのみ「詳細」テキストを表示できます。 enter image description here

サイドバイサイドバージョンより少し背が高くなりますが、それでもそれよりかなり小さくなります。そしてもちろん、ボックスを垂直に積み重ねるよりも小さいです。

0
PixelSnader