「標準元件」可讓您輕鬆建立、自訂及重複使用高品質且一致的圖表。此專業樣式適用於所有「Salesforce 圖表」範本,且適用於圖表使用個案的合作夥伴工具:

Lucidchart 元素 Miro Google 投影片

尋找如何在 參照結構圖庫中使用元件的範例

下列區段會針對「標準元件」中包含的「標頭」、「卡片」、「圖示」 和「連接器」 來收集詳細的最佳作法。

「頁首」應出現在所有圖表上,並包含:

• 您受眾可以快速瞭解的標題
• 清楚說明圖表涵蓋的內容、其目的與意圖
• (選用) 要傳達作者的標誌或公司名稱
• (選用) 用來說明作為分類之圖示、設計或符號的索引鍵

大小應佔用圖表高度的至少 10% 且寬度的 100%。

描述的字型大小應至少為標題的大小半。

當使用圖表本身上未指定標題的圖示、連結、色彩等時,應包含「金鑰」。金鑰應盡可能分組為偶數列。

圖表的所有內容應以卡片表示。卡片可以調整大小,且可以有透明或彩色的填充。卡片有多個區段提供變化,您可以用來在圖表中代表不同的概念。

範例卡片如下,其中描述不同的區段。唯一的必要卡片內容為「標題」。其他區段可視需要用於特定使用個案。

卡片圖示
卡片圖示是代表卡片內容的視覺資產

卡片標題
卡片標題是可快速瞭解的卡片名稱,用來捕捉卡片代表的內容、區域或概念

卡片屬性
卡片屬性是關於內容的文字詳細資料,以清單表示,並用於當您需要取用和傳遞多個資料點時使用

卡片頁尾
卡片頁尾提供財產的其他特性。範例包括:封裝/物件/ API 名稱、擁有權、功能等

卡片頁尾圖示
用於視覺資產的頁尾圖示區段可顯示關於該內容的其他資訊。範例包括:管道、共用服務、功能等。頁尾圖示應包含在圖表索引鍵中/說明。

使用不同的區段可為不同的使用提供不同的卡片變化。您可以視需要混合和比對卡片解析度,以在圖表中建立這些變化。請參閱下列範例:

請參閱「參照結構圖庫」,瞭解如何使用這些變化。

根據需要使用可調整卡片大小和色彩的功能來區分類型,並建立明確且易懂的圖表。

卡片也可以作為容器,亦即多個內容的分組。您可以在另一個卡片內嵌套卡片來代表階層關係,或視需要將相關內容分類。

Salesforce 圖表提供一組基本的「Salesforce 產品標誌」,以及其他圖示來代表圖表中的內容和其他區域。

您可以在「參照結構圖庫」中找到如何使用圖示的範例

如需其他圖示,請參閱 Lightning Design System 圖示。

連接器一律應使用肘線連接線,並盡可能保持直接,以提高可讀性。

連接器代表兩個卡片之間的關係、整合或程序步驟。線條樣式表示不同類型的連線,且應在圖表索引鍵中呈現。端點表示整合或流程連結的方向。端點也代表關係連結的基數與次序。

藥丸可用來提供連線的相關詳細資料。請參閱「解決方案結構」和「互動流程流程」圖表以瞭解藥丸的範例使用方式。

在全球,大約有 13 億 人患有某種形式的殘疾,佔全球人口的 15%。無障礙功能可讓您的圖表對所有檢視者都可理解。有兩個特定的焦點區域可以協助您更容易存取圖表:針對螢幕助讀程式最佳化,以及適當使用色彩對比。

您可以在 Salesforce Design 部落格上找到有關無障礙設計的更多資源。

螢幕助讀程式
螢幕助讀程式是一種軟體應用程式,可在檔案、應用程式或網站中大聲讀取文字。螢幕助讀程式可以對無法清楚看見的個人讀取圖表。螢幕助讀程式相容性的最佳格式為 PDF (可攜式文件格式)。不同於影像和無法存取的應用程式,螢幕助讀程式可以存取 PDF,以讀取文字、形狀和色彩。與他人共用時將圖表匯出為 PDF 格式,可提升無障礙功能。

色彩對比
增加色彩對比是另一個協助您更容易存取圖表的方法。當人員符合「網頁內容無障礙指導方針」(WCAG) 的最低色彩對比,其背景色彩與文字本身色彩之間的比率為 4.5:1 時,便能夠更清楚辨識及閱讀您的圖表。

Salesforce 色彩系統中的每個色彩都有 0 到 100 之間的數字,與其相關聯。為圖表選擇色彩時,請確定文字背後的背景色彩至少大於或小於文字色彩的 50 點。例如,如果背景色彩為 80,則文字色彩不應高於 30。視需要也考慮針對框線和框線使用 50 點規則。

**Salesforce 圖表是否有輸入或問題?**請讓我們知道您在 這裡的想法。