济南水务集团官网与济南水协官网设计全景展示
政企官网 · 品牌设计

济南水务集团 · 济南水协官网设计

为济南水务集团及济南市城镇供水排水协会打造的全新官网视觉体系——从品牌形象重塑到多终端信息架构设计,兼顾政企公信力与市民服务便捷性。

我的职责
UI/UX 设计负责人 独立完成双官网全链路设计
技术栈
Figma · Photoshop 网页视觉设计与设计规范
项目周期
8 周 需求调研 → 设计交付
项目类型
政企官网设计 水务集团 + 行业协会双站
济南水务官网引导页设计
01 · 项目背景

从传统政务到智慧服务

济南水务集团作为城市供水核心企业,旧版官网存在信息层级混乱、视觉风格陈旧、移动端适配不足等问题,难以承载智慧水务新阶段的品牌传达与服务需求。

同期,济南市城镇供水排水协会也需要独立官网作为行业窗口。本项目同时承担水务集团与水协双站的视觉设计,在保持两站独立品牌辨识度的前提下,建立统一的政务设计语言。

  • 双站并行设计,品牌独立又统一
  • 引导页 + 首页双入口架构设计
  • 从传统风格向现代政企视觉全面升级
济南水务集团官网首页首屏
02 · 水务集团官网首页

以水为魂 · 蓝色基调焕新

首屏以深邃蓝为主色调,搭配渐变色块与清晰的信息层级,将"供水地图""新闻中心""优化营商环境"三大核心入口置于视觉焦点,用户进入首页即可直达关键服务。

Banner 区域采用大图叙事,滚动展示城市供水主题内容;下方卡片式布局按业务模块分类,兼顾信息的密度与可读性,整体风格庄重而不失现代感。

  • 深蓝主色调 · 稳重可靠品牌印象
  • 三大核心入口 · 直达关键服务
  • 卡片式模块化布局 · 信息清晰可扫
供水地图功能模块展示
03 · 功能模块设计

供水地图 · 服务可视化

供水地图模块是面向市民的核心服务之一,将城市供水管网、营业网点、水质公告等信息通过地图可视化呈现,让复杂的供水数据变得触手可及。

设计重点放在信息检索效率与操作直观性上:左侧搜索与筛选栏,右侧大比例地图展示,底部快速入口卡片,形成"查 — 看 — 办"三步操作闭环。

  • 供水管网地图可视化展示
  • "查-看-办"三步操作闭环
  • 营业网点与水质信息实时呈现
新闻中心模块设计
04 · 新闻中心与营商环境

信息公告 · 营商服务直观触达

新闻中心模块承载企业动态、停水公告、政策法规等信息发布功能,采用列表 + 标签 + 日期的标准新闻布局,确保信息层级清晰、更新状态一目了然。

优化营商环境专区则以独立卡片模块呈现政策解读、办事指南、服务承诺等内容,以轻量化图标引导用户快速跳转,减少阅读负担,提升服务效率。

  • 列表+标签布局,信息更新可追踪
  • 营商环境专区独立卡片模块
  • 图标化引导,降低阅读门槛
济南水协官网首页设计
05 · 水协官网首页

行业协会 · 独立品牌表达

济南市城镇供水排水协会官网作为独立的行业门户,在视觉上与水务集团官网保持色调关联(蓝色系),但通过不同的排版节奏、字体比例与卡片样式塑造出协会的独特气质。

首页重点突出协会动态、行业标准、会员服务三大板块,首屏采用左侧导航 + 右侧内容提要的非对称布局,兼顾信息密度与版面呼吸感。

  • 蓝色系延展 · 色调关联但气质独立
  • 非对称布局 · 左导航 + 右内容
  • 会员服务 · 标准发布双板块并列
网站其他子页面设计集合
06 · 子页面设计

全站统一 · 多场景适配

子页面涵盖服务指南、政策法规、用水知识、联系我们等多个功能场景,在统一的视觉框架下,根据各页面的内容密度与功能定位灵活调整布局比例。

所有子页面均遵循既定的网格系统与组件规范,确保从首页到深层页面体验连贯,同时各页面之间的视觉层级保持高度一致。

  • 网格系统统一 · 多模板灵活适配
  • 组件规范复用 · 降低开发成本
  • 首页到深层的连贯体验
07 · 设计规范

视觉体系 · 从品牌到像素

网站视觉风格定义
视觉风格定义 — 品牌调性、组件风格、版式节奏
网站色彩规范体系
色彩规范 — 主色·辅助色·功能色·中性色
网站字体排印规范
字体规范 — 标题·正文·标注字号与行高体系
济南水务集团官网设计概览
官网设计概览 — 全页面设计稿汇总
08 · 设计流程

从需求到交付

STEP 01
品牌调研
深入了解济南水务品牌定位、服务体系与用户画像,梳理旧站痛点与新站目标
STEP 02
信息架构
规划双站信息层级,定义用户路径:引导页 → 首页 → 核心服务 → 深层内容
STEP 03
视觉设计
建立蓝色系视觉语言,制定色彩/字体/组件规范,输出双站全页面高保真设计稿
STEP 04
设计交付
输出完整设计规范文档与切图资源,配合前端开发完成视觉还原与走查
09 · 项目成果

设计驱动的实际价值

30+
交付界面数量
2
独立官网品牌体系
100%
移动端全适配覆盖
返回作品集首页