學(xué)網(wǎng)頁！看全世界的鋼鐵公司是怎么設(shè)計(jì)官網(wǎng)的！

公司官網(wǎng)是直接面向用戶的一個(gè)窗口，能在用戶印象中發(fā)揮很大作用，對(duì)公司來說是一個(gè)重要的展示平臺(tái)。好的網(wǎng)站自然能給用戶一個(gè)好印象，甚至能幫公司增值。

　　很多傳統(tǒng)行業(yè)目前正在面臨轉(zhuǎn)型，開始在線上尋求新的發(fā)展機(jī)遇，并通過網(wǎng)站改版升級(jí)提高競(jìng)爭(zhēng)力。

　　本文將從行業(yè)中的網(wǎng)頁設(shè)計(jì)角度，與大家分享幾個(gè)國(guó)內(nèi)外著名鋼鐵公司的網(wǎng)站案例。從案例中大家將會(huì)發(fā)現(xiàn)，即使在同一個(gè)行業(yè)里，國(guó)內(nèi)外網(wǎng)站的設(shè)計(jì)也存在著很大差異，希望這些分享能給設(shè)計(jì)師們帶來一些靈感。

　　提到鋼鐵行業(yè)的公司網(wǎng)站，一些人的腦海中可能瞬間浮現(xiàn)傳統(tǒng)網(wǎng)站的常見樣式，特征主要是各網(wǎng)站相似程度高，給人感覺使用了同一個(gè)模板做出來的，顯得過時(shí)、保守。

　　是否真的是這樣?我們先看國(guó)外鋼鐵行業(yè)網(wǎng)站案例。

　　1、Posco

　　韓國(guó)浦項(xiàng)制鐵公司的官網(wǎng)是一個(gè)響應(yīng)式網(wǎng)站，網(wǎng)站的首頁以全屏滾動(dòng)方式展現(xiàn)內(nèi)容。

　　首頁的部分版塊加入了一些交互效果，比如下圖鼠標(biāo)懸停時(shí)圖標(biāo)被藍(lán)色填充。

　　下圖鼠標(biāo)懸停時(shí)在圖片上出現(xiàn)文字信息：

　　整個(gè)網(wǎng)站頁面排版布局形式較多，在層級(jí)多的情況下顯得很豐富。

　　并且該網(wǎng)站在細(xì)節(jié)處理上很到位，比如PC端導(dǎo)航有兩個(gè)入口，一個(gè)是按照欄目分類，屬于常規(guī)水平導(dǎo)航，另一個(gè)是漢堡圖標(biāo)，點(diǎn)擊后獲得完整詳情頁入口展示，可以快速找到想要的信息，給用戶較好的體驗(yàn)。

　　點(diǎn)擊漢堡圖標(biāo)的效果：

　　網(wǎng)站的整體風(fēng)格比較統(tǒng)一，其中線形矢量圖和圖標(biāo)的使用，是網(wǎng)站的又一個(gè)亮點(diǎn)。

　　2、Nssmc

　　新日鐵住金是鋼產(chǎn)量世界第二的公司。該網(wǎng)站的Banner圖和大號(hào)文字搭配，具有視覺沖擊力。

　　導(dǎo)航中的公司Logo位于導(dǎo)航中間，正好區(qū)分6個(gè)導(dǎo)航欄目， 而Logo中的圖形本身具有對(duì)稱性，這種導(dǎo)航樣式在視覺上有一種平衡美。

　　首頁滑動(dòng)鼠標(biāo)，內(nèi)容滾動(dòng)式緩緩向上，上下背景圖片具有交錯(cuò)感，有較好的視覺效果。

　　但該網(wǎng)站內(nèi)容頁設(shè)計(jì)卻比較保守，內(nèi)頁設(shè)計(jì)都偏傳統(tǒng)，與首頁的風(fēng)格存在非常大的差異，這會(huì)讓用戶在瀏覽中產(chǎn)生疑慮，甚至以為屬于不同的網(wǎng)站。如下圖的內(nèi)容頁設(shè)計(jì)：

　　從該網(wǎng)站可以看出，一個(gè)網(wǎng)站首頁和內(nèi)頁設(shè)計(jì)風(fēng)格的一致性是設(shè)計(jì)師需要考慮和注意的一個(gè)重要問題。

　　3、Tata Steel

　　塔塔鋼鐵公司屬于印度塔塔集團(tuán)旗下。該網(wǎng)站采用了藍(lán)色系，整體風(fēng)格偏扁平化。

　　網(wǎng)站在導(dǎo)航設(shè)計(jì)上有一個(gè)亮點(diǎn)，鼠標(biāo)懸停時(shí)的下拉設(shè)計(jì)采用圖文混合形式，視覺上比較清晰，能更好吸引用戶。

　　缺陷也很明顯：雖然首頁第一眼看起來很簡(jiǎn)潔，但內(nèi)容形式比較單一。比如下圖中，內(nèi)容頁左右布局，左導(dǎo)航加右側(cè)的形式讓人感覺很單調(diào)，并且網(wǎng)站整體交互較少，內(nèi)容和樣式都不豐富，因此顯得空洞。

