応答性Webページ画像ライブラリの設計における注意の9ポイント

応答するデザインは疑いなく、現在のWebデザイン分野の必要な部分です。しかし、敏感なウェブページのイメージ表示は、クリックです。多くの議論は、敏感なウェブサイトの絵を表示する方法に集中します。我々がそれを広げ続けるならば、どう反応するウェブサイトでイメージライブラリを設計するべきですか？

 

 

つのイメージと比較して、ライブラリの表示は、より複雑で、より多くの変数を含んでいます。次に、応答画像ライブラリを設計する際に留意すべき基本的なルールとテクニックを見てみましょう。

 

 

1 .回転スライドショー：できるだけ多くのナビゲーションを隠す

 

デスクトップ上のナビゲーションの存在は何もないかもしれないが、携帯端末で表示するときは、ナビゲーションはまだ可能な限り隠されており、必要に応じて表示されます。例えば、カーソルが移動した後に、左右のスイッチボタンと、ブラウジング位置を示すドットを表示する。このデザインは、ユーザーの気晴らしを避けるためだけでなく、コンテンツとナビゲーション要素の間の衝突を避けることができ、全体的なデザインの混乱を減らすことができます。

 

 

2 .多数の肖像画を使用しない

 

レイアウトのようなグリッドで画像ライブラリを設計する場合は、水平または正方形の画像を選択しようとすることがあります。このデザインはデスクトップ・デザインと互換性を持ちます、しかし、ユーザーにより小さなスクリーンでそれをよりよく見ることもできます。ポートレート画像は、携帯電話上の垂直画面で閲覧するために適しています。彼らは水平方向に表示されている場合は、写真は非常に小さくなり、閲覧が非常に不便になります。水平である場合は、最良の場合は、正方形の画像の使用は良い互換性のスキームになります。応答画像ライブラリのデザインは、多くの要因を考慮する必要がありますので、心の中でユーザーの別の閲覧シナリオを維持してください。

 

 

15.3 - 3

 

 

3 .携帯端末におけるジェスチャ操作支援

 

それはほとんどタッチスクリーンで洗浄操作を使用するユーザーの本能です。したがって，応答画像ライブラリの設計において，スライド操作などのジェスチャ操作によりユーザはより多くの力を与え，経験をより現実的にする。モバイルデバイス上で矢印ナビゲーションを使用しても退屈で昔ながらの、そしてジェスチャーの相互作用は、より自投訴冷氣機滴水然で、実際の相互作用の経験に沿ってより多くです。

 

 

4 .無効にするライトボックス効果モバイル

 

Lightbox効果はおそらくデスクトップのWebページ上で最も一般的な画像を参照モードです。写真は、画面サイズとマウス操作に応じて縮小することができますポップアップボックスの形で提示されます。製品表示ページにおいて、この種の画像閲覧モードは、特に広く使用され、頻繁に使用されているが、移動端末では、ユーザの経験上の問題が多く発生する可能性がある。

 

 

004 - 3

 

 

5 .ナビゲーション要素を低くする

 

画像ライブラリの画像の多数を表示するスライドショーを使用する場合は特にナビゲーションが重要です。ユーザーは確かにあまりにも多くの時間を読み込みを待って過ごす必要はありません。彼らはまだクリックして、ページ、入力、終了、ホールドなど、独自の速度で。それで、ナビゲーション要素を使用しているとき、彼らが途中でいないことを確認してください。ナビゲーションドットは、テキストやリンクをカバーし、ユーザーの注意をそらすし、全体のページのデザインをより複雑にする複雑な制御方法を避けるようにしないでください。クリックしてナビゲーションのドットは、ユーザーがすぐに彼らが行きたい場所にジャンプできるようにすることができます、効率を改善し、不要な消費を減らす。もちろん、あまりにも複雑にしないでください！バランスは最も重要なことです！

 

 

6 .写真を写真と混同するな

 

通常、さまざまな種類のメディアが一緒に問題なしで一緒にミックスが、ユーザーは確かに画像を見てみたくない、突然次の画像は、突然の音と追加のトラフィックの消費は、彼らが遭遇したくない、ビデオになっていることを発見！画像からビデオを分離し、彼らは次の何かを聞かせ。その事故は起こらないようにしなさい。

 

 

2 - 3

 

 

7。画像表示サイズが元の画像の最大幅を超えないようにしてください

 

これは非常に重要です、そして、基本的であるけれども、それはまだ強調される必要があります。イメージのピクセルの歪みの効果を表示するイメージスペースの独自のサイズを埋めるためにしないようにしてください。多くの場合、モバイルエンド上で特定のブロックを完全に埋めるのはOKですが、デスクトップ側では、自分の幅を超えることはできません。難しいようではないか。しかし、まだ多くの敏感なページがあります、そして、あなたがブラウザーインターフェースを広げるとき、彼ら自身のサイズより大きい絵があります。

 

 

8 .画像ズーム

 

あなたのギャラリーのイメージがイメージズームを含むならば、イメージを小さくして、より大きくしないようにしてください。それはさらに画像の正確なサイズを設定することです。