瑞士風格 UI 設計是做什麼的？

此技能將瑞士學派的原則轉化為具體的 UI 設計決策。該學派的核心理念（源自 Ernst Keller）是：設計解決方案必須來自於內容本身。 以下所有內容皆遵循此原則：網格是邏輯，字體是圖像，色彩是帶有明確功能的強烈扁平色塊，留白是結構，而絕非裝飾。

第二個目標：成果絕不能看起來像 AI 生成的。一般 AI 介面有共同的外觀（居中主視覺、紫色漸層、帶柔和陰影的圓角卡片、三個圖示功能、模糊的文案）。而瑞士風格幾乎與此相反，因此嚴謹地應用它就能解決大部分問題；第五部分則處理其餘部分。

第三個目標：成果必須有力量。 一個米色背景、一個橙色色塊的整潔頁面，只有在網格上才是瑞士風格。此風格聞名的海報通常充滿色彩：強烈扁平色或黑色佔據 83–97% 的版面，或者一種彩色油墨承載所有內容，並由一個著色面板填滿其餘部分。因此，步驟 4 在任何佈局之前，先選擇一種外觀（底色、配色方案、圖片處理方式）。references/looks.md 中存放了五種取自真實海報的外觀，附帶經過測試的 CSS；scripts/color_power.py 則用來評估結果。

本文件組織方式

工作流程 — 按順序的步驟
網格、間距、字體與色彩 — 代碼標記、刻度、調色盤、佈局配方、基礎 CSS
阿拉伯文與 RTL
元件
不顯得 AI 生成 — 審查核對清單
來源：瑞士學派簡介（來自手冊 The Swiss School of Design）

此技能亦包含：references/looks.md（外觀、對比組合、經過測試的 CSS 機制）和 scripts/color_power.py（螢幕截圖的色彩強度檢查）。

第一部分 — 工作流程

1. 從內容出發

寫下這個畫面存在的唯一目的（一個訊息、一個行動）。它將成為主導元素。
將其餘內容排序，最多分為 3–4 個層級。
如果使用者未提供內容，請使用目標語言撰寫真實、具體的內容：寫實的本地名稱、確切的數字、日期、價格、地點。絕不使用 lorem ipsum，也絕不使用行銷填充語（例如「解鎖……的力量」或其阿拉伯文等效用語「探索……的力量」）。具體內容是頁面看起來由人類製作的最強單一信號。請告知使用者哪些細節是您假設的，需要他們替換。
以瑞士風格的方式撰寫文案：客觀且基於事實，避免廣告和宣傳的誇大主張（Meggs 對該風格的定義）。設計師的職責是作為資訊的清晰通道，而非銷售員。在這裡，事實、數字、條件和樸實的動詞比形容詞更有說服力。
決定語言和文字方向。阿拉伯文 → 使用 dir="rtl" 並應用第三部分，這將改變對齊方式、字體和行高。

2. 有目的地選擇方向

瑞士學派並非單一風格。請從以下方向中選擇一個，每個方向皆基於一位先驅或一個學派的原則（使用其原則，切勿複製他們的海報）：

方向	特點	適合對象
蘇黎世 — Müller-Brockmann	嚴謹的網格（有時可見）；客觀的語氣；小且精確的字體搭配一張大照片或抽象幾何形狀；大量留白。	文件、密集的應用程式、儀表板、機構、金融
巴塞爾 — Hofmann	黑白對比、高反差、圖地關係、極少的大形狀、字體作為形式。	文化、作品集、活動、建築
Ballmer	基於網格的標題、粗體、紅色 + 黑色、堆疊文字、可見的結構。	品牌、行銷活動、產品發表、有態度的登陸頁面
Keller	大膽的扁平色塊、簡單幾何形狀、過大且被邊緣裁切的字體。	消費品、教育、社群、博物館
巴塞爾實物海報 (Sachplakat)	一個物體（產品、工具、菜餚、裝置）以巨大、特寫且清晰拍攝的方式呈現，幾乎只有名稱。	實體產品、食品、零售、硬體
攝影蒙太奇 (Herbert Matter)	將照片以截然不同的比例組合，依網格裁切，並將字體嵌入其中。	旅遊、地點、活動、媒體

有助於選擇的背景知識：瑞士國家圖書館描述了兩個戰後陣營：蘇黎世 = 具體藝術（數學建構、純幾何平面；Max Bill 在 1930 年代後期建立了第一個真正的佈局網格）和巴塞爾 = 新客觀性（物體、照片、形式的對比）。Keller 本人並未教授固定風格：他相信解決方案應從內容中產生，因此他自己的作品非常多樣。此技能遵循他的理念：方向來自內容，而非習慣。

