永豐元件包 使用手冊

金控總經理辦公室
2026 / 08
翻轉金融 共創美好生活Together, a better life.
Agenda

今日議程

01
骨架與層級
版面怎麼分區與分級
02
內容元件
卡、格、列、表怎麼選
03
流程與主從
時間軸、步驟與主從版面
04
互動與驗收
互動元件與三道關卡
01
骨架與層級

一頁的內容要怎麼分區與分級?

01 · 骨架與層級

版面是內容的容器,先寫結論再選元件

這份手冊把元件的用法與容量一次列齊,寫新簡報時可直接抄組合,不必重寫樣式。往下四章依序是骨架與層級、內容元件、流程與主從、互動與驗收,每章三到五頁。看完回頭翻 components.md 查行單位成本即可動工。

先決定這頁要回答什麼,再挑元件。

選錯容器,內容再好也讀不出來。

01 · 骨架與層級

四級字階撐起層次,強調只用官方紅藍

每個資訊區塊至少要有兩級字,字階為標題 28pt、關鍵句 20pt、小重點 16pt、結論列 14pt、內文 12pt,內文是下限。行內強調全部收在官方紅藍之內:紅標行動與結論、藍標結構與現況,第三色只留給漲跌與狀態燈。
層級、強調與字級下限每個資訊區塊至少兩級字
01四級字階HIERARCHY
區塊標題 blk-h
關鍵句 lv-k:一句話講完判斷

內文 lv-b:補充依據,顏色淡一階。

註解 lv-n:虛線分隔,只靠顏色分層。

02行內強調EMPHASIS
全部收在官方紅藍之內
  • 紅字用 k 標行動與結論
  • 藍字用 kb 標結構與現況
  • 淡底用 mark 標一句重點
  • 弱化用 mute 收次要資訊
  • 白話用 浮層提示 解名詞
03字級下限TYPE FLOOR
放不下砍字,不縮字級
  • 內文12pt,內容區的下限
  • 來源註10pt,與英文小標同為下限
  • 絕對下限10pt,低於就是硬錯
  • 頁尾屬母片外框,不受此限
  • 層級差靠字重與顏色,不靠字級
內容區字階以列印母片換算,與簡報軟體同尺度
KEY20pt

關鍵句,一段裡最先被讀到。

HEADING16pt

區段、卡名、卡片關鍵句。

BLUF14pt

結論列,比內文大一級。

BODY12pt

內文與表格,一行約 71 字。

01 · 骨架與層級

骨架與網格決定一頁能放多少內容

內容區直排、分區照內容由上而下排,網格只有兩欄到四欄三種選擇;內容短的頁由引擎自動放大字級與間距。一頁最多放兩個分區,超過就該拆頁,而不是把間距壓小。分區內容過多時會被壓縮而不是撐開,量測工具看的是分區的實際高度。
網格 g2/g3/g4預設不包卡、欄間一條線;要框才加 solid
G2兩欄

左右對照、兩案並排。

G3三欄

三案分流、三卡並排。

G4四欄

四個小格、指標一排。

分區 seg 的三條鐵則對照列預設只留線
數量

一頁最多兩個分區,超過就拆頁,不要把間距壓小。

高度

分區內容過多時會被壓縮而不是撐開,量測要看分區的實際高度。

撐滿

fill 只撐開放欄與含圖表的格,有框的卡只到內容高、不撐空洞。

元件包COMPONENT PACK
02
內容元件

卡、格、列、表各自適合什麼?

02 · 內容元件

主卡承載三張並排的完整論述

主卡由卡頭、關鍵句、前置詞列表三段組成,適合三案並排比較。並排卡的同位列必須共用同一組前置詞,句式也要對稱,否則讀者會以為三案的評估基準不同。一排卡最多標一張重點卡,多標等於沒標。
主卡 card:卡頭 ch + 關鍵句 ck + 前置詞列表 kvsolid 包框、sync 讓同位列跨卡同高
01卡頭HEAD
編號與名稱放這裡
  • 編號可省,省了就靠名稱辨識
  • 英名有資訊才加,靠右、過長縮字級
  • 字數卡名兩到四字最好認
