腾讯防水墙官网项目设计总结

项目背景

“腾讯防水墙”是什么

在互联网如火如荼发展的背后,黑灰产大军暗流涌动,无处不在,各类业务活动面临被刷的风险,业务安全问题不容小觑。“腾讯防水墙”是由安全平台部沉淀十几年黑产对抗,推出的业务安全解决方案,为公司内外数百业务、上千个活动提供安全护航服务。防水墙专注业务安全服务,运用AI及大数据分析等技术解决业务欺诈,薅羊毛,刷单,爬虫等自动机攻击问题。

为什么设计官网

防水墙除了覆盖公司7大BG,为1000+业务活动服务,还通过腾讯云对外业务安全能力开放,为电商、新零售、出行、金融、文娱等各行业的公司提供服务,解决互联网+业务安全问题。设计品牌官网,目的提供客户了解防水墙的渠道,希望通过产品及服务介绍,和品牌价值传递,让客户对防水墙品牌、产品、服务产生认知和认可,进而完成购买。

设计发现

如今全球网络安全产业快速发展,市场规模逐年攀升,越来越多品牌对于自身品牌和实力的展示也越来越重视。在toB能力开放的初期,为了最快速地了解外部企业客户的需求和喜好,我们对比分析了跟防水墙同类的技术型B类产品企业官网。

toB 企业官网有设计公式?

提到当下最热的B类服务产品,最先联想到云计算产品。以大牌公有云产品:亚马逊AWS、微软Azure、IBM、Google Cloud、阿里云、腾讯云为例,我们想看下to B企业官网有什么设计特征与原则,应该学习或注意。

结果很意外发现它们好像是由一套公式生成的。这使我们很困惑,“千篇一律”的视觉传达、“固定模式”的信息架构和内容组织,如果我们也套用“这个公式”,很快就可以完成这个项目。但是这样怎么能够体现出防水墙的品牌差异?怎么刺激客户对防水墙产品的产生进一步的了解和使用意愿?

带着这两个疑问,我们再去看了垂直竞争市场——其他业务安全产品情况是怎么样的,有两方面的发现:

一、“垂直B类产品”品牌展示的花样多了好多,有插画、概念图、实景照片,或生动、或酷炫或接地气。什么样方式适合防水墙,而又不同质化,是我们需要再思考的。

二、网站信息架构虽然还是基本一致,但筛选哪些内容和信息(卖点)最先push给客户,有了明显的差别。

极验作为较早发展起来的行为验证品牌,“服务于全球20万家客户”,这对它们技术和口碑最好的证明。而猛犸反欺诈两次入选Gartner(全球最具权威的IT研究与顾问咨询公司)发布的“Gartner Cool Vendors”榜单,这对展示它们对对“欺诈者的识别准确度”非常有说服力。

这让我们想到“B类客户的商务决策”本质也是属于“消费者购买决策”的一种。所以就像B2C的电商网站,信息架构也是高度相似度的,这映射了目标用户群体的购买决策路径是相同的。所以toB企业官网,我们的设计重点在于提供影响客户价值评估的信息,并做好“信息加工”,从而影响客户决策。当然这里的信息加工绝不是指弄虚作假,误导客户,而是针对信息渠道特点,不同客户的信息量和信息种类偏好,以最为恰当的方式呈现出来,给到客户一个充足的选择防水墙的理由。

设计目标及策略

防水墙的官网如何设计?

结合项目目标和我们前期的设计分析发现,我们的设计目标和设计思路如下:

一、组织对客户有效的内容信息和呈现方式

技术型B类客户在做判断时通常是偏理性的,需要我们了解潜在客户特征,梳理他们需要多少信息和需要什么形式的信息。

二、建立鲜明的品牌认知

品牌的曝光,能够帮助防水墙的脱颖而出,记忆深刻;打造适合但不一样的创新元素,传达品牌概念与内容,用户更好的理解和接收。

三、保持设计的统一和复用

随着产品发展和toB市场情况变化,我们可能会持续&快速更新子产品、子业务;模块布局的统一不仅减少用户阅读成本,还能保持体验的一致性;复用设计也可以有效的节约设计和研发成本。

组织对客户决策有效的内容信息和呈现方式

