科達(dá)制造
上市公司官網(wǎng)改版升級(jí),打造全新形象,彰顯行業(yè)領(lǐng)先地位
已上線,網(wǎng)址在文章底部

- 服務(wù)類別:網(wǎng)頁設(shè)計(jì)/數(shù)字營銷推廣
項(xiàng)目背景
科達(dá)制造一舉實(shí)現(xiàn)“陶機(jī)裝備國產(chǎn)化”、“做世界建材裝備行業(yè)的強(qiáng)者”的歷史目標(biāo),成長為我國乃至世界陶瓷機(jī)械行業(yè)的龍頭企業(yè)。為了樹立公司在行業(yè)中的專業(yè)性和領(lǐng)導(dǎo)地位,希望通過新的官網(wǎng)平臺(tái)來傳遞科達(dá)制造的企業(yè)形象,提升品牌調(diào)性,吸引潛在客戶與公司建立聯(lián)系。
舊版官網(wǎng)問題
分析調(diào)研
-
01品牌調(diào)性不足,缺少品牌色調(diào)以及符號(hào)標(biāo)識(shí),用戶難以建立統(tǒng)一心智;x
-
02設(shè)計(jì)陳舊、信息結(jié)構(gòu)混亂,用戶難以找到需要的信息,導(dǎo)致用戶體驗(yàn)不佳x
-
03不支持響應(yīng)式設(shè)計(jì)和移動(dòng)優(yōu)化,導(dǎo)致在手機(jī)或平板上瀏覽時(shí)顯示效果不佳x
-
04CTA設(shè)置較少,“行動(dòng)召喚”不明顯,交互效果單調(diào),獲客轉(zhuǎn)化率不高x

舊版官網(wǎng)截圖
新版官網(wǎng)建站方案
在與客戶進(jìn)行詳細(xì)的需求探討后,我們重新梳理了網(wǎng)站內(nèi)容邏輯、功能訴求、視覺風(fēng)格,明確了此次項(xiàng)目的目標(biāo) :
運(yùn)用“庖丁解?!彼季S模式將網(wǎng)站建設(shè)分解為五大層,掌控全局、思路更清晰、執(zhí)行更高效:
-
架構(gòu)層Visual layer整體的欄目框架——就像人的骨架輪廓
1、根據(jù)重點(diǎn)受眾人群梳理欄目架構(gòu);
2、頁面內(nèi)容排版布局:也就是內(nèi)容的邏輯,主要是順序和比例。
想突出哪塊內(nèi)容、占多大比例、以及順序主次 -
內(nèi)容層Visual layer內(nèi)容展示的豐富度和細(xì)節(jié)——就像人的思想、文化、談吐
圖,文,視頻,不同展現(xiàn)形式的結(jié)合,內(nèi)容細(xì)節(jié)體現(xiàn)專業(yè),素材來源解決方案,版權(quán)問題等...
-
視覺層Visual layer網(wǎng)站的風(fēng)格和調(diào)性——就像人的衣著打扮、外貌
1、品牌調(diào)性:網(wǎng)站的圖形、色彩、字體、圖片符合品牌形象;
2、網(wǎng)站版式風(fēng)格符合品牌個(gè)性和氣質(zhì)
3、體現(xiàn)行業(yè)特征,迎合受眾群體 -
營銷層Visual layer網(wǎng)站是溝通的窗口
1、設(shè)定好符合用戶體驗(yàn)溝通順序,優(yōu)化訪問路徑,讓用戶能自然的按圖索驥
2、友好的交互效果,提升閱讀的舒適度,增添瀏覽過程中的樂趣性。 -
技術(shù)層Visual layer兼容、速度、安全、易用
匹配不同設(shè)備,兼容各大主流機(jī)型,使用戶體驗(yàn)感更佳;
速度、靜態(tài)化、安全、穩(wěn)定、好用;SEO設(shè)置、后臺(tái)方便宜用。
設(shè)計(jì)說明
視覺氛圍基調(diào)
Style tonality
整站的設(shè)計(jì)風(fēng)格、色彩、排版均需要具備統(tǒng)一性,加強(qiáng)品牌符號(hào)形象

字體規(guī)范體系
font

