web-dev-qa-db-ja.com

AndroidおよびiOS Reactネイティブアプリ?

React Nativeを使用して開発されるクライアント用のモバイルアプリ(UI/UXデザイン)を設計しています。どの画面サイズから始めればよいですか?このために2つの異なるアプリを設計する必要がありますか? ?

私はこれまでシングルプラットフォームアプリを設計しており、画面サイズの仕組みを知っています。つまり、Android(width-360px)およびiOS(width-375px)の基本画面サイズは何ですか。

1
George L. Scott

多くの場合、デバイスは同じ画面サイズを共有しているため、考えられるすべてのデバイス構成のバージョンを作成するには、長い時間がかかります。

最も効率的な方法は、デバイスタイプごとに単一のスケーラブルなレイアウトを作成することです(たとえば Material Design を参照)。電話、タブレット、デスクトップ。ただし、ガイドラインは大きく異なり、ユーザビリティにはるかに大きな影響を与えるため、オペレーティングシステムごとにバージョンを作成することを検討できます。

1
Toiletroller

常に、ターゲットリストにある最小の物理画面サイズから始めます。小さなスペースに収まれば、簡単に大きなスペースに収まります。

画面の各要素が画面の寸法の増加にどのように応答するかを検討します。ある時点で、それらのいくつかはぎこちなく見え始めます。ここで、ブレークポイントを設定して、デザインの一部のパラメーターを変更することを検討する必要があります。ターゲットリストの最大画面に到達するまで、これを繰り返します。

2つの大きなモバイルオペレーティングシステムのほとんどのネイティブウィジェットは、見た目と使い心地が非常に似ています。いくつかの例外があります(特に、iOSでホイールとAndroidでドロップダウンをレンダリングするセレクターウィジェット)。これらのいずれかを使用する場合、mayは2つのシステムの代替レイアウトを考慮する必要があります。それ以外の場合は、1つだけで問題ありません。

レイアウトやタイポグラフィをピクセル単位で完全に定義することは避けてください。 React Nativeには多くの非表示のレイアウトウィジェットがあります。デザインを説明する際にそれらの用語を学び、使用してください。

0
edgerunner