　　而右上角的集團(tuán)Logo點(diǎn)擊后跳轉(zhuǎn)進(jìn)入另一個(gè)網(wǎng)站，容易與左上角快速回到首頁的Logo設(shè)置混淆。

　　4、Outokumpu

　　奧托昆普網(wǎng)站的首頁設(shè)計(jì)在視覺上顯得比較大氣，Banner通欄，與二級(jí)導(dǎo)航搭配在一起，展示了一定的層次。

　　該網(wǎng)站各個(gè)頁面設(shè)計(jì)風(fēng)格統(tǒng)一，圖文結(jié)合的布局比較一致，讓整個(gè)網(wǎng)站保持一種整體性，瀏覽效果比較不錯(cuò)。

　　大量圖片的排版布局保證了視覺效果，但同樣存在問題，比如打開頁面時(shí)，多個(gè)大背景圖容易造成圖片加載速度緩慢的問題，影響用戶瀏覽時(shí)的體驗(yàn)。另外，某些Banner圖中的色塊顏色偏重，看上去像貼在圖片上，缺乏融合感。

　　5、Thyssenkrupp

　　蒂森克虜伯官網(wǎng)屬于典型的扁平化風(fēng)格，網(wǎng)站設(shè)計(jì)展現(xiàn)了一種鮮明的“科技感”，Banner中的圖、藍(lán)色的色塊和大號(hào)文字搭配起來富有吸引力，能在第一時(shí)間抓住人的眼球。

　　下面版塊中的藍(lán)色色塊起到圖片的作用，可以更好地傳達(dá)文字信息。

　　該網(wǎng)站內(nèi)容頁的設(shè)計(jì)是常規(guī)的布局方式，略顯單調(diào)。整個(gè)網(wǎng)站過度扁平化，缺少特色，而且?guī)缀鯖]有交互效果，讓整個(gè)網(wǎng)站缺乏活力。如下圖的內(nèi)頁設(shè)計(jì)：

　　6、USS

　　與前面幾個(gè)網(wǎng)站相比，美國(guó)鋼鐵公司網(wǎng)站顯得最傳統(tǒng)。

　　首頁的灰色顯得很沉悶，而且各個(gè)頁面的圖片相對(duì)較少，欠缺吸引力。

　　整個(gè)網(wǎng)站看起來還是幾年前的網(wǎng)站樣式，內(nèi)容單一，不符合目前網(wǎng)站的主流趨勢(shì)。

　　7、AK Steel

　　眾多鋼鐵公司的網(wǎng)站主色采用了藍(lán)色系，AK鋼鐵公司網(wǎng)站則顯得與眾不同。AK鋼鐵公司網(wǎng)站采用了玫紅色，是由于其Logo是玫紅色。

　　該網(wǎng)站主色與Logo顏色保持一致，顯得活潑。首頁的小圖片組合設(shè)計(jì)展現(xiàn)了一種小創(chuàng)意。

　　網(wǎng)站導(dǎo)航中有一個(gè)欄目單獨(dú)成一行，與后面色塊沖突，顯得突兀，在視覺上不美觀。

　　而且當(dāng)鼠標(biāo)懸停時(shí)，下拉出現(xiàn)了文字重疊，影響瀏覽效果。

　　網(wǎng)站整體設(shè)計(jì)仍然屬于傳統(tǒng)風(fēng)格，除了詳情頁大量文字的擁擠排版，缺乏圖片搭配等，很多細(xì)節(jié)處理上還存在一些問題，導(dǎo)致整體視覺體驗(yàn)欠佳。如下圖中圖片和文字缺乏融合，整體顯得單調(diào)的內(nèi)容排版：

　　國(guó)內(nèi)鋼鐵行業(yè)網(wǎng)站有一個(gè)典型特征，即在整體風(fēng)格上趨近，使用擬物化設(shè)計(jì)風(fēng)格，多用灰色背景，大量采用高光、漸變或陰影。

　　這種設(shè)計(jì)風(fēng)格的網(wǎng)站屬于傳統(tǒng)風(fēng)格，可能在降低認(rèn)知學(xué)習(xí)成本上有一定優(yōu)勢(shì)，但大量擬物化的設(shè)計(jì)很容易造成審美疲勞，并讓網(wǎng)站看起來很呆板。

　　不過我們也能學(xué)習(xí)到其中的一些小亮點(diǎn)。

　　8、BaoSteel

　　寶鋼集團(tuán)有限公司官網(wǎng)導(dǎo)航背景色采用與Logo色一致的藍(lán)色，除了Banner圖的紅色，內(nèi)頁的整體顏色搭配看起來比較舒適。

　　內(nèi)頁顏色搭配：

　　水平導(dǎo)航下拉設(shè)計(jì)屬于典型的擬物化風(fēng)格，這部分內(nèi)容雖然顯得突出形象，但是與側(cè)導(dǎo)航的扁平化風(fēng)格形成沖突，在視覺上顯得復(fù)雜。