卡尾 cf:有框時卡頭與關鍵句合計 4.3 行單位
02關鍵句
這張卡的結論一句話
  • 寫法收成一句,不複述卡名
  • 顏色預設藍,重點卡轉紅
  • 句式三張卡要用同一種句型
卡尾 cf:列表每列 1.3 行單位
03變體
hot 標唯一的重點卡
  • 語意紅為重點、琥珀為注意
  • 綠色只給達標與正常狀態
  • 紀律一排卡最多標一張
卡尾 cf:三張卡的卡尾排成一條線
包卡、開放欄還是列點容器要有理由
包卡

網格加 solid:三案要逐列比較、要用底色表態,或內容有完整的卡頭與關鍵句。

開放欄

網格的預設:三個要點、四個指標這類同質並列,靠對齊與欄間細線就分得開。

列點

表格或圖旁邊的說明,直接放一列前置詞列表,不另包一張卡。

02 · 內容元件

小格卡放數字,對照列放兩欄比較

小格卡是眉標、標題、一句說明的三件套,格標是數字時加指標磚變體,數字放大到投影距離一眼讀得到。對照列則是左標籤右內文的逐列結構,一組三到八列最好讀。同一組每列的行數必須一致,一行與兩行交錯會讓整組看起來沒對齊。
小格卡 cell:眉標 + 標題 + 一句格標是數字時加 kpi,數字放大一級
CAPACITY18行單位

1080p 內容區可容行數。

PATTERNS5種

結構頁版型固定五種。

FLOOR12pt

內文字級下限,不得再縮。

VIEWPORT5檔

幾何驗收要過的視窗數。

對照列 lad/lr:左標籤、右內文
一組

三到八列最好讀,超過就拆成兩區或改用表格。

成本

單行列算 1.6 行單位、兩行列算 2.6,估容量時要分開算。

標籤

兩到四字最好認,超過四字的標籤改寫成前置詞。

選型

預設藍字標籤加細線;長句組可用 solid 實心,短句組用 c2 排兩欄。

行數

同一組每列行數要一致,一行與兩行不可交錯。

02 · 內容元件

檢核列與表格處理逐項盤點

檢核列是項目、缺口、因應的三欄結構,適合把風險逐項攤開並各配一句處置。表格預設只留線不鋪底,新表格讓欄寬跟內容走,空出來的位置直接列點,不必再包卡;欄多字長的寬表才撐滿版面。兩者都不放結論,結論一律寫在結論列。
檢核列 chk/cr:項目 + 缺口 + 因應
字級✗放不下就縮字▸砍字或拆頁,字級不動
主從✗整頁等分排列▸改主從網格或一大數小
節奏✗只有轉場沒有結論▸內容頁一律要有結論列
強調✗一排卡全部標紅▸一排最多標一張重點卡
表格 tb:欄寬跟內容走行單位:1080p 實測fit 貼內容寬、lite 收內距
元件行單位適用組成
cell3.6指標一排眉標+標題+一句
card3.4並排論述卡頭+關鍵句,列表另計
kv 列1.3卡內列點兩行列算 2.3
lr1.6逐列對照兩行列算 2.6
  • 欄寬跟內容走,不寫百分比,表格只佔需要的寬度
  • 數字加 n 右齊,個位對個位,大小一眼比得出來
  • 滿版欄多、字長、要整齊對位的寬表才撐滿版面
  • 財報焦點欄 f、合計 sum、子項 sub、群組 grp
03
流程與主從

新版多了哪四個元件可以用?

03 · 流程與主從

時間軸把里程碑排成一條脊線

時間軸適合放專案時程、政策沿革與改版歷程,一條軸建議四到六個節點。簡報是橫幅,短節點預設橫排由左而右,說明要寫兩行以上才改直排。里程碑本身屬於結構所以用藍點,整條軸最多留一個紅點標關鍵時刻,多標就失去指向性。
橫向時間軸 tl.h/ti藍點是結構、紅點只標一個亮點
DATE日期用等寬體眉標

沿用小格卡的眉標慣例,字級 10pt。

TITLE節點名用黑體 900

節點名一行講完,細節交給下面這句說明。

