[Ai] 資產準則

資產指南

1. 總覽

簡介

• 教學課程資產顯示於應用程式工作區中，用於實作教學逐步解說，示範如何、為何以及何時使用應用程式工具與工作流程。 
• 透過引導式探索，使用者藉由一系列簡單的更新取得「起始」影像。使用者在課程結束時，應能看見顯著的學習成效。 
• 教學課程資產的目標有兩個方面：首先，需要支援教學目標，並說明如何使用應用程式；其次，應幫助使用者獲得成就感，並啟發他們應用所學。 
• 將您的教學課程視為幫助使用者拓展領域知識的引線。展現設計原則的使用方式，遵循並教授其最佳做法 (以設定網頁檔案為例，教導使用 RGB 與 CMYK 的差異)

受眾

• 基本上為新的 Ai 一般使用者，除非另外說明
• 我們的教學課程需要能吸引廣泛的一般使用者。全系列的教學課程應當展現廣泛的風格運用以及所涵蓋的主題

資產追蹤器

• 目前正在 Ai 教學課程中使用的一系列工作區資產和 Adobe Stock。請查閱使用者指南，了解目前已涵蓋的教學課程風格，並發掘任何能拓展風格的機會；確認您想運用的 Stock 先前尚未以容易辨識的方式使用過。
• +Ai Tutorial Builder 資產追蹤器

2.Stock 影像和範本

在起始檔案中，您必須使用由您建立的資產，或有權使用的影像。內含可識別人物的所有資產都必須有肖像權同意書。

• 若您不是使用自己的資產，請使用免費或「標準」層級 Adobe Stock 影像。 
• 針對社群作者和 Adobe 作者，有兩種不同的 Adobe Stock 授權程序。
• 不要使用任何其他素材庫服務。一般使用者能透過起始檔案來使用、編輯及下載影像，而這種使用情況可能不在其他素材庫服務的使用條款中。 

免費 Adobe Stock 影像和範本

如果您打算使用素材庫影像或範本，請優先考慮 Adobe Stock 上的免費資產。使用免費的素材庫內容，我們即無須與素材庫團隊聯繫，也不必重複確認應用程式內使用授權以及評估與投稿人之間的關係。資產，尤其是範本，可作為您的起點並加以自訂，且可無限使用。

• 直接在 Stock 網站 https://stock.adobe.com/free 搜尋免費資產
• 您可以搜尋特定的內容，或是直接在搜尋列中按下 Enter 來顯示所有免費資產的結果。然後可以使用左側的篩選列選取：
  • 資產類型：「影像」> 次類別：「向量圖」
  • 資產類型：「影像」> 次類別：「插圖」 (請注意為 .jpg，非 .eps 檔)：
  • 資產類型：「範本」> 應用程式：「Illustrator」

授權 Stock 影像

• 社群作者：授權 Adobe Stock
  • 僅使用 Standard Adobe Stock 影像 (非 Premium)。 
  • 您必須購買授權。 選擇擴充型/增強型授權。 
  • 在 Tutorial Builder 的「影像來源」欄位，以下列方式列出 Stock 投稿人名單：「Adobe Stock：投稿人 1、投稿人 2、投稿人 3」
  • 請將您購買的任何素材庫影像提交至這個 Dropbox 資料夾，以備未來有編輯需求時我們有所掌握。
  • 將您的名字加入檔案名稱並將其放在最上層。
• Adobe 作者：授權 Adobe Stock
  • 僅使用 Standard Adobe Stock 影像 (非 Premium)。
  • 在作者紙本文件中列出要授權的素材庫影像
  • 在注釋中標記指派至您教學課程的設計人員以及設計計畫經理
  • 我們將代您購買擴充型授權並追蹤資產。
  • 附註：若您沒有「作者簡介」，請向指派給您的設計人員以及您的設計計畫經理發送電子郵件，請求已授權的影像。

列出 Stock 投稿人名單

• 在 Tutorial Builder 的「影像來源」欄位，會自動列出作者。 
• 若要列出 Stock 投稿人，取消點選方塊，並以下列方式列出：「Adobe Stock：投稿人 1、投稿人 2、投稿人 3」。

3. 當地語系化

工作區資產或章節圖像皆不會以其他語言加以本地化，因此必須在工作區資產中使用中性詞彙，並省略或模糊章節影像中的 UI 文字。 

