演進脈絡：從信息堆砌 → 圖形化 → 信息視覺化

現代網站視覺設計核心使命：準確、高效、舒適地傳遞信息。文字、圖片、色塊是三大載體，設計師需駕馭美術原則與技術手段，構建清晰的視覺層級。

一、高傲的空間：留白的藝術與科學

中文排版的天然劣勢與破局

中文最小可讀像素 12px（宋體），英文可至 8-9px。中文設計師必須用視覺技巧補償物理限制。

三大核心手法

1. 色彩法：次要文字用灰度（#666/#999）視覺縮小；主文案用高純度深色（#333 而非 #000，避免刺眼擁擠感）。大段文本間歇淡色塊背景，增強可讀性。
   
2. 編排法：大標題 + 小輔助文字強對比，劃分層級。文字成行視為「線」，成塊視為「面」，線面交錯分配空間。
   
3. 間距與邊距掌控：外圍距離 > 區塊間距 > 內容行距/字距。調整 line-height、letter-spacing、padding/margin，賦予呼吸感。喬布斯語：「改變字母間空格長度，做出最棒印刷樣式，是科學捕捉不到的藝術。」
   
   

留白的三重境界

• 讓眼睛舒適：國畫「計白當黑」，無留白無閱讀節奏。大段內容不可刪減時，用色彩明暗對比「變相留白」（如標題區深色、內容區淡灰）。
  
  
• 讓空間高傲：設計師必須掌握空間主動權。非必要不動留白。從重型卡車官網到美國銀行，白色空間始終掌控全頁節奏。
  

二、沉默的色彩：用顏色指揮視線流動

色彩即導航：模擬眼動儀

工具類網站圖片受限，顏色與文字承擔「視覺引導」重任。

文字顏色分級體系

• 極重要（金額、狀態）：高飽和強調色（5% 面積）
• 重要（標題、關鍵內容）：深灰 #333（60% 面積）
• 輔助（說明、時間）：中灰 #666（15% 面積）
• 非必要（版權、備註）：淺灰 #999/#ccc（20% 面積，形成隱性色塊引導瀏覽序）

原則：顏色使用面積越大，視覺衝擊力越弱（花旗銀行大面積藍色不如小面積紅色 Logo 醒目）。

區塊顏色策略

• 金融/支付類：低明度、低純度色塊承載文字，穩重專業。
• 引導視線：小面積高飽和純色色塊（Google Wallet）。
  
• 韻律感組合：高純度+低明度色塊相間，不刺眼卻豐富（Digg）。
  

色彩分布黃金比例驗證

Man.de、美國銀行實踐驗證：5%/60%/15%/20% 分布實現層次分明、重點突出、心理壓力最小。

三、巨大的細節：支付流程的微觀打磨

（原文截斷，補充核心觀點）支付頁面細節直接決定轉化率：輸入框格式化提示、錯誤狀態內聯顯示、安全標譽可見性、載入狀態防重複提交、鍵盤彈出不遮擋關鍵信息……每一個 1px 的對齊、每一個 200ms 的動畫緩動，都是對用戶信任的投資。

信息傳達的最高境界：用戶以為自己在「閱讀」，實則被設計師精心編排的「視覺邏輯」無聲引導。留白有度，色彩有序，排版有韻，細節有溫度。