蘇黎世是「安全」的選擇，很容易每次都落入其中；這會使每個輸出看起來都一樣。當內容密集且功能導向時，選擇蘇黎世。對於登陸頁面、品牌和行銷活動，較推薦 Ballmer、Keller 或巴塞爾 —— 它們能為頁面帶來一個強烈的瞬間（一面全幅的強烈色彩、一個巨大裁切文字、一個高對比形狀），這是安靜的頁面所缺乏的。用一句話告訴使用者你選擇了哪個方向及其原因。不要將此寫在介面內部。

方向和外觀是獨立的選擇。方向決定結構；外觀（步驟 4）決定色彩。一個蘇黎世網格可以搭配「陽光」外觀，而 Ballmer 可以搭配「黑色 + 光譜」。

3. 從內容中找出概念

巴塞爾學派如此闡述（Kenneth Hiebert，Hofmann 的學生）：一個抽象的結構是溝通的載體，而找到它迫使你在任何表面風格之前孤立出訊息的本質。在開始設計之前，先以書面形式進行：

從內容中列出 5–8 個具體事實：一個數字、一個地點、一個實體物體、一個時間、一個流程、一個名稱、一個對比（之前/之後、小/大）。
撰寫三個不同的概念，每個一句話，每個都基於不同的事實。例如，針對一個共同工作空間：(a) 建築物的地址和樓層平面圖作為圖像；(b) 一天 15 小時作為一個你可以直接預訂的網格；(c) 實際物體——一張桌子、一把鑰匙、一張椅子——巨大化顯示（實物海報）。
選擇最專屬於此產品、無法透過更改名稱就套用到競爭對手頁面上的那一個概念。用一句話說出你選擇了哪個。

巨大元素必須來自內容，而非來自行動呼籲。 一個巨大的祈使動詞（「預訂」、「開始」或其阿拉伯文等效用語）是一種伎倆：它適用於任何產品，並很快會成為新的模板。請使用僅此產品才有的名詞、數字或名稱：地點、關鍵數字、物體、日期。

4. 選擇外觀，然後設定系統

先決定外觀。 在任何佈局之前，選擇一個外觀並打開 references/looks.md 以取得其代碼標記、字體組合、構圖和經過測試的 CSS。底色優先考慮：強烈的扁平色或油墨至少覆蓋第一個螢幕的 60%。兩個紙質底色外觀是例外：一種彩色油墨承載所有字體，一個著色面板至少填充 30%。根據內容選擇，切勿連續兩次使用相同的外觀，且每個頁面僅使用一種外觀（各區塊變化構圖，而非調色盤）。

外觀	底色	調色盤	適合對象
1 陽光	一種強烈色調及其互補色	黃色 `#FFC611` · 靛藍 `#3A3A9C` · 深藍 `#16154A`	登陸頁面、活動、文化、教育
2 紫羅蘭油墨	白色；一種彩色油墨用於所有字體	紫羅蘭 `#4F2A7D` · 長春花藍 `#CFDBF1` · 蘭花紫 `#BD9CBB`	編輯、期刊、報告
3 原色條帶	3–4 個堆疊的滿版條帶	藍色 `#2F7BFF` · 綠色 `#0FA23A` · 黃色 `#EFB83E` · 紅色 `#E6040A` · 油墨	數據驅動的登陸頁面、活動、機構
4 黑色 + 光譜	油墨黑	6–9 種純色調，每種至少使用兩次	目錄、預訂、產品系列、儀表板圖例
5 演唱會海報	奶油色或黑色	油墨 + 紅、青、黃、紫，帶有疊印	活動、音樂、社群、發佈會

橙色 + 深藍、鈷藍 + 黃色、粉紅 + 深綠等其他底色組合也包含在同一個檔案中。如果簡報指定了品牌色，它將成為底色或一個色塊，其夥伴色則由配色方案決定。

然後是代碼標記（第二部分）：正文字體大小與行高、由此推導出的網格（預設為 12/8/4 欄，或根據內容需求使用其他數字）、基準單位 (8px)、一個字體家族（或一個阿拉伯文 + 一個拉丁文夥伴）搭配陡峭的刻度、以及包含每個表面上一種文字顏色的外觀調色盤（每對文字/背景顏色都需檢查對比度）。

5. 以不對稱方式構圖

來源資料將平衡描述為視覺力量的分配，而非對稱。

