升级背景

伴随着 CODING 理念的全面升级，CODING 正构建起覆盖构想到交付的全覆盖工具链，用户注册即可实践敏捷开发与 DevOps，提升软件交付质量与速度。

一直以来，CODING 作为软件研发领域的开拓者，代码托管、Cloud Studio、Pages 等作为极客代表的明星产品，使得 CODING 的品牌气质一直给人一种创新、前卫的印象。我们在新版官网的设计上仍然延续 “极客” 的概念。但同时，作为一个面向企业的产品，CODING 也需要展现出严谨可靠的一面。

官网是客户对产品的第一印象，很多潜在客户第一次对 CODING 产生认知就是发生在 CODING 的首页。在这样的背景下，CODING 官网需要进行一次全面的升级。

设计挑战

市面上企业级产品的官网设计大多以严肃、板正的形象为主。如何追求创新，在设计上寻求自身的核心竞争力；如何正确的传递信息，将官网设计好看的同时又能促进转化，给品牌带来价值，是本次官网设计改版最大的挑战。

如何设计好看又能创造品牌价值的官网？

CODING 的官网主要由首页、产品详情页、价格、支持四个部分组成，这里重点介绍官网首页的设计理念。首页展示的内容信息就好比在给用户讲述一个产品故事，如何让用户记住这个故事，光有一个好的文案是不够的，更需要通过优秀的设计传达。

1、大胆的首屏设计抓住用户视角

首屏是官网最核心的位置，如何在首屏抓住用户视角至关重要。配图部分我们仍然延续 2.5D 等宽插画的风格。小人点亮屏幕操作一行代码后，机器被发动开启一站式 DevOps，这一过程的动效十分契合 CODING 的产品价值主张。

我们尝试过两种首屏排版方案，一种通栏式，一种异形式。但由于通栏式的单一铺底排版让首页气质看起来非常保守，不符合极客的品牌定位。为了追求创新，我们最终选择了大胆的异形式排版方案。

2、流程化的功能介绍引导用户阅览

功能介绍是首页最为重要的部分，这个部分能引导用户初步了解公司产品功能，设计上需要给用户营造良好的阅读体验。软件研发从构思->计划->开发->测试->交付整个流程，我们采用步骤式交互引导，带领用户一步一步浏览完整的功能介绍。另外每一个模块都使用真实的配图让用户有亲自操作 CODING 功能界面的感觉。

我们在设计上舍弃之前使用的背景色块分割区域手法，采用了开放式的布局形式，让这些散落的功能点描述看起来是一个整体功能的介绍内容。背景图案提炼出对应功能图标的元素用来点缀，让排版显得更加生动活泼。

3、知名企业的客户案例增强用户信任感

这个模块里我们将客户故事和客户 logo 墙一起展示，通过阅读大客户的案例故事，把用户带入不同行业的使用场景中去。企业客户在选择产品的时候看到与自己行业匹配的大企业也选择该产品，有助于提升好感度和信任度。

4、完善的产品详情页促进用户深入了解产品

产品详情页通过简介、特性、使用场景让用户能更深入地了解产品，页面风格选择比较中性的排版形式。值得一提的是我们为 CODING 的产品功能设计了一组抽象的概念图标，图标的元素同时也用作首屏背景。这种强烈的映射关系能够更好的统一整个介绍页的风格。

总结

CODING 官网正式上线以来，经过近两个月的观察，官网跳出率比之前降低了 20%，充分证明这次升级给官网带来了价值。总结一下，提升企业级官网体验需要具备四个基本要素：吸引用户眼球的首屏刺激访问；条理清晰的功能介绍引导阅览；知名企业的客户案例增强信任；完善的产品详情页促进转化。

以上是我们团队对这次改版的总结，希望能够给设计师朋友们提供一些参考价值。首页欣赏：

点击使用 CODING 2.0

体验 DevOps 全工具链敏捷研发

目前尚无回复

Coding 官网首屏排版

CODING 2.0：如何通过设计给品牌创造价值？

升级背景

设计挑战

如何设计好看又能创造品牌价值的官网？

总结