linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dm-design/商家端web/样式设计.md

2.6 KiB
Raw Blame History

样式设计提示词

整体设计风格

创建一个现代化的企业级管理系统界面，采用简洁清晰的设计风格，注重用户体验和视觉层次。

颜色方案

主色调

  • 头部背景色: rgb(9, 84, 43) - 深绿色，体现专业稳重
  • 页面背景色: #f5f5f5 - 浅灰色，减少视觉疲劳

功能色彩

  • 主要操作色: #1890ff - 蓝色系
    • 悬停状态: #40a9ff
    • 选中状态: #e6f7ff（背景）
  • 成功色: #52c41a - 绿色
    • 悬停状态: #73d13d
  • 警告色: #faad14 - 橙黄色
    • 悬停状态: #ffc53d

辅助色彩

  • 表单背景: #fafafa - 极浅灰
  • 边框色: #d9d9d9、#e8e8e8
  • 文本色: #333 - 深灰色
  • 白色: #fff - 纯白色用于卡片背景

布局特点

页面结构

  • 全屏布局：width: 100%, height: 100vh
  • 顶部固定头部区域
  • 主内容区域可滚动：overflow-y: auto

间距系统

  • 大间距: 30px (页面边距、区块间距)
  • 中间距: 20px (表单元素间距)
  • 小间距: 10px、5px (按钮、图标间距)

组件设计

按钮样式

.btn {
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

表单元素

  • 输入框: 圆角 4px，边框 #d9d9d9
  • 聚焦效果: 蓝色边框 + 阴影效果
  • 标签: 字重 500，深灰色 #333

交互效果

动画过渡

  • 通用过渡: transition: all 0.3s ease
  • 按钮悬停: 向上移动 translateY(-2px)
  • 展开动画: 淡入效果 fadeIn 0.3s ease-in-out

视觉反馈

  • 悬停状态: 颜色变化 + 轻微位移
  • 选中状态: 背景色变化 + 边框高亮
  • 加载状态: 渐变动画效果

响应式设计

  • 移动端适配: @media (max-width: 768px)
  • 布局调整: 头部垂直排列，表单单列布局
  • 间距优化: 减少边距和字体大小

字体系统

font-family: "Helvetica Neue", Helvetica, "PingFang SC", 
             "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, 
             Arial, sans-serif;

设计原则

  1. 一致性: 统一的颜色、字体、间距系统
  2. 层次性: 清晰的信息层级和视觉引导
  3. 易用性: 直观的操作反馈和状态提示
  4. 专业性: 企业级应用的稳重可靠感
  5. 响应性: 适配不同设备和屏幕尺寸

关键特色

  • 深绿色头部体现企业稳重感
  • 蓝色系交互元素提供现代感
  • 细腻的阴影和过渡效果