優化 Silverlight 的安裝體驗

摘要：為 Microsoft Silverlight 全新使用者提供一個整合，以及品牌標示安裝體驗的最佳實踐和方法。

本頁內容

摘要

Microsoft Silverlight 是一個跨瀏覽器、跨平台的外掛程式，實現了次世代以 .NET 為基礎的多媒體體驗，以及豐富的網頁互動式應用程式。在透過瀏覽器閱覽 Silverlight 內容時，使用者會被要求在他們的電腦上，下載並安裝 Silverlight 外掛程式。因此，若想要在網站上使用 Silverlight 外掛程式來發表豐富的內容和資訊，就必須要再建立一個安裝體驗，以鼓勵使用者啟動、同意，並完成 Silverlight 安裝程序。該體驗必須能提醒使用者為什麼他們要安裝 Silverlight，並向使用者表明網站信賴 Silverlight，且能移除安裝及使用 Silverlight 的阻礙。

定義

預定體驗（Default Experience ）－當使用者使用已經安裝了適當版本的 Silverlight 瀏覽器來閱覽具有 Silverlight 功能的網頁時，將會看到的畫面。
安裝體驗（Installation Experience）－當使用者使用未安裝適當版本的 Silverlight 瀏覽器來閱覽具有 Silverlight 功能的網頁時，將會看到的畫面。

實現令人信服的 Silverlight 安裝體驗

欲實現令人信服的 Silverlight 安裝體驗，可經由下列三個步驟來完成：

設計您網頁的預定體驗。
依據預定體驗設計您網頁的安裝體驗。
將兩個體驗疊在一起。

設計目標

傳達在文件內容中的價值，只要安裝了 Silverlight 就能夠獲得。
提供一個明確的呼求，請使用者採取行動安裝 Silverlight。
消除阻礙使用者完成安裝的疑慮。

高階設計指導原則

提供一個窺探或指示，具 Silverlight 功能的內容看起來像什麼。
傳達給使用者，他們必須「取得 Silverlight」才能獲得應有的體驗。
使用完整的 Silverlight 提供的安裝提示，以確保使用者能有前後一致的體驗。

設計預定體驗

我們將使用一個簡單的網站來當範例，該網站使用了 Silverlight 品牌標示並展示了一段有趣的影片。網站將描述本文件所提出的設計建議。網站的預定體驗擷取畫面如下：

圖 1：預定體驗

預定體驗可典型地被切割成兩個不同的部分。第一個部分是 Silverlight <DIV>，這是螢幕上用來展示 Silverlight 內容的區域。第二個部分是周邊內容（Surrounding Content），這個部分一般包含圖片、連結、導覽元件，以及商標圖片。從這個範例，我們可以將螢幕切割成類似如下的兩個部分：

圖 2：在預定體驗內的 Silverlight Div

只要設計好您的網站體驗，就可以以它為基礎來設計您的安裝體驗。

設計安裝體驗

安裝體驗的目的是當 Silverlight 控制項無法使用時，不但有 Silverlight 安裝提示，而且在 Silverlight<DIV>內填入有意義的內容。因為 Silverlight <DIV>已經有事先定義好的尺寸大小，所以設計者可以使用這個特定的尺寸來建立當 Silverlight 控制項無法使用時的替代內容。

圖 3：品牌標示安裝體驗範例

設計者必須依照以下要點來建立用來插入 Silverlight DIV 的安裝體驗內容：

在<DIV>中必須包含一個子<DIV>，可用來放置 Silverlight 安裝提示。那個子<DIV> 必須寬 206px，高度是和您的地區語言所產生的安裝提示一樣高，比如說，英文的安裝提示是高 148px。確定該子 <DIV>內沒有任何內容，因為內容將會由 Silverlight.js 產生。
在<DIV>內不可包含任何的 javascript，因為當<DIV>的內容被自動更換時將會被破壞。
在<DIV>內必須包含外加的圖型要素，用來鼓勵使用者按下「Get Microsoft Silverlight」。
<DIV>內必須保持與週邊內容在風格上的連貫性。
<DIV>內必須提供使用者必要的後續安裝步驟。

<DIV>內必須包含文字，指出有些使用者必須在安裝完成後，重新啟動他們的瀏覽器。建議的文字內容是依下表所列且被確定出來。決定使用哪些文件，可經由檢查 Silverlight.js 的 Silverlight.ua.Browser 以及 Silverlight.available 兩個屬性來完成。

- Silverlight.ua.Browser 是一個字串型屬性定義由 Silverlight.js 所偵測出的瀏覽器形式。
- Silverlight.available 是一個布林值，當某版本的 Silverlight 已經被安裝在使用者電腦上時會設成 true。

下表提供了依照 Silverlight.ua.Browser 和 Sivlerlight.available 的值，在安裝體驗過程中必須顯示給使用者的建議文字。