• 能查看已審核過的作品，並激發創意的好地方：
  • Adobe Fonts 字體套件頁首圖片
  • Adobe Spark (依專案類型搜尋)

• 請勿在動態章節圖像中加入任何文字。這代表 UI 面板不能是動態螢幕擷取的一部分，只能包含工作區域間的動作。
• 如果您的靜態影像會顯示 UI 面板，文字必須使用灰條或非真實文字，用以模糊替代真實文字。這個步驟會在 Photoshop 中完成，如同將向量圖層覆蓋到 UI 螢幕擷圖上。

範例：

更多風格豐富的 PSD 範例

4. 工作區資產

• 資產必須為動態且看起來有趣，但又平易近人
• 資產看起來應符合潮流、容易聯想、具備相關性又新穎；而不會在主題或美感表現手法上顯得過於小眾
• 查看我們的 Illustrator Product Expression Guide 以激發風格、專案或色彩的靈感。請注意，這僅是一個開端：+ Ai Product Expression Guide (2021 年 4 月)
• 將相關專案的應用情境作為基礎來發展視覺效果會很有幫助
  • 標誌、圖示、品牌平面設計、品牌宣傳品 
  • 電子郵件平面設計、橫幅廣告、社群媒體廣告
  • 社群貼文
  • 傳單、名片、小冊子、海報
  • 招牌
• 只要能夠清楚傳達資產的教學價值，也能用較柔和、藝術或插圖的方式呈現教學課程

工作區域

• 依照您的教學課程工作流程，有時在使用者應用其最終成果的情境之外，提供額外的工作區域來進行作業或發揮創意會很有幫助。將您檔案中的工作區域數量限制在 2 個內。

使用圖層

• 使用者應只需要與最多兩個圖層進行互動
• 請考量在專案輸出情境內顯示可用元素的需求，確認版面的空間足夠，可讓使用者選取及使用指示的元素。可以按照需求，有策略地鎖定背景圖層和額外元素。
• 圖層應為這些預設色彩的其中之一：淺藍色、紅色、綠色
• 儘量在您主要的圖稿圖層使用淺藍色。如果需要第二個圖層，使用紅色。

文字

• 除非教學課程與文字處理有關，否則請鎖定工作區資產內的文字或將其加上外框
• 僅使用 Adobe Fonts
• 讓使用者選擇自己的字體，隨心所欲設計。 如果文字對版面的最終成果至關重要，請給予高自由度的彈性指引。像是能夠嘗試的字體類型，以及類似「粗體」這種一般的描述，讓使用者能無須具備其他領域的知識也能輕易理解

連結檔案

• 要讓檔案保持在大小限制內，您可能需要將紋理點陣化並將點陣化檔案拖放至 AI。
• 在最終檔案存為 AIT 檔前，任何連結檔案都應內嵌在檔案內。

5. 章節影像總覽

章節影像是教學課程章節中重要動作的靜態或動態說明。

您可選擇在各章節使用靜態影像或動態影像 (Mp4)：

• 靜態影像 (JPG) 是在 Photoshop 中，由數張螢幕擷圖經過組合和編輯建立而成。
• 由於可以在 Photoshop 中模糊文字，請使用靜態影像來描述 UI 面板，或是當足以描述任務或工作流程時使用靜態影像。 
• 動畫描述 (Mp4) 是由錄製螢幕擷圖所建立而成，以 Screenflow (macOS) 或 Camtasia 之類的軟體錄製。
  • 「必須」展現移動過程時，才使用動畫。
  • 由於必須省略所有 UI 文字的限制，動態的螢幕擷圖會限制在工作區域間的動作。

擷取和使用 UI 面板螢幕擷圖

• 對「章節」資產來說，大小是絕對不可忘記的重要功能。 線條、游標、圖示等，可能受限於應用程式而以非常微小的方式顯示，甚至完全沒辦法看到
• 附註：請確保您使用預設的「較暗」亮度設定。請參閱以下「改善大小的秘訣」一節。

改善大小的秘訣

完成下列設定，在螢幕截圖中呈現最佳清晰度：

• 於 macOS 的「系統偏好設定」>「顯示器」中，如圖進行以下設定：
• 於「Illustrator」>「偏好設定」中，如圖進行以下的「使用者介面」設定：

圖示和游標

CC Library

這個共用的 CC Library 內含各種色票、游標和工具圖示。請透過 Illustrator、Photoshop 或 CC 桌面版內的「資料庫」面板來存取。 

