杨水淼
4a56455151
- Changed database connection credentials in footer.php for improved security. - Disabled error display in ajax.inc.php to prevent sensitive information exposure. - Added comprehensive design documentation for the news flow application. - Implemented a modernized index.php layout with responsive design and enhanced user experience. - Developed main.js for dynamic news loading, including infinite scroll and date filtering functionalities. - Structured interaction.md to detail core interactive features of the application. - Organized outline.md to clarify project structure and core functionalities. - Populated mock-data.json with realistic news data for testing and development purposes.
59 lines
2.3 KiB
Markdown
59 lines
2.3 KiB
Markdown
# 新闻流应用设计风格
|
||
|
||
## 设计理念
|
||
|
||
### 视觉语言
|
||
- **现代简约**：采用简洁的设计语言，突出内容本身
|
||
- **层次分明**：通过字体大小、颜色和间距建立清晰的信息层级
|
||
- **呼吸感强**：充足的留白空间，避免视觉拥挤
|
||
- **专业可信**：使用稳重的色彩搭配，传达权威感
|
||
|
||
### 色彩方案
|
||
- **主色调**：深蓝灰 (#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
|
||
- **布局适配**：不同屏幕尺寸下的最佳布局展示
|
||
- **触摸优化**：移动端更大的点击区域和手势支持
|
||
|
||
### 微交互细节
|
||
- **阴影效果**：卡片悬停时的微妙阴影提升
|
||
- **颜色渐变**：按钮和链接的状态过渡
|
||
- **图标使用**：简洁的线性图标，增强视觉引导
|
||
- **状态反馈**：清晰的视觉状态变化，提升用户体验 |