回應式體驗的行動檢視區

行動檢視區可讓您在各種大小的畫面上預覽Adobe Target活動。

行動檢視區預覽功能專為回應式網站而設計，在各種裝置、視窗和螢幕大小上皆呈現良好。 回應式網站會自動調整並適應任何螢幕大小，包括桌上型電腦、筆記型電腦、平板電腦或行動電話。

檢視區是以螢幕上的網頁所填入的矩形大小來定義。檢視區是瀏覽器視窗的大小，減去捲軸和工具列。 瀏覽器使用「CSS 像素」。對於許多裝置，例如有視網膜螢幕的裝置，檢視區小於公布的裝置解析度。

以下是常用裝置的檢視區和解析度。 請記得在Target中使用檢視區大小。

若要傳送活動給特定裝置上的訪客，請在活動圖表中為該裝置選擇適當的對象。 使用「行動裝置 Web 撰寫器」，針對該裝置來編輯活動中的頁面。若要在整個數位體驗中執行活動，以確保在所有裝置上都看起來不錯，請勿套用鎖定目標。 請改為使用行動檢視區，在每個螢幕大小上預覽活動。

對於回應式網站，通常您的網站是設計為在由具有特定螢幕大小的裝置存取時，以不同檢視開啟。 觸發新檢視的螢幕大小稱為 CSS 中斷點。CSS中斷點是網站內容根據裝置寬度回應，以向訪客顯示最佳配置的點。 CSS斷點也稱為媒體查詢。

將CSS中斷點儲存在Target中，以便您可以針對所定義的每個檢視預覽體驗。 這些體驗會顯示在Target介面的行動檢視區中。 若要開啟每一個螢幕大小的檢視，請在畫面頂端按一下該檢視區。

如果您的網站沒有回應，如果您的活動鎖定在特定裝置上，請使用行動網站撰寫器來檢視網站。

行動檢視區設定

設定在建立體驗時要提供使用的行動檢視區。

1. 按一下「管理 > 可視化體驗撰寫器」。

2. 在​行動檢視區設定​區段中，按一下​新增。

   

   或

   若要變更現有行動檢視區的設定，請選取該檢視區，然後按一下「編輯（鉛筆）」圖示。

3. 輸入行動檢視區的名稱。

   為您的行動檢視區提供易於識別的描述性名稱。名稱的長度最多可為 36 個字元。

4. 指定行動裝置的螢幕大小，包括寬度和高度。

   寬度可以是150到968像素。 高度可以是150到1280像素。

5. (可選) 選取裝置的作業系統。

   選項:

   • Android
   • iOS
   • Windows
   • Symbian
   • Blackberry

   如果您使用增強體驗撰寫器並選擇作業系統， 會在您檢視頁面時模擬該裝置。Target例如，如果回應式網站上的Android與iOS的外觀和風格不同，Target會模擬該行為。

6. 按一下​「儲存」。

建立回應式體驗

將行動檢視區新增至您的Target活動，為行動螢幕建立回應式體驗。

1. 建立所需的活動。

2. 在可視化體驗撰寫器 (VEC)中，按一下​Settings​齒輪圖示，然後選取​Add Mobile Viewports。

   

3. 按一下​「裝置」​圖示，然後啟用應該具有行動檢視區的每個裝置。

   

   行動檢視區會根據寬度從最小到最大列出。

4. 視需要編輯行動檢視區。

   您對體驗所做的任何變更都會套用至所有裝置上的體驗。 例如，您可以變更標題中的文字。

   將游標移至檢視區的名稱來查看檢視區的大小。

   

5. 如果需要，請按一下所需的方向圖示，在直向和橫向模式之間切換。

   

訓練影片

以下影片含有本文章探討之概念的詳細資訊。

可視化體驗撰寫器 (2/2) (上午 07:29)

下列示範影片包含透過可視化體驗撰寫器來使用行動檢視區的相關資訊:

• 重新命名和複製體驗
• 建立重新導向體驗
• 將活動鎖定在單一 URL 或一組 URL
• 建立多頁活動
• 針對回應性網站預覽和建置體驗
• 使用覆蓋來強調顯示元素的類型

Adobe Target中的帳戶偏好設定

此影片包含設定行動檢視區的相關資訊，從影片的4:40開始。