APP起動ページとスプラッシュ画面の知識_51CTOブログ_アプリ起動画面広告
スタートアップ ページとスプラッシュ スクリーンの違い
1. スタートアップページ（起動画面）
ユーザーがアプリを開いたとき、アプリの起動中にユーザーに表示される遷移ページ (またはアニメーション) を総称して起動ページと呼びます。
アドバンテージ：
1. 製品を開くとき、ロードには一定の時間がかかりますが、スタートアップ ページによりユーザー エクスペリエンスが向上し、待ち時間が短縮されます。
2. スタートアップページのデザインは、ブランド情報の発信、ユーザーや商品の認知度を確立することが一般的であり、画像形式が一般的であり、アニメーションは推奨されません。
2. スプラッシュ スクリーン (スプラッシュ スクリーン)、ブート アドバタイズメントとも呼ばれます
起動ページに表示された直後は、製品の性質に応じて追加するかどうかを選択できます。
利点: 主に毎日の広告などの製品運用に使用され、通常は写真、ビデオ、アニメーションなどの「スキップ」ボタンが提供され、その目的はユーザーを引きつけ、印象を深めたり、クリック率を高めたりすることができます。
3. ご案内ページ（搭乗画面）
よくある誤解: 新しいユーザー ガイダンスとは、アプリを開いた後に表示されるページのことを指し、ユーザー ガイダンス = 起動ページであると考えている人が多くいますが、これは間違いです。
「新規」を中心とした新しいユーザーガイドページは、アプリを初めて起動するユーザーのみに表示され、製品の特定の機能やプロセスをユーザーに素早く理解してもらうことを目的としています。つまり、このアプリを携帯電話に初めてインストールするときは、このアプリを開いた後にのみ表示され、アプリケーションを終了または閉じると、再び表示されることはありません（一部のアプリケーションが特別に設定しない限り）。モジュールを使用して携帯電話で再度表示できるようにします）。
ここにも 2 つのケースがあります。
①サーバーは携帯電話のシステムIDを記録します。携帯電話は、登録されているかどうかに関係なく、初めてアプリをインストールしました。アンインストールしてインストールした後は、新規ユーザーではないことと同等であり、ガイドは表示されません。もう一度ページを開きます。
②サーバーは携帯電話番号を記録します：携帯電話はAPPをインストールしており、登録後は新規ユーザーであり、ログアウトして開くとガイドページは表示されなくなります。
ガイドページ
3. スタートアップページとスプラッシュ画面の違い
相違点: スタートアップ ページは、インストール パッケージ内のプログラムをアンインストールするためのものであり、置き換えられた場合、バージョンは再リリースされ、ユーザーはシステムをアップグレードする必要があります。スプラッシュ スクリーンのプログラム デザインはバックグラウンドで構成され、アップグレードせずに自由に交換できます。
製品エクスペリエンスを最適化する方法
ユーザーにとって、スタートアップ ページとスプラッシュ スクリーンの時間は短いほど良いため、デザインによって 2 つの間の移行をスムーズにし、ユーザーに画像が変化しているように感じさせ、ユーザーの知覚を少なくすることができます。エクスペリエンスを向上させるため。
また、製品の特性にも依存しますが、中には無関係なものもあります。製品の色調を表現し、ブランド文化を伝えることは、NetEase Cloud などの音楽製品など、ユーザーの待ち時間エクスペリエンスを短縮することよりもはるかに重要です。
一般的な設計方法は次のとおりです。
スプラッシュ スクリーンをさまざまな携帯電話の画面に適応させる方法
携帯電話の解像度が異なる場合、一般的な適応方法は 2 つあります。
① 比率の異なる 2 つのスプラッシュ スクリーンを使用して調整します。
② 異なるシステムに応じて適応します。1 つのイメージは IOS に適応し、もう 1 つのイメージは Android に適応します。
さらに、今日はすべてのモデルに適応するためのスプラッシュ画面とその適応原理を共有します。
ここでの困難は、すべての携帯電話に適したサイズを見つけることです。また、スプラッシュ スクリーン コンテンツの表示はどの携帯電話でも適切である必要があり、コンテンツはトリミングできません。
ここでは、Xiaomi の APP のデザイン ドラフトを例に挙げます。Xiaomi の携帯電話は Android システムであるため、UI デザイン ドラフトは主流の Android 携帯電話 1080*2340 に適応するように制限されます。このサイズは、 iPhone12の3倍相当の写真です。
したがって、スプラッシュ スクリーンの幅設定は 1080px にする必要があり、高さはコンテンツ操作領域 (スプラッシュ スクリーン コンテンツ設計領域) とロゴの位置の 2 つの部分に分割されます。
ロゴ部分は開発によってプログラムに書き込まれるため、スプラッシュ スクリーン ページの高さはロゴ領域の高さを差し引いたものになります。
スプラッシュ スクリーンのデザインのサイズは実際には青い部分であり、通常は主流の長画面携帯電話と既存の小型画面携帯電話の平均である必要がありますが、これはお勧めできません。
画面の小さな携帯電話は結局ユーザー数が少ないので、多くのユーザーを優先する設計になっています。
したがって、スプラッシュ スクリーンのサイズを定義する原則は、小さな画面の携帯電話が間違わない限り、Xiaomi や iPhone12 などの主流の比率の本を完璧にすることです。
長い画面の携帯電話
の場合、Android の主流の解像度 1080*2340 を例にとります (この比率は iPhone 12 の解像度に近い) すべての携帯電話と互換性があります。
さらに、注意: Android スマートフォンの下部にシステムの高さがあります。この位置を占有することはできませんが、開発により色を変更できるため、この部分の色は起動ページの色と一致するように調整できます。またはスプラッシュ画面。
解像度の高さ=2400-60-270=2070px
実際のカット画像は: 1080X2070px
画像.png
画面の短い携帯電話 画面
の短い携帯電話を計算します Android の最も短い携帯電話の比率は 16:9 (比率は IOS IPhone8 に相当します) 1080X1920 を例として、下の図を参照してください
解像度の高さ=v1920-270=1650px
実際の画像は1080X1650PXです
携帯電話の適応原理
各画像の比率が携帯電話画面の比率と一致しない場合、開発設定は携帯電話画面いっぱいに設定されており、携帯電話に表示される画像は上下または左右にトリミングされます。 。
そこで、比率の異なる2つのサイズを組み合わせ、短画面の携帯電話では上下をカットし、長画面の携帯電話では左右をカットして、カットされない領域に表示コンテンツが収まるようにします。 。
スプラッシュスクリーン適応の効果
何度も試した結果、スプラッシュ スクリーンのデザイン サイズとして 1080*1920 が最終的に選択されました。上から下まで適応されたコンテンツのプレゼンテーションが非常に適しています。
下の図はiOSとAndroidの携帯電話の適応効果を示しており、16:9の携帯電話には下向きに適応（上下カット）、20：9の携帯電話には上向きに適応（左右カット）しています。
画像.png
特記事項: スプラッシュ スクリーンの高さは低くすることができ (1080X1080px)、背景色は開発用のコードで記述することができます。これには、スタートアップ ページの画像の周囲の背景が単色または単純なグラデーションである必要があります。可能な限り色を付けます。この適応の効果はより良くなります。
-----------------------------------
©著作権は作者に帰属します: 51CTO ブロガー LRachel のオリジナル作品、お願いします著者に連絡して再版の許可を取得してください。そうでない場合は、法的
責任を負うことになります。