电化学储能电站运维系统-系统管理-个人中心页面高保真UI设计。… - 图片创意预览

电化学储能电站运维系统-系统管理-个人中心页面高保真UI设计。…

电化学储能电站运维系统-系统管理-个人中心页面高保真UI设计。顶部蓝色渐变导航栏:左侧logo+系统名'SmartOps储能智慧运维平台',中间电站下拉选择,右侧通知铃铛、用户头像。左侧深蓝色垂直菜单

用户头像

xuyasha8108

2026.10.05
基于参考图的设计风格,设计一个渠道活码详情页,内容丰富。保持完全一致的整体风格:左侧浅蓝到浅青渐变导航栏(深度开创logo,营销获客菜单展开,渠道活码项选中)、顶部搜索栏和用户头像、右侧左下角浅蓝到右上角浅灰渐变背景、白色卡片、科技蓝主色调、精致圆角。页面内容:顶部面包屑(营销获客 / 渠道活码 / 详情),返回箭头,标题"618活动推广码",状态标签(启用-绿色),右上角操作按钮组(编辑、下载二维码、停用)。页面主体分多个模块卡片:1. 基本信息卡片:活码名称、渠道类型(线上广告)、关联员工、欢迎语、标签、创建时间、创建人等信息,右侧展示二维码预览图(带logo的企微二维码)。2. 数据概览卡片(4个数据指标):累计扫码人数、累计添加客户数、总转化率、今日新增客户,每个带小趋势图。3. 数据趋势图表卡片:折线图展示近30天扫码人数和添加客户数趋势,带时间筛选(今日/近7日/近30日/自定义)。4. 渠道来源分布卡片:饼图展示不同来源渠道的占比分布。5. 扫码客户列表卡片:表格展示扫码添加的客户列表,包含客户头像、客户昵称、扫码时间、添加状态、标签、操作(查看详情),带分页。整体布局丰富有序,信息层级清晰,专业B端SaaS产品界面,文字清晰无乱码,1920x1080尺寸基于参考图的设计风格,设计一个渠道活码详情页,内容丰富。保持完全一致的整体风格:左侧浅蓝到浅青渐变导航栏(深度开创logo,营销获客菜单展开,渠道活码项选中)、顶部搜索栏和用户头像、右侧左下角浅蓝到右上角浅灰渐变背景、白色卡片、科技蓝主色调、精致圆角。页面内容:顶部面包屑(营销获客 / 渠道活码 / 详情),返回箭头,标题"618活动推广码",状态标签(启用-绿色),右上角操作按钮组(编辑、下载二维码、停用)。页面主体分多个模块卡片:1. 基本信息卡片:活码名称、渠道类型(线上广告)、关联员工、欢迎语、标签、创建时间、创建人等信息,右侧展示二维码预览图(带logo的企微二维码)。2. 数据概览卡片(4个数据指标):累计扫码人数、累计添加客户数、总转化率、今日新增客户,每个带小趋势图。3. 数据趋势图表卡片:折线图展示近30天扫码人数和添加客户数趋势,带时间筛选(今日/近7日/近30日/自定义)。4. 渠道来源分布卡片:饼图展示不同来源渠道的占比分布。5. 扫码客户列表卡片:表格展示扫码添加的客户列表,包含客户头像、客户昵称、扫码时间、添加状态、标签、操作(查看详情),带分页。整体布局丰富有序,信息层级清晰,专业B端SaaS产品界面,文字清晰无乱码,1920x1080尺寸
资源协同平台-评审任务管理页面高保真UI设计,蓝色企业级B端后台风格,左侧深蓝色侧边栏导航,顶部蓝色导航栏有平台Logo、搜索框、消息铃铛、用户头像(显示教务专责身份)。左侧导航当前选中评审管理模块并展开子菜单,高亮评审任务管理。主内容区:顶部面包屑导航,页面大标题评审任务管理。页面顶部为数据概览卡片行,4个统计卡片横向排列:待评审任务数、进行中评审、已完成评审、本月新增评审,每个卡片有图标、数值、环比趋势。下方为操作与筛选区:左侧有新建评审计划按钮(蓝色主按钮)、发起评审按钮、批量分派按钮;右侧为筛选条件:评审类型下拉、评审状态下拉(全部/待发起/进行中/已完成/已驳回)、时间范围选择、关键词搜索框、查询重置按钮。主体为评审任务列表表格,表头包含:复选框、任务编号、评审任务名称、评审类型(如课程评审/师资评审/案例评审)、关联资源数、评审专家、计划开始时间、计划结束时间、当前状态(不同颜色标签:待发起灰色/进行中橙色/已完成绿色/已驳回红色)、进度条、操作列(查看详情、分派专家、编辑、删除)。表格展示8-10行数据,每行有进度百分比条。页面底部分页组件。整体风格与资源申报审核页一致,蓝色主调,专业清晰,卡片精致有质感资源协同平台-评审任务管理页面高保真UI设计,蓝色企业级B端后台风格,左侧深蓝色侧边栏导航,顶部蓝色导航栏有平台Logo、搜索框、消息铃铛、用户头像(显示教务专责身份)。左侧导航当前选中评审管理模块并展开子菜单,高亮评审任务管理。主内容区:顶部面包屑导航,页面大标题评审任务管理。页面顶部为数据概览卡片行,4个统计卡片横向排列:待评审任务数、进行中评审、已完成评审、本月新增评审,每个卡片有图标、数值、环比趋势。下方为操作与筛选区:左侧有新建评审计划按钮(蓝色主按钮)、发起评审按钮、批量分派按钮;右侧为筛选条件:评审类型下拉、评审状态下拉(全部/待发起/进行中/已完成/已驳回)、时间范围选择、关键词搜索框、查询重置按钮。主体为评审任务列表表格,表头包含:复选框、任务编号、评审任务名称、评审类型(如课程评审/师资评审/案例评审)、关联资源数、评审专家、计划开始时间、计划结束时间、当前状态(不同颜色标签:待发起灰色/进行中橙色/已完成绿色/已驳回红色)、进度条、操作列(查看详情、分派专家、编辑、删除)。表格展示8-10行数据,每行有进度百分比条。页面底部分页组件。整体风格与资源申报审核页一致,蓝色主调,专业清晰,卡片精致有质感
生成一张网页端后台管理UI设计图,宽高比16:9,深色专业风格,深蓝灰底色,与后台管理端风格统一。 页面布局: 1. 左侧侧边导航栏,布局内容与第一张后台页面保持一致:顶部平台Logo+“智宅焕管理后台”,菜单项:订单管理(当前选中项,高亮显示)、服务产品配置、师傅管理、提现审核、系统设置。 2. 右侧为派单工作台内容区,分为三个区域: - 顶部订单概要区:标题文字“派单工作台”,下方以横向卡片形式展示只读订单概要信息:项目名称XXX,客户姓名/手机号,项目城市上海,项目地址上海市闵行区XX路XX号,预期上门时间2026-07-15,时间灵活性标签“时间可协商”,订单总服务数3项,订单总金额¥2,580;卡片右上角有一个低调样式“追加远程费”按钮。 - 中部任务拆分区:标题文字“任务拆分与指派”,下方纵向排列展示3个系统自动拆分的任务卡片,每个任务卡片:左侧信息区包含服务名称(如现场安装调试)、数量、服务城市、预期上门时间、时间灵活性标签、客户支付单价(灰色小字并标注“仅管理员可见”)、指派状态标签;右侧操作区包含“指派师傅”主色高亮按钮,“修改佣金”低调样式按钮,已指派时显示佣金金额。三个任务卡片分别是第一个“待指派”、第二个“已指派”、第三个“待指派”,状态区分清晰,任务拆分卡片为核心交互区需要突出展示。 - 底部操作区:固定悬浮在底部,包含“一键通知师傅”主色高亮按钮(提示所有任务已指派才可点击,否则置灰)和“返回订单列表”次要按钮,旁边附带提示文字“请先完成所有任务指派后,再通知师傅”,底部操作区始终可见。 所有文字清晰可见,使用无衬线字体,UI风格专业整洁,整体与上一张智宅焕管理后台设计风格保持统一。生成一张网页端后台管理UI设计图,宽高比16:9,深色专业风格,深蓝灰底色,与后台管理端风格统一。
页面布局:
1. 左侧侧边导航栏,布局内容与第一张后台页面保持一致:顶部平台Logo+“智宅焕管理后台”,菜单项:订单管理(当前选中项,高亮显示)、服务产品配置、师傅管理、提现审核、系统设置。
2. 右侧为派单工作台内容区,分为三个区域:
- 顶部订单概要区:标题文字“派单工作台”,下方以横向卡片形式展示只读订单概要信息:项目名称XXX,客户姓名/手机号,项目城市上海,项目地址上海市闵行区XX路XX号,预期上门时间2026-07-15,时间灵活性标签“时间可协商”,订单总服务数3项,订单总金额¥2,580;卡片右上角有一个低调样式“追加远程费”按钮。
- 中部任务拆分区:标题文字“任务拆分与指派”,下方纵向排列展示3个系统自动拆分的任务卡片,每个任务卡片:左侧信息区包含服务名称(如现场安装调试)、数量、服务城市、预期上门时间、时间灵活性标签、客户支付单价(灰色小字并标注“仅管理员可见”)、指派状态标签;右侧操作区包含“指派师傅”主色高亮按钮,“修改佣金”低调样式按钮,已指派时显示佣金金额。三个任务卡片分别是第一个“待指派”、第二个“已指派”、第三个“待指派”,状态区分清晰,任务拆分卡片为核心交互区需要突出展示。
- 底部操作区:固定悬浮在底部,包含“一键通知师傅”主色高亮按钮(提示所有任务已指派才可点击,否则置灰)和“返回订单列表”次要按钮,旁边附带提示文字“请先完成所有任务指派后,再通知师傅”,底部操作区始终可见。
所有文字清晰可见,使用无衬线字体,UI风格专业整洁,整体与上一张智宅焕管理后台设计风格保持统一。
资源协同平台-资源检索页面高保真UI设计,蓝色企业级B端后台风格,左侧深蓝色侧边栏导航,顶部蓝色导航栏有平台Logo、搜索框、消息铃铛、用户头像。左侧导航当前选中资源中心,高亮资源检索。主内容区:顶部面包屑导航,页面大标题资源检索。页面布局为左侧筛选栏+右侧结果区的经典检索结构。左侧筛选区(约占页面宽度1/4):顶部有资源类型切换标签(课程库/师资库/案例库/教学资源/基地资源,五库横向排列,当前选中全部),下方为多层级筛选条件,每组筛选条件可折叠展开:关键词搜索框(带放大镜图标)、学科分类(树形结构,可多选,如工学/理学/管理学/经济学等)、项目标签(标签云形式,可多选,如精品课程/规划教材/教改项目等)、专业维度(下拉多选,如电气工程/计算机科学/能源动力等)、资源等级(国家级/省部级/校级)、发布时间范围(日期选择)、适用对象(领导人员/管理人员/专业技术人员/技能人员)。右侧结果区(约占3/4):顶部为结果统计栏,左侧显示找到相关资源XXXX条,右侧有排序下拉(综合排序/最新发布/浏览量最高/评分最高)和视图切换图标(列表视图/卡片视图/网格视图)。结果展示区采用卡片式网格布局,每行3个资源卡片,每个卡片包含:资源类型角标(课程/师资/案例等不同颜色)、缩略图或图标、资源标题、所属单位/主讲人、学科分类标签、浏览量、评分、收藏按钮。卡片底部有查看详情按钮。页面底部有分页组件。整体界面精致专业,筛选条件清晰,结果卡片信息丰富,蓝色主调,阴影柔和,圆角适中资源协同平台-资源检索页面高保真UI设计,蓝色企业级B端后台风格,左侧深蓝色侧边栏导航,顶部蓝色导航栏有平台Logo、搜索框、消息铃铛、用户头像。左侧导航当前选中资源中心,高亮资源检索。主内容区:顶部面包屑导航,页面大标题资源检索。页面布局为左侧筛选栏+右侧结果区的经典检索结构。左侧筛选区(约占页面宽度1/4):顶部有资源类型切换标签(课程库/师资库/案例库/教学资源/基地资源,五库横向排列,当前选中全部),下方为多层级筛选条件,每组筛选条件可折叠展开:关键词搜索框(带放大镜图标)、学科分类(树形结构,可多选,如工学/理学/管理学/经济学等)、项目标签(标签云形式,可多选,如精品课程/规划教材/教改项目等)、专业维度(下拉多选,如电气工程/计算机科学/能源动力等)、资源等级(国家级/省部级/校级)、发布时间范围(日期选择)、适用对象(领导人员/管理人员/专业技术人员/技能人员)。右侧结果区(约占3/4):顶部为结果统计栏,左侧显示找到相关资源XXXX条,右侧有排序下拉(综合排序/最新发布/浏览量最高/评分最高)和视图切换图标(列表视图/卡片视图/网格视图)。结果展示区采用卡片式网格布局,每行3个资源卡片,每个卡片包含:资源类型角标(课程/师资/案例等不同颜色)、缩略图或图标、资源标题、所属单位/主讲人、学科分类标签、浏览量、评分、收藏按钮。卡片底部有查看详情按钮。页面底部有分页组件。整体界面精致专业,筛选条件清晰,结果卡片信息丰富,蓝色主调,阴影柔和,圆角适中
电化学储能电站运维系统-配置管理-电站管理页面高保真UI设计,整体UI风格参照慧声智联客服平台的卡片式设计语言。顶部蓝色渐变导航栏带科技感线条装饰:左侧logo+系统名'SmartOps储能智慧运维平台',中间电站下拉选择,右侧设置图标、通知铃铛(红色角标)、用户头像。左侧浅蓝白色侧边栏:首页图标、配置管理菜单组(电站管理选中高亮蓝色背景)。主内容区:顶部操作栏左侧蓝色'新增电站'按钮,右侧排序方式(创建时间/修改时间)、机器人类型筛选标签、搜索框、查询按钮、重置按钮。页面大标题'电站管理',副标题说明文字,顶部4步流程引导条(Step1创建电站基础信息、Step2设备接入配置、Step3告警规则配置、Step4收益策略设置)。顶部数据统计卡片组:6个圆形图标数据卡片横向排列(电站总数12、源网侧储能5、用户侧储能4、备用储能3、总功率16.85MW、总能量32.42MWh),每个卡片有彩色圆形图标+数值+标题。筛选区:电站类型下拉、电站状态下拉、运行状态下拉、发布状态下拉、搜索框、下载按钮、新增电站按钮。电站卡片网格列表:每行4个卡片,每个卡片为白色圆角卡片带精致阴影,左上角彩色图标+电站名称,数据源标签(PCS系统/EMS系统),信息行包含电站类型、总功率、电站编号、总能量、电站状态绿色标签、创建时间、运行状态开关、发布状态标签、电价名称、电价最新月份标签,异常状态红色标签(电价配置异常),卡片右上角更多操作按钮,底部操作栏编辑/删除/对话测试图标按钮。整体浅色B端卡片式风格,蓝白主色调,玻璃拟态感,圆角大,阴影精致,科技感装饰元素,现代企业级后台UI电化学储能电站运维系统-配置管理-电站管理页面高保真UI设计,整体UI风格参照慧声智联客服平台的卡片式设计语言。顶部蓝色渐变导航栏带科技感线条装饰:左侧logo+系统名'SmartOps储能智慧运维平台',中间电站下拉选择,右侧设置图标、通知铃铛(红色角标)、用户头像。左侧浅蓝白色侧边栏:首页图标、配置管理菜单组(电站管理选中高亮蓝色背景)。主内容区:顶部操作栏左侧蓝色'新增电站'按钮,右侧排序方式(创建时间/修改时间)、机器人类型筛选标签、搜索框、查询按钮、重置按钮。页面大标题'电站管理',副标题说明文字,顶部4步流程引导条(Step1创建电站基础信息、Step2设备接入配置、Step3告警规则配置、Step4收益策略设置)。顶部数据统计卡片组:6个圆形图标数据卡片横向排列(电站总数12、源网侧储能5、用户侧储能4、备用储能3、总功率16.85MW、总能量32.42MWh),每个卡片有彩色圆形图标+数值+标题。筛选区:电站类型下拉、电站状态下拉、运行状态下拉、发布状态下拉、搜索框、下载按钮、新增电站按钮。电站卡片网格列表:每行4个卡片,每个卡片为白色圆角卡片带精致阴影,左上角彩色图标+电站名称,数据源标签(PCS系统/EMS系统),信息行包含电站类型、总功率、电站编号、总能量、电站状态绿色标签、创建时间、运行状态开关、发布状态标签、电价名称、电价最新月份标签,异常状态红色标签(电价配置异常),卡片右上角更多操作按钮,底部操作栏编辑/删除/对话测试图标按钮。整体浅色B端卡片式风格,蓝白主色调,玻璃拟态感,圆角大,阴影精致,科技感装饰元素,现代企业级后台UI
AI写作工作台后台管理首页UI界面原型图,横版16:9比例,背景纯白,主色调深蓝与暗金,极简商务风格,严谨专业,高信任感,后台管理视觉感受。左侧深蓝色侧边栏约占1/6宽度,顶部暗金色品牌标志文字"智宅焕·AI写作工作台",下方竖向导航菜单深灰色文字,当前选中项"后台首页"为深蓝色背景白色文字,其他菜单项依次为"框架管理""知识库管理""平台适配配置""文章上传与拆解""用户权限管理",分割线后"返回前台"。右侧白色内容区:顶部大号深蓝色粗体标题"后台管理",右侧小字"管理员:吴建旭"。系统状态卡片区:四个横向排列淡灰色背景圆角统计卡片,卡片1标题"写作框架"内容"5个"小字"已启用",卡片2标题"知识库条目"内容"1,250条"小字"覆盖6个核心库",卡片3标题"用户账号"内容"3个"小字"1管理员,2编辑者",卡片4标题"文章总量"内容"78篇"小字"本月新增15篇"。快捷管理入口区:小标题"快捷管理操作"中号深灰色粗体,下方四个横向排列快捷入口卡片,"管理框架"描述"创建、编辑、删除写作框架,配置提示词和关联知识库"右侧小箭头;"管理知识库"描述"维护战略库、观点库、案例库等核心知识资产"右侧小箭头;"用户权限"描述"新增编辑者,管理账号权限"右侧小箭头;"上传文章"描述"批量上传存量文章,执行智能拆解"右侧小箭头。底部区域:小标题"最近操作日志"深灰色粗体,极简表格三条日志:"2026-08-01 10:30 | 吴建旭 | 新增框架:采访提炼","2026-08-01 09:15 | 吴建旭 | 编辑知识库条目:苏州别墅网络盲区","2026-07-31 18:00 | 张助理 | 上传文章:什么是靠谱的供应链?.md"。所有文字清晰可读,模拟真实软件后台界面,严谨高效安全,无卡通花哨元素。AI写作工作台后台管理首页UI界面原型图,横版16:9比例,背景纯白,主色调深蓝与暗金,极简商务风格,严谨专业,高信任感,后台管理视觉感受。左侧深蓝色侧边栏约占1/6宽度,顶部暗金色品牌标志文字"智宅焕·AI写作工作台",下方竖向导航菜单深灰色文字,当前选中项"后台首页"为深蓝色背景白色文字,其他菜单项依次为"框架管理""知识库管理""平台适配配置""文章上传与拆解""用户权限管理",分割线后"返回前台"。右侧白色内容区:顶部大号深蓝色粗体标题"后台管理",右侧小字"管理员:吴建旭"。系统状态卡片区:四个横向排列淡灰色背景圆角统计卡片,卡片1标题"写作框架"内容"5个"小字"已启用",卡片2标题"知识库条目"内容"1,250条"小字"覆盖6个核心库",卡片3标题"用户账号"内容"3个"小字"1管理员,2编辑者",卡片4标题"文章总量"内容"78篇"小字"本月新增15篇"。快捷管理入口区:小标题"快捷管理操作"中号深灰色粗体,下方四个横向排列快捷入口卡片,"管理框架"描述"创建、编辑、删除写作框架,配置提示词和关联知识库"右侧小箭头;"管理知识库"描述"维护战略库、观点库、案例库等核心知识资产"右侧小箭头;"用户权限"描述"新增编辑者,管理账号权限"右侧小箭头;"上传文章"描述"批量上传存量文章,执行智能拆解"右侧小箭头。底部区域:小标题"最近操作日志"深灰色粗体,极简表格三条日志:"2026-08-01 10:30 | 吴建旭 | 新增框架:采访提炼","2026-08-01 09:15 | 吴建旭 | 编辑知识库条目:苏州别墅网络盲区","2026-07-31 18:00 | 张助理 | 上传文章:什么是靠谱的供应链?.md"。所有文字清晰可读,模拟真实软件后台界面,严谨高效安全,无卡通花哨元素。