Silverlight.ua.Browser	Silverlight.available	呈現給使用者的文字
MSIE	False	「當安裝完畢後，重新整理（按 F5）瀏覽器來活化您的 Silverlight 內容。」替代方法：您可使用稍後將說明的 InstallAndCreateSilverlight.js。如果使用這個方法，您可選擇不顯示另外的文字給這些使用者。
MSIE	True	「當安裝完畢，重新啟動瀏覽器來活化您的 Silverlight 內容。」
Firefox	False	「當安裝完畢，重新啟動瀏覽器來活化您的 Silverlight 內容。」
Firefox	True	「當安裝完畢，重新啟動瀏覽器來活化您的 Silverlight 內容。」
Safari	False	「當安裝完畢，重新啟動瀏覽器來活化您的 Silverlight 內容。」
Safari	True	「當安裝完畢，重新啟動瀏覽器來活化您的 Silverlight 內容。」
Unsupported	False	「您的瀏覽器可能不支援 Microsoft Silverlight。請參閱 http://www.microsoft.com/silverlight/system-requirements.aspx ，以得到進一步訊息。」
Unsupported	True	「您的瀏覽器可能不支援 Microsoft Silverlight。請參閱 http://www.microsoft.com/silverlight/system-requirements.aspx ，以得到進一步訊息。」

表 1：安裝後指引文字

或者，您也可以使用單一的文字字串來涵蓋所有的體驗，不過，這將為使用IE而沒有安裝 Silverlightd 的使用者建立次理想的安裝體驗。這種情形的建議文字為：

「您可能必須重新啟動瀏覽器來完成安裝」

安裝<DIV>設計範例

以下這個安裝<DIV>範例，將藉由向使用者展示一個如果安裝了 Silverlight 將會顯示的陰暗圖片內容，以慫恿使用者安裝 Silverlight。進一步地，文字將會加到圖片上，要求使用者安裝 Silverlight，如果有需要，請重新啟動瀏覽器。

藉由產生陰暗的圖片，我們將：

建立一個活動中控制項的螢幕快照。
接著，我們將修飾該圖片並透過視覺通知使用者這個網頁尚未活化，需要使用者做些行動。
最後，我們將加文字到圖片上，指引使用者安裝 Silverlight，如果有需要請重新啟動瀏覽器。

載入預定體驗到網頁瀏覽器 (Silverlight 必須已經安裝)，接著，當所關注的內容可在螢幕上看見時，我們將抓取螢幕快照，這可在瀏覽器為活動視窗時按下 Alt+PrtScn 來完成。然後將抓取到的螢幕快照由剪貼簿貼到圖形編輯器。圖形將被編輯成只包含 Silverlight<DIV>於螢幕中所充滿的部分，這部分必須要與 Silverlight <DIV>具備相同的尺寸。最後儲存圖片，以便做再進一步的利用。

圖 4：抓取 Silverlight DIV 螢幕快照

接著，我們將修飾圖片使之在視覺上指出該控制項尚未活化。這個範例是將整張圖片弄成陰暗來達成這個目的。根據您的安裝體驗以及網站設計，或許其它的方法將更有效也說不定。要將圖片弄得陰暗，首先在圖形編輯器打開這張圖，接著，在圖片上加入一個圖層。提供新的圖層一個白色的底色，然後減少該圖層的透明度至大約 40%。

圖 5：將圖片弄成陰暗

最後，我們將加入文字到圖片中，以加強要按「Get Microsoft Silverlight」的必要性。我們也會在文字下方留下空間來嵌入 Silverlight 安裝提示，以及安裝完後的指引文字。在本範例中，文字在頂端會是「要觀賞這段影片，您必須按底下的按鈕來安裝 Microsoft Silverlight」；在底端是「您可能在安裝完後必須重新啟動瀏覽器」。文字是被加在陰暗化圖片上後再插入另一個圖層，並將該圖層放置文字區塊上。

圖 6：加入文字：

底圖完成後，我們已經準備好可以建立一些 HTML 要注入 Silverlight <DIV>來展示安裝體驗。

圖 7：想要的安裝體驗

實現安裝體驗

此時，我們已經有了三組資源：網站的周邊內容、預定體驗的 Silverlight 內容，以及為安裝體驗準備的背景圖。現在我們可以加入適當的 JavaScript 和 HTML 來跟安裝體驗綁在一起。

範例網站的程式碼類似如下：

