基于深度开创SaaS平台设计风格,设计一个渠道活码信息展示详情… - 图片创意预览

基于深度开创SaaS平台设计风格,设计一个渠道活码信息展示详情…

基于深度开创SaaS平台设计风格,设计一个渠道活码信息展示详情页。左侧浅蓝到浅青渐变导航栏(深度开创logo,营销获客展开,渠道活码高亮),顶部搜索栏和用户头像,右侧左下角浅蓝到右上角浅灰渐变背景,白

用户头像

颜晓霜

2026.09.18
基于参考图的设计风格,设计一个渠道活码详情页,内容丰富。保持完全一致的整体风格:左侧浅蓝到浅青渐变导航栏(深度开创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、搜索框、消息铃铛、用户头像。左侧导航当前选中资源中心,高亮资源检索。主内容区:顶部面包屑导航,页面大标题资源检索。页面布局为左侧筛选栏+右侧结果区的经典检索结构。左侧筛选区(约占页面宽度1/4):顶部有资源类型切换标签(课程库/师资库/案例库/教学资源/基地资源,五库横向排列,当前选中全部),下方为多层级筛选条件,每组筛选条件可折叠展开:关键词搜索框(带放大镜图标)、学科分类(树形结构,可多选,如工学/理学/管理学/经济学等)、项目标签(标签云形式,可多选,如精品课程/规划教材/教改项目等)、专业维度(下拉多选,如电气工程/计算机科学/能源动力等)、资源等级(国家级/省部级/校级)、发布时间范围(日期选择)、适用对象(领导人员/管理人员/专业技术人员/技能人员)。右侧结果区(约占3/4):顶部为结果统计栏,左侧显示找到相关资源XXXX条,右侧有排序下拉(综合排序/最新发布/浏览量最高/评分最高)和视图切换图标(列表视图/卡片视图/网格视图)。结果展示区采用卡片式网格布局,每行3个资源卡片,每个卡片包含:资源类型角标(课程/师资/案例等不同颜色)、缩略图或图标、资源标题、所属单位/主讲人、学科分类标签、浏览量、评分、收藏按钮。卡片底部有查看详情按钮。页面底部有分页组件。整体界面精致专业,筛选条件清晰,结果卡片信息丰富,蓝色主调,阴影柔和,圆角适中资源协同平台-资源检索页面高保真UI设计,蓝色企业级B端后台风格,左侧深蓝色侧边栏导航,顶部蓝色导航栏有平台Logo、搜索框、消息铃铛、用户头像。左侧导航当前选中资源中心,高亮资源检索。主内容区:顶部面包屑导航,页面大标题资源检索。页面布局为左侧筛选栏+右侧结果区的经典检索结构。左侧筛选区(约占页面宽度1/4):顶部有资源类型切换标签(课程库/师资库/案例库/教学资源/基地资源,五库横向排列,当前选中全部),下方为多层级筛选条件,每组筛选条件可折叠展开:关键词搜索框(带放大镜图标)、学科分类(树形结构,可多选,如工学/理学/管理学/经济学等)、项目标签(标签云形式,可多选,如精品课程/规划教材/教改项目等)、专业维度(下拉多选,如电气工程/计算机科学/能源动力等)、资源等级(国家级/省部级/校级)、发布时间范围(日期选择)、适用对象(领导人员/管理人员/专业技术人员/技能人员)。右侧结果区(约占3/4):顶部为结果统计栏,左侧显示找到相关资源XXXX条,右侧有排序下拉(综合排序/最新发布/浏览量最高/评分最高)和视图切换图标(列表视图/卡片视图/网格视图)。结果展示区采用卡片式网格布局,每行3个资源卡片,每个卡片包含:资源类型角标(课程/师资/案例等不同颜色)、缩略图或图标、资源标题、所属单位/主讲人、学科分类标签、浏览量、评分、收藏按钮。卡片底部有查看详情按钮。页面底部有分页组件。整体界面精致专业,筛选条件清晰,结果卡片信息丰富,蓝色主调,阴影柔和,圆角适中
生成一张网页端后台管理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风格专业整洁,整体与上一张智宅焕管理后台设计风格保持统一。