變更 AEM Mobile 應用程式中的字體和顏色設定。

您可以透過上傳字體來自訂您的應用程式,以便將字體用於瀏覽頁卡片、應用程式檢視和 HTML 文章。您也可以變更用於不同應用程式檢視的顏色,例如應用程式選單、導覽列及登入提示等檢視。

 

使用自訂字體

您可以使用入口網站的「字體與應用程式自訂」區段來上傳自訂字體,以便將字體用於版面卡片、HTML 文章及應用程式檢視 (例如應用程式選單)。

若要參照 HTML 文章中的字體,請參閱「建立適用於 AEM Mobile 的 HTML 文章:使用共用字體」。

  1. 在入口網站中,按一下「內容與版面」,然後按一下「字體與應用程式自訂」。選取「字體」索引標籤。

    customize_fonts_main
  2. 若要個別新增字體,請按一下「新增 > 新增字體」。

  3. 將字體檔案拖曳至「新增字體」區段,或按一下「瀏覽」按鈕並指定字體檔案。

    在拖放字體檔案後,便會自動新增字體名稱。

    若要改善效能並縮減應用程式大小,建議您限制上傳的字體,只包含您打算在應用程式中使用的字體。

    新增字體
  4. 當您上傳完字體後,請在編輯卡片和版面、建立 HTML 文章,或自訂應用程式檢視時指定字體。

    從下拉式清單中選擇字體
    在編輯版面卡片時,選擇已上傳的字體。

  5. 建立或重建自訂應用程式,以便預覽字體。

    AEM Preflight 應用程式不會顯示自訂字體。每當您新增或編輯字體時,您必須建立或重建應用程式,才能夠檢視變更。

    請參閱「預覽 AEM Mobile 應用程式的專案內容」。

註解:

請確定您具有適當授權可以在您的應用程式中使用字體。

大量新增字體

您可以同時將多個字體拖放到視窗中,而不必一次新增一個字體。

  1. 在入口網站中的「字體與應用程式自訂」區段中,按一下「新增 > 大量新增字體」。
  2. 在 Finder 或檔案總管視窗中,選取您想要上傳的字體檔案,然後將選取的字體檔案拖放到圖示上。
  3. 檢查要上傳的字體清單。選取您不想要上傳的任何字體,然後按一下顯示的減號 ( – ) 圖示。按一下「上傳」以上傳字體。

裝置字體和網頁字體

顯示手機和平板電腦中的字體時,只需要裝置字體。但是,對於您使用的每種字體,建議您同時上傳裝置字體 (OpenType 或 TrueType) 及網頁字體 (.woff)。裝置字體會使用於手機和平板電腦的瀏覽頁。網頁字體則會使用於桌面網頁檢視器、Windows 應用程式 (如果無法安裝 .otf 或 .ttf),或者用於預覽卡片中的字體。

透過正確的字體授權,您應該擁有 .woff 版字體的存取權。它通常會在您授權字體時包含在套件中。如需詳細資訊,請聯絡字體授權者。

您無法上傳透過 Adobe Typekit 而擁有存取權的字體。

 

註解:

目前每當您新增字體時,都必須重建應用程式才能使用這個新字體。

在 Windows 應用程式中使用字體

Windows 會強制執行字體公司新增到字體中的字體使用規則。如果字體公司沒有將字體標示為「可安裝」,Windows OS 就會拒絕載入這些字體。您可以用滑鼠右鍵按一下字體並檢視屬性,查看字體是否標示為「可安裝」。為獲得最佳效果,請包含適用於 Windows 應用程式的網頁版字體 (.woff)。

自訂應用程式檢視

您可以為應用程式中出現的各種檢視,指定不同的顏色和字體,包括應用程式導覽列、應用程式選單以及登入和付費牆畫面。您也可以顯示或隱藏「應用程式選單」或應用程式選單中的「帳戶」選項,而且您可以永遠顯示或隱藏「導覽列」。

請注意下列事項:

  • 應用程式自訂的預覽影像不會提供完全正確樣貌。請務必建立自訂的應用程式,以測試應用程式自訂的顏色和字體。
  • 顏色主題設定 (淺色主題、深色主題或自訂主題) 是全域設定,會套用至每個平台的所有檢視。淺色主題和深色主題是無法編輯的預設集。如果您變更了任何顏色或字體設定,該主題便會切換為「自訂」。
  • 在離開此畫面前,請務必按一下「儲存」以儲存您的工作。儲存只會套用至目前的平台。

應用程式自訂影片

