成都生物AI前端界面设计文档思维导图

U599845755

2025-05-28

浏览量: 32

实时翻译

辅助白

正文文字

成都生物AI前端界面设计文档内容整理

树图思维导图提供《成都生物AI前端界面设计文档》在线思维导图免费制作，点击“编辑”按钮，可对《成都生物AI前端界面设计文档》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：89bf1563a2f320ef68ba953da2835a86

思维导图大纲

1. 界面布局设计与用户交互流程规划

1.1 整体布局

界面采用经典三栏式布局设计，整体布局如下：

中间区域

对

右侧区域

对

顶部区域

功

左侧区域

知

1.2 各区域详细设计

1.2.1 顶部导航栏

右侧

功

PPT助手（图标 + "PPT助手"文字）

会议纪要（图标 + "会议纪要"文字）

实时翻译（图标 + "实时翻译"文字）

用户设置（图标 + "设置"文字）

用户头像与信息

左侧

展

1.2.2 左侧知识库导航栏

知识库目录

采

科研知识库

可

全网文献知识库

AF3知识库

个人知识库

可

默认知识库

自定义知识库列表

企业知识库

可

工程部

财务部

审计部

销售部

人力资源部

新建知识库按钮

位

顶部搜索框

用

1.2.3 中间对话窗口

对话历史区域

展示用户与AI的历史对话内容

支持滚动加载更多历史记录

对话气泡区分用户与AI（用户右侧，AI左侧）

AI回复支持代码高亮显示

支持富文本展示（图片、表格、链接等）

底部输入区域

文本输入框（支持多行输入）

上传附件按钮

发送按钮

模式选择：

顶部

当

1.2.4 右侧辅助信息区域（可折叠）

参考资料

2. 组件细节与样式规范制定

2.1 全局样式规范

主色：#1890FF（浅蓝色）

背景色：#F5F7FA（浅灰蓝）

辅助色：#FFFFFF（白色）

强调色：#0050B3（深蓝色）

主要字体：微软雅黑/PingFang SC

代码字体：Consolas, Monaco

英文字体：Arial

字体

标题：18px

小字文本：12px

副标题：16px

正文：14px

字号

组件间距：16px

内部间距：12px

文本行高：1.5

间距规范

主题色

2.2 组件详细样式

2.2.1 导航栏

背景

线

LOGO

高

文字

白

导航项

内边距：16px

鼠标悬停：背景轻微变暗，增加下划线

图标与文字间距：8px

图标大小：20px

高度

2.2.2 知识库导航

背景色

边框

右

目录项

高度：40px

内边距：左侧16px，右侧12px

鼠标悬停：背景色#F0F5FF

选中状态：背景色#E6F7FF，左侧4px宽蓝色指示条

折叠图标

大小：14px

颜色：#8C8C8C

位置：左侧，与文本间距8px

搜索框

圆角：4px

边框：1px实线#D9D9D9

内边距：8px

高度：36px

宽度

2.2.3 对话窗口

内边距

上

对话气泡

用户消息：

AI消息：

内边距：12px

文字颜色：#333333

间距：16px

输入框

背景：#FFFFFF

圆角：8px

边框：1px实线#D9D9D9

高度：最小60px，最大120px（自动增长）

内边距：12px

发送按钮

背景：#1890FF

圆角：4px

文字：白色

悬停：背景变为#40A9FF

背景色

2.2.4 模式选择开关

高度

边框

圆角

选中态

背景：#1890FF

文字：白色

未选中态

背景：白色

文字：#666666

过渡动画

宽度

2.2.5 代码块

边框

圆角

内边距

字体

字号

行高

颜色方案

背景色

3. UI资源准备

3.1 图标设计

所有图标采用统一的线性风格，线条粗细2px，主色#1890FF。

3.1.1 知识库类图标

科研知识库

包

个人知识库

包

部门图标

工程部：齿轮图标

财务部：计算器图标

审计部：放大镜与文档图标

销售部：上升趋势图表图标

人力资源部：人物群组图标

