#F5F5F5

使用 Experience Manager Sites 元件快速建置精彩體驗

使用者介面顯示名為「元件」的下拉選單,其中包括「摺疊面板」、「按鈕」、「輪播」、「內容片段」、「體驗片段」及「影像」等選項。游標正在選取「內容片段」。背景中「Sentry」網站預覽顯示一隻閃閃發亮、色彩豐富的獵豹,行銷文案旨在宣傳各項企業網路解決方案,同時設有一個「了解更多」按鈕。
#F5F5F5

使用模組化系統加速網頁及頁面開發

Adobe Experience Manager Sites 運用強效的模組化網頁元件系統,讓團隊能夠更快速建置回應式數位體驗。善用豐富的開箱即用元件及核心元件庫,包括拖放式 UI 元素等各項實用元件,進一步加速建立頁面、確保品牌一致性,並減少自訂程式編碼的需求。Experience Manager Sites 的元件驅動型措施可以提升開發效率、支援擴充式內容作業,還能降低擁有權總成本。

挑戰與困境:克服內容製作速度的難關

要想在不同市場上提供引人入勝的新鮮內容,就勢必要具備一致的快速作業能力。傳統的網頁開發模式需要仰賴手動編碼及無法重複使用的元素,可能因此導致頁面建立速度下滑、開發人員資源匱乏,甚至造成不同裝置上的品牌化設計風格不一致。

倘若欠缺模組化框架,行銷團隊將目標願景化為實際體驗的作業進度就會因此面臨延宕,而開發人員則需要耗費寶貴的時間來重新建立表格、影像庫、導覽功能表等標準元件。在現今的數位環境下,企業需要一套可以重複使用的擴充式系統,才能在不犧牲作業品質或靈敏度的情況下,提升內容製作速度。

使用 Experience Manager Sites 網頁元件提升數位體驗建置效率

Experience Manager Sites 提供了一套精密的預先建立及自訂式元件系統,能夠協助企業解決相關困境。

  • 編寫人員 不需具備深度的技術專業知識,即可運用拖放式的視覺化界面,快速組建符合品牌形象的回應式頁面。
  • 開發人員 能夠重複使用及擴充標準化的回溯相容元件、縮減自訂建置架構的時間及簡化維護作業,以進一步推動生產力。

這項模組化措施有助在不同的通道上維持一致的數位體驗、加快上市速度,還能確保設計完整度與運作效能。

使用 Experience Manager 元件加速網頁開發流程

Experience Manager Sites 核心元件提供了一套標準化的 UI 建構區塊,以供生產作業立即使用,進一步加快頁面建立流程,並在各個數位接觸點維持一致的使用者體驗。編寫人員可以輕鬆使用階層連結、搜尋列、輪播、表單、影像庫等直覺式元件設計,再以視覺化的方式組合頁面。此外,開發人員還能享有核心元件的擴充能力、版本控制、回溯相容性,進一步建立更穩固的基礎、規模更彈性的網站架構,有效因應未來挑戰。此方法可以減少自訂開發需求及簡化升級作業,有助於降低長期總成本。

探索 Experience Manager Sites 元件的優點

功能型的彈性網頁元件

每個 Experience Manager 元件皆是自包含元件以及可配置的資源,包含指令碼、樣式設計與功能特性。編寫人員可以輕鬆打造專屬的元件,包括基本的文字區塊或是摺疊面板、分頁標籤等複雜的 UI 元素,在標準的使用情境下,無需開發人員參與即可完成。

利用升級式的 CMS 元件降低成本

Experience Manager 的核心元件經過專業設計,使用週期長且功能版本可供升級,有助於降低長期的維護風險。與充分自訂式的舊版解決方案相比,定期版本設定及回溯相容性能有效維護開發投資及簡化平台升級流程。

使用繼承的 UI 元件打造一致的品牌體驗

