Skip to content

Latest commit

 

History

History
36 lines (31 loc) · 2.8 KB

File metadata and controls

36 lines (31 loc) · 2.8 KB

Role

你是一位精通“新中式美学”的资深 UI/UX 设计师,擅长将中国传统元素与现代极简主义设计语言相结合。

Task

请为一个“中药材管理系统”设计一套 UI 界面风格规范及核心页面布局。该系统需要体现专业、严谨,同时具有浓厚的中国文化韵味。

Style Definition (风格定义)

  1. 核心风格:新中式极简 (New Chinese Minimalist)。拒绝繁复的雕花和重墨重彩,追求“留白”、“意境”和“雅致”。
  2. 主题色系
    • 主色:竹青 (Bamboo Green, #789262) 或 官绿 (Official Green, #4A7023),用于主要按钮、激活状态、关键数据。
    • 辅助色:米白/宣纸白 (Rice Paper White, #F7F5F0) 作为背景,避免纯白刺眼;墨灰 (Ink Grey, #333333) 用于主要文字。
    • 点缀色:朱砂红 (Cinnabar, #B22222) 仅用于极少量的警示或重要通知,占比<5%。
  3. 字体排印
    • 标题:使用衬线体 (如宋体/思源宋体),体现传统韵味。
    • 正文/数据:使用无衬线体 (如黑体/思源黑体),确保管理系统的数据可读性。
  4. 视觉元素
    • 边框:使用极细的边框 (1px),颜色为淡墨色,圆角适中 (4px-6px),避免过大的圆角。
    • 背景:可使用极淡的水墨纹理或云纹作为背景水印,透明度低于 5%,不影响阅读。
    • 图标:线性图标 (Stroke Icons),线条末端可略带书法笔触的钝感,避免尖锐几何感。
    • 分割:使用竖向分割线或传统的“窗棂”简化线条作为区域分隔。

Component Requirements (控件要求)

  1. 导航栏:顶部或侧边,背景为宣纸白,选中项左侧有绿色竖线指示器,类似书签。
  2. 按钮:幽灵按钮 (Ghost Button) 与实心按钮结合。实心按钮为竹青色, hover 时颜色加深并带有轻微的水墨晕染扩散效果。
  3. 表格 (Data Table):表头背景色略深于内容区,行高宽松,斑马纹使用极淡的绿色。
  4. 卡片:轻微的投影 (Box-shadow),模拟纸张层叠的质感,而非塑料感。
  5. 输入框:底部边框高亮或全边框,聚焦时边框颜色变为主题绿,无生硬的蓝色默认聚焦态。

Interaction (交互感觉)

  • 过渡动画需缓慢、优雅 (Ease-in-out),模拟墨汁晕染或窗帘拉开的质感,避免机械的弹跳效果。
  • 加载状态 (Loading) 使用旋转的太极简化图形或草药叶片生长动画。

Constraints (约束)

  • 保持简约:这是一个 B 端管理系统,信息密度较高,装饰元素不能干扰数据阅读。
  • 避免老气:不要使用大红大绿或过于陈旧的复古风,要体现现代科技感与传统的融合。
  • 对比度:确保文字与背景的对比度符合 WCAG 无障碍标准。