2

私は現在、モールの LED 画面に動的コンテンツを表示するために使用される Web ページを設計しています。

デザインするコンテンツがディスプレイの高さと幅に正確に収まるようにする必要があります。画面サイズは42インチ、解像度は1280×720。

  1. 自分のデザインが画面に正確にフィットするようにするにはどうすればよいですか? 縦に収まるようにすることの方が心配です。

  2. このような長い縦長の画面に自動的に適応してフィットするコンテンツを設計するにはどうすればよいでしょうか?

  3. 設計プロセスに役立つツールはありますか?

デジタルビルボード

4

3 に答える 3

2

多くの問題は発生しないはずです。高さを1280ピクセル、幅を720ピクセルに設定するだけです。

適切なテンプレートは次のとおりです。

<!doctype html>
<html>
    <head>
        <style>
            #wrapper {
                height:1280px;
                width:720px;
                outline:1px black solid; // useful when designing to see where boundary of screen is.
            }

        </style>
    </head>
    <body>
        <div id="wrapper">
            <!-- Everything goes in here. -->
        </div>
    </body>
</html>

彼らが使用しているブラウザを調べて、そのブラウザでデザインすることをお勧めします。IE7を搭載したWindowsXPEmbeddedを実行していることに気付くかもしれません。

IE7を使いやすくするために、ブラウザーを実行する仮想マシンをセットアップすることをお勧めします。これはMicrosoftから入手できます：http ：//www.microsoft.com/en-us/download/details.aspx？id = 11575＆mnui = 0、またはOSXまたはLinuxを使用している場合は、率直に言って驚くべきhttps：// github.com/xdissent/ievmsが便利な場合があります。

読み取り可能な最小フォントサイズを慎重に検討する価値があります。また、通常の画面が回転している場合、サブピクセルは90度回転します。つまり、RGBを左から右に移動する代わりに、垂直に配置されます。その場合、MicrosoftのCleartypeは奇妙に見えるので、それをオンにすると、小さいテキストが非常にぼやけていることがわかります。（上下ではなく左右のピクセルで機能するため、画面を回転させるとかなりずれてしまいます）。

画面のコピーを取得するか、テレビに通して頭を横に向けて概算します:)

于 2012-05-06T08:47:14.683 に答える
1

質問 1、3: Firefox 用の「Web 開発者」アドオンを入手してください。ツールバーの [サイズ変更] で [サイズ変更の編集] を選択し、[幅: 720、高さ:1280] を追加します。サイズ変更をクリックすると、必要な画面解像度でデザインがどのように表示されるかを正確に確認できます。

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

質問番号 2 について: jQuery を使用すると、次のコードを追加できます。

$(document).ready( function(){
  var height = $(window).height();
  var width = $(window).width();
  if(width>height) {
    // Landscape
    $("body").addClass("landscape");
  } else {
    // Portrait
    $("body").addClass("portrait");
  }
}

ページの「body」要素に「portrait」または「landscape」クラスを追加します。このクラスを CSS ルールの先頭に追加して、条件付きデザインを作成できるようになりました。

于 2012-05-06T08:56:04.333 に答える
1

1 つのデバイスと解像度をサポートするだけでよいという利点がありますが、いくつかの課題に直面する可能性があります。

課題

  • コンテンツが割り当てられたスペースに正確に収まるようにします (空白スペースは、(もちろん) オーバーフローするため、そのようなディスプレイでは見栄えが悪くなります)。

  • 潜在的に古いブラウザ (@Rich Bradshaw が指摘したように) と平凡な CPU/GPU を扱う。

  • 一般的なデスクトップ モニターと大型ディスプレイのピクセル密度の違い。

  • 色温度/解釈とフォント レンダリングの違い。

役立つかもしれないこと

  • 私の最初のステップは、テスト用の貸与者としてデバイスを提供できるかどうかを確認することです. 私は、特定の要件のためにデバイスが必要になったときに喜んでデバイスを貸与/提供してくれる複数の会社と協力してきました。これは、ビジュアル デザインの一部を担当している場合 (たとえば、色がにじまないこと、フォントが滑らかであることなど) を担当している場合に特に重要です。

  • 実際のデバイスを入手できない場合は、少なくとも特定のカラー プロファイルに調整されているかどうかを確認してから、ローカル マシンで設定できます (Windows では、[カラー マネージメント] の下にあります)。

  • コンテンツが静的であれば、古いブラウザーでも機能する固定サイズのレイアウトを簡単に作成できます。

  • コンテンツが本質的に動的である場合は、 jQuery Masonryのようなものを試すことができます。これは、異なるコンテンツを動的グリッドに適合させようとします。ただし、サイズが希望よりも大きくなる可能性があるため、元のコンテンツのおおよそのアイデアを把握する必要があります。これは、最新の JavaScript エンジン IE7+ を実行していることを前提としています)。

  • 優雅に失敗することを確認してください。PCやモバイル端末から利用するWebサイトではレイアウトのミスは結構ですが、ショッピングモールのど真ん中にある大画面ではやはりミスが目立ちます。

大画面での設計/実装を扱うため、Google TV を使用するための次のガイドラインが役立つことがわかりました: https://developers.google.com/tv/web/docs/design_for_tv

于 2012-05-06T09:00:36.623 に答える