XD Playbook 撰寫規則

XD Playbook 撰寫規則

這裡提供新手設計師撰寫 XD playbook 的規則～

⚡️ 文章模板：

→輸入章節標題 (Template)

建議複製此模板 (Cmd+D) 再搭配下方說明

💡
使用模板者，請直接移動至 Format 章節～

Page Layout

全頁佈局

完整的頁面佈局包含 Menu、Main Contents、Changelog、Table of Contents
完整的頁面佈局包含 Menu、Main Contents、Changelog、Table of Contents

跟隨以下步驟，在 Notion 設定一致的全頁佈局：

  1. 頁面設定為 Full width
    2. ❶ 點擊頁面右上 [⋯] 開啟選單 → 開啟 [Full width]
    ❶ 點擊頁面右上 [⋯] 開啟選單 → 開啟 [Full width]
    ❷ 頁面變寬代表你做對了，不要害怕！
    ❷ 頁面變寬代表你做對了，不要害怕！
  2. 內容設定為 3 Columns
    3. ❶ 在內容空白處輸入「/3 columns」點擊 [3 columns]
    ❶ 在內容空白處輸入「/3 columns」點擊 [3 columns]
    ❷ 鼠標在欄之間懸停時顯示直線 → 點擊直線拖曳欄寬 → 將欄寬變更為上圖的比例（大約即可）
    ❷ 鼠標在欄之間懸停時顯示直線 → 點擊直線拖曳欄寬 → 將欄寬變更為上圖的比例（大約即可）
    ❸ 每一欄將放置不同內容（附圖為填色示意，不需跟隨）
    ❸ 每一欄將放置不同內容（附圖為填色示意，不需跟隨）

Left Column: Menu

左側欄：項目清單

跟隨以下步驟，在左側欄建立 Menu：

❶ 進入首頁 → 選取左側 Menu（選取時呈現紅色框）→ 點擊 [Copy and sync]
❶ 進入首頁 → 選取左側 Menu（選取時呈現紅色框）→ 點擊 [Copy and sync]
⚠️
所有 Menu 皆有同步連動，請勿自行建立新的 Menu
❷ 返回當前頁面並貼在左側欄
❷ 返回當前頁面並貼在左側欄

Right Column: Table of Contents

右側欄：目錄

跟隨以下步驟，在右側欄建立目錄：

❶ 輸入標題「On This Page」→ 選取標題文字 → 變更文字顏色為 [Gray]
❶ 輸入標題「On This Page」→ 選取標題文字 → 變更文字顏色為 [Gray]
❷ 在標題下方輸入「/table of contents」→ 點擊 [Table of contents]
❷ 在標題下方輸入「/table of contents」→ 點擊 [Table of contents]

Middle Column: Main Contents

中間欄：主要內容

跟隨以下步驟，在中間欄建立主要內容：

❶ 複製貼上頁面標題 → 變更樣式為「Heading 1」
❶ 複製貼上頁面標題 → 變更樣式為「Heading 1」
❷ 輸入此章節的簡短說明文字 → 變更樣式為 [Quote]
❷ 輸入此章節的簡短說明文字 → 變更樣式為 [Quote]
❸ 若有延伸頁面請新增在標題區塊，方便提取
❸ 若有延伸頁面請新增在標題區塊，方便提取
❹ 標題區塊結尾需增加分隔線。輸入「/divider」→ 點擊 [Divide]
❹ 標題區塊結尾需增加分隔線。輸入「/divider」→ 點擊 [Divide]

Middle Column: Changelog

跟隨以下步驟，在中間欄建立 Changelog：

❶ 在 Main contents 下方輸入大標題「Changelog → 在大標題下方輸入「/linked view of database」→ 點擊 [linked view of database]
❶ 在 Main contents 下方輸入大標題「Changelog → 在大標題下方輸入「/linked view of database」→ 點擊 [linked view of database]
❷ 點選右側 [Changelog]
❷ 點選右側 [Changelog]
❸ 成功顯示
❸ 成功顯示

Format

格式

  1. 頁面標題：/Heading 1
    2. 僅頁面標題使用 Heading 1
    僅頁面標題使用 Heading 1
  1. 段落大標題：/Heading 2 + /Text (Bold, Gray)
    2. 段落大標題包含英文與中文翻譯，分兩行輸入
    段落大標題包含英文與中文翻譯，分兩行輸入
    段落大標題（英文）樣式為 Heading 2
    段落大標題（英文）樣式為 Heading 2
    段落大標題（中文）樣式為 Text、粗體、Gray
    段落大標題（中文）樣式為 Text、粗體、Gray
  1. 段落中標題：/Heading 3
    2. 段落中標題為英文+空格+中文合併在同一行，樣式為 Heading 3
    段落中標題為英文+空格+中文合併在同一行，樣式為 Heading 3
    ⚠️
    若整篇文章只有兩個階層，建議使用大標題與小標題（省略中標題），讓 Table of Contents 不至於太長。
  1. 段落小標題：/Text (Bold)
    2. 段落小標題使用 Text、粗體
    段落小標題使用 Text、粗體
  1. 分隔線：/Divider
    2. icon
    每個段落大標題之間使用分隔線

    輸入大標題（英文）

    輸入大標題（中文）

    輸入大標題（英文）

    輸入大標題（中文）

  1. 連結：/Quote
    2. 輸入連結說明 輸入連結標題

Image

請使用下方 Figma 檔案製作 XD Playbook 中的附圖：

⚠️
附圖需使用一致的設計

版本管理說明

包含 XD Playbook 更新流程與新增版號原則

Changelog

Date
Version
Notes
Chapters
Person
November 1, 2022
1.0

・XD Playbook Foundation 正式上線