<DIV style="text-align:left; auto; height:716px; background-image:url(installImage.jpg);">
        <DIV style=” padding-left:392px; padding-top:350px;”>
                  <DIV ID=”InstallPromptDiv”>
                  </DIV>
        </DIV>
        <DIV ID="PostInstallGuidance" style="width:auto; height:auto; padding-top:20px;text-align:center; 
                  color:#D2E9F2; font-weight:bolder; font-size:medium;">
      </DIV>
      <script type="text/javascript">
	if ( Silverlight.ua.Browser == "MSIE" )
	{
	    if ( Silverlight.available )
	    {
		PostInstallGuidance.innerHTML=" When installation is complete,
		<br />restart your 
        browser to activate your Silverlight content.";
                  }
	    else
                  {
		PostInstallGuidance.innerHTML="";
	    }
	}
	else if ( Silverlight.ua.Browser == "Firefox" || Silverlight.ua.Browser == "Safari")
	{
	    PostInstallGuidance.innerHTML="When installation is complete,
	    <br />restart your browser
        to activate your Silverlight content.";
	}
	else
	{
	    PostInstallGuidance.innerHTML="Your browser may not be supported by 
	    Microsoft Silverlight.<br />Please visit  
        http://www.microsoft.com/silverlight/system-requirements.aspx for more information.";
	}
      </script>
</DIV>

圖 8：安裝體驗 HTML 範例

在範例程式中，第一個<DIV>是個容器，主要定義出寬度和高度及背景圖面。在此，背景圖片是上一個階段所製作出來的。在這個<DIV>裡還有其它兩個，第一個是用來給予它的子成分 InstallPromptDiv 正確的版面，第二個<DIV> PostInstallGuidance 則是用來給予在表1中所定義的安裝後指引文字正確的版面和字型。最後有個<script>成分，主要用來殖入安裝後指引文字。

整合安裝體驗與預定體驗

整合兩個體驗到單一個頁面是藉由 JavaScript 來完成的。這個文件使用了一個叫做 InstallAndCreateSilverlight.js 的幫助者檔案，以協助完成這個整合。這個部分首先會涵蓋 Silverlight.InstallAndCreateSilverlight(…) 這個參考實作，接著將提出一些簡化的 HTML ，以表示一個網頁要被修飾的安裝體驗。最後將整合 InstallAndCreateSilverlight(…) 到這個 HTML 內來把安裝體驗綁到預定體驗內。

InstallAndCreateSilverlight.js

檔案 InstallAndCreateSilverlight.js 是呼叫 Silverlight.InstallAndCreateSilverlight 方法的參考實作，目的是當安裝一完成就立刻實體化 Silverlight。目前這個實作只支援在 Windows 的 Internet Explorer。在其它支援的平台，這個方法就和直接呼叫 CreateSilverlight 有相同的效果。無論如何，都算是外加利益，這個方法的實作將可簡化建立一個跨越所有平台的優化安裝體驗。

if(!window.Silverlight)
    window.Silverlight={};

Silverlight.InstallAndCreateSilverlight = function(version, SilverlightDiv, installExperienceHTML, 
installPromptDivID, createSilverlightDelegate)
{
    var RetryTimeout=3000;	              //The interval at which Silverlight instantiation is attempted(ms)	
    if ( Silverlight.isInstalled(version) )
    {
	createSilverlightDelegate();
    }
    else
    {
	if ( installExperienceHTML && SilverlightDiv )
	{
	    SilverlightDiv.innerHTML=installExperienceHTML;
	    document.body.innerHTML;
	}
               if (installPromptDivID)
               {
	    var installPromptDiv = document.GetElementById(installPromptDivID);
	    if ( installPromptDiv )
	          installPromptDiv.innerHTML = Silverlight.createObject(null, null, null, {version: version, 
              inplaceInstallPrompt:true},{}, null);
               }
        	TimeoutDelegate = function()
	{
	    Silverlight.InstallAndCreateSilverlight(version, null, null, null, createSilverlightDelegate);
	}
	setTimeout(TimeoutDelegate, RetryTimeout);
    }
}

圖 9： Silverlight.InstallAndCreateSilverlight 實作

Silverlight.InstallAndCreateSilverlight 接收三個參數，使用這個方法時所有參數都為必須。

參數	型態	說明	範例
Version	String	這個網站所要求的 Silverlight 版本。與 Silverlight.createObject 版本參數相同。	‘1.0’
Version		如果 Silverlight 未安裝時，要用來殖入安裝體驗的 <DIV> 一般是和當作Parent Element (pe) 傳進 Silverlight.CreateObject 用相同的參數。	document.getElementById(‘SilverlightDiv’)
nstallExperienceHTML		一串字串用來表示如果 Silverlight 尚未安裝時，該被顯示 Silverlight Div 的 HTML。如果這個 HTML 是以其它的方式產生的話，請傳入 null。	‘<DIV style=”…</DIV>’
installPromptDivID	Object	如果 Silverlight 未安裝時，將要包含安裝提示的<DIV> 。	‘InstallPromptDIV’
createSilverlightDelegate	Method	當安裝完成時，要用來呼叫以實體化 Silverlight 控制項的方法。如果在客戶端已經有安裝 Silverlight，這個方法將會立刻被呼叫執行。	CreateSilverlight

