升級背景
伴隨着 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 升級資訊：
《CODING 2.0 企業級持續交付解決方案》
《CODING 2.0：爲什麼我們需要 DevOps》
《CODING 2.0 服務升級：一站式服務體系助力企業研發上雲》
點擊使用 CODING 2.0
體驗 DevOps 全工具鏈敏捷研發