企业知识库

包

3.1.2 功能类图标

会议纪要

笔

实时翻译

语

设置

齿

搜索

放

发送

纸

附件

回

折叠/展开

箭

PPT助手

幻

3.2 配色方案详细说明

3.2.1 主色调

使用场景：主按钮、重点强调、主导航背景

渐变：可与#40A9FF（浅）或#0050B3（深）搭配使用

使用场景：背景、内容区、卡片

辅助白

品牌蓝

3.2.2 功能色

使用场景：成功状态、完成提示

使用场景：警告信息、需注意事项

警告色

使用场景：错误提示、删除操作

错误色

成功色

3.2.3 中性色

正文文字

辅助文字

边框颜色

分割线

背景色

标题文字

3.3 UI元素样式库

3.3.1 按钮

背景：#1890FF

点击：背景变为#096DD9

文字：白色

圆角：4px

内边距：左右16px，上下8px

悬停：背景变为#40A9FF

背景：白色

悬停：边框变为#40A9FF，文字变为#40A9FF

边框：1px实线#D9D9D9

文字：#595959

圆角：4px

内边距：左右16px，上下8px

次要按钮

无背景无边框

文字：#1890FF

悬停：文字变为#40A9FF

文本按钮

主按钮

3.3.2 输入框

背景：白色

文字：#595959

边框：1px实线#D9D9D9

圆角：4px

内边距：左右12px，上下8px

边框变为#40A9FF

阴影：0 0 0 2px rgba(24,144,255,0.2)

焦点状态

边框变为#F5222D

阴影：0 0 0 2px rgba(245,34,45,0.2)

错误状态

普通状态

3.3.3 标签与徽标

背景：#F5F5F5

内边距：左右8px，上下4px

文字：#595959

圆角：2px

背景：#F5222D

文字：白色

圆形或胶囊形（数字）

徽标

标签

3.3.4 卡片

阴影

圆角

内边距

背景

白

3.4 响应式设计规范

三栏完整显示

右侧面板宽度300px

左侧导航宽度250px

默认隐藏右侧面板，可通过按钮呼出

左侧导航宽度200px

平板端

≥

单栏布局，左侧导航通过抽屉形式呼出

隐藏右侧面板，部分功能合并到主界面

移动端

桌面端

≥

4. 交互效果与动画

4.1 过渡动画

对话加载

渐

按钮悬停

颜

模式切换

滑

菜单展开/折叠

4.2 微交互

新消息到达

轻

知识库选择

选

代码块

悬

滚动加载

顶

发送消息

发

5. 无障碍设计考量

所有交互元素确保键盘可访问

合理的颜色对比度（符合WCAG AA级标准）

图标添加合适的alt文本

支持屏幕阅读器

操作提示清晰，错误信息明确

6. 浏览器兼容性

完全支持：Chrome 60+, Firefox 60+, Safari 12+, Edge 79+

基本支持（可能有视觉差异）：IE11

教育工作者AI场景思维导图

U774656410

3.83

树图思维导图提供《教育工作者AI场景》在线思维导图免费制作，点击“编辑”按钮，可对《教育工作者AI场景》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：d4b25376634866cb52221299e8391396

微生物的生长及其控制思维导图

U881803229

3.22

树图思维导图提供《微生物的生长及其控制》在线思维导图免费制作，点击“编辑”按钮，可对《微生物的生长及其控制》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：e3f7508625536c9f8227e5d0a05aa35f

思维导图模板

IT互联网

分析方法/模型

正文

相似思维导图模版

思维导图模版推荐

故障处理机制各专业提炼的标准检查动作思维导图

首页

我的文件

我的团队

个人中心

成都生物AI前端界面设计文档思维导图

思维导图大纲

相关思维导图模版

1. 界面布局设计与用户交互流程规划

2. 组件细节与样式规范制定

3. UI资源准备

4. 交互效果与动画

5. 无障碍设计考量

6. 浏览器兼容性

相似思维导图模版

思维导图模版推荐