互動式通訊製作UI簡介

製作互動式通訊的使用者介面是直覺式的,並提供下列製作互動式通訊的列印和網路頻道:

  • WYSIWYG拖放檔案編輯器
  • 資產的整合儲存庫——上傳至伺服器並在伺服器上建立的資產可在互動式通訊製作介面的資產瀏覽器中使用

當您建立新的或編輯現有的互動式通訊時,您會使用下列使用者介面元素:

互動式通訊製作使用者介面

A.側欄 B. Page工具列 C. ​Content區域

側欄

A. Browser C. C. C. C. Properties瀏覽器屬性瀏覽 器d. ​B瀏覽器E.B資產來源資料來源——來源——來源——模型——主瀏覽器——主瀏覽器——主瀏覽器內容

側欄包括:

  • 頻道瀏覽器

頻道瀏覽器可協助您在互動式通訊的列印和網路頻道之間切換。 根據您在頻道瀏覽器中選取的頻道,瀏覽器(例如「內容」和「元件」)會顯示選項。

  • 內容
    瀏覽器在內容瀏覽器中,您可以看到所選頻道的檔案物件階層。作者可在「檔案物件樹」中點選該元素,以導覽至特定元件。 作者可以在Web頻道中搜尋物件,並從此樹狀結構重新排列物件。

  • 屬性瀏覽器

    可讓您編輯元件的屬性。 屬性會根據元件而變更。 例如,若要查看文檔容器的屬性:
    選取元件,然後點選field-level > 檔案容器,然後點選cmppr

  • 資產瀏
    覽器——分離不同類型的內容,例如版面片段、影像、檔案、頁面、影片。作者可將資產拖放至互動式通訊中。

  • 元件
    瀏覽器包含可用來建立檔案列印和網路通道的元件。您可以將元件拖曳至「互動式通訊」以新增元素,並依需求設定新增的元素。 下表說明列於「元件」瀏覽器中的列印和網頁頻道元件:

元件 Print Channel Web Channel 功能
圖表 ý ý 新增圖表,您可在「互動式通訊」中使用,以視覺化方式呈現從表單資料模型收集項目擷取的二維資料。
文件片段 ý ý 可讓您將可重複使用的元件、文字、清單或條件新增至互動式通訊。 您新增至互動式通訊的可重複使用元件可以是以表單資料模型為基礎,或是沒有表單資料模型。
影像 ý ý 讓您插入影像。
面板 - ý 「面板」元件是將其他元件分組在一起的預留位置,並控制在互動式通訊中如何排列一組元件。 面板元件還允許您讓一組元件為最終用戶重複使用,例如在填寫教育證書所需的多個條目中。 此外,最好將每個面板用於具有多個標籤的互動式通訊的標籤。
表格 * ý 新增表格以整理行和欄中的資料。
目標區域 ** ý 在Web頻道中插入目標區域,以組織Web頻道特定的元件。
文字 - ý 將文字新增至互動式通訊的網路頻道。 文本可以利用表單資料模型對象,使內容動態化。

*使用列印頻道中的版面片段來新增表格。

**在列印頻道中,XDP/列印範本中預先定義目標區域。 您無法使用互動式通訊編寫UI新增目標區域。

  • Data Sources瀏
    覽器Data Sources瀏覽器以您建立互動式通訊時選取的資料模型形式顯示可用資料來源。

使用元件的關鍵點

使用互動式通訊元件時的要點如下:

  • 每個元件都具有控制其外觀和功能的相關屬性。 若要設定元件的屬性,請點選元件並點選cmppr,以在「屬性」瀏覽器中開啟元件屬性。

  • 元件以其元素名稱來識別。 當您點選cmppr時,可以變更屬性瀏覽器中的「元素名稱」欄位值,以變更元件的名稱。 「元素名稱」欄位僅接受字母、數字、連字型大小(-)和底線(_)。 不允許使用其他特殊字元,元素名稱應以字母開頭。

  • 只要「互動式通信」上顯示標題,您就可以在編輯器中修改內嵌的「互動式通信」元件的「標題」屬性,而不開啟「屬性」瀏覽器。 若要這麼做:

    1. 點選以選取具有「標題」屬性且其「隱藏標題」屬性已停用的元件。

    2. 點選aem_6_3_edit可讓標題變成可編輯。

    3. 修改標題並點選Return鍵,或點選元件外部的任何位置以儲存變更。 點選Esc鍵可捨棄變更。

元件工具欄

元件工具列標籤

當您選取元件時,會看到工具列,可讓您使用它。 您可以選擇剪下、貼上、移動和指定元件屬性。 您的選項包括:

A.配置:當您點選「設定」時,會在側欄中顯示元件屬性。

B.編輯規則:當您點選「編輯規則」時,會出現「規則編輯器」,您可在其中編輯和建立所選元件的規則。 在規則編輯器中,您也可以選取其他表單物件(元件),並編輯/建立這些表單物件的規則。

C.Copy:您可以使用複製選項來複製元件,並貼到「互動式通訊」中的其他位置。

D.Cut:在「互動式通訊」中,您可以使用「剪下」選項,將元件從一個位置移動到另一個位置。

E.Delete:可讓您從「互動式通訊」中刪除元件。

F.插入元件:可讓您在選取的元件上方插入元件。

G.貼上:可讓您使用上述選項貼上您剪下或複製的元件。

H.群組:如果想要剪下、複製或貼上多個元件,可讓您選取多個元件。

I.Parent:可讓您選取元件的父項。

J.檢視SOM運算式:​可讓您檢視元件的SOM運算式

K:將面板中的物件分組:​可讓您將面板中的元件分組,以便能夠同時對這些元件執行操作。 如需詳細資訊,請參閱「面板」中的「群組物件」。

L.新增子面板(僅適用於面板):可讓您將子面板新增至面板。

M:新增面板工具列(僅限面板):可讓您新增面板工具列元件。 然後,您可以在工具列上執行更多動作。

此外,工具欄上的​Replace​選項可讓您以替代元件取代現有元件。 此選項不適用於面板元件。

頁面工具列

頂端的「頁面」工具列提供可讓您預覽互動式通訊並變更其屬性的選項。 您可以在製作互動式通訊時加以預覽,並據以進行變更。 在頁面工具列中,您會看到:

  • 切換側面板切換側面板:可讓您顯示或隱藏側欄。

  • 頁面資訊pageinformationad:可讓您檢視頁面屬性。

  • 模擬器ruler:可讓您模擬不同螢幕大小(例如平板電腦和手機)的互動式通訊外觀。

  • 編輯:可讓您選取其他模式,例如:編輯、樣式、開發人員和設計。

    • 編輯:可讓您編輯互動式通訊及其元件的屬性。 例如,新增元件、拖放影像,以及指定必填欄位。

    • 樣式:可讓您設定互動式通訊元件外觀的樣式。 例如,在樣式模式中,您可以選取面板並指定其背景顏色。

    • 開發人員:讓開發人員:

      • 瞭解互動式通訊由哪些部分組成。
      • 除錯發生在何處和何時的項目,進而有助於解決問題。
    • 目標:可讓您啟用或停用未列在側欄中的自訂元件或現成可用的元件。

  • 預覽:可讓您預覽互動式通訊在您發佈時的外觀。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now