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

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

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

下面我們將討論兩種啟動螢幕的實現。

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

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

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

protected
override
void
onlaunched(launchactivatedeventargs e)
window.current.activate();
}

響應page的loaded事件，在事件處理中，進行必要的初始化任務；在任務完成後，跳轉到正確的後續頁面。

private
async
void page_loaded(object
sender, routedeventargs e)

開啟應用清單，在可見資產中的初始螢幕中，修改背景色和splashpage一致，確保可以平滑過渡；修改初始螢幕用到的資源為全透明。

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

//
針對mobile
if (windows.foundation.metadata.apiinformation.istypepresent("
windows.ui.viewmanagement.statusbar"))
//針對desktop
//背景色設定為需要顏色
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;

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

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

執行一下，效果不錯，不會出現第一種方案的純色介面。但是當我們在手機模擬器上執行時，出現了嚴重問題，的大小完全對不上，除錯跟蹤了一下發現，在手機上，splashscreen中給出的系統的大小是手機的物理解析度，需要按當前設定的顯示比例計算一下才能得到應該顯示的大小。

因此，我們將計算位置的**改為如下

void
positionimage()
//mobile
else
if (windows.system.profile.analyticsinfo.versioninfo.devicefamily.equals("
windows.mobile
", stringcomparison.currentcultureignorecase))
//xbox等沒試過，編不出來
else
}

再執行一下，在手機模擬器上，啟動的大小一致了，可以銜接的上，但是的位置還是會向下抖一下，目測抖動的高度正好是手機狀態列的高度。因此，我們可以用下面的**將頁面撐滿手機螢幕。

if (windows.foundation.metadata.apiinformation.istypepresent("
windows.ui.viewmanagement.statusbar"))

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

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

主要**如下

private
dispatchertimer showwindowtimer;
private
void onshowwindowtimer(object sender, object
e) 
private
void extendedsplashimage_imageopened(object
sender, routedeventargs e)

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

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

針對使用者截圖的顯示效果，猜測有可能復現該問題時，取到的的尺寸資訊不是手機裝置的解析度，比如可能寬大於高，因此我們針對性的新增了部分處理**，不確定是否可以解決該問題，待下個版本旺信上線後，再看是否還有使用者反饋該問題。此處就不上**了。

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

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

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

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

從冒險中看到的

讓領導看到你所做的

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

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

從冒險中看到的

讓領導看到你所做的

相關推薦

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

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