不要將主視覺居中。將一個沉重的元素（巨大的標題、大照片、色塊）放在一側，並以另一側的留白和小字體取得平衡。
使用不等的欄寬：5+7、4+8、3+9、2+6+4。到處都是相等的三分之一是 AI 的預設行為。
有目的地偏移：標題在第 1–9 欄，其下方的導言在第 7–11 欄，元資料在第 1–3 欄。
每個區塊在同一個網格上使用不同的構圖。在每個區塊重複「居中標題 + 卡片網格」是強烈的 AI 跡象。
在編寫任何區塊的程式碼之前，先以註解形式寫下其欄位分配（例如 /* hero: h1 1–10, meta 1–3, lead 6–11 */）。這能確保網格的誠實性。

6. 加入海報層——使其成為瑞士風格，而非僅僅乾淨

此步驟是區分瑞士設計和整潔設計的關鍵。來源資料本身指出，瑞士原則已成為現代 UI 的基礎。這意味著僅靠功能性規則（網格、細線、左對齊文字、索引列表、統計條、一個強調色）現在所產生的結果，已經是每個設計系統都會有的樣子。它很乾淨，但並不新穎，也無法被辨識為瑞士風格。瑞士學派的與眾不同之處在於其海報：字體作為圖像使用、大膽的色彩平面、幾何、尺度張力和可見的結構。將這種語言帶入介面。

來源資料從兩個方面說明了同樣的事情。一項關於扁平設計的研究（Aristova & Vasilieva）將扁平網頁設計追溯至國際風格，並警告其普及會使網站趨於統一，削弱每個網站和機構的識別度。一本設計史教科書則指出，一旦瑞士風格成為普世標準，其視覺語言就變得不那麼創新了。解決方案不是放棄原則，而是像原創設計師那樣使用它們，將其視為為每個內容片段尋找特定形式的方法。

規則： 一個登陸頁面、行銷網站或品牌頁面需要至少三個標誌性手法。一個用於主視覺區，至少另外兩個用於其他區塊。一個產品 UI（儀表板、應用程式）應保持功能性，但它需要一個海報時刻：頁面頂部、登入畫面、空狀態或區塊分隔線。

標誌性手法（每個都源自於在來源資料的海報範例中看到的原則；請使用原則，切勿重現海報）：

#	手法	如何在 UI 中實現	CSS
1	文字作為建築 (Ballmer)	一個由網格模塊構建的單詞或首字母：巨大的字母被欄線分割，或由正方形組成的字母。在阿拉伯文中，正方形庫法體是自然的等效寫法，因為它是一種基於網格的腳本。用於字標或主視覺詞，使用 SVG 從正方形繪製並保持可讀性。	SVG `<rect>` 在模塊網格上；`grid` 儲存格
2	巨大裁切字體 (Keller)	大於視口的標題，被一個或兩個邊緣裁切。頁面的識別度來自於這個詞本身。	`font-size: 28vw; line-height: .8; margin-inline-start: -.05em;` 區塊 `overflow: clip`
3	連鎖字體 (Hofmann)	使用負行距堆疊單詞，使其相互接觸或重疊，形成一個字體排版區塊。	`line-height: .75`，負邊距，`mix-blend-mode: multiply` 用於第二種顏色
4	旋轉平面 (Müller-Brockmann)	一個內容區塊、一個網格或一組散落的小正方形，放置在旋轉 45° 或 90° 的平面上，與筆直的網格形成對比。	`transform: rotate(-45deg)` 作用於包裹元素；保持內部文字可讀或旋轉 90°
5	圖地幾何 (Hofmann)	一個用油墨或強烈調色盤顏色繪製的大圓形、半圓形或圓環，被螢幕邊緣裁切。文字位於形狀內部或環繞其周圍。	`border-radius: 50%` 元素 / SVG，`clip-path`，`shape-outside`
6	垂直詞列 (Ballmer)	一個狹窄的全高顏色欄，其中放置一個垂直書寫的單詞。阿拉伯文：旋轉整個詞（切勿堆疊字母）。	`writing-mode: vertical-rl`，`transform: rotate(180deg)`
7	色塊 + 油墨區塊 (Keller)	整個區塊使用強烈的底色，搭配一個實體黑色矩形來容納文字，或兩種強烈顏色邊對邊相遇。	網格上的兩個區塊，無陰影
8	網格作為內容 (Müller-Brockmann)	有目的地繪製網格線，將資料、數字或文字對齊至儲存格中。用於時間表、價格網格或區塊索引。	儲存格上的邊框，或 `repeating-linear-gradient` 線條
9	同一行的尺度張力	一個 200px 的單詞與同一基線上的 12px 元資料相鄰。	flex 搭配 `align-items: baseline`
10	色調疊加文字	兩層顯示文字疊加，一層在後使用淺灰色，一層在前使用油墨或紙張顏色，在網格上偏移。	在網格儲存格內使用絕對定位
11	實物主視覺 (巴塞爾 Sachplakat)	一個真實物體的特寫、比實物更大、去背或緊密裁切的照片，僅有名稱和一個事實。	`object-fit: cover`，圖片跨越 8–12 欄，被邊緣裁切
12	攝影蒙太奇 (Matter)	兩張或三張比例懸殊的照片（一個細節巨大，一個廣角景觀很小）裁切至網格區域，文字放置其上或之間。	具有 `overflow: clip` 的網格區域，圖片對齊區域邊緣
13	對抗 (Hofmann)	兩個截然不同的元素有目的地相遇：一個字母對抗一個幾何形狀，一個密集的文字區塊對抗一個空白區域，一個圓形對抗筆直的網格，黑色對抗白色。	兩個網格區域共享邊緣或重疊，對比鮮明的顏色
14	真人大小的文字	標題或數字設定為螢幕上的物理大小（例如 3–5 英尺/1–1.5 米）。用於著陸頁或海報。	`font-size: clamp(3rem, 30vw, 6rem)` 搭配可變單位
15	偏移重複 (Müller-Brockmann)	一個形狀或圖標以規則間隔重複，但整體模式在網格上偏移，產生節奏。	`background: repeating-linear-gradient` 或 `nth-child` 間距

