版面範本和設計影片

版面範本和設計影片
使用版面範本和卡片來設計行動應用程式的外觀與風格。(8 分鐘)
Adobe

了解版面、卡片和瀏覽頁

「版面範本」會決定系列在「瀏覽頁」中顯示的方式。系列中的項目在瀏覽頁版面上會顯示為「卡片」。當您建立版面範本時,將會執行下列作業:

  • 定義版面屬性,例如欄數、邊界和欄距值,以及儲存格形狀。
  • 建立卡片及定義卡片外觀。
  • 根據中繼資料設定對應規則,以決定哪些內容與卡片相關聯。

瀏覽頁的外觀是由版面設計、卡片設計以及系列項目的中繼資料設定所決定。

瀏覽頁 3 欄版面
這個瀏覽頁使用 3 欄版面。此版面包含全寬、2x1 和 1x1 卡片,這些卡片代表橫幅、文章和其他系列。

卡片可決定瀏覽頁上的內容外觀。縮圖影像在具有不同大小的卡片上可能會以不同的方式顯示,端視版面設定而定。例如,更新中繼資料後,原本收錄在 3x1 卡片中的縮圖影像就可以變更為 1x1 卡片。

卡片版面
黃色區域代表在 3 欄版面 (左) 與儲存格外觀比例不同的 5 欄版面 (右) 中顯示的相同 2x2 卡片。

請注意下列事項:

  • 在版面範本中,您可以針對平板電腦、手機和網頁定義不同的版面 (有時稱為「轉譯」)。
  • 尚未支援將卡片釘選到網格上的特定位置。
  • 尚未支援使用對應規則來決定內容的順序。對應規則會決定套用至卡片的內容。

使用版面範本來建立卡片和版面

Browse Page Authoring Tool 是建立卡片和版面的一個新方法。目前,您可以使用新的 Browse Page Authoring Tool 或現有的「卡片」和「版面」索引標籤來設計您的瀏覽頁。

透過 Browse Page Authoring Tool,您可以使用相同的介面來建立版面、設計卡片,並將卡片對應至內容。在建立過程中,您可以指定一個現有的系列,以便在調整瀏覽頁設定時進行檢視。您可以變更目標裝置大小、開啟和關閉網格,並按一下卡片區域以編輯文字或影像區域的設定。您甚至可以針對已匯入的系列,將系列內含的項目重新排序。

您可以匯入已經建立的版面,如此便可使用現有的版面設定來建立新版本。

