精選 · 開放 · 免費

Vouchatlas

一個視覺化群眾外包旅行安全與基礎設施資料的互動式地圖。

01

設計氣質 DNA

專為數位遊牧者打造的群眾外包旅行安全地圖集。

02

色彩

以中性基底搭配資料驅動的色彩強調。

03

字型

humanist-sans

• display24px · 500
• body16px · 400
• caption12px · 400

04

間距

一致的 4px 基礎系統。

05

表面 (圓角 / 陰影 / 邊線)

使用細緻的 1px 邊框與柔和陰影來界定區塊邊界。

rgba(0,0,0,0.1) 0px 1px 3px 0px · rgba(0,0,0,0.1) 0px 1px 2px -1px

06

版面

分割版面，左側為主導的互動式地圖視覺化，右側為資料側邊欄。

07

動效與互動

互動元素的背景色與邊框色平滑過渡。

按鈕與互動式地圖元素上的細膩色彩過渡。 · 觸發側邊欄的資料更新。

08

組件

• button 極簡的藥丸形按鈕，帶有細緻邊框與 hover 過渡效果。
• card 簡潔的卡片，帶有柔和陰影與緊湊的內邊距。
• chip 用於資料狀態的小型標籤式元素。
• input 帶有圓角邊框的標準文字輸入框。
• hero 全寬區塊，中心聚焦於互動式地圖視覺化。

09

文案語氣與禁用清單

• 語氣 客觀且具資訊性。
• 標題風格 直接、提問式的標題風格。
• 按鈕文案 極簡且具功能性。

• 勿使用裝飾性字體 — 截圖顯示清晰、易讀的無襯線字體。
• 勿添加厚重陰影 — 截圖顯示細緻、柔和的 box-shadow。
• 勿使用未經驗證的鮮豔強調色 — 截圖顯示用於資料的功能性紅色與橙色。
• 勿使用複雜漸層 — 截圖顯示平面色彩與簡單線性刻度。
• 勿使 UI 過於擁擠 — 截圖顯示充足的留白與專注的版面佈局。
• 勿過度使用圓角 — 截圖顯示大多為直角或輕微圓角的邊緣。
• 避免: 情感性語言
• 避免: 行銷誇飾
• 避免: 複雜術語

11

System Prompt

en · zh-CN · zh-TW · ja · ko