從列表中選擇符合您所選方向的手法的變體。以下是一些理想的配對：

蘇黎世：8、9、14、15
巴塞爾：3、5、13
Ballmer：1、6、8
Keller：2、7、15
實物海報：11
攝影蒙太奇：12

7. 不必顯得 AI 生成 — 審查

在完成之前，請先核對此清單。如果任何項目為真，請重構該區塊或頁面：

第二部分 — 網格、間距、字體與色彩

8px 基準系統

瑞士 UI 以 8px 為基礎單位運作。所有邊距、填充和間隙都是 8px 的倍數（適用於中等以上螢幕）。高度和寬度較靈活，但通常在邊界處對齊到 8px。

版面邊距

螢幕寬度 ≥ 1024px：每側 64px (8 × 8px)
螢幕寬度 768–1023px：每側 32px (4 × 8px)
螢幕寬度 < 768px：每側 16px (2 × 8px)
全出血版內容忽略邊距並設定 overflow: clip

網格

:root {
  --grid-columns: 12;
  --grid-gap: 8px;
}
@media (min-width: 768px) {
  :root {
    --grid-gap: 16px;
  }
}
@media (min-width: 1024px) {
  :root {
    --grid-gap: 24px;
  }
}

對於內容導向的應用程式或財務儀表板，可選擇 8 欄網格。僅當登陸頁面或文章頁面需要類似雜誌的空間時，才使用 6 或 4 欄網格。

字體比例尺

使用陡峭的比例尺 (1.5–2.0)，而非典型的 1.25。較大的顯示字體設定為 clamp() 以實現流暢響應。

--text-xs: 0.625rem (10px)
--text-sm: 0.75rem (12px)
--text-base: 0.9375rem (15px)  line-height: 1.6
--text-lg: 1.125rem (18px)
--text-xl: 1.5rem (24px)
--text-2xl: 2rem (32px)
--text-3xl: 2.75rem (44px)
--text-4xl: 4rem (64px)
--text-5xl: 5.5rem (88px)
--text-6xl: 8rem (128px)

字體家族

從以下列表中選擇一個無襯線家族。對於阿拉伯文，請選擇一個支援阿拉伯文的家族，或者一個拉丁文 + 阿拉伯文組合。

Inter + Noto Naskh Arabic（用於正文）或 Noto Kufi Arabic（用於標題）
Helvetica Now + Noto Sans Arabic（或天城文、西里爾文等）
Fira Sans + Noto Sans Arabic
對於品牌特定的感覺：可以在標題上使用 Akzidenz-Grotesk（需某些條件），搭配系統字體用於正文

用於正文；緊湊的追蹤用於小型文字；標題可以且應該使用較大間距以匹配板式幾何。

調色盤

從步驟 4 選擇的外觀中提取調色盤。每個外觀定義：

1–3 個底色（主要背景面積）
1–2 種強調色（用於互動元素、次要區塊）
1 種油墨色（通常為黑色 #111 或接近黑色）
1 種紙張色（通常為白色 #F5F3EE 或奶油色 #F5F0E8）
每個表面上的每種文字顏色都需滿足 WCAG AA 對比度

請參閱 references/looks.md 以取得每種外觀的完整 CSS 代碼標記。

第三部分 — 阿拉伯文與 RTL

應用條件