色彩規(guī)范體系
color
-
主色
科技藍(lán) -
背景色
高級(jí)灰 -
背景色
極致白
視覺設(shè)計(jì)的功能性與可視性原則
-
01科達(dá)制造,還原業(yè)務(wù)場景我們從客戶的角度來闡述產(chǎn)品價(jià)值,統(tǒng)一配合還原真實(shí)場景呈現(xiàn),完整的 展示了全自動(dòng)化、智能化的生產(chǎn)線,突出企業(yè)核心業(yè)務(wù)競爭力,這種方式 更具說服力。
-
02簡化入口通道,快速觸達(dá)將重要的欄目置于顯眼位置,讓用戶一目了然,盡量減少用戶需要點(diǎn)擊的 次數(shù)來達(dá)到目標(biāo)頁面,可直接鏈接到關(guān)鍵頁面,避免多層級(jí)的深入瀏覽。
-
03快速聚焦的信息閱讀體驗(yàn)使用漸變色突出重要信息,讓用戶在快速瀏覽時(shí)能夠立即捕捉到關(guān)鍵點(diǎn), 將內(nèi)容分成小段落,并使用清晰的標(biāo)題和子標(biāo)題來組織信息,這樣可以幫 助用戶快速瀏覽和定位感興趣的部分。



統(tǒng)一性原則
內(nèi)容與形式的輸出
品牌基調(diào)
內(nèi)容模塊的視覺風(fēng)格和表達(dá)形式符合網(wǎng)站的定位;層級(jí)關(guān)系并列的模塊在形式上統(tǒng)一;整個(gè)網(wǎng)站的主色調(diào)、細(xì)節(jié)元素統(tǒng)一。
模塊化設(shè)計(jì)
結(jié)合科達(dá)制造的行業(yè)屬性,為了更直觀傳達(dá)品牌特性,我們進(jìn)行了取舍,從應(yīng)
用環(huán)境出發(fā),結(jié)合品牌色來呈現(xiàn)科達(dá)的整體視覺感受,并且貫穿運(yùn)用到網(wǎng)頁模
塊、內(nèi)容排版中,形成了頁面整體的統(tǒng)一
效率提升,產(chǎn)品模塊邏輯優(yōu)化
簡單高效的瀏覽順序,通過對(duì)邏輯架構(gòu)的梳理,優(yōu)化信息分層,可以讓用戶快速了解網(wǎng)站信息,降低對(duì)內(nèi)容
理解負(fù)擔(dān),減少迷失和混亂的可能性,提高用戶瀏覽、對(duì)信息吸收和選擇的效率。
01
導(dǎo)航下拉效果,懸浮設(shè)計(jì)
通過下拉菜單,可以節(jié)省空間、增強(qiáng)可視性,用戶在瀏覽的過程中可以快速地找到所需的信息或?qū)蛹?jí)

02
邏輯梳理,優(yōu)化產(chǎn)品分類層級(jí)
為每個(gè)分類層次設(shè)定一些規(guī)則和標(biāo)準(zhǔn),幫助用戶更好地理解和選擇分類,提高用戶的滿意度和使用體驗(yàn)

03
增加標(biāo)簽設(shè)計(jì),突出重點(diǎn)信息
提供清晰、易讀的排版和布局,使用戶能夠快速找到所需信息,提升轉(zhuǎn)化率,突出產(chǎn)品競爭力

企業(yè)的人文主義
通過企業(yè)文化與人才招聘,可以向公眾傳達(dá)科達(dá)人文的核心價(jià)值觀和社會(huì)責(zé)任等,有助于提升企業(yè)在社會(huì)中的認(rèn)知度和形象,通過展示科達(dá)人文的優(yōu)勢和特色,可以吸引更多潛在學(xué)生和合作伙伴的關(guān)注,這有助于增加人才招聘與合作機(jī)會(huì),為科達(dá)的人力發(fā)展提供更多的支持。
Culture

自適應(yīng)移動(dòng)端
能夠根據(jù)屏幕尺寸的變化,實(shí)現(xiàn)布局的自動(dòng)調(diào)整和重新排列,確保內(nèi)容在不同設(shè)備上都能清晰可見。這
使得用戶在使用手機(jī)、平板電腦或桌面電腦等各種設(shè)備時(shí)都能獲得良好的瀏覽體驗(yàn),有助于減少加載時(shí)
間和帶寬消耗,并提高頁面加載速度
這個(gè)案例還不錯(cuò)?您也有此需求?