HOT紅點標關鍵時刻

一條軸最多一個,多標就失去指向性。

COST橫排約 4.8 行單位

直排每筆 2.5,加一句說明變 3.4。

SHORT說明句可以省略
橫排或直排怎麼選
橫排

四到六個短節點,每個說明一句,用滿整個橫幅。

直排

節點說明要寫兩行以上,或時間軸放在主從版面的側欄。

手機

橫排在手機直立時自動轉回直排,不必另外寫手機版。

03 · 流程與主從

序號步驟講流程,橫向流程講階段

序號步驟是直排的號圈加說明,適合有先後依賴的操作程序。橫向流程是等分方塊加箭頭,適合階段推進且每段份量相當的情況。手機上整張等比縮小、版面跟投影相同;標頭寫手機版重排時才改單欄、箭頭轉向下。
序號步驟 steps/st四步以上拆兩欄,先直後橫
1
先寫骨架

一頁一列,決定每頁要回答什麼問題。

2
再寫文字稿

照字數帶寫,這時不要想版面。

3
再套元件類名

照容量表挑元件,不重寫樣式。

4
最後跑驗收

三支腳本依序跑完才算交付。

橫向流程 flow/fs手機自動轉直向
S0骨架

一頁一列定問題

S1文案

照字數帶寫稿

S2組裝

程式組出簡報

S3驗收

三道關卡跑完

序號步驟回答「怎麼做」,橫向流程回答「走到哪」;同一件事二選一,兩種都放等於講兩遍。

03 · 流程與主從

主從版面讓單一數字成為主角

等分版面讀不出重點,改用主從網格把版面切成一大一小,大的那格放焦點數字或關鍵圖。焦點數字加上明體類名會轉成明體並收緊字距,年報質感更強。但表格與多欄對位的數字仍必須維持等寬體,否則欄位會跳動。
0行單位
1080p 內容區約可容的行數

焦點數字加 serif 轉明體並收字距;表格與多欄對位數字仍用等寬體。

28pt
頁標題字級
14pt
結論列字級
12pt
內文與表格字級
04
互動與驗收

互動元件怎麼用,交付前要過哪些檢查?

04 · 互動與驗收

互動元件收納細節,紙本只印開檔畫面

收合放附錄級細節、頁籤放平行內容、一鍵複製讓讀者直接取用文字段。列印=打開檔案時的畫面:頁籤只印預設那一片、收合照開檔狀態,所以結論與數字寫在預設畫面上。個案要每一片、每一格都印出來,標頭寫「列印展開: on」就回到全部攤開。
收合 details + 頁內頁籤 tabs + 一鍵複製 copy列印只印預設片與開檔狀態

結論與數字寫在預設畫面

收合起來的樣子›
附錄級細節放這裡。
展開後的樣子›
邊框轉藍、箭頭轉向;一頁最多三到四個。
什麼不該放進來›
結論與決議留在結論列,不藏在收合裡。
同一區塊放多組平行內容,切換不換頁。適合三個部門、三個年度這種平行結構。
列印只印開檔那一片,頁籤列照印,所以預設片要能獨立成立;標頭寫「列印展開: on」才每一片都印出並加上頁籤名。
讓讀者直接取用文字段,按鈕本身不進列印。
右下輸出鈕可把整副文字匯成 Markdown,每一片頁籤都會輸出;讀者批註後傳回,可逐頁對回原稿改字。
04 · 互動與驗收

圖表沿用品牌色票不必逐張指定

圖表用外部函式庫搭配向量繪製器,設定寫在頁內的 JSON 區塊。未指定顏色時引擎會自動注入品牌色序列,全副圖表天生一致。漲跌與達標這類語意圖表則要自帶顏色,並遵守漲紅跌綠的慣例,引擎不猜語意。
圖表 xhb-ec:向量繪製、品牌色自動套用語意色請自帶 color
一行兩行或加一句

柱色沒有在設定裡指定,藍與紅是引擎自動注入的品牌序列;圖例用頁面色塊,不用函式庫自帶的。

註:圖表函式庫走外部載入,離線時請改放靜態圖
04 · 互動與驗收

簡報態讓講者逐步講,列印仍是閱讀態