圖 10： InstallAndCreateSilverlight 參數

需要的 Script 檔參考

為了完成品牌標示安裝體驗，我們的網頁必須參考三個檔案：

Silverlight.js
CreateSilverlight.js
InstallAndCreateSilverlight.js

每一個檔案都必須在網頁的<HEAD>內參考。Silverlight.js 應該是從 Silverlight 1.0 SDK 中最晚的實作，且不應該以任何形式被修改。CreateSilverlight.js 必須包含 CreateSilverlight 這個方法，在方法中包含了為我們的控制項使用合適參數以呼叫 Silverlight.CreateObject 。這兩個檔案會在此作描述。InstallAndCreateSilverlight.js 必須包含前面所提到的 Silverlight.InstallAndCreateSilverlight 的實作，或是與相同的 API 有關之不同實作。

HTML 範例

現在我們就來寫一些擬似 HTML，以代表我們的品牌標示 Silverlight 功能網頁的資源。為了清晰明瞭，本文接下來將只提及從下表中反白部分的 HTML 內容。

圖 11：HTML範例

實作安裝體驗

要加入安裝體驗，內定我們將如下所示修飾 HTML：

在這個 HTML 中有四個主要改變的地方。

第一，我們把 script tag 移到 Silverlight <DIV>外面。
然後我們移動事先設計好的安裝 HTML 到一個可傳到 InstallAndCreateSilverlight 的字串變數。
我們替換呼叫 CreateSilverlight 成為呼叫 InstallAndCreateSilverlight。
最後，我們提供給使用者當安裝完成後的瀏覽器指示。

如果 Silverlight 尚未安裝，呼叫 InstallAndCreateSilverlight 將加入安裝 HTML 以及 Silverlight 直接安裝提示到 InstallPromptDiv，讓使用者可以從品牌標示安裝體驗裡安裝 Silverlight 產品。一旦，偵測到 Silverlight 已經安裝， InstallAndCreateSilverlight 將呼叫 CreateSilverlight。 CreateSilverlight 是寫成用來注入 Silverlight 物件到 Silverlight <DIV>，執行時，將會把安裝體驗內容轉換成最終的 Silverlight 內容。

圖 12：品牌標示安裝轉化為 Silverlight 內容

委派複合的 Silverlight 控制項

當在單一個 html 頁面上使用了數個 Silverlight 控制項時，則每一個 Silverlight 控制項會顯示安裝提示的標章，但是這會造成使用者對安裝體驗的困惑而降低了這個網站的訴求。這個可以藉由限制另外的控制項，直到安裝完 Silverlight 才啟動以做為補救。要達到這個目的，其它的控制項物件實體化必須放在一個函式，可在 InstallAndCreateSilverlight 方法內被 createSilverlight 委派函式所呼叫。比如說，在主 Silverlight 媒體播放器上端加一個 Silverlight 選單，我們必須做以下的動作：

加入一個 div 層到 default.html，以包含新的 Silverlight 物件。
插入 createSLobjects 函式，當安裝完畢時用來實體化所有的 Silverlight 物件。
加入新的 createSLobjects 為 installandcreatesilverlight 方法的委派參數。

現在有數個 Silverlight 物件在網頁上，但選單在 Silverlight 尚未安裝之前並不會秀出。這阻礙了安裝體驗以及預定體驗，因為如果使用者不想要安裝 Silverlight 的話，他們不能使用網站的其它部分。我們必須為尚未安裝 Silverlight 的狀況下，加入簡單的 html 選單。您可以在為 Silverlight 無法使用時的安裝體驗 script 內加入一行敘述。

現在有了數個 Silverlight 控制項在單一頁面上的單一安裝體驗。

其它的最佳化機會

開發一個專門用來安裝的頁面，以實作這個體驗，讓其它的網頁若在 Silverlight 無法使用時，可以導到這一頁。

共通的錯誤

呼叫 InstallAndCreateSilverlight 必須放置在 Silverlight <DIV>的外面，以避免同步化錯誤。
在 InstallAndCreateSilverlight 呼叫 SetTimeout 必須為該方法的最後的陳述式，以避免同步化錯誤。

結論

經由使用本文所解釋的導引選項，欲使用 Silverlight 外掛來實現豐富網頁內容及資訊的網站，以建立一個安裝體驗，用來鼓勵使用者啟動、同意，並完成 Silverlight 安裝程序。藉著設計及開發 Silverlight 的安裝體驗，您可以協助並確保您的使用者與您的網站之間的互動，將會是流暢的、容易的，以及卓越的。