微信广告后台系统界面
Web 端
品牌设计 |
动效设计

微信广告提供了强大的广告投放平台服务,包括 Web 端后台系统,以及移动端广告投放小程序等,服务广大广告投放服务商和个体商家。

在 Web 端,我们基于 AD UI 的基础组件能力与设计语言,完成了大量的后台系统设计工作。在视觉工作中,这意味着我们需要结合对产品功能、交互体验、工程实现等综合理解,完成在色彩、版式、字体等方面都高度一致的 UI 设计,设计具有秩序感的工具界面,让广告工具系统更易读、易懂、易用,满足用户对 “高效浏览数据和完成投放任务” 的需求。

在 2016~2020 年期间,共服务了 20+ 个后台系统,300+ 个后台页面。

注:以下示例仅作为设计项目展示,非平台真实数据。








运营后台 & 广告投放系统

此类页面皆关注于数据的浏览分析,以及表单、表格、图表等方面的编辑操作,是最常用、最广泛的后台系统模式。我们延续了 AD UI 的布局和尺寸规范,把握版式的层级和节奏,打造具有秩序感的系统环境,让各页面之间保持一致性。





















广告推广页编辑器

此类页面强调编辑操作,采用了左右侧边栏的布局模式。整体风格(包括图标)保持黑白灰,以更好突出画布内容。AD UI 的小尺寸与迷你尺寸,为侧边栏复杂多样的编辑项提供了更多空间,更符合 “编辑工具“ 的属性,提高操作效率。





















网站内容录入工具

微信广告官网 “优秀案例“ 页面的录入工具,采用左侧边栏编辑、右侧大面积浏览的布局模式,左右联动,所见即所得,并支持切换手机尺寸视图,以检查自适应效果。




















局部功能点

除了系统页面的整体设计,还包含了多种局部功能点的设计,小至一份表格、一个气泡、弹窗、鼠标点击的状态变化,皆需照顾细节,匹配 AD UI 设计语言 —— 从视觉样式上优化体验感受,保证合理的字体与版式,保持整体秩序感。


















项目时间:2016~2020
视觉设计:Don, Hing, Ulmus
交互设计:Peiyao, Dingding
前端开发:Aragakey, Xierenqiang, Paki, She, Yexiao
设计工具:Figma, Sketch


copyright©微信广告 WeChat Ads 2016-2020