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

升级背景

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

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

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

设计挑战

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

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

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

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

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

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

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

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

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

三、知名企业的客户案例加强用户信任感

这个模块里咱们将客户故事和客户 logo 墙一块儿展现，经过阅读大客户的案例故事，把用户带入不一样行业的使用场景中去。企业客户在选择产品的时候看到与本身行业匹配的大企业也选择该产品，有助于提高好感度和信任度。

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

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

总结

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

以上是咱们团队对此次改版的总结，但愿可以给设计师朋友们提供一些参考价值。
首页欣赏：

点击下方，了解更多 CODING 2.0 升级资讯：
《CODING 2.0 企业级持续交付解决方案》
《CODING 2.0：为何咱们须要 DevOps》
CODING 2.0 服务升级：一站式服务体系助力企业研发上云

点击使用 CODING 2.0

体验 DevOps 全工具链敏捷研发