微信广告后台系统界面
Web 端
Web 端
品牌设计 |
动效设计
微信广告提供了强大的广告投放平台服务,包括 Web 端后台系统,以及移动端广告投放小程序等,服务广大广告投放服务商和个体商家。
在 Web 端,我们基于 AD UI 的基础组件能力与设计语言,完成了大量的后台系统设计工作。在视觉工作中,这意味着我们需要结合对产品功能、交互体验、工程实现等综合理解,完成在色彩、版式、字体等方面都高度一致的 UI 设计,设计具有秩序感的工具界面,让广告工具系统更易读、易懂、易用,满足用户对 “高效浏览数据和完成投放任务” 的需求。
在 2016~2020 年期间,共服务了 20+ 个后台系统,300+ 个后台页面。
注:以下示例仅作为设计项目展示,非平台真实数据。
![](https://freight.cargo.site/t/original/i/c53bcfdd5827a6849df9b031492cd1508a51fa935bd4ffe04326e635f6fb0755/all-6-1.png)
运营后台 & 广告投放系统
此类页面皆关注于数据的浏览分析,以及表单、表格、图表等方面的编辑操作,是最常用、最广泛的后台系统模式。我们延续了 AD UI 的布局和尺寸规范,把握版式的层级和节奏,打造具有秩序感的系统环境,让各页面之间保持一致性。
![](https://freight.cargo.site/t/original/i/32a80f531ecf5404cdb115af3ca367d3e12a19dd91f71e2b8e4d0544c48713ff/system-02-3.png)
![](https://freight.cargo.site/t/original/i/3802c64705d5979bc34275ffa00abba2e94fce96be5a12e252c08b96cc0f4878/system-01.png)
![](https://freight.cargo.site/t/original/i/d87c1ec4dcc15b648b169e17d6dbef02cb4d1dd91f468d74beeed5b595a7b2a6/-2.png)
![](https://freight.cargo.site/t/original/i/1844c1312edf4fca52681588d2f0e2e6f125b94d7cf378639a5b9dc714b38435/-2.png)
![](https://freight.cargo.site/t/original/i/73bcf601294dc3272f3720cc42b135008cd96832310a56c8e105e5e0f294c73f/-3-1.png)
![](https://freight.cargo.site/t/original/i/55e0510619ff37a4fa81e6ec3b46861e5525d6e8530fa8aaad2e796b73533140/-2.png)
广告推广页编辑器
此类页面强调编辑操作,采用了左右侧边栏的布局模式。整体风格(包括图标)保持黑白灰,以更好突出画布内容。AD UI 的小尺寸与迷你尺寸,为侧边栏复杂多样的编辑项提供了更多空间,更符合 “编辑工具“ 的属性,提高操作效率。
![](https://freight.cargo.site/t/original/i/072c198c45bddffab10da3b5ebf5921aa0dc20cca2764687ae3115cd3b350d93/-2.png)
![](https://freight.cargo.site/t/original/i/f8a9ec358694062e8e10dd6c4c5dcdbdc98c6173c2662f7205c911b84c656eac/-2.png)
网站内容录入工具
微信广告官网 “优秀案例“ 页面的录入工具,采用左侧边栏编辑、右侧大面积浏览的布局模式,左右联动,所见即所得,并支持切换手机尺寸视图,以检查自适应效果。
![](https://freight.cargo.site/t/original/i/132b76f5d1b04fcf6216ae5a0e9eb87642cb9ec701c62ec1813fa47140c5b7f2/caseinput-1.png)
![](https://freight.cargo.site/t/original/i/ba06f8570354a0bbb7c8ecd009122f2360aab73fff4f95598ef492cd2699500c/caseinput-2-2-1.png)
![](https://freight.cargo.site/t/original/i/11b833356181681248fda6acd3b0fa1dcf950b5fb809912276a02fe36679943e/caseinput-3.png)
![](https://freight.cargo.site/t/original/i/900badd295c59ca9c23e9ff9fc2b0cae11aa8feaac92f349e12957b449c11d6d/caseinput-4.png)
局部功能点
除了系统页面的整体设计,还包含了多种局部功能点的设计,小至一份表格、一个气泡、弹窗、鼠标点击的状态变化,皆需照顾细节,匹配 AD UI 设计语言 —— 从视觉样式上优化体验感受,保证合理的字体与版式,保持整体秩序感。
![](https://freight.cargo.site/t/original/i/99dfe631972cf25ec79c0c7354ee8f798ce35004e55048f45732a9db1e915cb9/caseinput-4-3-1.png)
![](https://freight.cargo.site/t/original/i/90e3f01e05f56f01188c9ee02e1f0108ffc6d4d8ef5af33b1117f63fd15146ab/caseinput-3-2-1.png)
项目时间:2016~2020
视觉设计:Don, Hing, Ulmus
交互设计:Peiyao, Dingding
前端开发:Aragakey, Xierenqiang, Paki, She, Yexiao
设计工具:Figma, Sketch
copyright©微信广告 WeChat Ads 2016-2020
视觉设计:Don, Hing, Ulmus
交互设计:Peiyao, Dingding
前端开发:Aragakey, Xierenqiang, Paki, She, Yexiao
设计工具:Figma, Sketch
copyright©微信广告 WeChat Ads 2016-2020