人群中看到你的第一眼 -- 启动屏幕设计

原文:人群中看到你的第一眼 -- 启动屏幕设计

背景

用户打开应用后看到的第一个画面就是启动屏幕,虽然说启动屏幕做的好坏对应用的最终功能影响不大,但是对用户来说,第一印象非常重要;另外,用户每次运行应用也都会看到启动屏幕,因此,启动屏幕的地位也还是挺重要的。

应用在显示主界面前,需要初始化一些数据,复杂一些的应用,其初始化用时也会长一些,可能需要初始化一些基础组件、登录到远程服务器、从远程同步数据等等,这些都会导致启动屏幕存在较长的时间,同时,默认的启动屏幕是一个静态的画面,用户会感觉体验不好。如果我们可以将启动屏幕做的生动一些,就可以使得用户体验好一些。

下面我们将讨论两种启动屏幕的实现。

 

方案一

可以添加一个页面,用来显示新的启动屏幕,在这个页面中,我们还可以加入进度条和动画效果,显得生动一些,然后将主界面前的初始化操作都加在这个页面中。具体实现步骤如下:

 

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

偶现启动屏幕缩在手机的左上角,如图。

这是用户反馈的问题,目前共接到两起反馈,不易复现,我们也只偶现过一次,尚未找到原因。

针对用户截图的显示效果,猜测有可能复现该问题时,取到的图片的尺寸信息不是手机设备的分辨率,比如可能宽大于高,因此我们针对性的添加了部分处理代码,不确定是否可以解决该问题,待下个版本旺信上线后,再看是否还有用户反馈该问题。此处就不上代码了。

 

方案总结

方案一的优点是,新启动屏幕的界面设计比较自由,可以任意发挥,同时,可以很好的在不同设备上适配;缺点是,一开始会有一小段时间的纯色屏幕,在低配的手机上比较明显。

方案二的优点是,将系统启动屏幕和新启动屏幕做到了平滑过渡;缺点是界面设计时要考虑到系统启动屏幕的显示,设计受限,同时,在不同类型设备上,系统传入的启动屏幕位置不同,需要针对性的进行调整。

 

时间: 2017-09-20
Tags: windows

人群中看到你的第一眼 -- 启动屏幕设计的相关文章

CentOS7中MariaDB修改datadir后无法启动的解决方法_Linux

发现问题 最近想把服务器的CentOS 6.8升级上CentOS7.但是失败了,重装了系统,重装以后挂载好数据盘后发现MariaDB起不来了,查journal log,只有一行warning can't create test file /var/lib/mysql/core.lower-test 解决方法 在网上查了一下,有两种方案      第一是说selinux导致的,但是ucloud的镜像默认就是关闭selinux的,所以不是这个问题      第二说是apparmor限制了进程的目录读

想要成功做"标题党" 第一眼就要抓住客户眼球

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 无论你是在做网络营销也好,做网络创业.网赚也罢,或者是在维护自己博客论坛和公司主页.外链一定是少不了要做的.在这么一个网络信息大爆炸的时代,如何让客户户看到你的第一眼就喜欢上你呢? 下面,我们以在天涯论坛高质量,高浏览回复量的帖子来分析一下,如何让网友第一眼就喜欢上你的帖子. 1.使用数字:在网上发帖多的朋友一定有这样的体会,人们更喜欢看到数

权威眼科专家为都市人群讲解最实用的爱眼之道

年轻人长期把饮料当水喝.不注意控制血糖血脂和血压,会增加患上糖尿病视网膜病变的风险?李筱荣介绍,一些不良生活习惯确实会为年轻人的眼睛健康带来威胁,且越年轻发病越凶险. 快节奏.高效率的都市生活,每天八小时以上的伏案工作,色香味俱全的高油高脂酒宴-- 绚丽世界里的各种感官体验,正在不断冲击着我们的眼球.我们唯恐看不够,却少有时间去关心一下自己的眼睛是否安好.在E时代,眼睛是最受累的器官,加上我们用眼不当,眼病正在不断地年轻化.怎样才能更好地呵护心灵的窗户.让爱眼落实在实处呢? 今天,"全民养生&q

G3笔记本迎来中移动3G时代第一个春天

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;  随着时代的进步,技术的飞速发展,网络早已成为了我们生活中不可获取的一部分,而3G新技术的问世,更是标志着网络将迎来一场划时代的革命. G3时代的到来可以说是大势所趋,生活节奏的加快,对网络的需求以及要求都随之水涨船高,更多人群迫切的希望能够享受随时随地的网络,高速和便捷成了人们追逐的热点.信息时代最有价值的莫过于高速传播的膨胀的海量信息,谁能及时准确的掌握信息谁就

javaweb-在ssh 中 用ServletActionContext获取session时启动报错

问题描述 在ssh 中 用ServletActionContext获取session时启动报错 ServletActionContext.getRequest().getSession(); 怎么才能在启动的时候就有ServletActionContext,而不用在ActionSupport处理请求时在获取 解决方案 是报空指针吗? 没有请求时 ServletActionContext.getRequest() 为null 解决方案二: http://blog.csdn.net/suncaoyo

qml 中如何显示视频第一帧作为预览,不播放

问题描述 qml 中如何显示视频第一帧作为预览,不播放 qml中通过video来播放视频有没有办法将视频的第一帧作为预览显示,或者用其他类型能解决这个问题也行

请求-IIS中MVC4应用程序是如何启动的?

问题描述 IIS中MVC4应用程序是如何启动的? 问个问题,想MVC4 Web Application这种应用程序发布到IIS的时候根本不需要设置启动的默认页面,如index.asp,default.html等,那么IIS是如何接收用户请求并返回对应相应页面的呢,或者说IIS也有读取Global.asax的能力? Sorry,我是新手,好像没有C币,C币哪里来的?

在网页中修改用户电脑上的启动菜单和浏览器首页,会的来回答

问题描述 在网页中修改用户电脑上的启动菜单和浏览器首页,会的来回答 在网页中修改用户电脑上的启动菜单和浏览器首页,以及修改快捷方式怎么做?要做到隐藏和免杀 解决方案 出于浏览器安全性的考虑,这个是做不到的,除非浏览器有漏洞.

vs2010-为什么在VS2010中运行文件时出现“无法启动程序 拒绝访问”

问题描述 为什么在VS2010中运行文件时出现"无法启动程序 拒绝访问" 在电脑装了vs 发现不能用 相对的修改了一些东西之后,总算成功1个 失败0个了 可是一直跳出"无法启动程序,拒绝访问"的对话框查了好多 都不顶用 特来求助,能否帮个小忙呀~ 解决方案 就算我注销计算机再登陆在启动VS依然无法调试只有重启才能解决问题 解决方案二: 再说一下就算我注销计算机再登陆在启动VS依然无法调试只有重启才能解决问题 解决方案三: 话说楼主解决问题了么,每次只能重启计算机才能