All
pei-tzu Lin
November 22, 2022
1.1

・Changelog 測試 ・範本介紹

All
Mark Liang
November 25, 2022

・所有筆記彙整

All
Mark Liang
June 28, 2024
2.0

・新增前導頁影音 / 圖片廣告草稿

Advertising Slot
C
Camille Cheng
May 20, 2024
2.0

・新增Advertising Slot Comparison Table初版

Advertising Slot
C
Camille Cheng
June 7, 2024
2.0

・新增贊助式影音廣告草稿

Advertising Slot
C
Camille Cheng
June 14, 2024
2.0

・編輯贊助式影音廣告內容

Advertising Slot
C
Camille Cheng
February 2, 2024
1.37

・增加雙平台 UI 說明 ・調整局部文字及圖片說明

Edit mode
C
Camille ChengParis Han
December 14, 2023
1.37

・更換新版 Fixed banner 示意圖 （ follow ADAP 規則）

Fixed Banner
C
Camille Cheng
December 4, 2023
1.36

・雙平台說明 review 後調整

Slider
C
Camille Cheng
December 4, 2023
1.36

・雙平台說明 review 後調整

List
C
Camille Cheng
November 21, 2023
1.35

・增加雙平台 UI 說明

Slider
C
Camille Cheng
November 23, 2023
1.35

・增加雙平台 UI 說明

List
C
Camille Cheng
November 15, 2023
1.35

・調整雙平台 UI 介紹內容，補充 Android 示意圖

Toggle
C
Camille Cheng
October 16, 2023
1.35

・調整雙平台 UI 介紹內容，補充 Android 示意圖及說明文字

Action Sheet
Paris Han
October 16, 2023
1.35

・調整雙平台 UI 介紹內容，補充 Android 示意圖及說明文字

Top Navigation
C
Camille Cheng
June 16, 2023
1.24

・新增 Scenario 區塊 ・新增 Something to notice 情境

Notification
C
Camille ChengParis Han
August 8, 2023
1.34

・新增 Checkbox / Checkmark / Slider / Toggle

CheckboxCheckmarkSliderToggle
Verna Wang
July 26, 2023
1.33

・新增 Touch Target 草稿

Touch Target
Verna Wang
July 24, 2023
1.32

・修改 Comparison table 表格 ・修改 something to guide ・修改 give a feedback ・修改 special status

Notification
Paris Han
C
Camille Cheng
July 6, 2023
1.28

・新增 Comparison table 草稿

Notification
C
Camille Cheng
July 10, 2023
1.30

・新增 special status 草稿

Notification
Paris Han
July 10, 2023
1.31

・新增 VoiceOver / TalkBack 草稿

VoiceOver/TalkBack
Yit Chung
July 7, 2023
1.29

・新增 give a feedback 草稿

Notification
Paris Han
July 19, 2023
1.31

・Comparison table 表格調整 ・修改 something to guide 草稿 ・修改 give a feedback 草稿

Notification
C
Camille ChengParis Han
July 6, 2023
1.28

・新增 something to guide 草稿

Notification
Paris Han
June 26, 2023
1.27

・新增 Requesting Permission 草稿

Requesting Permission
Verna Wang
June 26, 2023
1.26

・修改 something to notice 內容

Notification
C
Camille ChengParis Han
June 19, 2023
1.25

・新增 Scenario - edit mode 草稿

Edit mode
Yit Chung
February 3, 2023
1.9

・將原本的空值狀態跟特殊狀態合併為 Status 一起撰寫

Status
Paris Han
February 13, 2023
1.13

・新增 Action Sheet 草稿

Action Sheet
Paris Han
March 3, 2023
1.18

・新增 tab 草稿

Tab
Paris Han
March 17, 2023
1.20

・新增 floating message 草稿

Floating message
Paris Han
January 31, 2023
1.5

・ Bottom Navigation 調整

Bottom Navigation
C
Camille Cheng
January 17, 2023
1.3

・新增 Bottom Navigation 草稿

Bottom Navigation
C
Camille Cheng
February 21, 2023
1.16

・新增 Message Blocks 草稿

Message Blocks
C
Camille Cheng
February 13, 2023
1.14

・新增 Dialog 草稿

Dialog
C
Camille Cheng
May 19, 2023
1.23

・補齊、調整 Typography 章節 Universal ・新增 Typography 章節 Website 頁面

Typography
Jimmy ChangVicky Hsu
April 28, 2023
1.22

・補齊、調整 Layout 章節 Universal、Website 頁面

Layout
Vicky HsuJimmy Chang
March 21, 2023
1.21

・新增 Button 草稿

Button
Yit Chung
C
Camille Cheng
March 15, 2023
1.19

・新增 List 草稿

List
Verna Wang
February 13, 2023
1.15

・新增 Tag 草稿

Tag
Yit Chung
March 1, 2023
1.17

・新增 Input field 草稿

Input field
Yit Chung
January 31, 2023
1.8

・新增 Fixed Banner 草稿

Fixed Banner
C
Camille Cheng
February 6, 2023
1.11

・新增 Tooltip 草稿

Tooltip
Verna Wang
February 6, 2023
1.10

・新增 Badge 草稿

Badge
Yit Chung
February 8, 2023
1.12

・新增 Cards 草稿

Cards
Verna Wang
January 31, 2023
1.7

・新增 Empty Status 草稿

Status
Paris Han
January 31, 2023
1.6

・新增 top navigation 草稿

Top Navigation
Yit Chung
January 17, 2023
1.4

・新增 Image 草稿

Image
Verna Wang
January 17, 2023
1.2

・Layout - 響應式斷點說明更新 ・Icons - 新增缺口風格設計說明

All
Jaco Huang
image