# 新闻流应用设计风格

## 设计理念

### 视觉语言
- **现代简约**：采用简洁的设计语言，突出内容本身
- **层次分明**：通过字体大小、颜色和间距建立清晰的信息层级
- **呼吸感强**：充足的留白空间，避免视觉拥挤
- **专业可信**：使用稳重的色彩搭配，传达权威感

### 色彩方案
- **主色调**：深蓝灰 (#1e293b) - 专业、稳重
- **辅助色**：浅灰蓝 (#64748b) - 次要信息
- **强调色**：天蓝 (#0ea5e9) - 链接、按钮
- **背景色**：纯白 (#ffffff) 和浅灰 (#f8fafc)
- **文本色**：深灰 (#334155) 主文本，中灰 (#64748b) 次要文本

### 字体系统
- **标题字体**：Noto Serif SC - 优雅的衬线字体，适合标题
- **正文字体**：Noto Sans SC - 清晰的无衬线字体，易读性强
- **字体层级**：
  - 主标题：text-2xl (24px) font-bold
  - 副标题：text-lg (18px) font-semibold  
  - 正文：text-base (16px) font-normal
  - 辅助文本：text-sm (14px) font-normal

## 视觉效果

### 动画效果
- **展开动画**：使用CSS transition实现平滑的内容展开/收起
- **加载动画**：简洁的旋转加载指示器
- **悬停效果**：微妙的阴影和颜色变化
- **滚动动画**：元素进入视口时的淡入效果

### 布局设计
- **卡片式设计**：每条新闻采用卡片容器，增强视觉分组
- **网格系统**：使用Tailwind CSS的网格系统确保响应式布局
- **弹性布局**：Flexbox实现灵活的组件排列
- **间距系统**：统一的间距规范，保持视觉一致性

### 交互样式
- **按钮样式**：圆角设计，悬停时轻微阴影效果
- **链接样式**：下划线动画，悬停时颜色变化
- **状态指示**：清晰的加载、成功、错误状态视觉反馈
- **焦点样式**：键盘导航时的可见焦点指示

### 响应式设计
- **断点设置**：
  - 移动端：< 768px
  - 平板端：768px - 1024px  
  - 桌面端：> 1024px
- **布局适配**：不同屏幕尺寸下的最佳布局展示
- **触摸优化**：移动端更大的点击区域和手势支持

### 微交互细节
- **阴影效果**：卡片悬停时的微妙阴影提升
- **颜色渐变**：按钮和链接的状态过渡
- **图标使用**：简洁的线性图标，增强视觉引导
- **状态反馈**：清晰的视觉状态变化，提升用户体验