人群中看到你的第一眼 -- 启动屏幕设计
Posted MS-Universal AI Platform
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了人群中看到你的第一眼 -- 启动屏幕设计相关的知识，希望对你有一定的参考价值。
背景
用户打开应用后看到的第一个画面就是启动屏幕，虽然说启动屏幕做的好坏对应用的最终功能影响不大，但是对用户来说，第一印象非常重要；另外，用户每次运行应用也都会看到启动屏幕，因此，启动屏幕的地位也还是挺重要的。
应用在显示主界面前，需要初始化一些数据，复杂一些的应用，其初始化用时也会长一些，可能需要初始化一些基础组件、登录到远程服务器、从远程同步数据等等，这些都会导致启动屏幕存在较长的时间，同时，默认的启动屏幕是一个静态的画面，用户会感觉体验不好。如果我们可以将启动屏幕做的生动一些，就可以使得用户体验好一些。
下面我们将讨论两种启动屏幕的实现。
方案一
可以添加一个页面，用来显示新的启动屏幕，在这个页面中，我们还可以加入进度条和动画效果，显得生动一些，然后将主界面前的初始化操作都加在这个页面中。具体实现步骤如下：
1、添加SplashPage
具体页面显示的内容，大家可以按自己的需要来设计，同时可以加入一些动画，使得等待不再枯燥，不再细说。
2、修改App.xaml.cs
启动时跳转到我们新加的启动页面，同时将启动事件参数传进来，可能会在后续导航中用到。
protected override void OnLaunched(LaunchActivatedEventArgs e) { Frame rootFrame = Window.Current.Content as Frame; if (rootFrame == null) { // 将LaunchActivatedEventArgs传入，这样SplashPage中可以根据启动参数完成正确的跳转 SplashPage splashPage = new SplashPage(e); Window.Current.Content = splashPage; } Window.Current.Activate(); }
3、SplashPage中的处理
响应Page的Loaded事件，在事件处理中，进行必要的初始化任务；在任务完成后，跳转到正确的后续页面。
private async void Page_Loaded(object sender, RoutedEventArgs e) { // 必要的初始化任务 await Task.Delay(5000); // 后续跳转 Frame rootFrame = new Frame(); // 此处需要根据SplashPage构造时传入的LaunchActivatedEventArgs做对应跳转 rootFrame.Navigate(typeof(MainPage)); Window.Current.Content = rootFrame; }
4、修改系统默认的启动屏幕
打开应用清单，在可见资产中的初始屏幕中，修改背景色和SplashPage一致，确保可以平滑过渡；修改初始屏幕用到的图片资源为全透明。
5、界面微调
现在运行一下程序，可以看到效果已经出来了，但是SplashPage的标题栏和默认启动屏幕的标题栏不一致，如果介意此处不一致，可以用如下code来修改标题栏。
// 针对mobile if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar")) { // 需要引用Windows Mobile Extensions for the UWP StatusBar sb = StatusBar.GetForCurrentView(); // 背景色设置为需要颜色 sb.BackgroundColor = Color.FromArgb(255, 100, 149, 237); sb.BackgroundOpacity = 1; } // 针对desktop ApplicationView appView = ApplicationView.GetForCurrentView(); ApplicationViewTitleBar titleBar = appView.TitleBar; // 背景色设置为需要颜色 Color bc = Color.FromArgb(255, 100, 149, 237); titleBar.BackgroundColor = bc; titleBar.InactiveBackgroundColor = bc; // 按钮背景色按需进行设置 titleBar.ButtonBackgroundColor = bc; titleBar.ButtonHoverBackgroundColor = bc; titleBar.ButtonPressedBackgroundColor = bc; titleBar.ButtonInactiveBackgroundColor = bc;
以上改造后，就可以看到我们启动屏幕的真实效果了。注意，由于在SplashPage出现之前，会显示系统的纯色启动屏幕，所以我们应尽量将所有初始化相关的操作放在SplashPage中，而不要放在App.xaml.cs中，以减少纯色页面的显示时间。
方案二
上面的方案，一开始会有短暂的纯色页面，我们希望能够保留系统的启动屏幕，显示应用的LOGO，然后平滑过渡到自定义的页面上。下面讲一下我们的一些探索和实现。
最初的实现
基本思路是，添加一个新页面，用应用清单中指定给启动屏幕的背景色和图片资源来设计页面；然后在页面加载时，根据系统启动屏幕中图片的位置来调整当前页面中的图片位置；另外，当页面的大小发生变化时，需要对当前页面重新调整。
在延长显示初始屏幕的时间里，已经有了详细的实现步骤，可以很快的完成这种启动屏幕的实现，这里不再赘述。下面主要讲一下采用这种实现，我们遇到的一系列问题。
问题1
运行一下，效果不错，不会出现第一种方案的纯色界面。但是当我们在手机模拟器上运行时，出现了严重问题，图片的大小完全对不上，调试跟踪了一下发现，在手机上，SplashScreen中给出的系统图片的大小是手机的物理分辨率，需要按当前设置的显示比例计算一下才能得到应该显示的大小。
因此，我们将计算图片位置的代码改为如下
void PositionImage() { // desktop if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily.Equals("windows.desktop", StringComparison.CurrentCultureIgnoreCase)) { extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X); extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y); extendedSplashImage.Height = splashImageRect.Height; extendedSplashImage.Width = splashImageRect.Width; } // mobile else if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily.Equals("windows.mobile", StringComparison.CurrentCultureIgnoreCase)) { // 获取一个值，该值表示每个视图（布局）像素的原始（物理）像素数。 double density = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel; extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X / density); extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y / density); extendedSplashImage.Height = splashImageRect.Height / density; extendedSplashImage.Width = splashImageRect.Width / density; } // xbox等没试过，编不出来 else { } }
问题2
再运行一下，在手机模拟器上，启动图片的大小一致了，可以衔接的上，但是图片的位置还是会向下抖一下，目测抖动的高度正好是手机状态栏的高度。因此，我们可以用下面的代码将页面撑满手机屏幕。
if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar")) { // 需要引用Windows Mobile Extensions for the UWP StatusBar sb = StatusBar.GetForCurrentView(); // 调整为透明，也可以用启动屏幕的背景色+不透明 sb.BackgroundOpacity = 0; // 撑满手机屏幕 Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode(Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow); }
注意，之后跳到主界面时，需要根据实际情况决定是否将对应的值改回来。
问题3
手机模拟器调好了，使用真实手机运行，有较大机率会看到，在系统启动屏幕和新启动屏幕之间切换时，会轻微闪动一下。原因是系统启动屏幕消失时，新启动屏幕的图片还没有加载渲染完成，因此，需要在图片渲染完成后，再切到新启动屏幕。
这里可以这样做，在App.xaml.cs中不调用激活当前窗品，然后在ImageOpened事件处理中，启动定时器，50ms后再激活当前窗口。
主要代码如下
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(); }
问题4
偶现启动屏幕缩在手机的左上角，如图。
这是用户反馈的问题，目前共接到两起反馈，不易复现，我们也只偶现过一次，尚未找到原因。
针对用户截图的显示效果，猜测有可能复现该问题时，取到的图片的尺寸信息不是手机设备的分辨率，比如可能宽大于高，因此我们针对性的添加了部分处理代码，不确定是否可以解决该问题，待下个版本旺信上线后，再看是否还有用户反馈该问题。此处就不上代码了。
方案总结
方案一的优点是，新启动屏幕的界面设计比较自由，可以任意发挥，同时，可以很好的在不同设备上适配；缺点是，一开始会有一小段时间的纯色屏幕，在低配的手机上比较明显。
方案二的优点是，将系统启动屏幕和新启动屏幕做到了平滑过渡；缺点是界面设计时要考虑到系统启动屏幕的显示，设计受限，同时，在不同类型设备上，系统传入的启动屏幕位置不同，需要针对性的进行调整。
以上是关于人群中看到你的第一眼 -- 启动屏幕设计的主要内容，如果未能解决你的问题，请参考以下文章