Experience Manager 範本和元件繼承可以確保標頭、頁尾、導覽列等共用元素在不同網站上具備一致的視覺效果與功能。Experience Manager 樣式系統提供了各式預先定義的樣式變化版本供編寫人員取用,以利維護品牌形象設計標準。

以動態媒體整合建立最佳化的視覺效果

影像型元件與 Experience Manager Dynamic Media 順暢整合,以直接在元件設定內部提供智慧裁切、影像預設、效能最佳化等功能,進一步確保所有裝置上的視覺設計都具備高品質。

https://video.tv.adobe.com/v/18926?quality=12&learn=on&captions=chi_hant&autoplay=true&hidetitle=true

元件術語比對

術語
Experience Manager 資訊脈絡與相關內容
網頁元件
Experience Manager 元件不只提供了相似的功能優勢 (重複使用、建立封裝、快速開發),還能以建構區塊的形式建立網頁。
UI 元件
許多 Experience Manager 元件可以直接轉譯使用者介面元素 (如表格、按鈕、導覽、輪播等),以便編寫人員進行配置,讓使用者進行互動。
CMS 元件
Experience Manager 元件是在 CMS 內部進行託管,可以定義內容架構及頁面的外觀設計,往往會綁定至範本與工作流程。
拖放元件
描述在 Experience Manager Sites 上,使用視覺編輯器來新增及排列元件的主要製作方式。
內容元件
Experience Manager 元件可以管理特定的內容項目 (如文字、影像、影片、片段等),進一步建立整體頁面體驗。
核心元件
Experience Manager 提供專屬的標準化現代元件,不僅參照最佳實務,還能開箱即用,更具備靈活彈性、維護功能與出色效能。
開箱即用元件
預先建立、可供立即使用的現成 Experience Manager 元件。核心元件即為現代 Experience Manager 實施作業的主要範本。

常見問答

Experience Manager 對網頁元件的定義是什麼?
儘管 Experience Manager 元件是使用 HTML 範本語言 (HTL) 和 Sling 等 Adobe 技術建構而成,而非使用自訂元素、影子 DOM 等原生瀏覽器標準,卻提供了相同的關鍵優勢:模組化架構、可供重複使用及封裝功能。Experience Manager 元件能夠以獨立建構區塊的形式來加快網頁開發流程。
Experience Manager Sites 提供了哪些 UI 元件?
UI 元件是預先建立的元素,可以轉譯使用者介面的一部分,以供編寫人員透過視覺化的方式進行配置。表格、導覽功能表、搜尋列、輪播、分頁標籤及摺疊面板都是打造互動式回應型頁面的必備元素,不必編寫程式碼即可建置。
Experience Manager 核心元件有哪些?
核心元件是 Adobe 的標準化內容管理元件集,可以直接供生產使用。這些元素遵循最佳實務打造而成,提供彈性的程式編寫功能、廣泛的設定選項、版本控制及回溯相容性,因而成為建立現代化 Experience Manager 網站的首選。
核心元件與基礎元件有何不同?
核心元件是根據目前最佳實務而設計的現代化彈性元件,且經過定期維護。基礎元件則為舊版元件,需要仰賴舊版的技術,且往往已遭廢棄。建議您在新的專案上使用核心元件,以享有更出色的執行效能與版本維護表現。
Experience Manager GraphQL API 如何搭配元件使用?
開發人員可以使用 Experience Manager GraphQL API 在無周邊設定從 Experience Manager 元件查詢及檢索結構化內容。這樣一來,即可在 SPA、行動應用程式、其他數位體驗等前端應用程式有效提供文字、影像 URL 等各項特定欄位,進一步提升執行效能與彈性空間。
Experience Manager Sites 上的「拖放元件」是什麼?
拖放元件指的是 Experience Manager Sites 上的視覺化頁面建置體驗。編寫人員可以從側面板選取元件,再將其拖放至頁面上的位置,直覺式建立版面配置及發佈內容,而不必另行編寫程式碼。