网站内容与功能设计(项目背景1.「腾讯防水墙」是什么？在互联网如火如荼发展的背后 )

　　网站内容与功能设计(项目背景1.「腾讯防水墙」是什么？在互联网如火如荼发展的背后

)

　　一、项目背景

　　1.什么是“腾讯防水墙”？

　　在互联网高速发展的背后，黑灰色生产的暗流无处不在，各种商业活动都面临着被黑客入侵的风险，商业安全问题不容小觑。“腾讯防水墙”是安全平台部推出的企业安全解决方案，拥有十余年的黑品反击经验，为公司内外上百家企业、上千次活动提供安全保驾护航服务。防水墙专注于业务安全服务，利用AI、大数据分析等技术解决业务欺诈、抓绒、计费、爬虫等自动机攻击。

　　2. 为什么要设计官网

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

　　

　　二、设计发现

　　如今，全球网络安全产业发展迅速，市场规模逐年增加。越来越多的品牌越来越重视自身品牌和实力的展示。在toB能力开放初期，为了快速了解外部企业客户的需求和喜好，我们对比分析了具有类似防水墙技术B产品的公司官网。

　　1.toB官网有设计公式吗？

　　说到最火的B类服务产品，首先想到的是云计算产品。以大牌公有云产品：亚马逊AWS、微软Azure、IBM、谷歌云、阿里云、腾讯云为例，看看to B企业官网有哪些设计特点和原理值得借鉴或者重视。

　　

　　事实证明，它们似乎是由一组公式生成的。这让我们很困惑，“一刀切”的视觉传达，“固定模式”的信息架构和内容组织，如果我们也套用“这个公式”，这个项目可以很快完成。但这怎么能体现防水墙的品牌差异呢？如何激发客户对防水墙产品的进一步了解和使用意愿？

　　

　　带着这两个问题，我们来看看垂直竞争市场——其他商业安全产品的情况如何。有两个发现：

　　“垂直B类产品”品牌展示的花样更多，包括插画、概念图、实景照片，或生动、酷炫或接地气。我们需要重新思考什么样的方法适合防水墙，但不是定性的。

　　

　　网站虽然信息结构还是基本一样，但是内容和信息（卖点）先推送给客户的方式还是有明显区别的。

　　捷信作为较早发展的行为验证品牌，“服务全球20万客户”，是其技术和口碑的最好证明。Mammoth Anti-Fraud 曾两次入选 Gartner（全球最权威的 IT 研究和咨询公司）发布的“Gartner Cool Vendors”名单，非常有说服力地证明了他们“识别欺诈者的准确性”。

　　这让我们认为“B型客户的商业决策”的本质也是一种“消费者购买决策”。所以就像B2C电商网站一样，信息架构也高度相似，反映了目标用户群的购买决策路径相同。因此，我们对toB官网的设计重点是提供影响客户价值评估的信息，做好“信息处理”以影响客户决策。当然，这里的信息处理并不是指伪造或误导客户，而是根据信息渠道的特点、信息量和不同客户的喜好，以最合适的方式呈现信息，

　　

　　三、设计目标和策略

　　1.防水墙官网怎么设计？

　　结合项目目标和我们之前的设计分析，我们发现我们的设计目标和设计思路如下：

　　

　　四、组织对客户决策有效的内容信息和演示

　　我们知道toB客户的决策可能是复杂的，绝对不是一个访问官网的人就可以做决定的。而且，对于toB市场的大客户来说，决策链比较复杂，可能涉及的人很多。在官网的设计过程中，我们首先简化了复杂性，每个访问官网的人都是在客户群中了解和传达防水墙品牌信息和实力的关键人物。从项目目标出发，我们拆分客户路径，得到我们的网站一级信息架构。

　　1. 根据客户决策路径组织信息架构

　　

　　2. 运用《经典销售法》整理演讲内容

　　FABE 规则是一种非常典型的盈利销售方法。它通过四个关键节点从四个层次分析和记录一个商品，并将其组织成商品销售的诉求点。

　　

　　如：活动防作弊、账号安全保护子产品介绍页面

　　

　　3. 设计多种款式展示产品卖点

　　作为防水墙最成熟、最重要的子产品，验证码在提炼卖点时需要更加小心。首先，我们对试用并购买过验证码的商家进行了访谈，发现对客户来说最重要的决策因素是用户体验和安全性。

　　我们在介绍验证码子产品页面时，整合了功能、优势、方案效果、技术证据等诸多内容，突出了“安全与体验并重”的卖点。

　　

　　主要“证据”——客户案例展示风格共有三种，“LOGO墙”展示最多，“报价卡”可以承载大客户的使用效果，更有说服力；“企业卡”主要展示客户的行业属性。

　　

