web-dev-qa-db-ja.com

モバイルアプリのモックアップ用のグリッドシステム?

1)ネイティブモバイルアプリ(iOS7、Androidなど)の場合、グリッドシステムを使用してモックアップも行いますか?モバイルアプリの4列グリッドレイアウトのようですか?グリッドシステムはレスポンシブなWebサイトで使用されていますが、ネイティブのモバイルアプリ(モバイルWebサイトではない)に適用されているようには聞こえません。

2)私の会社では、iPhone 3GS、4、5、6、6 +、およびAndroidデバイスなど)のモックアップを行う必要があります。iPhoneのモックアップから開始する必要があります最初に6、次にそれに応じて縮小しますか?Androidデバイスについてはどうですか?

私はPhotoshopとEdge Reflow CCを使用していますが、WebサイトではEdge Reflowがより解像度が高いように見えるため、さまざまな解像度のモバイルアプリのモックアップに適しているかどうかはわかりません。

Tks!

2
Xeon

1)グリッドシステムはコンテンツの配置と快適なバランスに役立ちますが、OS固有のヒューマンインターフェイス/デザインガイドラインにも注意を払います( AppleAndroid =)要素サイズ、最小間隔、一般的な設計パターン、および一般的なシステム機能の標準配置を決定します。これらは、選択したグリッドシステムと連携する場合と連携しない場合があります。

一般に、iOSデバイスには、共有グリッドに影響を与える可能性のある3つの異なるアスペクト比があります。

  • 3:2(iPhone4およびそれ以前)
  • 4:3(これまでのすべてのiPad)
  • 16:9(iPhone 5以降、デバイスによっては+/-数ピクセル)。

Androidデバイスはあちこちにありますが、一般的にこれらのカテゴリに当てはまることもあります(数ピクセルかかる場合もあります)。これらに基づいてグリッドを作成し、必要に応じて適用することをお勧めします。

また、選択したデバイスに対するユーザーの期待に応える一貫したエクスペリエンスを提供する必要もあります。これは iOSとAndroidで異なります &人々は一般に、一方に直接移植されたUIが他方に直接移植されることを嫌います。それだけでは、レイアウトを再調整し、共通のコントロールまたは機能を配置する場所を再考する必要があります。

2)大きく始めて縮小することは避けてください。通常、小さく始めて拡大する方が良いです。

  • 3.5インチの最小サイズであるため、iPhone 3GSおよび4から始めます。iPhone4/4Sは、アセットの作成に影響する@ 2x Retinaディスプレイを備えていますが、画面は3GSと同じ物理サイズおよび3:2アスペクト比なので、レイアウトの決定同一である必要があります。

    • 実際のデバイスでテストして、実際のデバイスがどれほど小さいかを感じてください。レスポンシブWebサイトと同じ " mobile-first "の考慮事項を適用します。最も制限されたスペースを最初に設計すると、拡張の余地を残しながら、重要なニーズに集中する必要があります。いくつかの小さいAndroidデバイスもこのプロセスに追加し、サイズ間の妥協点を見つけてください。
  • iPhone 5/5Sは、ほぼiPhone 6および6 Plusとまったく同じ16:9です。このまったく異なるアスペクト比は、独自のバリアントを取得する必要があるため、そこから始めることはお勧めしません。

  • iPhone 6以降および類似のAndroid "phablets"には、@ 3xピクセル密度に加えて、さらにユニークな要件があり、グラフィックデザイナーにとってさらに複雑になります。これらのデザインをフルタブレットサイズに拡大する方が適切です。ここから始めて、縮小してみてください。

    • 同様に、標準のiPhoneレイアウトのiPadアプリは見た目が悪く、多くの画面領域を浪費しますが、これらの大きなデバイスでは、2列/「マスター/詳細」のタブレットスタイルのレイアウトとさまざまなインタラクションパターン(「到達可能性"iOSの場合、遠くにあるアイテムなどを自動スクロールします)。また、使用例が少し異なり、単により多くのコンテンツを表示できるので、人々がそれらをどのように使用するかを検討してください。

最後に、Androidと同等かどうかはわかりませんが、Appleの Adaptive Design (iOS8の新機能)を調べて、レイアウトを再考することをお勧めしますこれは、デバイスのサイズクラス間で変更する必要があります。これは、おそらくプロセスの後半でより有用ですが、これらの概念を念頭に置いてモックアップを行うのに役立ちます。

1
mc01