初始屏幕指南

Applies to Windows and Windows Phone

遵循下列指南可自定义初始屏幕并创建延长的初始屏幕,以帮助确保你的用户获得良好的启动体验。

请将此操作功能视为我们的应用功能大全系列的一部分。:  Windows 应用商店应用 UI 全解

应做事项和禁止事项

  • 自定义初始屏幕以使你的应用与众不同。 你的初始屏幕由一幅图像和一种背景色组成,两者都可以自定义。设计良好的初始屏幕可以使你的应用更加吸引人。

    将图像和背景色结合在一起构成初始屏幕有助于使其更美观,而不会受安装应用的设备的外形规格所影响。当初始屏幕显示时,只有背景的大小会更改以补偿各种屏幕大小。你的图像会始终保持完整。

    若要了解如何添加和自定义此初始屏幕,请参阅快速入门:添加初始屏幕

  • 创建延长的初始屏幕以便可以在显示应用的登录页面之前完成其他任务。 你可以创建延长的初始屏幕来模拟由 Windows 显示的初始屏幕,进一步控制你的应用的加载体验。通过模拟系统所显示的初始屏幕,你可以为你的用户构建顺畅且内容充实的加载体验。如果应用需要更长时间才能准备其 UI 或加载网络数据,则可以在应用完成这些任务后使用延长的初始屏幕为用户显示消息。

    下面显示了 Windows 应用商店延长的初始屏幕。注意,此屏幕与初始屏幕完全相同,只不过它添加了一个“不确定环”进度控件,以便让用户知道该应用正在加载中。Windows 应用商店延长的初始屏幕的屏幕截图

    若要了解如何使用 SplashScreen 类来创建延长的初始屏幕,请参阅如何延长初始屏幕(使用 JavaScript 和 HTML 的 Windows 应用商店应用)如何延长初始屏幕(使用 C#/VB/C++ 和 XAML 的 Windows 应用商店应用)

    有关进度控件(如“不确定环”)的概述,请参阅进度控件指南

    提示  如果你使用片段加载来加载你的延长初始屏幕,你会注意到在 Windows 初始屏幕消失时间和你的延长初始屏幕显示时间之间存在闪烁。你看到此闪烁,是因为片段加载在 activated 事件处理程序完成执行之前就开始异步加载你的延长初始屏幕。你可以使用由初始屏幕示例演示的设计模式来避免这一不悦目的闪烁。使用该设计模式时,不是以片段形式加载延长的初始屏幕,而是在应用 UI 的上面简单地进行绘制。当其他加载任务完成后可以停止显示你的延长初始屏幕来显示应用的登录页面。或者,如果你希望继续以片段形式加载延长的初始屏幕,还可以通过获取激活延迟及异步响应 activated 事件来防止此闪烁。通过调用 activatedOperation.getDeferral 方法获取已激活事件的延迟。

  • 请勿使用初始屏幕或延长的初始屏幕来显示广告。 初始屏幕的目的是让用户知道,当加载应用时,他们需要的应用正在启动。在初始屏幕中引入外部元素会让用户不确定自己启动的应用是否正确,并且会使应用难以一眼就识别。

  • 请勿将延长的初始屏幕用作显示多个不同初始屏幕图像的机制。 初始屏幕和延长的初始屏幕的作用是为用户提供顺畅完美的加载体验。使用延长的初始屏幕来显示多个不同的初始屏幕图像会背离此目的,并且在你的用户看来显得不协调或令人困惑。你的延长初始屏幕只应该在完成其他任务的同时继续当前的加载体验。

  • 请勿使用初始屏幕或延长的初始屏幕来显示“关于”页面。 初始屏幕不应显示版本信息或其他应用元数据。请在应用的 Windows 应用商店描述或应用本身中显示此类信息。

用户体验

  • 使用可以明确标识你的应用的图像。 使用可以明确标识你的应用的图像和配色方案,从而使用户可以确定他们启动了正确的应用。制作独特的屏幕还有助于加深用户对品牌的印象。

  • 使用透明的 PNG 图像作为初始屏幕图像可以达到最佳视觉效果。 使用透明的 PNG 图像可以让你选择的背景色透过初始画面图像显示出来。否则,如果图像的背景色不同,初始画面看起来可能脱离背景,从而失去吸引力。

  • 提供你的能够针对全部三个缩放比例因子调整大小的初始屏幕图像版本。 所有应用都必须具有大小为 620 x 300 像素的初始画面图像,以供设备采用 1 倍缩放比例时使用。我们还建议你提供适合于 1.4 倍和 1.8 倍缩放比例的附加初始屏幕图像。为全部三个缩放比例因子提供图像可帮助你在不同的设备上创建干净且一致的启动体验。

    请使用下表来确定适合于每个缩放比例因子的初始屏幕图像所需具有的大小:

    缩放图像尺寸(像素)
    1x620 x 300
    1.4x868 x 420
    1.8x1116 x 540

     

  • 选择能够使用系统为初始屏幕图像分配的区域的图像。 当你选择初始屏幕图像时,请尽量充分利用针对每个缩放比例因子分配的空间。请参考缩放比例和图像大小表来确定适合于每个缩放比例因子的初始屏幕图像的大小。

    这可以帮助你通过确保图像的质量来生成高质量的初始屏幕。

  • 在初始屏幕消失后显示系统和事件相关的 UI。 可以决定通过侦听初始屏幕 dismissed 事件的方式安全显示系统或事件相关 UI 的时间。否则,关联 UI(如搜索窗格、消息对话框或 Web 身份验证代理)可能在显示初始屏幕的同时出现。这可能导致不受欢迎的视觉效果。

  • 在初始屏幕消失后启动进入动画。 许多应用希望在每次加载应用的登录页面时显示内容进入动画。可以决定通过侦听初始屏幕 dismissed 事件启动动画的时间。

延长的初始屏幕

  • 确保延长的初始屏幕的外观类似于 Windows 显示的初始屏幕。 延长初始屏幕应使用与 Windows 初始屏幕相同的背景色和图像。使用一致的图像和背景色有助于确保从 Windows 初始屏幕到应用的延长初始屏幕的过渡看上去非常专业且不会给用户留下不协调的感觉。

  • 将延长的初始屏幕图像放置到 Windows 显示初始屏幕图像的坐标处。 若要了解如何使用 SplashScreen 类定位你的延长初始屏幕图像,请参阅如何延长初始屏幕

  • 调整延长的初始屏幕的位置以响应重新调整事件大小,如旋转。 如果通过侦听 onresize 事件来缩放应用或旋转设备,则延长的初始屏幕应调整其初始屏幕图像的坐标。这有助于确保你的应用的加载体验看起来顺畅且专业,而无论用户如何操作其设备或在其屏幕上更改应用的布局。

  • 如果你显示你的延长初始屏幕的时间超过几秒钟,请添加一个进度环,以使用户知道你的应用仍在加载。 使用不确定进度环可让用户知道你的应用没有崩溃并且将很快做好准备。请考虑在进度环旁边显示单行文本,向用户简要解释你的应用正在做什么。例如,你的延长初始屏幕可以显示一个进度环和一条“正在加载”消息。

    使你的应用看起来更具响应性和使用户了解情况是为用户创造积极的加载体验的好方式。你可以在快速入门:添加进度控件中学习如何添加不确定进度环和文本。

其他使用指南

每个 Windows 应用商店应用都必须具有初始屏幕,它包括初始屏幕图像与背景色。 你可以自定义这两个功能。

当用户启动应用时,Windows 立即显示此初始屏幕。这可以在初始化应用资源的同时向用户提供即时反馈。 应用准备好交互后,Windows 即会取消初始屏幕。

设计良好的初始屏幕可以使你的应用更加吸引人。Windows 应用商店使用简单朴素的初始屏幕,如下所示:从初始屏幕示例中捕获初始屏幕 75% 比例的屏幕。

此初始屏幕是通过组合绿色背景色与透明 PNG 而创建的。

你可以使用 SplashScreen 类来自定义你的应用的启动体验,方法是延长初始屏幕和触发进入动画。

安全注意事项

以下文章提供了有关编写安全 C++ 代码的指南。

疑难解答

JavaScript:在转换到你的延长的初始屏幕期间避免闪烁

如何延长初始屏幕包含的建议可以帮助你避免看到闪烁:如果你在转换到延长的初始屏幕期间发现有闪烁,请在 <img> 标记中添加 onload="",如下所示:<img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />。这样将通过让系统在切换到延长的初始屏幕之前等待已经呈现图像来帮助阻止闪烁。

C#:在转换到你的延长的初始屏幕期间避免闪烁

如果你遵循如何延长初始屏幕中的说明,则可能会在转换到延长的初始屏幕期间发现有闪烁。如果在页面内容呈现完成前激活当前窗口(通过调用 Window.Current.Activate),则会发生闪烁。你可以通过确保在激活当前窗口前已读取了延长的初始屏幕图像来减少看到闪烁的可能性。此外,你还应该使用计时器来尝试避免闪烁,方法是在你激活当前窗口前只需简单地让你的应用程序等待一段时间,例如 50 毫秒。遗憾的是,没有任何确定的方法可以阻止闪烁,因为 XAML 采用异步方式呈现内容并且没有任何确定的方法可预测呈现的完成时间。

如果你已遵循了如何延长初始屏幕中的说明并在转换到延长的初始屏幕期间发现闪烁,则请遵循以下步骤来确保你已读取延长的初始屏幕并且在当前窗口激活前你的应用只是在等待:

  1. 在 ExtendedSplash.xaml 中,更新你的延长的初始屏幕的标记,以通知你何时已读取延长的初始屏幕。

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

    在读取该图像后触发 ImageOpened 事件。如本例所示,你应通过添加 ImageOpened 属性和指定事件处理程序的名称 (extendedSplashImage_ImageOpened) 来注册 ImageOpened 事件。

  2. 在 ExtendedSplash.xaml 中,在 ExtendedSplash 类中添加基于计时器并在读取你的延长的初始屏幕后激活当前窗口的代码。

    
            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();
            }
    
    

    本例展示如何响应 ImageOpened 事件以及如何使用计时器使你的应用程序在激活当前窗口前只进行等待。

  3. 按如下方式修改你的 OnLaunched 方法:

    
    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.
    }
    
    

    在本例中,我们已经删除了对当前窗口的 Activate 方法的调用。而是在触发 ImageOpened 事件后由 ExtendedSplash 对象执行激活,以指示延长的初始屏幕图像已读取。

  4. 在多种不同的设备上以及在多种不同的环境下测试你的代码,直到你可以确保你的代码可以有效地避免闪烁!

相关主题

对于设计人员
如何延长初始屏幕
快速入门:添加初始屏幕
初始屏幕示例
对于开发人员 (HTML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
快速入门:添加进度控件
对于开发人员 (XAML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
ImageOpened
OnLaunched
Activate

 

 

显示:
© 2014 Microsoft