iPhone 4、5、6、および6+で実際に描画する必要があるインターフェイスデザインの数は?

iPhone 6および6+スマートフォンの出力は、デザイナーとプログラマーの間に混乱をもたらしました。以前は、iPhone 5のレイアウトを1つだけ描画し、以前のデバイス用にマークアップするときに2倍に比例して縮小できたためです。 しかし、今では状況が少し変わりました。パイオニアのプログラマーは、iPhone 6で美しく描かれ、レイアウトされたレイアウトは、以前のように比例的に縮小されたため、iPhone 5では完全に魅力的で、読みにくく、収益性がないと訴えています。 IOS HIGにはこれに関する具体的なアドバイスが含まれていないため、デザイナーにとっての質問は、現在のiPhoneデバイスのライン全体をカバーするために実際にいくつのインターフェイスデザインを描画する必要があるかということです。 正しくしましょう。





多くの人々はそれを考慮しませんが、ピクセルに加えて、iOSはユニバーサルユニットも使用します-ポイント(pt、ポイント)とレイアウトはそれらに添付されるべきです。 以前は、デザイナーにとってこの問題はプログラマーによって解決されていました.iPhone 5のデザイナーから送信された.psdレイアウトを使用して、すべてのピクセル値を2で除算し、同じポイントを使用してコードに記述しました(ピクセルに厳密に結び付けられていない場合)。 しかし、現在、この職人技の方法はデザイナーにはあまり適していません。グラフィックを最大解像度で描画する必要があるためです。つまり、各画面のサイズは1500〜2000ピクセルになり、特にデザイナーがすべての画面を1つのソースに保持する場合、膨大な量のコンピューターリソースが必要になります。 したがって、単一の測定単位の観点からAndroidのパスをたどること、つまりptを使用することがこれまで以上に重要になっています。



実際、デザイナーの作業は次のように減らすことができます。画面を1 px = 1 pt(ポイント)の比率で描画します。 1ピクセル= 1ポイント サイズ320x568ピクセルのキャンバス(iPhone 5 640x1136ピクセルの割合に相当)を取り、iPhone 4との互換性を注意深く監視してデザインを描きます(このバージョンでは、高さは480ピクセルです)。 しかし、グラフィックスはどうですか? 大きく、320x 568 pxのベースよりもはるかに大きくする必要があります。 まさに! ここで、Adobe Illustratorが役立ちます。 Illustratorはベクトルグラフィックエディターです。つまり、Illustratorで描画されたグラフィックは、品質を損なうことなく任意のサイズに適合させることができます。 これを行うには、Adobe Illustratorで上記の解像度でレイアウトを描画し、必要に応じて、ベース72、つまり216よりも高い密度でPhotoshop .psdにエクスポートします。すべてのベクターレイヤーはラスターに変換されます(どこにも取得できません)グラフィックを必要なすべての画面密度にエクスポートするには十分です。 しかし、顧客はどのように設計手順を示すことができますか? 結局のところ、320x568 pxは低すぎてレイアウトの品質を評価できません! そして、ここでもAdobe Illustratorが助けになります。顧客のレイアウトを... pdfにエクスポートします。 多くの場合、このようなファイルは、従来のラスターレイアウトよりも数十倍軽量で、Appleデバイスと完全に互換性があります。 すべての画面または必要なものが1つのファイルに分類され、クライアントの最初の要求で、クライアントに現在の作業段階を簡単かつ迅速に示すことができます。



合計:単一のアプリケーションデザインモックアップをAdobe IllustratorですぐにiPhoneの最低画面密度に描画し、プログラマ向けにptでサイズをレイアウトする方が合理的です。 Photoshopでデザインを描くことはできますが、このオプションはスマートオブジェクトを考慮しても適応性が低くなります。 いずれにせよ、どのグラフィックエディターを使用する場合でも、iPhone 6 Plus(@ 3x)のグラフィックスのスケーリングとptのレイアウトレイアウトを3倍にする可能性を考慮するだけで十分です。



まだ試していないが、Adobe Illustratorでデザインを操作することに興味がある人のために、Habréの次のページにアクセスすることを強くお勧めします パート2:iOS、Windows Phone



All Articles