我们知道toB类客户的决策可能很复杂,决不仅是访问官网介绍的一个人可以决定的。而且toB市场中的大客户,决策链条更为复杂,涉及到人员可能很多。在官网的设计过程中,我们先简化复杂性,每个访问到官网的人都是在客户群体中了解和传达防水墙品牌信息和实力的关键人物。从项目目标出发,将客户路径进行拆分,得出我们的网站首层信息架构。

依据客户决策路径组织信息架构

应用“经典销售法则”组织介绍内容

FABE法则是非常典型的利益销售法,它通过四个关键关节,将一个商品分别从四个层次加以分析、记录,并整理成商品销售的诉求点。

如:活动反作弊、帐号安全防护子产品介绍页

设计多种样式展示产品卖点

验证码作为防水墙最成熟和重要的子产品,它的卖点提炼需要更为用心。首先对试用&选购验证码的商户进行了访谈,发现客户决策因素最重要的是用户体验和安全。

我们在验证码的子产品页进行介绍时整合了特性、优势、解决效果、技术佐证等多项内容,突出卖点“安全和体验兼得”。

主要的“佐证” — 客户案例展示样式有三种,“LOGO墙”可以展示最多,“语录卡”能承载大客户的使用效果,更有说服力;“企业卡”主要展现客户行业属性。

提供更强的品牌认知

品牌的“显现”

如何去叙述品牌是目前不得不面对的问题,设计侧根据问题罗列下列解决方案:

  • 官网的色彩主要提取标志当中的焦点色,首页大面积的蓝色、图标的蓝色和点击态的蓝色遍布整个网站,目的在于冲击用户的眼球,给用户带来色彩上对与品牌的认知

  • 首页Banner采用了标志中的辅助图形,强化用户对防水墙品牌的认知

  • “醒目”的标语是很好的解决方案

品牌的价值观

强大的品牌是独一无二的,需要做的是与别人不一样的事情。防水墙对应的竞品是“极验”“谷歌验证码”“网易验证码”等网站,但防水墙官网是一个聚合产品型的网站,安全产品是防水墙的特色,这样与一般的云类别网站也有很大区别。

“安全”成为防水墙官网的主基调,强化防水墙的价值有以下几点:

  • 去除复杂元素,用准确又有效的方式表达内容,提升设计的严肃感

  • 使用大量的负空间,空白的区域可以让用户更加专注内容的描述

  • 图形运用的一致性,寻找与安全相关的图形元素

打造不一样的创新元素

观察各种竞品网站,所使用的元素大同小异,从架构到图标,云产品网站的都具备高度的一致,如何去打造不一样的聚合产品型网站是设计侧面对很大挑战。其中元素是将文字内容、故事或思想以视觉化的方式呈现,所以适合的元素有着视觉传达与用户交流的功能性。

如何在产品型网站中运用抽象元素的优点

使用抽象叙述概念

整个防水墙的文案离不开“守护”“防护”两字,图形的运用局限性很大,使用抽象的元素能够使的画面更加特别,扩大使用范围之余,也能很好的和产品形成默契的作用。

抽象的元素有着很大的发挥空间,结合安全的基调,工程数学的图纸可以很好叙述整个官网的图形元素,定义元素的拼合,可以很好赋予产品的概念。

例如在首页的产品模块中,六边形代表验证码,椭圆形代表守护,将元素进行重组拼合,进行尝试,发现多种不一样定义。

合适的元素可以拉近与用户的距离

简单的几何图形都是我们从小学会辨认一个物体的重要元素,赋予简单图形的创新,能够友好的通过图形来接连网页的关系,还有图形与用户直接的关系。

每个代表性的抽象图形,可以很好贯穿整个产品介绍页,图形的一致性可以减少用户对于新元素的学习成本,同时使用鲜明的品牌色彩,外加抽象的图形表达,很好诠释的安全的重要性,例如验证码产品页延续了六边形的图形元素,强化品牌概念,提高用户理解能力。

如何通过图形的主次关系,给网站带来不一样的视觉体验

传统型产品型网站强调的是文字的重要性,为了减少文字带来的视觉压力,增加适当的图形衬托与文字相符的关联性。通过手机端网页和APP发现,图形会大面积的使用,甚至有些模块取消了文字的提示。

防水墙官网首页中,使用超大图形风格图标,平衡好图形和文字两者的主次关系。首页的重点在于展示能力,通过创新的图形元素,目的在于减小用户对于文字的理解压力,增强视觉传达的表现力。

设计的统一与复用

保持“一致”

