web-dev-qa-db-ja.com

モバイルデザインの一般的に受け入れられている解決策は何ですか?

それで、私は新しいプロジェクトに1週間半かかり、320px * 480pxの解像度で設計しています。私はゲームに不慣れですが、最近のスマートフォンの高密度ディスプレイを考慮するとその解像度が小さすぎること、そして新しいデバイスではグラフィックがぼやけて見えることがわかりました。

私の無知は本当に私に負担をかけているので、上記のストック解像度(高密度ディスプレイが導入される前に使用されていたと思います)と同等の解像度があるかどうかを確認したいと思います。

.PSDをやり直すことなく、既存のグラフィックを回収する方法について何か提案があれば、それも歓迎されます。

20
styke

単一の解像度でUIを設計する代わりに、解像度に依存しないように設計する必要があります。これがAndroidでどのように処理されるかを見てください: http://developer.Android.com/guide/practices/screens_support.html

使用している解像度(320x480)は一般的なMDPI解像度であるため、他のDPIサイズでアプリのグラフィックアセットを配信する限り、基本的には引き続き使用できます。

  • LDPI(低):現在のグラフィックアセットのサイズのx0.75
  • MDPI(中):現在使用しているグラフィックアセットのサイズ
  • HDPI(高):現在のアセットのサイズのx1.5
  • XHDPI(超高):現在のアセットのサイズのx2.00

オペレーティングシステムは、デバイスに最適なグラフィックを使用します。

IOSでは、古い画面用(320x480)と新しい網膜画面用(640x960)の2つのグラフィックアセットを用意するだけなので、これらすべてがはるかに簡単です。

21
Arqh

設計する解像度は、ターゲットユーザーが使用する解像度によって異なります。事前にこれを知っていることもありますが、そうでない場合は一連の解像度の範囲内で柔軟性を保つを試す必要があります。

これが、レスポンシブデザインが非常に役立つ理由の1つです。固定解像度を考慮せずに設計する必要がありますが、柔軟性があり、さまざまな解像度で機能するように設計してください。私は通常、iOSとAndroid解像度(Androidが最大の市場シェアです)を見て、どのデザインもどちらでもうまく機能することを確認します。

ハードウェアの解像度design/css resolutionを区別する必要もあります。多くの電話では、2つは同じではありません。

Android解像度チャート: enter image description here

15
JohnGB

紛らわしいのは、画面の解像度とピクセル密度の解像度があるということです。それらはしばしば関連していますが、常にではありません。

たとえば、iPhone 3は320px * 480pxです。

また、Retinaディスプレイ搭載のiPhone 4は640 x 960です。

ただし、どちらのデバイスも画面を320ピクセル幅として扱います。 Retinaディスプレイで利用できるピクセル密度は2倍になるだけです。

例として、100x100のアイコンを作成し、両方のデバイスに並べて表示した場合、物理的に同じサイズに見えます。ただし、Retinaディスプレイを利用するには、2つ目のアイコン200x200を作成して、それをRetinaデバイスに割り当てます。物理的なサイズは同じですが、ピクセルが4倍になり、よりシャープ/クリアになります。

IOS向けにデザインする簡単な方法は、PhotoShopファイルを取得して、それをRetinaディスプレイのサイズに設定してから、50%で表示するようにデザインすることです。

悲しいかな、iOSは2つのタイプの画面間にかなり直接的な関係があるので、これらすべてをかなり簡単に行うことができます。これは他のデバイスでは必ずしも当てはまりません。特に、BlackBerriesの場合、画面のピクセル密度が高いほど、画面に表示されるコンテンツは多くなりますが、すべてのコンテンツのレンダリングははるかに小さくなります。

5
DA01

ぼやけの理由は、画像のサイズを大きくしても、完全な数では増えないためです。

メインの解像度を100x100に設定すると、200x200や300x300などでは問題なく表示されますが、150x150または160x160では問題が発生します。

画像のサイズが1x、2x、3x、4x、または0.5x、0.25x、0.125x増加または減少している場合、問題はありませんが、完璧ではありません。

解像度に依存しないようにすることを検討する必要があります。アプリケーションは解像度を検出し、それに応じて表示を処理する必要があります。

2
sharp12345

現在の携帯電話とタブレットのほとんどは非常に高解像度です。

1080x1920は今のところ平均的なオプションになる可能性があります(2017年9月)。

以下のリンクを確認してください https://mydevice.io/devices/

1
Sharif

写真ではないすべてのグラフィック要素は、何かを拡大する必要がある場合にアセットを再作成する手間を省くために、ベクターとして設計する必要があります。

一方、高解像度の写真アセットは、スマートオブジェクトとしてPhotoshop内に配置することもでき、ポイントのサイズを変更することもできます。

これらの方法の両方を使用する場合、Photoshopファイルのサイズは設計段階では問題になりません。

0
R Reveley