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 全工具鏈敏捷研發