Book

 · 4 days ago

UI/視覺改進計劃

🎨 1. 品牌與配色

問題

建議

Header 使用基礎 bg-blue-500,缺乏品牌識別

定義品牌色系(主色、輔助色、強調色),使用漸變或更獨特的色調

DaisyUI 只用 light 主題

添加自定義主題,統一 crypto 風格(深色科技感或金融質感)

無統一設計語言

創建 design tokens(圓角、陰影、間距)統一全站

🔤 2. 字體與排版

問題

建議

Inter 是通用字體,缺乏特色

考慮 Plus Jakarta Sans、Space Grotesk 等現代字體

缺少字重層次

標題用 semibold/bold,正文用 regular,建立清晰層次

🧩 3. 組件精緻度

問題

建議

按鈕樣式單一 (rounded-full)

添加微交互(hover 漸變、按壓效果、loading 狀態)

卡片陰影過重 (shadow-md)

使用更柔和的陰影 shadow-sm + hover:shadow-lg 過渡

表單輸入框基礎

添加 focus ring 動畫、icon 前綴、驗證狀態樣式

📱 4. 佈局與空間

問題

建議

max-w-2xl 內容較窄

首頁考慮雙欄佈局(內容 + 側邊欄趨勢/推薦)

間距不一致 (p-2 md:p-4)

建立 8px 網格系統,統一間距規範

✨ 5. 微交互與動效

問題

建議

缺少頁面過渡

添加 Turbo 頁面切換動畫

Like/Follow 無反饋

添加心跳、彈跳等微動畫

骨架屏缺失

加載時顯示 skeleton placeholder

🌟 優先執行項目

  1. 定義品牌色系 - 在 tailwind.config.js 擴展 colors
  2. 升級 Header - 使用漸變、Logo 圖標、更精緻的導航
  3. 統一卡片樣式 - 創建可復用的卡片組件
  4. 添加暗色主題 - Crypto 用戶偏好深色模式

📁 相關文件

  • config/tailwind.config.js - Tailwind 配置
  • app/assets/stylesheets/application.tailwind.css - 自定義樣式
  • app/views/layouts/application.html.erb - 主佈局
  • app/views/layouts/_web_header.html.erb - Header 組件

Download Pickful App

Better experience on mobile

iOS QR

iOS

Android QR

Android

APK QR

APK