+ Ai-Desktop-Assets_TutorialBuilder 

• 您可以使用工具名稱進行搜尋，來更加快速地找到您的工具提示。

XD 收藏集

• 我們也在單一 XD 文件中收藏了各種工具圖示和游標，您可以從中轉存 SVG 檔，或複製貼上至 Ai，然後複製貼上至 Ps 作為智慧物件

PSD (靜態) 和動態 (影片或 AE) 章節影像的色彩

6. 靜態章節影像 (JPG)

+ 靜態章節影像範例

在 Photoshop 中重現場景

建立和處理 UI 的螢幕擷圖

您可使用下列範本建構屬於自己的靜態章節影像：

+ 靜態章節影像範本 (PSD)

在此圖層式 PSD 範例中查看建立影像的方式

+ 靜態章節影像圖層式範例 (PSD)

• 為您的插圖中所使用的各個 UI 元素/面板個別擷取螢幕擷圖。在進行構圖時，這個方法擁有最大的彈性，並且讓您在不影響其他的元素下，能夠調整元素的大小並加以裁切。
  • 先將面板從應用程式外框/視窗完全拉出，再擷取面板的螢幕擷圖。 
  • 使用鍵盤指令 Cmd + Shift + 4，然後按一下空白鍵來擷取螢幕擷圖，這樣就可以擷取整個面板。您也可以在擷取螢幕擷圖時按下 Option 鍵來移除陰影。
• 如果您的面板螢幕擷圖有陰影，請在面板周圍建立向量圖遮色片來移除陰影。
• 在 Ps 中以智慧型物件的方式放置面板，以獲得最高的解析度。
• 規格：
  • 在 Photoshop 中的大小：70%
  • 陰影：色彩增值、#000000、25%、90°、距離 3 像素、展開 11 %、大小 9 像素

從 Illustrator 新增工作區資產

• 盡可能使用向量圖資產。
• 可以以向量圖智慧型物件的方式，將圖稿直接從 Illustrator 複製貼上到 Photoshop。
• 這是在 Ai 中重現選取區 UI、邊界方框等項目，然後複製貼上最終圖稿到 Ps 最容易的方式。
• 如果您要匯入一整個工作區域資產，且工作區域的邊緣在畫布中都清晰可見，請在工作區域周圍新增 1 像素黑色邊來建立工作區域的外觀。

建立選取區 UI、邊界方框

選取區 UI 和邊界方框經常需要根據螢幕擷圖的邊線大小，在 Photoshop 中重新建立成向量圖。 

• 在紅色圖層上與圖稿有關的方框邊界、選取區外框等請使用紅色 (FF0000)
• 根據 Ai 內的圖層顏色，使用 CC Library 中的藍色 (4F80FF)。
• 從以下規格開始進行，然後依需求按照比例調整以符合您的圖稿大小：
  • 選取區外框：1pt 筆畫
  • 邊界外框：1pt 筆畫
  • 角控點：3 像素方形

建立 UI 醒目提示

• 在 Photoshop 中建立 UI 醒目提示向量圖
• 可以是圓形、正方形或矩形。如果您醒目提示的 UI 元素有好幾個，請定義圖形的階層：主要為矩形，次要為圓形等
• 規格
  • 使用金色 F7B74C
  • 填色：無
  • 筆畫：3 像素
  • 陰影：色彩增值、#000000、25%、90°、距離 3 像素、展開 11 %、大小 9 像素

新增游標

• 使用 CC Library 或 XD 收藏集內的游標
• 大小：一般、200%

從 Photoshop 轉存

• PS：使用「檔案」>「轉存」>「轉存為...」，然後如圖進行以下設定。

7. 動態章節影像 (MP4)

+ 動態章節影像範例

有正確大小的 Screenflow 範本 (此為 zip 檔，需要解壓縮)

點選動畫的 Screenflow 範本。您可以開啟這份 Screenflow 專案檔案，複製動畫並貼到您的 Screenflow 時間軸。

範例動畫

錄製的整體準則：

