Richtlinien für Begrüßungsbildschirme

Applies to Windows and Windows Phone

Beachten Sie die folgenden Richtlinien beim Anpassen des Begrüßungsbildschirms und Erstellen eines erweiterten Begrüßungsbildschirms, um den Start der App für Ihre Benutzer angenehmer zu gestalten.

Sehen Sie dieses Feature in unserer Reihe App-Features von A bis Z in Aktion.:  Windows Store-App-Benutzeroberfläche von A bis Z

Empfohlene und nicht empfohlene Vorgehensweisen

  • Passen Sie den Begrüßungsbildschirm an, um Ihre App von anderen zu differenzieren. Ihr Begrüßungsbildschirm besteht aus einem Bild und einer Hintergrundfarbe. Beides können Sie anpassen. Durch einen gut gestalteten Begrüßungsbildschirm kann Ihre App einladender wirken.

    Das Zusammenstellen eines Bilds und einer Hintergrundfarbe zu einem Begrüßungsbildschirm hilft, diesen ansprechend zu gestalten, und zwar ungeachtet des Formfaktors des Geräts, auf dem die betreffende App installiert ist. Bei Anzeige des Begrüßungsbildschirms ändert sich lediglich die Größe des Hintergrunds, um eine Anpassung an die Vielzahl möglicher Bildschirmgrößen zu ermöglichen. Ihr Bild bleibt stets unverändert.

    Um zu erfahren, wie Sie diesen Begrüßungsbildschirm hinzufügen und anpassen können, wechseln Sie zu Schnellstart: Hinzufügen eines Begrüßungsbildschirms.

  • Erstellen Sie einen erweiterten Begrüßungsbildschirm, damit zusätzliche Aufgaben vor dem Anzeigen der Startseite Ihrer App ausgeführt werden können. Sie können den Ladevorgang Ihrer App steuern, indem Sie einen erweiterten Begrüßungsbildschirm erstellen, der sich an dem von Windows angezeigten Begrüßungsbildschirm orientiert. Durch die Anlehnung an den systemeigenen Begrüßungsbildschirm sorgen Sie für einen nahtlosen und informativen Ladevorgang. Wenn Ihre App mehr Zeit benötigt, um die UI vorzubereiten oder Netzwerkdaten zu laden, können Sie mit dem erweiterten Begrüßungsbildschirm eine Meldung für den Benutzer anzeigen, während die App die Aufgaben abschließt.

    Der erweiterte Begrüßungsbildschirm für den Windows Store wird unten dargestellt. Beachten Sie, dass dieser Bildschirm identisch mit dem ersten Begrüßungsbildschirm ist. Der einzige Unterschied besteht darin, dass ein Statussteuerelement in Form eines "unbestimmten Rings" hinzugefügt wird, mit dem die Benutzer über das Laden der App informiert werden.Screenshot des erweiterten Windows Store-Begrüßungsbildschirms

    Informationen zur Verwendung der SplashScreen-Klasse zum Erstellen eines erweiterten Begrüßungsbildschirms finden Sie unter So wird's gemacht: Erweitern des Begrüßungsbildschirms (Windows Store-Apps mit JavaScript und HTML) oder So wird's gemacht: Erweitern des Begrüßungsbildschirms (Windows Store-Apps mit C#/VB/C++ und XAML).

    Eine Übersicht über Statussteuerelemente, dazu zählt beispielsweise der unbestimmte Ring, finden Sie unter Richtlinien für Statussteuerelemente.

    Tipp  Wenn Sie Ihren erweiterten Begrüßungsbildschirm in Fragmenten laden, bemerken Sie möglicherweise ein Flimmern zwischen dem Schließen des Windows-Begrüßungsbildschirms und der Anzeige Ihres erweiterten Begrüßungsbildschirms. Dieses Flimmern sehen Sie, da der erweiterte Begrüßungsbildschirm asynchron in Fragmenten geladen wird, bevor die Ausführung des activated-Ereignishandlers beendet ist. Dieses störende Flimmern können Sie vermeiden, indem Sie das Designmuster aus dem Beispiel für einen Begrüßungsbildschirm verwenden. Anstatt den erweiterten Begrüßungsbildschirm in Fragmenten zu laden, wird er einfach über die Benutzeroberfläche der App gelegt. Wenn Ihre zusätzlichen Ladeaufgaben abgeschlossen sind, können Sie Ihren erweiterten Begrüßungsbildschirm von der Angebotsseite Ihrer App ablösen lassen. Wenn Sie den erweiterten Begrüßungsbildschirm weiterhin in Fragmenten laden möchten, können Sie das Flimmern auch verhindern, indem Sie die Aktivierung verzögern und eine asynchrone Reaktion auf activated-Ereignisse definieren. Verzögern Sie ein aktiviertes Ereignis, indem Sie die activatedOperation.getDeferral-Methode aufrufen.

  • Verwenden Sie den Begrüßungsbildschirm oder Ihren erweiterten Begrüßungsbildschirm nicht zur Anzeige von Werbung. Der Begrüßungsbildschirm soll die Benutzer während des Ladens der App darüber informieren, dass die gewünschte App gestartet wird. Wenn Sie Fremdelemente in den Begrüßungsbildschirm integrieren, sind die Benutzer möglicherweise unsicher, ob sie die richtige App gestartet haben. Die App kann nicht mehr schnell auf einen Blick identifiziert werden.

  • Verwenden Sie Ihren erweiterten Begrüßungsbildschirm nicht zur Anzeige mehrerer, unterschiedlicher Begrüßungsbildschirmbilder. Der Zweck des Begrüßungsbildschirms und des erweiterten Begrüßungsbildschirms ist eine nahtlose und schöne Ladeerfahrung für Ihre Benutzer. Wenn Sie auf Ihrem erweiterten Begrüßungsbildschirm mehrere unterschiedliche Begrüßungsbildschirmbilder anzeigen, lenkt dies vom eigentlichen Zweck ab und kann Benutzer stören oder verwirren. Ihr erweiterter Begrüßungsbildschirm sollte vielmehr eine Fortsetzung des aktuellen Ladevorgangs darstellen, während andere Aufgaben abgeschlossen werden.

  • Verwenden Sie den Begrüßungsbildschirm oder Ihren erweiterten Begrüßungsbildschirm nicht zur Anzeige einer Infoseite. Der Begrüßungsbildschirm sollte nicht verwendet werden, um Versionsinformationen oder andere App-Metadaten anzuzeigen. Zeigen Sie diese Informationen in der Windows Store-Beschreibung der App oder in der App selbst an.

Benutzererfahrung

  • Verwenden Sie ein Bild, das Ihre App eindeutig vorstellt. Verwenden Sie ein Bild- und Farbschema, das Ihre App eindeutig identifiziert, sodass die Benutzer sicher sind, die richtige App geladen zu haben. Ein unverwechselbarer Bildschirm stärkt zudem Ihre Marke.

  • Verwenden Sie ein transparentes PNG-Bild für den Begrüßungsbildschirm, um optimale optische Ergebnisse zu erzielen. Wenn Sie ein transparentes PNG verwenden, ist die ausgewählte Hintergrundfarbe durch das Bild des Begrüßungsbildschirms hindurch sichtbar. Wenn das Bild hingegen eine andere Hintergrundfarbe hat, könnte der Begrüßungsbildschirm zusammenhanglos und wenig ansprechend wirken.

  • Stellen Sie eine Version Ihres Begrüßungsbildschirmbilds für alle drei Skalierungsfaktoren bereit. Alle Apps müssen über ein Begrüßungsbildschirmbild der Größe 620 x 300 Pixel verfügen, für den Fall, dass das Gerät eine 1-x-Skalierung verwendet. Darüber hinaus empfehlen wir, weitere Begrüßungsbildschirmbilder für 1,4-x- und 1,8-x-Skalierung hinzufügen. Indem Sie Bilder für alle drei Skalierungsfaktoren bereitstellen, tragen Sie dazu bei, den Startvorgang für unterschiedliche Geräte zu vereinheitlichen.

    Der folgenden Tabelle können Sie die erforderliche Größe des Begrüßungsbildschirms für den jeweiligen Skalierungsfaktor entnehmen:

    SkalierungswertBildgröße (Pixel)
    1x620 x 300
    1,4x868 x 420
    1,8x1116 x 540

     

  • Wählen Sie ein Bild aus, das den Bereich ausfüllt, der vom System für das Begrüßungsbildschirmbild zur Verfügung gestellt wird. Versuchen Sie bei der Wahl des Begrüßungsbildschirmbilds je nach Skalierungsfaktor den zur Verfügung stehenden Platz auszunutzen. Anhand der Tabelle können Sie die erforderliche Größe des Begrüßungsbildschirms für den jeweiligen Skalierungsfaktor ermitteln.

    Indem Sie die Bildqualität sicherstellen, sind Sie der Erstellung eines hochwertigen Begrüßungsbildschirms einen entscheidenden Schritt näher.

  • Zeigen Sie system- und ereignisbezogene UI nach Ausblenden des Begrüßungsbildschirms an. Sie können den sicheren Zeitpunkt für die Anzeige system- oder ereignisbezogener UI ermitteln, indem Sie auf das dismissed-Ereignis des Begrüßungsbildschirms warten. Anderenfalls könnte es passieren, dass die zugehörige UI (Suchbereich, Meldungsdialogfeld oder Webauthentifizierungsbroker) zeitgleich mit dem Begrüßungsbildschirm angezeigt wird. Dadurch entstehen unerwünschte visuelle Effekte.

  • Starten Sie die Eingangsanimationen, nachdem der Begrüßungsbildschirm geschlossen wurde. Viele Apps sehen vor, Eingangsanimationen für Inhalte bei jedem Ladevorgang der Angebotsseite anzuzeigen. Sie können festlegen, wann die Animationen gestartet werden sollen, indem Sie das dismissed-Ereignis des Begrüßungsbildschirms als Auslöser verwenden.

Erweiterte Begrüßungsbildschirme

  • Sorgen Sie dafür, dass Ihr erweiterter Begrüßungsbildschirm genauso aussieht wie der von Windows angezeigte Begrüßungsbildschirm Ihr erweiterter Begrüßungsbildschirm sollte die gleiche Hintergrundfarbe und das gleiche Bild wie der Begrüßungsbildschirm von Windows verwenden. Durch die Verwendung von konsistenten Bildern und Hintergrundfarben kann sichergestellt werden, dass der Übergang vom Windows-Begrüßungsbildschirm zum erweiterten Begrüßungsbildschirm Ihrer App professionell wirkt und Ihre Benutzer nicht abschreckt.

  • Platzieren Sie das Bild Ihres erweiterten Begrüßungsbildschirms an den Koordinaten, an denen auch das Windows-Begrüßungsbildschirmbild angezeigt wird. Informationen zum Platzieren des Bilds Ihres erweiterten Begrüßungsbildschirms mithilfe der SplashScreen-Klasse finden Sie unter Erweitern des Begrüßungsbildschirms.

  • Passen Sie die Position Ihres erweiterten Begrüßungsbildschirms an, um auf Größenänderungsereignisse wie das Drehen zu reagieren. Der erweiterte Begrüßungsbildschirm sollte die Koordinaten des Bilds für den Begrüßungsbildschirm anpassen, wenn die App skaliert oder das Gerät gedreht wird, indem er eine Überwachung auf das onresize-Ereignis durchführt. So wird sichergestellt, dass der Ladevorgang Ihrer App nahtlos und professionell wirkt, und zwar unabhängig davon, wie Benutzer ihr Gerät einstellen oder das Layout von Apps auf ihrem Bildschirm ändern.

  • Wenn Sie den erweiterten Begrüßungsbildschirm länger als ein paar Sekunden anzeigen, fügen Sie einen Statusring hinzu, damit für die Benutzer ersichtlich ist, dass die App noch lädt. Verwenden Sie das unbestimmte Statusring-Steuerelement, um die Benutzer darüber zu informieren, dass Ihre App nicht abgestürzt und in Kürze bereit ist. Es empfiehlt sich, eine einzelne Textzeile neben dem Statusring anzuzeigen, um den Benutzern kurz den laufenden Vorgang zu erläutern. Ihr erweiterter Begrüßungsbildschirm könnte beispielsweise einen Statusring und die Meldung "Wird geladen" enthalten.

    Indem Sie die Aktivität der App herausstellen und Ihre Benutzer informieren, erhöhen Sie die Attraktivität der App während des Ladevorgangs. Wie Sie einen unbestimmten Statusring und eine Textzeile hinzufügen, erfahren Sie in Schnellstart: Hinzufügen von Statussteuerelementen.

Weitere Hinweise zur Verwendung

Alle Windows Store-Apps müssen einen Begrüßungsbildschirm haben. Dieser besteht aus einem Begrüßungsbildschirmbild und einer Hintergrundfarbe. Beides können Sie individuell anpassen.

Windows zeigt den Begrüßungsbildschirm sofort beim Start einer App an. Dadurch erhalten die Benutzer eine sofortige Rückmeldung, während die App-Ressourcen initialisiert werden. Sobald Ihre App bereit für die Interaktion ist, schließt Windows den Begrüßungsbildschirm.

Durch einen gut gestalteten Begrüßungsbildschirm kann Ihre App einladender wirken. Der Windows Store verwendet den unten dargestellten, einfachen, unauffälligen Begrüßungsbildschirm:Eine auf 75 % skalierte Bildschirmaufnahme des Begrüßungsbildschirms aus dem Begrüßungsbildschirmbeispiel.

Dieser Begrüßungsbildschirm wird durch Kombinieren eines grünen Hintergrunds mit einem transparenten PNG erstellt.

Mithilfe der SplashScreen-Klasse können Sie den Start der App anpassen, indem Sie das Design des Begrüßungsbildschirms erweitern und Eingangsanimationen auslösen.

Überlegungen zur Sicherheit

Die folgenden Artikel enthalten Anleitungen zum Schreiben von sicherem C++-Code.

Problembehandlung

JavaScript: Vermeiden des Flimmerns beim Übergang zum erweiterten Begrüßungsbildschirm

Das Thema So wird's gemacht: Erweitern des Begrüßungsbildschirms enthält Ratschläge, um das Flimmern zu vermeiden: Falls Sie beim Übergang zum erweiterten Begrüßungsbildschirm ein Flimmern bemerken, fügen Sie dem Tag "<img>" wie folgt "onload=""" hinzu: <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. Somit wird das Flimmern verhindert, indem das System angewiesen wird zu warten, bis das Bild gerendert wurde, bevor es zu Ihrem erweiterten Anmeldebildschirm wechselt.

C#: Vermeiden des Flimmerns beim Übergang zum erweiterten Begrüßungsbildschirm

Wenn Sie die Anweisungen unter So wird's gemacht: Erweitern des Begrüßungsbildschirms befolgt haben, bemerken Sie beim Übergang zum erweiterten Begrüßungsbildschirm vielleicht ein Flimmern. Dieses Flimmern tritt auf, wenn Sie das aktuelle Fenster aktivieren (durch den Aufruf von "Window.Current.Activate"), bevor der Inhalt der Seite vollständig gerendert wurde. Sie können die Wahrscheinlichkeit verringern, dass ein Flimmern auftritt, indem Sie sicherstellen, dass das Bild des Begrüßungsbildschirms vor dem Aktivieren des aktuellen Fensters gelesen wurde. Darüber hinaus sollten Sie zum Verhindern des Flimmerns einen Zeitgeber verwenden, mit dem Sie die Anwendung anweisen, kurz (z. B. 50 ms) zu warten, bevor das aktuelle Fenster aktiviert wird. Es gibt jedoch keine sichere Methode, das Flimmern zu verhindern, da Inhalte von XAML asynchron gerendert werden und daher nicht vorhergesagt werden kann, wann das Rendering abgeschlossen ist.

Wenn Sie die Anweisungen unter So wird's gemacht: Erweitern des Begrüßungsbildschirms befolgt haben und beim Übergang zum erweiterten Begrüßungsbildschirm ein Flimmern bemerken, führen Sie die folgenden Schritte aus, um sicherzustellen, dass das Bild des erweiterten Begrüßungsbildschirms gelesen wurde und die App kurz wartet, bevor das aktuelle Fenster aktiviert wird:

  1. Aktualisieren Sie in ExtendedSplash.xaml das Markup für das Bild des erweiterten Begrüßungsbildschirms, sodass Sie benachrichtigt werden, wenn das Bild des erweiterten Begrüßungsbildschirms gelesen wurde.

    
    <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png" ImageOpened="extendedSplashImage_ImageOpened"/>
    
    

    Das ImageOpened-Ereignis wird ausgelöst, wenn das Bild gelesen wurde. Wie im Beispiel gezeigt, sollten Sie das ImageOpened-Ereignis registrieren, indem Sie das ImageOpened-Attribut hinzufügen und den Namen des Ereignishandlers (extendedSplashImage_ImageOpened) angeben.

  2. Fügen Sie in ExtendedSplash.xaml Code in der ExtendedSplash-Klasse hinzu, die das aktuelle Fenster anhand eines Zeitgebers nach dem Lesen des Bilds des erweiterten Begrüßungsbildschirms aktiviert.

    
            private DispatcherTimer showWindowTimer;
            private void OnShowWindowTimer(object sender, object e)
            {
                showWindowTimer.Stop();
     
                // Activate/show the window, now that the splash image has rendered
                Window.Current.Activate();
            }
     
            private void extendedSplashImage_ImageOpened(object sender, RoutedEventArgs e)
            {
                // ImageOpened means the file has been read, but the image hasn't been painted yet.
                // Start a short timer to give the image a chance to render, before showing the window
                // and starting the animation.
                showWindowTimer = new DispatcherTimer();
                showWindowTimer.Interval = TimeSpan.FromMilliseconds(50);
                showWindowTimer.Tick += OnShowWindowTimer;
                showWindowTimer.Start();
            }
    
    

    In diesem Beispiel wird veranschaulicht, wie Sie auf ein ImageOpened-Ereignis reagieren und mit einem Zeitgeber die Anwendung anweisen, kurz zu warten, bevor das aktuelle Fenster aktiviert wird.

  3. Überarbeiten Sie die OnLaunched-Methode folgendermaßen:

    
    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        if (args.PreviousExecutionState != ApplicationExecutionState.Running)
        {
            bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
            ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
            Window.Current.Content = extendedSplash;
        }
    
        // ExtendedSplash will activate the window when its initial content has been painted.
    }
    
    

    Im Beispiel haben wir den Aufruf von Activate für das aktuelle Fenster entfernt. Stattdessen wird die Aktivierung vom ExtendedSplash-Objekt nach dem Auslösen des ImageOpened-Ereignisses ausgeführt, um anzugeben, dass das Bild des erweiterten Begrüßungsbildschirms gelesen wurde.

  4. Testen Sie den Code auf möglichst vielen Geräten und unter möglichst vielen Bedingungen, um sicherzustellen, dass der Code das Flimmern tatsächlich verhindert!

Verwandte Themen

Für Designer
Erweitern des Begrüßungsbildschirms
Schnellstart: Hinzufügen eines Begrüßungsbildschirms
Begrüßungsbildschirmbeispiel
Für Entwickler (HTML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
Schnellstart: Hinzufügen von Statussteuerelementen
Für Entwickler (XAML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
ImageOpened
OnLaunched
Activate

 

 

Anzeigen:
© 2014 Microsoft