當使用者的簡報為阿拉伯文，或者提及雙語網站且阿拉伯文為主要或同等語言時，應用此部分。

全面翻轉：從 `dir` 開始

<html dir="rtl">

所有 margin 和 padding 邏輯屬性：使用 margin-inline-start 而非 margin-left。
使用 text-align: start 而非 text-align: left。
對於絕對定位或網格項目：使用 inset-inline-start 而非 left。

字型選擇

標題：Noto Kufi Arabic（幾何、無襯線、適合大字型）
正文：Noto Naskh Arabic（更易於閱讀）或 Amiri（經典、有襯線、用於長篇文章）
拉丁文字：Inter 或 Helvetica Neue 以搭配阿拉伯文的視覺重量

行高

阿拉伯文需要比拉丁文更大的行高：標題 line-height: 1.3，正文 line-height: 1.8。

布局調整

不對稱欄位分配需要反轉：在 LTR 中，如果主要元素位於 1–9 欄，次要元素位於 10–12 欄，那麼在 RTL 中，主要元素應位於 4–12 欄，次要元素位於 1–3 欄。
避免翻轉旋轉平面：保留旋轉，但旋轉的方向感（例如 rotate(-45deg)）可能需要更改為 rotate(45deg) 以維持視覺流動。
垂直文字列：在阿拉伯文中，切勿堆疊單個字母。而是使用 writing-mode: vertical-rl 搭配 transform: rotate(180deg) 旋轉整個單詞。
正方形庫法體：一種完全基於正方形的腳本，是阿拉伯文中「文字作為建築」手法的自然等效寫法。使用 SVG 繪製。

LTR 和 RTL 測試

如果專案為雙語，請使用 :dir(rtl) 和 :dir(ltr) 選擇器以獲得每個方向的特定覆蓋，優先於 [dir="rtl"]。

第四部分 — 元件

此部分提供通用 UI 元件的瑞士風格版本。原則：無圓角、無陰影（極少數例外）、扁平顏色、不對稱、基於網格。

按鈕

.swiss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.swiss-btn:hover {
  background: currentColor;
  color: var(--paper);
}
.swiss-btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.swiss-btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

卡片

無圓角 (border-radius: 0)。
無 box-shadow。使用全出血背景或細邊框（1px 實線）作為分隔。
文字左對齊（RTL 則右對齊）。
可選：穿過卡片的細水平線作為內容分隔。

導覽列

使用 display: flex; 搭配 justify-content: space-between。
固定高度 64px (8 × 8px)。
背景可為紙張色，或使用強烈的底色（例如整個導覽列為黑色，文字為白色）。
連結：無底線，使用 letter-spacing，激活狀態使用細下邊框。

表格

無圓角。
無斑馬紋。使用細水平線分隔行。
無垂直線。
表頭：粗體、小字、大寫、左對齊。

表單

輸入框：border: 1px solid，無圓角。
標籤：在輸入框上方，使用小字、大寫、帶些許間距。
錯誤訊息：color: red（從調色盤），使用小字，在輸入框下方。

第五部分 — 不顯得 AI 生成 — 審查核對清單

（與第一部分步驟 7 的核對清單相同。此處重複以確保在最終審查中不會被遺漏：）

第六部分 — 來源：瑞士學派簡介

（此部分是技能行為的依據，但不會寫入 UI。它說明了為什麼這些原則被選中以及它們來自何處。）

瑞士學派（也稱為國際字體設計風格）於 1950 年代在瑞士興起，強調清晰、客觀和普世可讀性。主要特點：

不對稱佈局
無襯線字體
嚴格的網格系統
清晰的分層級
攝影大於插圖
客觀、無個人的呈現

關鍵人物：

Ernst Keller (1891–1968)：教導設計應來源於內容。他的作品涵蓋了多種風格。
Theo Ballmer (1902–1965)：將網格的建構原則應用到字體排版。
Max Bill (1908–1994)：建立了第一批有意識的佈局網格；連結了具體藝術和平面設計。
Emil Ruder (1914–1970)：教授字體排版作為溝通的基礎。
Armin Hofmann (1920–2020)：巴塞爾學派；圖地關係、簡化的形式。
Josef Müller-Brockmann (1914–1996)：蘇黎世；嚴謹的網格、客觀性、透過結構展現音樂般的節奏。
Herbert Matter (1907–1984)：攝影蒙太奇、動態比例。

此技能將這些歷史原則現代化，以解決 2020 年代的 UI 設計挑戰——特別是 AI 生成設計的同質化問題——同時忠於指導它們的原始精神。

在你喜歡的 AI 中提問

說明文件

瑞士風格 UI 設計 是做什麼的？