　　五、提供更强的品牌认知度

　　1. 品牌“启示录”

　　如何描述品牌是当前必须面对的问题。设计方根据问题列出以下解决方案：

　　官网的颜色主要是提取logo中的焦点颜色。首页的蓝色、图标的蓝色、点击状态的蓝色遍布整个网站，目的是为了震撼用户的眼球，给用户带来配色。品牌认知。

　　

　　主页横幅在标志中使用辅助图形，以加强用户对防水墙品牌的认识。

　　

　　吸引人的标语是一个很好的解决方案。

　　

　　2. 品牌价值

　　强大的品牌是独一无二的，需要以不同于其他品牌的方式做事。防水墙对应的竞品有“极简”、“谷歌验证码”、“网易验证码”等网站，但防水墙官网是聚合产品类型网站，安全产品是防水墙。它也和一般的云类网站有很大的不同。

　　“安全”已成为防水墙官网的主基调。加固防水墙的价值如下：

　　去除复杂元素，准确有效地表达内容，增强设计的严肃性。

　　

　　使用大量的负空间，空白区域可以让用户更多地关注内容的描述。

　　

　　一致使用图形，寻找与安全相关的图形元素。

　　

　　3. 创造不同的创新元素

　　观察各种竞品网站，使用的元素都差不多，从架构到图标，云产品网站高度一致，如何打造不同的聚合产品类型网站是一个很大的挑战设计方面。其中，元素是文本内容、故事或想法的视觉呈现，因此合适的元素具有视觉传达和与用户交流的功能。

　　

　　4.如何在产品类型中利用抽象元素的优势网站

　　使用抽象的叙述概念

　　整个防水墙的文案都离不开“守护”“保护”两个字。图形的使用非常有限。抽象元素的使用可以使画面更加特别，扩大使用范围，还可以与产品形成良好的产品。默契的作用。

　　抽象元素有很大的发挥空间。结合安全的基调，工程数学图纸可以很好地描述整个网站的图形元素，定义元素的组合可以给产品一个很好的概念。

　　

　　比如首页的产品模块中，六边形代表验证码，椭圆代表监护人。元素重新组合组合，经过尝试，发现各种不同的定义。

　　

　　

　　合适的元素可以拉近用户

　　简单的几何图形是我们从小学开始就学习识别物体的重要元素，并对简单的图形进行了创新，可以通过图形友好地连接网页之间的关系，以及图形与用户之间的直接关系。

　　

　　每个具有代表性的抽象图形都可以很好地贯穿整个产品介绍页面。图形的一致性可以降低用户对新元素的学习成本。同时，明亮的品牌色彩的使用，加上抽象的图形表达，很好的诠释和安全。重要性，如验证码产品页面，延续六边形图形元素，强化品牌理念，提高用户理解。

　　

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

　　传统的产品类型网站强调文字的重要性。为了减少文字带来的视觉压力，添加了适当的图形来匹配文字的相关性。通过手机网页和APP发现，图形会大面积使用，有的模块甚至取消了文字提示。

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

　　

　　六、设计的统一和重用

　　1. 保持“一致”

　　“一致”代表视觉层次，即传达的咨询。如何对内容进行整理和整理，让购买防水墙产品的企业用户尽可能的了解咨询。可以使用视觉层次来区分内容的重要性，引导用户浏览的顺序或重点，第一关注层次，二、th三、第四等。

　　

　　在防水墙官网保持统一的视觉层次，善用视觉层次的方法，对重要元素进行排序，可以有效地向用户传达思想和信息，让用户阅读和浏览更轻松。

　　

　　

　　2. 保持“秩序”

　　“秩序”代表视觉整体，即网站的整体布局系统。使用网格系统可以使网页的信息更加美观和实用，网页也会更加灵活和规范。根据不同的布局或划分，使用网格系统的网页非常有条理。

　　目前防水墙官网采用12格方案。较大的间隙可以使网页看起来更舒适。适配最大宽度996，以更好地适配大部分屏幕尺寸，保持统一的用户体验。

　　

　　3. 页面模板

　　整个模块的定义在产品页面和解决方案页面中给出。对于用户来说，模块布局的统一大大降低了阅读和学习的成本；对于设计师来说，页面的排版设计是可重复使用的，这样会大大降低阅读成本。降低设计成本。

　　

　　七、项目历史和效果

　　4个月后，官网承载了大部分验证码用户的转化，用户通过官网实现了自我认识、获取和使用验证码的过程。未来官网将建成验证码自助服务平台。

　　官网体验-Web & Mobile

　　欢迎体验防水墙官网，WEB链接为：

　　移动端可扫码浏览