• 請參閱上方「改善大小的秘訣」一節，以設定適當的螢幕解析度。
• 不要在錄製中包含任何文字。這代表 UI 面板不能是動態螢幕擷取的一部分，只能包含文件視窗間的動作。
• 錄製「前」請關閉智慧型參考線 (「視窗」>「智慧型參考線」)。我們不希望影片中出現令人分心的內容
• Ai 中的游標尺寸請依照上方「改善大小的秘訣」章節所述設定，我們希望游標能稍微大一點，才能方便遵循
• 醒目提示：請遵循上方「建立 UI 醒目提示」章節的指示
• 移除所有錄製的音軌！這些影片「不包含」配音
• 儘量讓您的游標順暢移動
• 選取工具時，如果顯示了工具提示，您可能需要在編輯軟體內使用方框來遮住文字。如果移動游標不夠快速，有時會難以避免顯示工具提示
• 避免錄製選單和面板

編輯您的螢幕擷圖

• 您可以使用用來擷取畫面的應用程式來編輯擷取畫面，Screenflow 或 Camtasia 是兩個常用的工具
• 影片開頭和結尾不能使用淡入淡出效果
• 在影片中使用以下動畫來顯示點選的動作：

• Screenflow 文件 (複製貼上到 Screenflow)

• Camtasia 文件 (複製貼上到 Camtasia)

動態畫面錄製的規格

• MP4 格式
• 560x280，每個 MP4 的大小限制：4MB
• 這些影片的長度應介於 5 秒到 10 秒。 因影片會在面板中循環播放，長度不宜過長。 如需相關資訊，請洽詢管理者

8.主頁橫幅與縮圖影像 

• 主頁橫幅是在 Illustrator 中用來預覽教學課程的靜態影像。主頁橫幅為「編輯後」的影像，也就是教學課程的最終成果。

+ 主頁橫幅 PSD 範本

• 縮圖影像是在「搜尋」面板中用來預覽教學課程的靜態影像。縮圖影像為「編輯後」的影像，也就是教學課程的最終成果。

+ 範本縮圖 PSD

用於教學課程系列的主頁橫幅與縮圖圖像

如果您要設計運用同個圖稿的教學課程系列，每個步驟的系列主頁橫幅和縮圖都應基於同個美術圖做變化。這樣做可以讓這些圖保持關聯時，仍能清楚傳達在個別的教學課程中的不同用途。每個主頁橫幅和縮圖的組合應能大致預覽系列中個別的教學課程主題。

建議做法：

• 使用同個美術圖的不同元素、裁切或焦點
• 使用略為不同的顏色主題

範例：

9. 資產規格

請前往「影像規格」以取得建立 TB-Ai 資產的詳細資訊。

其他做法：使用 After Effects 的動態影像

請注意：此章節適用於擅長使用 After Effects，並想建立自己的章節動態圖像而非螢幕擷圖或靜態章節影像的作者。

+ 使用 AE 建立的動態章節影像範例

置入 CC Library 中的游標：

Ae 大小：140%

新增 Illustrator 的圖稿資產

• 盡可能使用向量圖資產。
• Ae：建立新的 Ai 檔案，檔案已儲存圖層上的每個動畫資產。您後續可以將所需的圖層轉存到 Ae。 
  • 如果您要匯入一整個工作區域資產，且工作區域的邊緣在畫布中都清晰可見，請在工作區域周圍新增 1 像素黑色邊。
  • 確認每個匯入至 Ae 的 Ai 內容皆有選取「連續點陣化」欄位。這可在最終的 MP4 中呈現清晰的向量內容。(若您沒有看到此設定，請按一下視窗最下方的「切換開關/模式」按鈕。)

在 Ae 中處理螢幕擷圖

• 在 Ae 中以連結檔案的方式放置面板，以獲得最高的解析度。
• 規格：
  • 大小：35%
  • 陰影：色彩增值、#000000、25%、90°、距離 3 像素、展開 11 %、大小 9 像素

建立選取區 UI、邊界方框以及醒目提示

直接在 Ae 建立選取區 UI 和邊界方框的向量圖 (尤其是在您要展示如何縮放物件時。)

• 醒目提示請使用 CC Library 中的金色，F7B74C
  • 填色：無
  • 筆畫：3 像素
  • 陰影：色彩增值、000000、25%、90°、距離 3 像素、展開 11 %、大小 9 像素]

加/減速

在動態關鍵影格之間新增加/減速，讓動作更加自然。

• 視需要在個別的關鍵影格上套用 Easy Ease

轉存

• 使用「檔案」>「轉存」>「新增至 Adobe Media Encoder 佇列...」，然後使用「Adobe 學習：應用程式內教學課程資產」預設集。

Adobe-Learn-In-App-Tutorial-Assets.epr

可從 CDA 的 Dropbox 下載