北京海譽(yù)動(dòng)想科技股份有限公司是國(guó)內(nèi)專注于ARM架構(gòu)云計(jì)算平臺(tái)的公司，全球領(lǐng)先的垂直云計(jì)算和內(nèi)容大數(shù)據(jù)服務(wù)提供商。公司擁有全球最大的ARM架構(gòu)垂直云計(jì)算平臺(tái)，總體物理部署規(guī)模超過(guò)7000臺(tái)服務(wù)器。公司于2015年獲國(guó)家高新技術(shù)企業(yè)認(rèn)定，現(xiàn)有員工近300人，70%為產(chǎn)品研發(fā)人員，核心團(tuán)隊(duì)行業(yè)經(jīng)驗(yàn)平均超過(guò)15年，提交申請(qǐng)及獲得授權(quán)專利30余項(xiàng)。
本次藍(lán)藍(lán)設(shè)計(jì)主要負(fù)責(zé)海馬云官網(wǎng)的視覺(jué)設(shè)計(jì)，頁(yè)面開(kāi)發(fā)開(kāi)發(fā)設(shè)計(jì)。此次項(xiàng)目需要適配至PC端，pad端和手機(jī)端。藍(lán)藍(lán)設(shè)計(jì)人員經(jīng)歷了前期溝通，競(jìng)品分析，web端主視覺(jué)設(shè)計(jì)，pad端主視覺(jué)設(shè)計(jì)，手機(jī)端主視覺(jué)設(shè)計(jì)，banner設(shè)計(jì)，網(wǎng)站頁(yè)面開(kāi)發(fā)采用，測(cè)試后最終圓滿完成該項(xiàng)目。網(wǎng)頁(yè)鏈接：http://www.haimacloud.com
首頁(yè)web端和手機(jī)端
海馬云官網(wǎng)是一個(gè)企業(yè)官網(wǎng)，其主要作用是對(duì)企業(yè)業(yè)務(wù)進(jìn)行展示和引導(dǎo)客戶填寫(xiě)資料，并回訪聯(lián)系。我們?cè)诔浞至私猬F(xiàn)有網(wǎng)站基礎(chǔ)上，針對(duì)目前網(wǎng)站存在的一些問(wèn)題進(jìn)行優(yōu)化設(shè)計(jì)，最終產(chǎn)出如下效果圖。
客戶在新版頁(yè)面還新增了幾個(gè)模塊：
- 1.云節(jié)點(diǎn)全國(guó)示意圖
- 2.業(yè)務(wù)模塊快速入口
- 3.行業(yè)熱點(diǎn)資訊
網(wǎng)站改版前，存在以下幾個(gè)問(wèn)題：
- 1.網(wǎng)站插畫(huà)配色與banner等配色不搭，整體來(lái)看，顯得較為突兀。
- 2.網(wǎng)站主色調(diào)為青綠色，與logo等品牌色不統(tǒng)一，客戶瀏覽網(wǎng)站時(shí)不容易產(chǎn)生品牌認(rèn)同感。
- 3.版面比例不協(xié)調(diào)，文字字號(hào)對(duì)比度過(guò)大，不利于用戶瀏覽閱讀。
針對(duì)以上問(wèn)題，我們列出了如下改版思路：
- 1 .減少banner，插畫(huà)等的色差，盡量是二者保持統(tǒng)一，減少頁(yè)面突兀感
- 2.統(tǒng)一網(wǎng)站品牌主色調(diào)，從logo中提取網(wǎng)站主色調(diào)，增強(qiáng)用戶瀏覽網(wǎng)頁(yè)時(shí)的品牌認(rèn)知度。
- 3.調(diào)整版面比例，根據(jù)內(nèi)容重新劃分版面，同時(shí)加入部分操作動(dòng)效，區(qū)分可操作版面和信息展示版面，使頁(yè)面布局更加清晰，合理。
- 4.考慮到適配手機(jī)端和pad端，頁(yè)面元素盡可能地少，布局每個(gè)元素時(shí)，都要考慮到其他端顯示效果。
內(nèi)容巡檢頁(yè)
設(shè)計(jì)過(guò)程
在最初設(shè)計(jì)中，我們先設(shè)計(jì)了 幾個(gè)不同風(fēng)格的首頁(yè)視覺(jué)稿，深色配色較為符合大數(shù)據(jù)行業(yè)專業(yè)，前沿科技，海量信息等特點(diǎn)，且界面較為整體，但是考慮到使用場(chǎng)景多為白天用戶瀏覽使用，不太適合深色背景，因此放棄該版本，選擇淺色背景版本。
banner設(shè)計(jì)
在確定了整體風(fēng)格之后，我們開(kāi)始進(jìn)行二級(jí)頁(yè)面及banner設(shè)計(jì)，二級(jí)頁(yè)面為公司業(yè)務(wù)說(shuō)明頁(yè)面，排版相對(duì)固定；為了突出客戶產(chǎn)品專業(yè)，專注的產(chǎn)品特征，我們對(duì)頁(yè)面banner，圖標(biāo)進(jìn)行了專門繪制，在突出產(chǎn)品特點(diǎn)的基礎(chǔ)上，強(qiáng)調(diào)頁(yè)面的和諧統(tǒng)一。具體設(shè)計(jì)過(guò)程如下：
在banner設(shè)計(jì)過(guò)程中，我們進(jìn)行了多次改版，最初提交客戶的版本中，設(shè)計(jì)風(fēng)格較為多樣，不同板塊有不同設(shè)計(jì)風(fēng)格，較為雜亂，且顏色不統(tǒng)一。針對(duì)客戶提出的問(wèn)題，我們進(jìn)行了修改，最終產(chǎn)出客戶滿意的banner。
修改前
修改后
修改后部分Banner展示
icon
在icon設(shè)計(jì)過(guò)程中，我們前期的思路是用不同顏色來(lái)營(yíng)造多彩，靈動(dòng)的氛圍，但是這種中設(shè)計(jì)思路雖然能為頁(yè)面增加設(shè)計(jì)感和氛圍，但是并符合大數(shù)據(jù)行業(yè)專業(yè)，一絲不茍的特點(diǎn)，因此，我們準(zhǔn)備重新開(kāi)工，全部重新繪制符合行業(yè)要求的圖標(biāo)。
修改前
修改后
其他內(nèi)容展示
智能投研web端
智能投研手機(jī)端
其它頁(yè)面
其它頁(yè)面手機(jī)端
設(shè)計(jì)作品網(wǎng)站設(shè)計(jì)
知識(shí)產(chǎn)權(quán)出版社原創(chuàng)認(rèn)證保護(hù)平臺(tái)網(wǎng)站設(shè)計(jì)
設(shè)計(jì)作品網(wǎng)站設(shè)計(jì)
設(shè)計(jì)作品網(wǎng)站設(shè)計(jì)
中國(guó)電子長(zhǎng)沙智能制造大數(shù)據(jù)平臺(tái)網(wǎng)站設(shè)計(jì)
設(shè)計(jì)作品網(wǎng)站設(shè)計(jì)
