場景從何而來

每個場景都不是憑空想像, 而是從真實世界的 GitHub 專案 / 成熟產品拆解出的最小可組合單元。這頁記錄每個場景拆自哪些產品, 以及拆的時候抓到了什麼設計決策。

KPI 指標總覽kpi-dashboard

一眼掌握業務核心指標與趨勢

insight

Stripe Dashboard

↗

大數字 + 相對變化 + 區段切換的節奏

Vercel Analytics

↗

稀疏留白 + mini sparkline 呼應主數字

Shopify Admin Home

↗

KPI 按使用者角色動態重排

資源清單resource-list

大量同類資料的瀏覽 / 搜尋 / 狀態識別

browse

Linear Issues

↗

linear/linear

狀態分組數 + 鍵盤導航 + 密集單行

GitHub Issues

↗

cli/cli

篩選面板與清單互動的分離

Gmail Inbox

未讀粗體 + 寄件者/主旨/預覽三層資訊

流程看板pipeline-board

視覺化狀態機 / 跨階段推進

flow

Trello

↗

看板最原型 · 狀態 = 欄

GitHub Projects

↗

把 issue 當卡片跨欄推進

Linear Cycles

↗

時間盒 + 看板結合, 注重 cycle velocity

資料表格data-table

密集欄位的結構化資料操作

browse

Airtable

↗

cell 可編輯 + 多視圖切換 (grid/calendar/gallery)

Notion Database

↗

property 彈性化 + inline 編輯

Retool Table

↗

企業感的欄位密度與操作列

時段預約booking-calendar

依時間軸安排資源 / 排程 / 預約

view

Cal.com

↗

calcom/cal.com

時段粒度 + 時區處理 + 多人可預約邏輯

Google Calendar

小時 x 日的 2D 網格, 事件橫跨時間區間

Airbnb Calendar

連續日期選取, 區塊視覺語意

資源詳情resource-detail

單一實體全欄位 + 活動時間軸

view

Linear Issue View

左 metadata 右活動軸, 指令列貫穿

Notion Page

純淨無多餘 chrome, 內容即介面

GitHub PR

↗

時間軸原型 — 評論/commit/CI 混合

多步驟表單form-wizard

引導式輸入 / 降低單頁認知負擔

input

Stripe Checkout

↗

每步驟盡量減欄位, 視覺進度條

Typeform

↗

一題一頁 · 問答感降低認知

Linear Onboarding

步驟之間的上下文保留與可跳回

對話串chat-thread

與使用者的一對一訊息溝通

flow

Intercom

↗

客服場景 · 機器人 + 真人交棒

Slack DM

訊息泡泡 + 上傳附件 + 表情回應

WhatsApp Business

移動端為主的密集縱向佈局

卡片網格catalog-grid

視覺化瀏覽 · 圖像+標題+價格導向

browse

Shopify Storefront

↗

大圖 + 價格 + 加入購物車三件套

Airbnb Listings

↗

圖像敘事, 標題略縮, 價格突出

Pinterest Feed

瀑布流 masonry 與無限滾動

指令搜尋command-search

鍵盤驅動快速查找 / 執行動作

input

Raycast

↗

極速鍵盤導航 + 擴充 action

Linear ⌘K

上下文相關 action 分群

GitHub Command Palette

↗

導航 vs 動作分 mode

通知中心notification-feed

分群顯示事件, 標示未讀與提及

view

GitHub Bell

↗

分類 (提及/審核/CI) + 靜音規則

Linear Inbox

可 archive / snooze, 像收件夾

Slack Activity

提及 / 串追蹤 / 回應分群

趨勢圖表data-chart

時序資料視覺化, 看趨勢與異常

insight

Vercel Analytics

↗

區域漸層 + 終點 hover card

Stripe Revenue

時間粒度切換 + 對比期疊加

Datadog

多 metric 疊圖 + 異常閾值標示

登入驗證login-auth

身份驗證入口 · Email + OAuth

input

Clerk

↗

多種認證方式 (social/magic-link/password) 排序

Auth0

↗

企業 SSO 與開發者友善的平衡

Linear Magic Link

減少密碼, email → 鏈結直接進入

方案價格pricing-table

方案差異對比 + 付費引導

browse

Stripe Pricing

↗

功能對照表 + 熱門方案突顯

Vercel Pricing

↗

階梯式用量定價說明

Linear Plans

↗

依團隊規模漸變的價格描述