三连竞价推广是B站面向广告商进行效果广告投放的平台;
近年来,我们从满足基础投放需求的一款工具,到现在越来越意识到保持克制的视觉设计,对于业务的重要性;
因此,团队希望通过本次的品牌升级,能够从视觉识别、产品体验、用户心智等多个维度来传递品牌核心价值,同时遵从“高效稳定、内容至上、品质细腻”的产品设计理念,形成一套完整统一的设计语言。
1.品牌色
蓝色是天空的基本色,被视作自然可靠、专业信赖的象征。在广告投放B端产品中,我们常常会遇到,需要在大量的信息中,针对核心操作或元素进行透传的场景。因此我们亟需一种,更具【穿透力】的品牌色!
我们将绿色的辅助色位次提升至首位,为平台增添一丝平衡与生机,同时依旧保留了旧版色彩方案中其他5种辅助色,为平台的多维度信息展示,预留出了足够的色彩冗余。
2.品牌LOGO
在LOGO的迭代升级上,我们继承了三连旧LOGO中,鲁洛克斯三角形播放器的文化意向。同时基于三连平台稳定可靠、值得信赖的平台特征,引入正六边形进行图形化表达。
为了保障B站特色投放平台,我们经过多轮激烈讨论,最终还是保留了B站的品牌粉。同时也避免和三连旧LOGO差异太大,导致的辨识度问题。
字体采用粗细较为一致的笔画来进行勾勒设计,大部分转折圆角都进行了润化处理,使其字形饱满简约,曲线优美,更具备亲和力!
3.平台页面
3.1.全局框架
页面背景:
剔除无意义的设计元素,同时加深背景的颜色,从而让纯白色内容面板更为突出。
顶部导航:
更聪明、细腻的顶部导航!
创编时,当页面向上滚动,顶导会自动向上隐藏,将更多的屏幕空间留给创编,来进行信息展示;
当页面向下滚动时,顶导随即会立即唤醒,承接可能的跳转操作。
侧边导航:
重新定义了侧边导航,取消侧导背景,对所有图标进行视觉重构,动效层面增加贝塞尔曲线约束,使得页面体验更加丝滑细腻。
3.2.平台首页(建设中)
主要是进行了视觉收敛,去掉了五颜六色的账户总览图标,重点突出业务内容。将账户总览和核心数据进行了版面融合,同时对数据指标数量进行了扩容!

3.3.沉浸式创编
1、剔除侧边步骤条背景,将用户有限的注意力,聚焦于创编面板
2、弱化图标等多余的设计元素,利用更具穿透力的蓝来进行图标风格收敛,内容至上
3、创意卡片和封面卡片100%用于内容展示,多余的操作或悬浮或隐藏于卡片内
4.数据可视化
数据可视化也基于新品牌色进行视觉上的优化,能够让数据以更容易理解图形的形式表现出来
折线图:
用平滑的曲线代替折线,适用于横轴为连续类别(如时间)且注重变化趋势、预测;主要用于报表页面以及首页,其中包括单色折线图、双色折线图以及双色多维度折线图
柱状图:
系统使用柱形显示维度的数值。横轴显示分类维度,纵轴显示相应的值,其中包括单色柱状图、双色柱状图以及堆叠柱状图,新版堆叠柱状图使用的是邻近色对比,先对于老版在颜色交汇处没有那么的突兀
环形图:
环图与饼图基本功能类似,用于比较整体和部分的关系,每个弧形切片表示整体中的一个分类。基于无障碍设计原则,使用颜色需要有明度对比,主要分为,单色环形图和多色环形图
区域分布图:
此类型的图标主要是可视化的方法显示地理区域上的数据
5.图标风格
图标主要归结为三大类别:侧边栏图标、内容图标以及特殊类图标
内容图标:
内容图标升级之后主要以单色毛玻璃形式展现,为了更好的凸显内容使页面看上去更干净简洁
侧边栏图标:
特殊图标:
特殊内容类以推广目的为例未选中状态下弱化图标,突出文字内容,减少对用户阅读的干扰选中之后则可稍微强化一点效果,可以让用户比较明确的知道自己选中的内容