版面範本需要使用 2015.8 (2015 年 12 月) 版本或更新版本建立的應用程式。

 

  1. 建立系列並新增內容。

  2. 在隨選入口網站 (https://aemmobile.adobe.com) 中,按一下「內容與版面 > 版面範本」。

  3. 按一下「建立」,重頭開始定義版面範本。

  4. 定義版面屬性。

    定義版面屬性

    在 Browse Page Layout Tool 的右側,指定版面名稱並定義版面屬性,例如欄數及邊界和欄距值。

    匯入系列

    按一下「匯入系列」,並匯入其中一個系列,如此就可以看到您的變更對於目標內容的影響。當儲存版面時,您可以選擇將版面套用至系列。您甚至可以重新排序系列內的項目。當您儲存版面範本時,這些對系列所做的變更都會保留下來。

    預覽選單

    使用預覽選單來選取橫向或縱向。選取目標裝置大小。當您變更版面時,選取不同的裝置大小來進行預覽,以確定您的設計在所有目標裝置上都能運作。

  5. 建立卡片。

    建立卡片

    按一下加號建立卡片。在最右側的面板中,指定卡片名稱並變更設定。最右側面板中的選項會視選取的卡片區域而改變。

    若要編輯文字區域,請展開左側的卡片屬性,並選取您想要處理的項目,例如影像或文字區域。如果您不想要顯示卡片中繼資料,請按一下中繼資料旁的「隱藏」圖示。

    您也可以按一下中央的預覽區域,即可編輯該區域的設定。測試預覽區域上方的設定,以變更縮放、顯示版面或卡片,或是顯示/隱藏內容。

  6. 定義卡片的對應規則。

    定義卡片的對應規則

    按一下「對應」,然後按一下所選卡片旁邊的「新增規則」。

    定義對應屬性。例如,您可以為高重要性的橫幅設定規則。當您設定對應規則時,您可以預覽系列中的哪一個內容被指派給該卡片。

    拖曳系列中的項目以變更其順序。當您儲存版面範本時,便會套用這些變更。

  7. (選擇性) 建立其他版面 (稱為「轉譯」) 來針對平板電腦、手機和網頁定義其他外觀設定,如稍後章節所述。

  8. 儲存並關閉版面範本。

    當您儲存版面範本時,如果此版面範本尚未指派給匯入的系列,系統會提示您將版面套用至該系列。

  9. 將版面範本指派給系列。

    在編輯版面範本或系列屬性時,您也可以將版面範本指派給系列。

    將版面指派給系列

版面設定

版面有助於決定系列瀏覽頁的外觀。

如果您想要針對手機和平板電腦使用不同的版面,請在版面範本內定義多個版面 (稱為「版面轉譯」),如稍後章節所述。

指定下列版面設定。

儲存格外觀比例

使用此選項可變更儲存格形狀,以「寬:高」比例表示。例如,1:1 儲存格是正方形、4:3 儲存格的寬度大於高度,而 3:4 儲存格的高度大於寬度。如果您指定正數 (例如 3.5),就會建立 3.5:1 外觀比例。

指定欄數。請注意,卡片的欄數不可超過版面的欄數。

欄距與邊界單位

指出您想要使用裝置獨立像素 (DIP) 或百分比來指定欄距和邊界值。欄距會決定卡片之間的間距。邊界會決定卡片外緣與裝置檢視區域之間的間距。

版面背景顏色

指定瀏覽頁背景的顏色。這個顏色會顯示在邊界和欄距中,而且可透過卡片透明度呈現。

背景影像

如果您選取此選項,針對系列背景影像指定的影像就會顯示在瀏覽頁中。如果同時指定了「背景影像」與「版面背景顏色」,則「背景影像」優先。如果「背景影像」包含透明度,也會揭露「背景顏色」。「背景影像」為全螢幕,而且會縮放以填滿畫面。它也是靜態的;卡片會在系列背景之前捲動。

卡片設定

當您建立卡片時,可以指定設計特性、定義卡片橫跨的版面儲存格數目,並且指定其他屬性。不過,您無法指定與卡片相關聯的內容,這項作業是在設定對應規則時進行。

實際的卡片形狀和大小是由套用至卡片的版面來決定。例如,套用至 3 欄版面的 3x2 卡片看起來與套用至 12 欄版面的 3x2 卡片就有很大的差別。

當您指定設定時,預覽區域會顯示卡片的概略外觀 (使用匯入之系列中的內容)。

當您要指定卡片的設定時,請務必了解一些概念,例如卡片上的不同項目彼此如何進行互動。

順序或階層

卡片背景位於版面之上。卡片影像區域位於卡片背景之上。卡片文字區域位於卡片影像區域之上。

卡片影像

系列、文章、橫幅和系列背景的影像會視需要進行置中、縮放和裁切以填滿卡片影像區域。

卡片會顯示在系列瀏覽頁中。卡片可以具有某些半透明的屬性,並且顯示系列的背景顏色或影像。卡片的某些部分可為半透明並且提高文字的易讀性或為卡片影像上色,但卡片影像是不透明的。

卡片格式

當您指定「影像靠左」或「影像靠右」卡片格式時,請確定卡片底下的版面有留下足夠的空間,讓影像區域和文字區域中繼資料能夠並排顯示。為了防止文字區域遭到裁切,您可能必須變更版面的儲存格外觀比例或增加卡片寬度。

背景、邊框和邊界

卡片可以具有顏色與透明度。卡片顏色會成為卡片影像和文字區域的背景。

卡片背景可以由影像、文字區域和邊框覆蓋。影像和文字區域位於卡片背景之前。影像與文字區域都具有邊界。

邊界會讓影像和文字區域遠離卡片的邊緣。指定邊界就等於設定半透明卡片背景的顯示程度。影像可以具有含透明度的顏色覆蓋,以便為影像上色。文字區域也可以具有邊框間距,讓標籤 (中繼資料) 遠離文字區域的邊緣。

文字區域也具有支援透明度的彩色背景。您可以使用彩色背景來增加對比度或提高文字的易讀性。

邊框是不透明的,而且會將所有內容從卡片的邊緣向內推。如果您想要讓半透明的卡片加上邊緣並與版面背景互動,請使用影像或文字區域的邊界。如果您只想要增加卡片之間的空間,請在版面中使用欄距。

卡片設定選項
卡片影像區域在卡片背景之上。卡片文字區域在卡片影像區域之上。

裝置獨立像素 (DIP)

裝置獨立像素 (DIP) 是指一種先供應用程式使用,再由基礎系統轉換成實體像素的抽象化像素。例如,在 1024x768 SD iPad 和 2048x1536 HD iPad 上顯示時,指定 10-dip 邊框會具有相同的相對大小。

中繼資料欄位

當您定義中繼資料欄位時,可以加入文字,而且最多可在相同的欄位中加入兩個中繼資料項目。例如,假設您將中繼資料欄位定義為 {{title}} by {{author}},卡片就會顯示文章中繼資料,例如「Fishing in Argentina by Jane Doe」。或者,您也可以針對 {{title}}{{author}} 建立不同的欄位,讓中繼資料顯示在卡片的不同行上。

如果對應至卡片的內容不包含指定欄位的中繼資料,則會忽略該欄位,除非該欄位包含其他文字,像是 by {{author}} 中的「by」。根據預設,卡片會包含三個中繼資料欄位。按一下最左邊窗格的「眼睛」圖示,可隱藏或顯示每個中繼資料欄位。

當您選擇「{{Published Date (Default)}}」中繼資料項目時,便會使用裝置的地區設定和語言來決定格式。例如,英文 (美國) 的日期會顯示為 MM/DD/YYYY,而德文的日期則會顯示為 DD/MM/YYYY。

您可以選取使用入口網站的「字體與應用程式自訂」區段所上傳的任何自訂字體。請參閱「自訂 AEM Mobile 應用程式︰使用自訂字體」。

將內容對應至卡片

設定對應規則以決定哪些卡片會根據中繼資料套用至內容。例如,您可以建立一個對應規則:將大型卡片套用至任何優先順序設定為「高」的文章,然後建立第二個對應規則:將小型卡片套用至任何優先順序設定為「正常」的文章。

對於每一部分的內容,系統會依照順序評估對應規則。然後,套用符合內容中繼資料的第一個對應規則。內容必須符合所有指定的規則設定。例如,假設對應規則包含設定為橫幅的類型以及設定為高的重要性,則內容就必須是高重要性的橫幅,才會套用規則。

例如,假設您已建立 3x1 卡片和 1x1 卡片。請使用「類型=文章」和「重要性=高」的設定來建立第一個對應規則。針對 1x1 卡片,建立不指定任何中繼資料的第二個對應規則。在這個範例中,3x1 規則應該要高於 1x1 規則;否則,高重要性文章會被指派 1x1 卡片。

用於規則設定的中繼資料會區分大小寫。使用「blue」內部關鍵字所建立的規則不會套用至具有「Blue」內部關鍵字的內容。如果內容包含多個關鍵字,對應規則就必須單獨比對其中一個關鍵字,以便符合該設定。

請注意,卡片對應不會決定瀏覽頁上的內容順序,只會決定對應至卡片的內容。

規則啟用

使用「規則啟用」選項可將卡片單獨套用至符合條件的指定項目數。例如,您可以建立對應規則,僅將寬型卡片套用至系列中的第一個項目。編輯規則時,請選取「規則啟用 > 有時」,然後指定您要套用此規則的項目數。

在這個範例中,此規則只會將大型卡片套用至系列中的第一個項目。

對應元素

使用「對應元素」選項可針對所有符合條件的第 n 張卡片套用卡片。例如,如果您想要建立交替卡片,可以建立將規則套用至所有第二張卡片的卡片,從符合規則的第一個項目開始。在這個範例中,從第二個項目開始,所有其他項目都會根據符合條件的下一項規則設定格式。

這項規則會將卡片套用至所有其他項目。下一項符合條件的規則會套用至其他交替項目。

手機和平板電腦的版面轉譯

 

版面轉譯提供了設計彈性,讓您針對平板電腦、手機和桌面網頁檢視器上的相同系列定義不同的外觀。現在有了這項新功能,就可以針對所有支援的平台和裝置提供相同的內容,同時也可維護設計控制能力。當您建立版面範本時,可以針對平板電腦、手機和網頁定義不同的版面與卡片設定。然後每個目標裝置的轉譯設定就會依據該裝置來決定瀏覽頁的外觀。

版面轉譯對於擁有 1 個頂層系列的專案特別實用,但是對於擁有 2 個頂層系列的專案可能也很有效,在後者的情況下,您會針對手機和平板電腦使用任何相同的系列。

在以下範例中,此版面範本中的卡片在平板電腦和手機上擁有不同的外觀。

當您建立版面範本時,一開始只會建立平板電腦轉譯。這是套用到平板電腦、手機和網頁的預設轉譯 (除非加入新的手機或網頁版面)。當您為手機或網頁新增版面 (也稱為「轉譯」) 時,新的轉譯會繼承預設平板電腦轉譯的設定。之後,您對卡片或版面設定所做的任何變更都只會套用到該轉譯 (卡片對應規則會套用到所有轉譯)。

註解:

如果您在此程序的早期建立版面,然後發現太早建立了,您可以刪除該轉譯、變更套用到所有轉譯的設定,然後重新建立轉譯。

  1. 建立版面範本。建立卡片並套用對應規則。指定套用到所有目標裝置的設定。

    我們建議您從平板電腦版面開始,並新增卡片和對應規則,然後變更套用到所有裝置的卡片與版面設定,這是最佳做法。然後,建立手機版面並變更只套用到手機的設定 (接著是網頁版面,如果必要的話)。如此一來,就可以避免針對每個轉譯指定相同的設定。

  2. 若要建立手機轉譯,請按一下「手機 > 新增版面」,然後按一下「建立版面」。在選取「手機」時,指定手機專屬的卡片與版面設定。

  3. 若要建立桌面網頁檢視器的轉譯,請按一下「網頁 > 新增版面」,然後按一下「建立版面」。在選取「網頁」時,指定桌面網頁檢視器專屬的卡片與版面設定。

  4. 儲存版面範本,並將它套用至系列。然後測試結果。

    版面轉譯需要使用 2015.8 (2015 年 12 月) 版本或更新版本建立的應用程式。

若要移除版面,請按一下來顯示版面下拉式選單,然後按一下垃圾筒圖示。您無法移除預設版面。

若要變更目標預覽大小,請從裝置選單中選擇另一個大小。

若要變更預設版面,請按一下來顯示版面下拉式選單,然後選擇「設為預設」。然後預設版面就會用於任何未指定的裝置類型。例如,如果您只有手機和平板電腦版面,然後將手機版面設為預設,則手機版面會套用到網頁版面。

使用此選單可變更預覽選項、設定預設值或移除版面。

卡片的順序

一般而言,系列中內容的順序會決定版面中內容的順序。不過,如果卡片的排列方式會沿著邊緣在版面中留下間隙,內容的順序就可能會變更,因為順序較低的小型卡片可能會填滿邊緣間隙。例如,假設 3 欄網格中的第一篇文章是 2x1 卡片、第二個項目對應至 3x1 卡片,而且第三個項目對應至 1x1 卡片。在此情況下,1x1 卡片就會顯示在第二個項目上方的頂端列間隙中。

設定卡片順序
第三個項目會移至第二個項目之前,以填滿間隙。

刪除卡片和版面

若要刪除版面或版面範本,您必須先從系列中移除其所有參照。具體來說,編輯系列以指派不同的版面。將不同版面套用到系列之後,必須重新發佈這些系列 (如果以前發佈過)。然後,您就可以解除發佈版面或版面範本,並加以刪除。

若要刪除不屬於版面範本一部分的卡片,您必須先移除其所有參照。具體來說,編輯版面以移除或編輯所有參照卡片的對應規則。在移除或編輯版面對應規則之後,必須重新發佈這些版面 (如果以前發佈過)。然後,您就可以解除發佈卡片並刪除卡片 (如果卡片為版面範本的一部分,您隨時都可以將它刪除)。

您無法刪除預設卡片或預設版面。

將版面複製到另一個專案

您可以將某個專案中的版面範本複製到相同帳戶內的另一個專案。如果目的地專案包含同名的版面範本,您可以決定是要覆寫現有的版面還是複製新的版面。

  1. 選取您想要複製的版面範本,然後選擇「將版面複製到另一個專案」。

  2. 在您的帳戶所提供的專案清單中,選取您想要複製版面的目標專案。

  3. 如果您希望複製的版面取代目標專案中同名的版面,請選取「覆寫現有目標」。

    如果您未選取此選項,當目標專案中的版面與您複製的版面同名時,將會顯示錯誤訊息。

  4. 按一下「複製到目標」。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策