　　該網(wǎng)站在細(xì)節(jié)處理上還有一些需要優(yōu)化的地方，比如風(fēng)格不統(tǒng)一。如下圖中，同為搜索框，上面的搜索圖標(biāo)采用了擬物化設(shè)計(jì)，下面的搜索圖標(biāo)則采用了扁平化設(shè)計(jì)。

　　9、WISCO

　　與美國(guó)AK鋼鐵公司案例相比(玫紅色)，武漢鋼鐵集團(tuán)公司官網(wǎng)也應(yīng)用了企業(yè)自身Logo的紅色。

　　但武鋼官網(wǎng)與美國(guó)AK鋼鐵公司網(wǎng)站有所不同，武鋼Logo的紅色在網(wǎng)站中是作為輔助色，而不是主色。

　　武鋼網(wǎng)站以灰色作為主色，整體看起來顯得比較沉悶。

　　該網(wǎng)站設(shè)計(jì)也采用了擬物化風(fēng)格，比如背景、導(dǎo)航和各欄目的漸變與高光效果。

　　從布局和圖片來看，網(wǎng)站整體看起來中規(guī)中矩，看起來很古板，顯得不靈活。

　　該網(wǎng)站展示了公司出版物，是其中一個(gè)特色。如果能在交互上做一些優(yōu)化，可以為網(wǎng)站增色。

　　10、ShouGang Group

　　首鋼集團(tuán)網(wǎng)站采用藍(lán)色，圖片和文字整體的搭配，有一種清新的感覺，但網(wǎng)站仍然屬于傳統(tǒng)風(fēng)格。

　　網(wǎng)站的詳情頁有一些排版不合理，比如圖片不清晰、文字太小看不清楚、文字排版擁擠，整體瀏覽和用戶體驗(yàn) 欠佳。

　　11、HBIS

　　河鋼集團(tuán)公司旗下有很多分公司。此網(wǎng)站的傳統(tǒng)風(fēng)格看起來像10年前的網(wǎng)站樣式，在內(nèi)容和布局上毫無亮點(diǎn)。

　　河鋼近兩年在世界鋼鐵行業(yè)排名靠前，但網(wǎng)站只是展現(xiàn)企業(yè)基本情況，并沒有屬于自己的特色。與作為大企業(yè)所具備的實(shí)力相比，網(wǎng)站顯得過時(shí)、落后。

　　12、AnSteel

　　鞍鋼集團(tuán)的官網(wǎng)與前幾個(gè)國(guó)內(nèi)案例相比有很大的改善，網(wǎng)站雖然仍然采用了擬物化設(shè)計(jì)風(fēng)格，比如導(dǎo)航和各欄目名稱部分等，不過在細(xì)節(jié)處理上顯得比較自然。

　　而且該網(wǎng)站的配色合理，整站色彩搭配和圖文排版看起來比較統(tǒng)一。如下圖，展現(xiàn)出網(wǎng)站較好的的整體視覺效果。

　　網(wǎng)站內(nèi)頁：

　　該網(wǎng)站也存在一些問題，比如二維碼拉伸變形、圖片變形不清晰等，會(huì)影響用戶體驗(yàn) 。

　　以上就是此次分享的案例，后期我們會(huì)根據(jù)實(shí)際情況再進(jìn)行案例補(bǔ)充與分析。

　　從目前收集的案例來看，我們可以初步總結(jié)出鋼鐵行業(yè)網(wǎng)站一些普遍特征：鋼鐵行業(yè)大部分網(wǎng)站以藍(lán)色為主色(或者灰色、Logo色);

　　網(wǎng)站設(shè)計(jì)風(fēng)格大致分為兩種，一種是傳統(tǒng)風(fēng)格;另一種符合近幾年網(wǎng)頁設(shè)計(jì) 趨勢(shì)，也相對(duì)注重視覺和交互效果。

　　從整體來說，國(guó)內(nèi)鋼鐵公司網(wǎng)站的設(shè)計(jì)更傾向于傳統(tǒng)風(fēng)格，顯得過時(shí)落后，不過也開始有企業(yè)關(guān)注企業(yè)轉(zhuǎn)型和網(wǎng)站改版;國(guó)外鋼鐵公司的網(wǎng)站雖然也有一些傳統(tǒng)網(wǎng)站，但總體來說比較注重視覺效果和公司形象展現(xiàn)，而且整個(gè)行業(yè)對(duì)公司網(wǎng)站的關(guān)注相比國(guó)內(nèi)早。

　　了解到這些信息后，設(shè)計(jì)師面對(duì)鋼鐵行業(yè)的客戶可以參考行業(yè)案例，并根據(jù)客戶的公司戰(zhàn)略及業(yè)務(wù)需求，有針對(duì)性地深入研究，設(shè)計(jì)出符合客戶需求的網(wǎng)站就更容易了。