c579dae90a
详细说明: - 化工订单班图片已标准化处理（8个图片，文件名与alt text完全一致） - 完成环保、财经商贸订单班的图片重命名工作 - 重组项目记忆文件，按照功能模块编号（00-09） - 删除旧的分散记忆文件，统一到新的编号体系 - 添加终端模拟文件：chemical.ts, environmental.ts, finance.ts - 清理web_result冗余文件（food react-app等） - 新增playwright截图记录和记忆文档 - 影响模块：订单班文档资料、项目记忆系统、终端模拟系统
221 lines
6.4 KiB
Markdown
221 lines
6.4 KiB
Markdown
网页设计规范文档
|
||
1. 视觉设计规范
|
||
1.1 色彩系统
|
||
|
||
主色调：
|
||
|
||
深绿色与柔和的灰绿色，用作背景色、按钮和主要文本区域，传递自然、清新、舒适的感觉。
|
||
|
||
浅绿色用于高亮和强调元素（如按钮和标题），为设计增添活力。
|
||
|
||
金色/黄色作为强调色，突出重要的按钮、导航链接和提示内容。
|
||
|
||
背景颜色：
|
||
|
||
主要使用深色背景（如深绿色、深灰色），创造高对比度的视觉效果，增强层次感。
|
||
|
||
大面积的背景图片（如自然景观、办公室绿植）展示网站的主题，并增强用户体验。
|
||
|
||
文本颜色：
|
||
|
||
主体文本颜色使用浅灰色或白色，确保在深色背景上的可读性。
|
||
|
||
金色和黄色用于强调文本和按钮，增加吸引力。
|
||
|
||
1.2 字体排版
|
||
|
||
主字体：
|
||
|
||
无衬线字体（如“Montserrat”或“Arial”）用于标题和副标题，确保视觉的简洁和现代感。
|
||
|
||
衬线字体（如“Georgia”或“Times New Roman”）用于正文内容，提升阅读流畅性和传统感。
|
||
|
||
字体大小：
|
||
|
||
标题字体较大，突出重点内容（如“30px-50px”）。
|
||
|
||
正文字体保持在14px-16px之间，易于阅读并保证页面的整洁。
|
||
|
||
行距和字间距：
|
||
|
||
行距大约为1.5倍，确保文字的清晰可读。
|
||
|
||
字间距适中，避免字符拥挤。
|
||
|
||
1.3 图标与图形规范
|
||
|
||
图标：
|
||
|
||
使用简洁、线条化的图标，采用白色或浅色调，保证视觉一致性。
|
||
|
||
图标设计需与整体页面风格协调，避免过度复杂的设计。
|
||
|
||
插图与插画：
|
||
|
||
采用手绘风格的插图和图标，增强自然、亲和力的视觉效果。
|
||
|
||
以简洁和现代的插画为主，帮助用户更好地理解信息。
|
||
|
||
1.4 空间与布局原则
|
||
|
||
网格系统：
|
||
|
||
使用12列网格布局，便于响应式设计，并保证各个元素的对齐和均衡。
|
||
|
||
页面空间：
|
||
|
||
各部分之间保持适当的空白，避免视觉拥挤，使页面更具可读性和吸引力。
|
||
|
||
全屏背景：
|
||
|
||
首页使用大面积背景图，展示自然景观或企业产品，吸引用户注意。
|
||
|
||
2. 交互设计规范
|
||
2.1 鼠标悬停(Hover)效果设计
|
||
|
||
按钮：
|
||
|
||
悬停时，按钮的背景色会发生细微变化，例如由绿色变为浅绿色，或增加边框阴影，让用户感知到按钮的可点击性。
|
||
|
||
图片：
|
||
|
||
鼠标悬停时，图片可以出现轻微放大效果或模糊切换，以提升互动感。
|
||
|
||
文本：
|
||
|
||
重要链接或按钮文字在悬停时会变为金色或黄色，增强视觉吸引力。
|
||
|
||
2.2 动效设计
|
||
|
||
页面加载动画：
|
||
|
||
页面加载时使用渐变淡入效果，所有内容（如标题、图像、按钮）逐步显示，给用户平滑的加载体验。
|
||
|
||
元素过渡动画：
|
||
|
||
页面元素的变化（如按钮点击、图片切换等）采用平滑过渡动画，提升用户体验。
|
||
|
||
微交互动画：
|
||
|
||
使用小型的微交互动画（如按钮点击、文本输入提示），增强页面的动态感与交互性。
|
||
|
||
2.3 交互反馈
|
||
|
||
表单元素：
|
||
|
||
用户输入内容时，表单字段失焦时会给出反馈提示，如错误信息显示在下方。
|
||
|
||
按钮点击：
|
||
|
||
按钮点击后，按钮会有轻微缩小或放大的视觉反馈，表明操作成功。
|
||
|
||
3. 组件库规范
|
||
3.1 按钮
|
||
|
||
主按钮：
|
||
|
||
绿色背景，白色文字，具备圆角设计，具有良好的可点击性。
|
||
|
||
鼠标悬停时，按钮背景颜色轻微变化，增强交互反馈。
|
||
|
||
次按钮：
|
||
|
||
浅绿色背景，边框设计，用于次要操作，视觉上不如主按钮突出。
|
||
|
||
3.2 表单元素
|
||
|
||
输入框：
|
||
|
||
输入框需要设计圆角，并有清晰的标签和占位符文本。
|
||
|
||
聚焦时，输入框边框颜色变为绿色或金色，增强可操作性。
|
||
|
||
下拉菜单：
|
||
|
||
清晰显示选项列表，点击展开时带有平滑的过渡动画。
|
||
|
||
3.3 导航菜单
|
||
|
||
顶部导航：
|
||
|
||
使用简洁的横向菜单，子菜单采用鼠标悬停显示的方式。
|
||
|
||
导航条保持简洁，避免过多的菜单项。
|
||
|
||
侧边栏（适配移动端）：
|
||
|
||
在移动端，导航会切换为汉堡菜单，点击展开后显示垂直菜单。
|
||
|
||
3.4 模态框
|
||
|
||
弹窗设计：
|
||
|
||
弹窗采用平滑的过渡动画，可以包含表单、提示信息或确认框。
|
||
|
||
弹窗背景为半透明，使内容更加突出。
|
||
|
||
4. 响应式设计规范
|
||
4.1 设备适配
|
||
|
||
桌面版： 使用全宽设计，适当利用空间展示大量信息（如大背景图、产品展示等）。
|
||
|
||
平板版： 布局会自动调整，确保内容不被压缩，重要信息仍清晰可见。
|
||
|
||
移动版： 采用单列布局，导航变为汉堡菜单，保证良好的触屏操作体验。
|
||
|
||
4.2 断点设计
|
||
|
||
桌面端： 主要使用大屏幕宽度，内容排布为多列。
|
||
|
||
平板端： 宽度约为768px到1024px，布局为两列或单列。
|
||
|
||
移动端： 屏幕宽度小于768px，所有内容垂直排列，确保操作简便。
|
||
|
||
4.3 布局变化原则
|
||
|
||
在不同设备上，内容块的排列方式应根据屏幕宽度进行调整，例如在小屏设备上采用单列布局，在大屏设备上采用多列布局。
|
||
|
||
5. 交互状态规范
|
||
5.1 默认状态
|
||
|
||
所有元素（按钮、表单输入、链接等）初始时处于可交互状态。
|
||
|
||
5.2 悬停状态
|
||
|
||
鼠标悬停时，元素（如按钮、链接）会显示颜色变化或下划线等效果，增强可操作性。
|
||
|
||
5.3 点击状态
|
||
|
||
按钮点击时，会触发微动效，如缩小或轻微弹起，以给用户点击反馈。
|
||
|
||
5.4 禁用状态
|
||
|
||
禁用的按钮、表单元素会显示为灰色或半透明状态，明确不可操作。
|
||
|
||
5.5 加载状态
|
||
|
||
在页面加载或数据提交过程中，显示加载动画（如转圈、进度条等）提示用户等待。
|
||
|
||
设计原则
|
||
|
||
一致性： 保证网站各部分设计风格一致，提升品牌识别度和用户的使用体验。
|
||
|
||
可访问性： 遵循WCAG标准，保证所有用户（包括残障人士）均可顺利使用网站。
|
||
|
||
直观性： 确保网站操作简单，用户不需过多思考即可完成所需操作。
|
||
|
||
性能优化： 优化图片、脚本和样式表，减少页面加载时间，提升用户体验。
|
||
|
||
技术实现建议
|
||
|
||
CSS 动画： 使用 @keyframes 和 transition 实现流畅的过渡动画。
|
||
|
||
JavaScript 交互： 使用 Vanilla JS 或 GSAP 库增强页面的动态交互效果。
|
||
|
||
性能优化：
|
||
|
||
使用 lazy-loading 技术延迟加载图片，减少初始加载时间。
|
||
|
||
使用 WebP 格式压缩图像，提高页面加载速度。
|
||
|
||
对 JavaScript 文件进行最小化和延迟加载，减少主线程的负担。 |