按 P 或 F5 進入簡報態:往下鍵先把本頁內容一步步亮出、逐列點名,走完才換頁;雷射筆、黑幕、概覽與講者視窗也只在這時出現。閱讀、手機、列印與量測永遠是閱讀態,講到一半按列印,紙本跟沒進簡報態時印的一樣。
逐步揭示:往下鍵一次亮一格還沒輪到的留淡影,看得到還有幾項
STEP逐步揭示

元素掛 data-step,寫第幾步出現。

WALK逐列點名

表身掛 data-walk,一步亮一列。

PRINT列印終態

紙本一律全亮,不必另做講義。

逐列點名:講到哪一列就亮哪一列點選任一列可以釘住
按鍵簡報態做什麼
→ ↓下一步,本頁走完才換頁
L綠光雷射筆,[ ]鍵調大小
B黑幕,按任一鍵恢復原畫面
O概覽全部頁面,選了就跳
  • 抵達往下鍵進來的頁從第 0 步開始,捲動或跳頁進來一律完整
  • 強調講到哪一段,那一段才畫上底色,紙本照樣留著
  • 關閉標頭寫「簡報態: off」,整副回到只有閱讀態
04 · 互動與驗收

追問時就地給答案,紙本只印頁面上的內容

指標格點一下「看拆解」就地展開明細,紙本不印這個浮層;滑過結論裡的指標格一格就用掉兩成容量,表格會框出對應那一列。同一組數字可在行單位與容量占比之間切換,列印只印開檔那一種看法。
數字從基準值滾到新值,點一下就地展開滾完才亮出差額
PAGES21頁

本手冊由 19 頁增為 21 頁+2 頁

KEYS15列

按鍵說明的列數,

分類列數
翻頁與跳頁5
步驟控制2
講者工具6
進出簡報態2
PRINT21頁

列印=21 張投影片,浮層不另印

狀態切換:同一組數字換一種看法1080p 一頁約 18 行單位
元件行單位組成
cell3.6眉標+標題+一句
card3.4卡頭+關鍵句
lr1.6標籤+一句內文
kv 列1.3前置詞+一句
元件占一頁組成
cell20.0%眉標+標題+一句
card18.9%卡頭+關鍵句
lr8.9%標籤+一句內文
kv 列7.2%前置詞+一句
  • 切換分段鈕換一種看法,值都由作者先寫好,頁面不另外計算
  • 列印只印開檔那一種看法,另一種留給螢幕上切換
  • 聯動滑過表格任一列,同一個元件的其他標示一起亮起
04 · 互動與驗收

三道驗收關卡確保交付前不跑版

文字紀律、槽位對帳、幾何量測三支程式依序跑完才算交付。前兩支管文字與結構,第三支跑五檔視窗量實際渲染高度,是判斷跑版的唯一可信來源。任何一頁溢出就回頭砍字,不要動字級,也不要壓間距。
三道驗收關卡依序跑完才算交付
  • 1
    文字紀律查字數帶、禁詞、中國用語與標題句式,出現硬錯就回頭改字。改字不改字級,也不壓間距。
  • 2
    槽位對帳比對頁面節點與文字稿行號,防止改字漏同步。行號整體漂掉會收斂成一則錯誤。
  • 3
    幾何量測跑五檔視窗量渲染高度,任一頁溢出即失敗。這是判斷跑版的唯一可信來源。
超出容量時的處理順序由左而右,最後才碰間距
1精煉贅語
2合併同性質列
3砍結論列一行
4才收間距

頁面自帶的偵錯參數只當快篩,長簡報下方頁面動畫未沉澱時會誤報。回封面

幾何量測另外會報的提醒只提醒,不讓驗收失敗
SYMMETRY對稱與排版

同組不齊、並排不對稱、孤字與字距撐開。

WHITESPACE留白分布

右側空置、卡內空洞、下半空置三種形態。

MOBILE手機縮放

直立與橫擺兩檔,縮放失效或有橫捲軸即失敗。

元件只是容器,
先想清楚這頁要回答什麼

容量表與最小 DOM 見 references/components.md

翻轉金融 共創美好生活Together, a better life.