全球領(lǐng)先的重直云計算大數(shù)據(jù)服務(wù)商海馬云官方網(wǎng)站設(shè)計

全球領(lǐng)先的重直云計算大數(shù)據(jù)服務(wù)商海馬云官方網(wǎng)站設(shè)計

前端開發(fā) | 圖標(biāo)設(shè)計 | 交互設(shè)計 | 界面設(shè)計

交互設(shè)計 | 前端 | 圖標(biāo) | 界面設(shè)計

北京海譽(yù)動想科技股份有限公司是國內(nèi)專注于ARM架構(gòu)云計算平臺的公司,全球領(lǐng)先的垂直云計算和內(nèi)容大數(shù)據(jù)服務(wù)提供商。公司擁有全球最大的ARM架構(gòu)垂直云計算平臺,總體物理部署規(guī)模超過7000臺服務(wù)器。公司于2015年獲國家高新技術(shù)企業(yè)認(rèn)定,現(xiàn)有員工近300人,70%為產(chǎn)品研發(fā)人員,核心團(tuán)隊行業(yè)經(jīng)驗平均超過15年,提交申請及獲得授權(quán)專利30余項。

本次藍(lán)藍(lán)設(shè)計主要負(fù)責(zé)海馬云官網(wǎng)的視覺設(shè)計,頁面開發(fā)開發(fā)設(shè)計。此次項目需要適配至PC端,pad端和手機(jī)端。藍(lán)藍(lán)設(shè)計人員經(jīng)歷了前期溝通,競品分析,web端主視覺設(shè)計,pad端主視覺設(shè)計,手機(jī)端主視覺設(shè)計,banner設(shè)計,網(wǎng)站頁面開發(fā)采用,測試后最終圓滿完成該項目。

網(wǎng)頁鏈接:http://www.haimacloud.com

首頁web端和手機(jī)端

海馬云官網(wǎng)是一個企業(yè)官網(wǎng),其主要作用是對企業(yè)業(yè)務(wù)進(jìn)行展示和引導(dǎo)客戶填寫資料,并回訪聯(lián)系。我們在充分了解現(xiàn)有網(wǎng)站基礎(chǔ)上,針對目前網(wǎng)站存在的一些問題進(jìn)行優(yōu)化設(shè)計,最終產(chǎn)出如下效果圖。

客戶在新版頁面還新增了幾個模塊:
  • 1.云節(jié)點(diǎn)全國示意圖
  • 2.業(yè)務(wù)模塊快速入口
  • 3.行業(yè)熱點(diǎn)資訊
根據(jù)以上需求的修改,我們最終輸出右側(cè)視覺效果圖。
網(wǎng)站改版前,存在以下幾個問題:
  • 1.網(wǎng)站插畫配色與banner等配色不搭,整體來看,顯得較為突兀。
  • 2.網(wǎng)站主色調(diào)為青綠色,與logo等品牌色不統(tǒng)一,客戶瀏覽網(wǎng)站時不容易產(chǎn)生品牌認(rèn)同感。
  • 3.版面比例不協(xié)調(diào),文字字號對比度過大,不利于用戶瀏覽閱讀。
針對以上問題,我們列出了如下改版思路:
  • 1 .減少banner,插畫等的色差,盡量是二者保持統(tǒng)一,減少頁面突兀感
  • 2.統(tǒng)一網(wǎng)站品牌主色調(diào),從logo中提取網(wǎng)站主色調(diào),增強(qiáng)用戶瀏覽網(wǎng)頁時的品牌認(rèn)知度。
  • 3.調(diào)整版面比例,根據(jù)內(nèi)容重新劃分版面,同時加入部分操作動效,區(qū)分可操作版面和信息展示版面,使頁面布局更加清晰,合理。
  • 4.考慮到適配手機(jī)端和pad端,頁面元素盡可能地少,布局每個元素時,都要考慮到其他端顯示效果。
海馬云響應(yīng)式網(wǎng)站設(shè)計

內(nèi)容巡檢頁

海馬云響應(yīng)式網(wǎng)站設(shè)計

設(shè)計過程

在最初設(shè)計中,我們先設(shè)計了 幾個不同風(fēng)格的首頁視覺稿,深色配色較為符合大數(shù)據(jù)行業(yè)專業(yè),前沿科技,海量信息等特點(diǎn),且界面較為整體,但是考慮到使用場景多為白天用戶瀏覽使用,不太適合深色背景,因此放棄該版本,選擇淺色背景版本。

海馬云響應(yīng)式網(wǎng)站設(shè)計

banner設(shè)計

在確定了整體風(fēng)格之后,我們開始進(jìn)行二級頁面及banner設(shè)計,二級頁面為公司業(yè)務(wù)說明頁面,排版相對固定;為了突出客戶產(chǎn)品專業(yè),專注的產(chǎn)品特征,我們對頁面banner,圖標(biāo)進(jìn)行了專門繪制,在突出產(chǎn)品特點(diǎn)的基礎(chǔ)上,強(qiáng)調(diào)頁面的和諧統(tǒng)一。具體設(shè)計過程如下:

在banner設(shè)計過程中,我們進(jìn)行了多次改版,最初提交客戶的版本中,設(shè)計風(fēng)格較為多樣,不同板塊有不同設(shè)計風(fēng)格,較為雜亂,且顏色不統(tǒng)一。針對客戶提出的問題,我們進(jìn)行了修改,最終產(chǎn)出客戶滿意的banner。

修改前 修改后
海馬云響應(yīng)式網(wǎng)站banner設(shè)計

修改后部分Banner展示

列表頁面設(shè)計

icon

在icon設(shè)計過程中,我們前期的思路是用不同顏色來營造多彩,靈動的氛圍,但是這種中設(shè)計思路雖然能為頁面增加設(shè)計感和氛圍,但是并符合大數(shù)據(jù)行業(yè)專業(yè),一絲不茍的特點(diǎn),因此,我們準(zhǔn)備重新開工,全部重新繪制符合行業(yè)要求的圖標(biāo)。

修改前 修改后
列表頁面設(shè)計

其他內(nèi)容展示

智能投研web端 智能投研手機(jī)端 其它設(shè)計稿頁面01
其它頁面 其它頁面手機(jī)端 其它設(shè)計稿頁面01

  返回