“一致”代表视觉层级,即是传达的咨询。如何组织、排序内容,让购买防水墙产品的商业用户能够尽可能轻易地理解咨询。可以利用视觉层级去区分内容的重要性,引导用户浏览的顺序或焦点,第一个到层级、第二、第三、第四…等。

防水墙官网中保持统一的视觉层级关系,善用视觉层级方法,排序重要元素,能够有效传达意念和信息给到用户,让用户更轻易地阅读浏览。

保持“秩序”

“秩序”代表视觉整体,即是网站整体编排系统。利用栅格系统可以让网页的信息呈现更加美观一度,更具可用性,网页将更加的灵活与规范,根据不同的版式或者划分区块,利用栅格系统的网页非常的有条理性。

目前防水墙官网采取12栅格的方案,更宽的间隙可以让网页看起来更加舒服,以996的最大宽度自适应,目的在于更好适配大部分的屏幕尺寸,保持统一的用户体验。

页面模版

在产品页和解决方案页中给予整个模块的定义,对于用户来说,模块布局的统一大大减少了阅读的学习成本;对于设计师来说,页面的布局设计是可复用的,这将大大减少设计成本。

项目历程及效果

历时4个月,官网承载了大部分的验证码用户的转化,用户通过官网实现了自主了解、接入和使用验证码的流程。后续将把官网打造成验证码自助服务平台。

官网体验-Web端&移动端

欢迎体验防水墙官网,WEB链接为:007.qq.com

移动端可扫码浏览

本文由jessica与kaden共同完成,感谢阅读。

Tencent CDC

作者:jessica&kaden

(0)

相关推荐

  • 路宝盒子怎么预约?腾讯路宝盒子预约购买教程(附官网地址)

    在最近的GMIC 2014(全球移动互联网大会)上,腾讯发布了首款车联网硬件产品“路宝盒子”,定位车主驾驶伴侣,具备超全实时路况信息、省油路线,私人定制、完善的车辆安全检查和分析诊断信息以及享受优惠的 ...

  • 星之物语 腾讯QQ网页游戏 星之物语官网首页

    《星之物语》是腾讯游戏2011年倾力打造的网页游戏精品之作。星之物语官网游戏将故事背景架设于充满魔幻色彩的异世界星球,以今古文明交织的欧式风格建筑,上古魔法与现代机械融合的地宫副本场景,奇趣可爱的怪物 ...

  • 腾讯微信支付官网网址是什么?

    腾讯微信支付官网的网址为:https://pay.weixin.qq.com

  • 腾讯官网QQ游戏防沉迷系统的实名认证怎么修改

    我们在腾讯官网QQ游戏防沉迷系统中,进行了实名认证后,想要进行修改,该怎么操作呢?一起来看看具体操作步骤吧.1. 首先打开电脑上的浏览器,进入百度,输入qq防沉迷进行搜索,在结果中,选择实名认证和防沉 ...

  • 如何快速修改腾讯官网QQ游戏防沉迷系统?

    腾讯游戏防沉迷系统是保护未成年人身心健康,未满18岁的用户将受到防沉迷系统的限制,那么怎样修改呢?下面来看一下. 操作方法 01 首先你要年满18周岁,然后搜索QQ防沉迷网站. 02 点击进入官网,首 ...

  • 腾讯qq靓号官网

    腾讯qq靓号官网如何申请账号呢?今天小编为大家讲解一下. 操作方法 01 打开电脑,找到搜狗搜索,点击并进入,如图所示. 02 进入之后,搜索QQ号码站,点击并进入,如图所示. 03 进入之后,选择自 ...

  • 腾讯官网快速修改QQ游戏防沉迷方法

    为了绿色网络游戏环境,腾讯官方QQ游戏引入未成年防沉迷系统,未满18周岁的账号,检测在线满2小时经验开始减半,不仅影响了游戏的体验,也影响大部分玩家的心情,怎样修改QQ游戏防沉迷的方法呢? 操作方法 ...

  • 腾讯付费音乐包官网网址是什么

    付费音乐包官网:http://y.qq.com/vip/fufeibao/index.html 登陆QQ音乐官网http://y.qq.com/#type=index点击付费音乐包即可进入页面

  • 腾讯用5个套路教你设计好看又好卖的企业产品官网

    在谈到企业产品的营销时(本文中提到的"企业产品"是指"给企业客户使用的软件/应用"),一种观点认为客户肯定是靠线下推广来获取的,另一种观点认为应该让用户主动购买 ...