AEM Touch-Enabled UI的結構

AEM觸控式UI包含數個基本原則,由數個關鍵元素組成:

控制台

基本版面配置和調整大小

UI適用於行動與桌上型裝置,但Adobe決定使用一種適用於所有螢幕與裝置的樣式,而不是建立兩種樣式。

所有模組都使用相同的基本版面,在AEM中,這可以看成:

chlimage_1-142

版面符合回應式設計樣式,並可配合您使用的裝置/視窗大小。

例如,當解析度低於1024像素(如行動裝置)時,顯示器會隨之調整:

chlimage_1-143

標題列

chlimage_1-144

標題列顯示全域元素,包括:

  • 標誌和您目前使用的特定產品/解決方案;對於AEM,這也會形成全域導覽的連結
  • 搜尋
  • 表徵圖,用於訪問幫助資源
  • 表徵圖,用於訪問其他解決方案
  • 指示(並訪問)等待您的任何警報或收件箱項
  • 使用者圖示,以及描述檔管理的連結

工具列

這與您的位置和表面工具相關,並與控制頁面中的檢視或資產有關。 工具列是特定於產品的,但是這些元素有一些通用性。

在任何位置,工具列都會顯示目前可用的動作:

chlimage_1-145

還取決於當前是否選擇了資源:

chlimage_1-146

左側邊欄

左側邊欄可視需要開啟/隱藏,以顯示:

  • 時間軸
  • 引用
  • 篩選

預設值為​僅內容(隱藏邊欄)。

chlimage_1-147

頁面編寫

編寫頁面時,結構區域如下。

內容影格

頁面內容會在內容影格中呈現。 內容影格完全獨立於編輯器——以確保不會因CSS或javascript而產生衝突。

內容影格位於視窗的右側區段、工具列下方。

chlimage_1-148

編輯器幀

該編輯器框架實現了編輯功能。

編輯器框架是所有​頁面製作元素​的容器(抽象)。 它位於內容框架之上,並包含:

  • 頂端工具列
  • 側面板
  • 所有覆蓋
  • 任何其他頁面製作元素;例如,元件工具列

chlimage_1-149

側面板

其中包含兩個預設標籤,可讓您選擇資產和元件;它們可從這裡拖曳至頁面。

側面板預設為隱藏。 當選取時,它會顯示在左側,或滑過來覆蓋整個視窗(當視窗大小低於1024像素寬度時;例如,在行動裝置上)。

chlimage_1-150

側面板——資產

在「資產」索引標籤中,您可以從資產範圍中選取。 您也可以篩選特定詞語,或選取群組。

chlimage_1-151

側面板——資產群組

在「資產」標籤中,有一個下拉式清單,您可用來選取特定的資產群組。

chlimage_1-152

側面板——元件

在「元件」索引標籤中,您可以從元件範圍中選取。 您也可以篩選特定詞語,或選取群組。

chlimage_1-153

覆蓋

這些內容覆蓋內容影格,並由圖層使用,以瞭解如何(完全透明)與元件及其內容互動的機制。

覆蓋會在編輯器影格中顯示(與所有其他頁面製作元素一起顯示),不過實際覆蓋內容影格中的適當元件。

chlimage_1-154

圖層是一組獨立的功能,可以激活它以:

  • 提供頁面的不同檢視
  • 可讓您控制和/或與頁面互動

這些圖層可為整個頁面提供複雜的功能,而不是個別元件上的特定動作。

AEM隨附數個已建置用於頁面製作的圖層;例如,編輯、預覽、註解。

注意

圖層是強大的概念,會影響使用者對頁面內容的檢視和互動。 在開發您自己的圖層時,您需要確保該圖層在退出時清理乾淨。

圖層切換器

圖層切換器可讓您選擇要使用的圖層。 關閉時,它表示當前正在使用的層。

圖層切換器可從工具列(位於視窗頂部,位於編輯器框架內)下拉式清單中取用。

chlimage_1-155

元件工具欄

每個元件例項都會在按下時顯示其工具列(按一下一次或按兩下慢速)。 工具列包含頁面上元件例項(可編輯)可用的特定動作(例如複製、貼上、開啟編輯器)。

視可用空間而定,元件工具欄位於相應元件的右上角或右下角。

chlimage_1-156

更多資訊

如需觸控式UI相關概念的詳細資訊,請繼續閱讀「AEM觸控式UI的概念」文章

如需詳細的技術資訊,請參閱啟用觸控式頁面編輯器的JS檔案set

本頁內容

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