AEM觸控式UI有數個基本原則,且由數個關鍵元素組成:
UI可同時適用於行動裝置和桌上型電腦裝置,但已決定使用適用於所有螢幕和裝置的單一樣式,而非建立兩種樣式Adobe。
所有模組都使用相同的基本版面,在AEM中,這可視為:
版面會固定至回應式設計樣式,並隨您使用的裝置/視窗大小調整。
例如,當解析度低於1024px時(如行動裝置),顯示器會據此調整:
標題列顯示全域元素,包括:
這與您的位置和曲面工具相關,而且與控制下方頁面中的檢視或資產相關。 工具列是產品專屬的,但元素有一些通用性。
在任何位置中,工具列都會顯示目前可用的動作:
還取決於當前是否選擇了資源:
左側邊欄可視需要開啟/隱藏,以顯示:
預設值為僅內容(邊欄隱藏)。
編寫頁面時,結構區域如下。
頁面內容會在內容框架中呈現。 內容框架與編輯器完全無關,以確保沒有因CSS或JavaScript而產生衝突。
內容框架位於窗口的右側部分(工具欄下)。
編輯器框架實現編輯功能。
編輯器框架是所有頁面創作元素的容器(抽象)。 它位於內容框架的頂端,並包含:
這包含兩個預設標籤,可讓您選取資產和元件;可從這裡拖曳到頁面上。
側面板預設為隱藏。 選取後,會顯示在左側,或滑過以覆蓋整個視窗(當視窗大小低於1024px的寬度時);例如,在行動裝置上)。
在「資產」索引標籤中,您可以從資產範圍中選取。 您也可以篩選特定詞語,或選取群組。
在「資產」標籤中,有一個下拉式清單可供您用來選取特定資產群組。
在「元件」索引標籤中,您可以從元件範圍中選取。 您也可以篩選特定詞語,或選取群組。
這些內容會覆蓋內容框架,並由層使用,以實現如何與元件及其內容(完全透明)交互的機制。
覆蓋圖會在編輯器框架中顯示(與所有其他頁面製作元素一起顯示),但實際上會覆蓋內容框架中的適當元件。
圖層是可激活至以下功能的獨立功能組合:
與個別元件上的特定動作相比,這些層可提供整個頁面的複雜功能。
AEM隨附數個已實作用於頁面製作的層;包括編輯、預覽、注釋。
圖層是一個強大的概念,會影響使用者的檢視以及與頁面內容的互動。 在開發自己的圖層時,您需要確保該圖層在退出時清除。
圖層切換器可讓您選擇要使用的圖層。 關閉時,它表示當前正在使用的圖層。
圖層切換器可從工具列(位於視窗頂端、編輯器框架內)下拉式清單中使用。
按一下元件的每個例項都會顯示其工具列(按一下或按兩下即可顯示)。 工具列包含頁面上元件例項(可編輯)可用的特定動作(例如複製、貼上、開啟編輯器)。
根據可用空間,元件工具欄位於相應元件的右上角或右下角。
如需觸控式UI相關概念的詳細資訊,請繼續參閱AEM觸控式UI的概念一文。
如需詳細技術資訊,請參閱觸控式頁面編輯器的JS檔案集。