人群中看到你的第一眼 -- 啟動螢幕設計

使用者打開應用後看到的第一個畫面就是啟動螢幕，雖然說啟動螢幕做的好壞對應用的最終功能影響不大，但是對使用者來說，第一印象非常重要；另外，使用者每次運作應用也都會看到啟動螢幕，是以，啟動螢幕的地位也還是挺重要的。

應用在顯示主界面前，需要初始化一些資料，複雜一些的應用，其初始化用時也會長一些，可能需要初始化一些基礎元件、登入到遠端伺服器、從遠端同步資料等等，這些都會導緻啟動螢幕存在較長的時間，同時，預設的啟動螢幕是一個靜态的畫面，使用者會感覺體驗不好。如果我們可以将啟動螢幕做的生動一些，就可以使得使用者體驗好一些。

下面我們将讨論兩種啟動螢幕的實作。

可以添加一個頁面，用來顯示新的啟動螢幕，在這個頁面中，我們還可以加入進度條和動畫效果，顯得生動一些，然後将主界面前的初始化操作都加在這個頁面中。具體實作步驟如下：

具體頁面顯示的内容，大家可以按自己的需要來設計，同時可以加入一些動畫，使得等待不再枯燥，不再細說。

啟動時跳轉到我們新加的啟動頁面，同時将啟動事件參數傳進來，可能會在後續導航中用到。

響應Page的Loaded事件，在事件進行中，進行必要的初始化任務；在任務完成後，跳轉到正确的後續頁面。

打開應用清單，在可見資産中的初始螢幕中，修改背景色和SplashPage一緻，確定可以平滑過渡；修改初始螢幕用到的圖檔資源為全透明。

現在運作一下程式，可以看到效果已經出來了，但是SplashPage的标題欄和預設啟動螢幕的标題欄不一緻，如果介意此處不一緻，可以用如下code來修改标題欄。

以上改造後，就可以看到我們啟動螢幕的真實效果了。注意，由于在SplashPage出現之前，會顯示系統的純色啟動螢幕，是以我們應盡量将所有初始化相關的操作放在SplashPage中，而不要放在App.xaml.cs中，以減少純色頁面的顯示時間。

上面的方案，一開始會有短暫的純色頁面，我們希望能夠保留系統的啟動螢幕，顯示應用的LOGO，然後平滑過渡到自定義的頁面上。下面講一下我們的一些探索和實作。

基本思路是，添加一個新頁面，用應用清單中指定給啟動螢幕的背景色和圖檔資源來設計頁面；然後在頁面加載時，根據系統啟動螢幕中圖檔的位置來調整目前頁面中的圖檔位置；另外，當頁面的大小發生變化時，需要對目前頁面重新調整。

運作一下，效果不錯，不會出現第一種方案的純色界面。但是當我們在手機模拟器上運作時，出現了嚴重問題，圖檔的大小完全對不上，調試跟蹤了一下發現，在手機上，SplashScreen中給出的系統圖檔的大小是手機的實體分辨率，需要按目前設定的顯示比例計算一下才能得到應該顯示的大小。

是以，我們将計算圖檔位置的代碼改為如下

再運作一下，在手機模拟器上，啟動圖檔的大小一緻了，可以銜接的上，但是圖檔的位置還是會向下抖一下，目測抖動的高度正好是手機狀态欄的高度。是以，我們可以用下面的代碼将頁面撐滿手機螢幕。

注意，之後跳到主界面時，需要根據實際情況決定是否将對應的值改回來。

手機模拟器調好了，使用真實手機運作，有較大機率會看到，在系統啟動螢幕和新啟動螢幕之間切換時，會輕微閃動一下。原因是系統啟動螢幕消失時，新啟動螢幕的圖檔還沒有加載渲染完成，是以，需要在圖檔渲染完成後，再切到新啟動螢幕。

這裡可以這樣做，在App.xaml.cs中不調用激活目前窗品，然後在ImageOpened事件進行中，啟動定時器，50ms後再激活目前視窗。

主要代碼如下

偶現啟動螢幕縮在手機的左上角，如圖。

這是使用者回報的問題，目前共接到兩起回報，不易複現，我們也隻偶現過一次，尚未找到原因。

針對使用者截圖的顯示效果，猜測有可能複現該問題時，取到的圖檔的尺寸資訊不是手機裝置的分辨率，比如可能寬大于高，是以我們針對性的添加了部分處理代碼，不确定是否可以解決該問題，待下個版本旺信上線後，再看是否還有使用者回報該問題。此處就不上代碼了。

方案一的優點是，新啟動螢幕的界面設計比較自由，可以任意發揮，同時，可以很好的在不同裝置上适配；缺點是，一開始會有一小段時間的純色螢幕，在低配的手機上比較明顯。

方案二的優點是，将系統啟動螢幕和新啟動螢幕做到了平滑過渡；缺點是界面設計時要考慮到系統啟動螢幕的顯示，設計受限，同時，在不同類型裝置上，系統傳入的啟動螢幕位置不同，需要針對性的進行調整。