應用程式自訂影片
這段影片將示範 2016.14 和 2017.1 版本中所發佈的新應用程式自訂功能。

  1. 在入口網站中,按一下「內容與版面」,然後按一下「字體與應用程式自訂」。選取「應用程式自訂」索引標籤。

    customize_allscreens
  2. 指定平台 (iOSAndroid)。

    您指定的設定只會套用至選取的平台。目前,儲存自訂設定的功能無法使用,因此您必須為 iOS 和 Android 分別指定應用程式自訂設定。

  3. 選取「所有畫面」檢視。若要使用預設集,請選擇「淺色主題」或「深色主題」。如果您變更了顏色或字體設定,便會自動選取「自訂主題」。對於自訂設定,請從「所有畫面」檢視開始,然後選取您想要使用的顏色和字體設定。

    當選取「所有畫面」時,您所做的變更便會套用至所有檢視。然後,您就可以覆寫每個個別檢視的自訂顏色和字體設定。

    註解:

    字體與顏色設定會與每個主題相關聯︰淺色主題、深色主題和自訂主題。當您選取不同的主題時,字體和顏色設定便會重設。

  4. 在「所有畫面」檢視中,指定應用程式的手勢設定。

    夾捏以縮放 – 指定要針對每種文章類型啟用或停用「夾捏以縮放」手勢。如果您停用這個選項,用戶便無法使用夾捏手勢來放大或縮小文章檢視。

    • 點陣文章」選項包含以 InDesign 為基礎的文章和 PDF 格式的文章 (已選取「使單一整頁符合螢幕大小」選項)。
    • PDF 文章」選項包含 PDF 格式的文章 (未選取「使單一整頁符合螢幕大小」選項)。
    • HTML 文章」選項包含以 HTML 為基礎的文章。

    夾捏以關閉 (僅限 iOS) – 您可以在 iPad 上從瀏覽頁張開手指,以返回上一個檢視。指定要啟用或停用這個手勢。

    邊緣滑動 (僅限 iOS) – 您可以在 iOS 應用程式中從左側滑動,以返回上一個檢視或是顯示頂層檢視中的應用程式選單。指定要啟用或停用這個手勢。

    customize_gestures
  5. 從選單中選擇選項或按一下導覽箭頭,藉以選擇個別的應用程式檢視,然後為該個別檢視指定自訂的顏色設定和字體設定。

    customize_app_appmenu2
  6. 若要隱藏「應用程式選單」或「帳戶」選項,請導覽至「應用程式選單」檢視。按一下「應用程式選單」圖示以開啟或關閉它。或者,按一下「登入」選項以開啟或關閉「帳戶」選項。

    當「應用程式選單」關閉時,就無法在應用程式中顯示應用程式選單。

    當「登入」關閉時,「帳戶」選項就不會出現在應用程式選單的底部。

    當「選單列」隱藏時,您可以使用 navto 和 goto 格式來提供導覽連結及觸發功能,例如「搜尋」。請參閱「AEM Mobile 中的超連結」。

    如果您隱藏「登入」選項 (用戶介面中的「帳戶」選項) 或「選單列」,您可以使用 HTML 和 Cordova JavaScript API 來允許用戶登入和登出。如需允許用戶使用動態橫幅來登入或登出的程式碼範例,請參閱「建立橫幅和動態橫幅:動態橫幅」。

  7. 若要變更導覽列行為,請導覽至「應用程式導覽列」檢視。針對平版電腦和手機,從下列選項中進行選擇。

    預設 – 只有當用戶點選文章的非互動區域時,才會顯示導覽列。導覽列顯示時,將會隱藏文章內容。

    一律顯示 – 如果您選取此選項,導覽列會顯示在導覽畫面和文章的頂端,並且無法隱藏。當導覽列設定為一律顯示時,文章頂端的內容將不會隱藏。HTML 文章會從畫面頂端的導覽列下方開始。固定版面的文章會縮小並加上黑邊。

    app_customization_example
    當導覽列設定為一律顯示時,固定版面的內容會縮小並加上黑邊。

    一律隱藏 – 如果您選取此選項,導覽列和狀態列就會停用並隱藏。當導覽列隱藏時,您可以在文章中使用 navto 和 goto 格式來提供導覽連結及觸發功能,例如「上一步」按鈕和「社交分享」選項。請參閱「AEM Mobile 中的超連結」。

    狀態列顯示而導覽列隱藏 – 如果您選取此選項,導覽列就會停用並隱藏,而狀態列則會永遠顯示。文章內容會顯示在狀態列的下方,並且視需要縮放及加上黑邊。

    app_customization_navbars
  8. 按一下「儲存」,儲存目前平台的設定。

    按一下「儲存」會儲存目前平台的設定。如果您目前同時在 iOS 和 Android 平台上工作,請務必為每個平台都按一下「儲存」。

  9. 建立或重建自訂應用程式,以便檢視自訂應用程式設定。

    上傳的字體和自訂的應用程式設定是內建在應用程式中的。每當您上傳新的字體或變更應用程式自訂設定時,您必須重建您的應用程式,才能檢視變更。

    AEM Preflight 應用程式不會顯示應用程式自訂設定。

    請參閱「預覽 AEM Mobile 應用程式的專案內容」。

其他應用程式自訂方法

除了使用入口網站的「字體與應用程式自訂」區段以外,您也可以進行其他自訂變更。

  • 在專案設定中,您可以指定出現在應用程式選單中的品牌影像
  • 當您建立應用程式時,可以決定手機為雙向 (iOS)、僅限縱向或僅限橫向。對於 iOS 和 Android 應用程式,您也可以決定應用程式適用於手機、平板電腦或兩者皆適用。
  • 系列設定中,您可以決定是否允許水平滑動來瀏覽不同的文章。您也可以決定系列會顯示為瀏覽頁,或開啟至系列中的第一個項目。您還可以允許用戶儲存系列以供離線檢視。
  • 使用版面範本可決定系列瀏覽頁的外觀。
  • 您可以啟用像是社交分享權益搜尋等功能。

 

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

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