ギャラリーでフルサイズの画像を表示するためのライトボックス/モーダルウィンドウUIのベストプラクティスは何ですか？
私はアーティストでありアマチュアWebデザイナーです。
ポートフォリオWebサイトで、自分の作業をプロジェクトにグループ化しました。ほとんどのプロジェクトには画像がほとんど（20以下）含まれているため、フルサイズで表示し、訪問者にスクロールさせます（ 例 ）。これは、他のアーティストの作品も閲覧するのが好きだからです。
さらに多くの画像を含むプロジェクトの場合、フルサイズの画像にリンクするサムネイルを使用します。これも、他のアーティストのポートフォリオを参照するとき、ページに画像がたくさんあると、ロードするのが少し面倒になるためです。
最近、ライトボックスエフェクト（モーダルウィンドウオーバーレイ）を実装するjQueryをいくつか作成したので、サムネイルをクリックすると、フルサイズの画像が表示されます（ 例 ）。
これを実装する私の主な理由：
- 画像に直接リンクするよりもずっと見栄えがします。
- 訪問者がtumblrやPinterestなどで画像を共有した場合、画像への直接リンクではなく、プロジェクトページへのリンクが戻されます。
- 訪問者がサムネイルを右クリックして、いくつかの新しいブラウザタブ/ウィンドウに複数の画像をロードしたい場合でも、そうすることができます（ライトボックスは左クリックでトリガーされます）
訪問者が閉じるボタンを探す必要があるのは、どこかをクリックしてライトボックスを閉じるよりも面倒なので、私は閉じるボタンを含めませんでした（これは私がやったことです）。
この特定の用途のためのライトボックスインターフェイスに関するあなたの考えは何ですか？目標はビジュアルアート/デザイン作品を紹介する最良の方法であり、ターゲットユーザーはまあ、作品を見たい人は誰でも。表示方法（この場合はライトボックスインターフェイス）は、効率的で、使用可能で、表示可能でなければなりません（作業を損なうのではなく、強調表示する必要があります）。
私のアプローチは、マウスが動いていない限り、単色の背景（おそらく黒または濃い灰色）でフルスクリーン（フルブラウザウィンドウなど）にして、すべてのナビゲーション（閉じる、次、前）を非表示にすることです。
このように、UIから重要な機能を削除することで、ユーザビリティを損なうことなく、ユーザーの気を散らすことはありません。
重要なポイントの1つは、キーボードのアクセシビリティです。ユーザーが ← そして → ボタン、そして作る esc 閉じるボタンとして機能します。ユーザーが↑…を押したときに詳細を提供できますが、おそらくいくつかのヒントが必要です。
マウスユーザーは、画像をナビゲートしてアクティブな画像を閉じるためにクリック可能なボタンが必要です。これらのボタンは、カーソルが画像上にないときに非表示にできますが、使用できるはずです。
モーダルイメージロールは非常に優れており、FacebookやGoogle+などのより大きなソーシャルメディアサイトで使用されています。固執しますが、閉じるボタンは省略しないでください。それはユーザーを混乱させ、私たちはそれを望まないでしょう。使用する1つのアイデアは、Facebookの実装です。この場合、[X]は完全に機能しますが、ホバーするとユーザーが手掛かりを取得します。 Esc 閉じる！これはユーザーに他の方法があることを伝える素晴らしいデザインであり、画像を閉じるためにマウスをつかむ必要がないと思います。
