@AnyForWeb_UED ：公司官網(wǎng)是直接面向用戶(hù)的一個(gè)窗口，能在用戶(hù)印象中發(fā)揮很大作用，對公司來(lái)說(shuō)是一個(gè)重要的展示平臺。好的網(wǎng)站自然能給用戶(hù)一個(gè)好印象，甚至能幫公司增值。
很多傳統行業(yè)目前正在面臨轉型，開(kāi)始在線(xiàn)上尋求新的發(fā)展機遇，并通過(guò)網(wǎng)站改版升級提高競爭力。
本文將從行業(yè)中的網(wǎng)頁(yè)設計角度，與大家分享幾個(gè)國內外著(zhù)名鋼鐵公司的網(wǎng)站案例。從案例中大家將會(huì )發(fā)現，即使在同一個(gè)行業(yè)里，國內外網(wǎng)站的設計也存在著(zhù)很大差異，希望這些分享能給設計師們帶來(lái)一些靈感。
提到鋼鐵行業(yè)的公司網(wǎng)站，一些人的腦海中可能瞬間浮現傳統網(wǎng)站的常見(jiàn)樣式，特征主要是各網(wǎng)站相似程度高，給人感覺(jué)使用了同一個(gè)模板做出來(lái)的，顯得過(guò)時(shí)、保守。
是否真的是這樣？我們先看國外鋼鐵行業(yè)網(wǎng)站案例。
韓國浦項制鐵公司的官網(wǎng)是一個(gè)響應式網(wǎng)站，網(wǎng)站的首頁(yè)以全屏滾動(dòng)方式展現內容。
首頁(yè)的部分版塊加入了一些交互效果，比如下圖鼠標懸停時(shí)圖標被藍色填充。
下圖鼠標懸停時(shí)在圖片上出現文字信息：
整個(gè)網(wǎng)站頁(yè)面排版布局形式較多，在層級多的情況下顯得很豐富。
并且該網(wǎng)站在細節處理上很到位，比如PC端導航有兩個(gè)入口，一個(gè)是按照欄目分類(lèi)，屬于常規水平導航，另一個(gè)是漢堡圖標，點(diǎn)擊后獲得完整詳情頁(yè)入口展示，可以快速找到想要的信息，給用戶(hù)較好的體驗。
點(diǎn)擊漢堡圖標的效果：
網(wǎng)站的整體風(fēng)格比較統一，其中線(xiàn)形矢量圖和圖標的使用，是網(wǎng)站的又一個(gè)亮點(diǎn)。
新日鐵住金是鋼產(chǎn)量世界第二的公司。該網(wǎng)站的Banner圖和大號文字搭配，具有視覺(jué)沖擊力。
導航中的公司Logo位于導航中間，正好區分6個(gè)導航欄目， 而Logo中的圖形本身具有對稱(chēng)性，這種導航樣式在視覺(jué)上有一種平衡美。
首頁(yè)滑動(dòng)鼠標，內容滾動(dòng)式緩緩向上，上下背景圖片具有交錯感，有較好的視覺(jué)效果。
但該網(wǎng)站內容頁(yè)設計卻比較保守，內頁(yè)設計都偏傳統，與首頁(yè)的風(fēng)格存在非常大的差異，這會(huì )讓用戶(hù)在瀏覽中產(chǎn)生疑慮，甚至以為屬于不同的網(wǎng)站。如下圖的內容頁(yè)設計：
從該網(wǎng)站可以看出，一個(gè)網(wǎng)站首頁(yè)和內頁(yè)設計風(fēng)格的一致性是設計師需要考慮和注意的一個(gè)重要問(wèn)題。
塔塔鋼鐵公司屬于印度塔塔集團旗下。該網(wǎng)站采用了藍色系，整體風(fēng)格偏扁平化。
網(wǎng)站在導航設計上有一個(gè)亮點(diǎn)，鼠標懸停時(shí)的下拉設計采用圖文混合形式，視覺(jué)上比較清晰，能更好吸引用戶(hù)。
缺陷也很明顯：雖然首頁(yè)第一眼看起來(lái)很簡(jiǎn)潔，但內容形式比較單一。比如下圖中，內容頁(yè)左右布局，左導航加右側的形式讓人感覺(jué)很單調，并且網(wǎng)站整體交互較少，內容和樣式都不豐富，因此顯得空洞。
而右上角的集團Logo點(diǎn)擊后跳轉進(jìn)入另一個(gè)網(wǎng)站，容易與左上角快速回到首頁(yè)的Logo設置混淆。
奧托昆普網(wǎng)站的首頁(yè)設計在視覺(jué)上顯得比較大氣，Banner通欄，與二級導航搭配在一起，展示了一定的層次。
該網(wǎng)站各個(gè)頁(yè)面設計風(fēng)格統一，圖文結合的布局比較一致，讓整個(gè)網(wǎng)站保持一種整體性，瀏覽效果比較不錯。
大量圖片的排版布局保證了視覺(jué)效果，但同樣存在問(wèn)題，比如打開(kāi)頁(yè)面時(shí)，多個(gè)大背景圖容易造成圖片加載速度緩慢的問(wèn)題，影響用戶(hù)瀏覽時(shí)的體驗。另外，某些Banner圖中的色塊顏色偏重，看上去像貼在圖片上，缺乏融合感。
蒂森克虜伯官網(wǎng)屬于典型的扁平化風(fēng)格，網(wǎng)站設計展現了一種鮮明的“科技感”，Banner中的圖、藍色的色塊和大號文字搭配起來(lái)富有吸引力，能在第一時(shí)間抓住人的眼球。
下面版塊中的藍色色塊起到圖片的作用，可以更好地傳達文字信息。
該網(wǎng)站內容頁(yè)的設計是常規的布局方式，略顯單調。整個(gè)網(wǎng)站過(guò)度扁平化，缺少特色，而且幾乎沒(méi)有交互效果，讓整個(gè)網(wǎng)站缺乏活力。如下圖的內頁(yè)設計：
與前面幾個(gè)網(wǎng)站相比，美國鋼鐵公司網(wǎng)站顯得最傳統。
首頁(yè)的灰色顯得很沉悶，而且各個(gè)頁(yè)面的圖片相對較少，欠缺吸引力。
整個(gè)網(wǎng)站看起來(lái)還是幾年前的網(wǎng)站樣式，內容單一，不符合目前網(wǎng)站的主流趨勢。
眾多鋼鐵公司的網(wǎng)站主色采用了藍色系，AK鋼鐵公司網(wǎng)站則顯得與眾不同。AK鋼鐵公司網(wǎng)站采用了玫紅色，是由于其Logo是玫紅色。
該網(wǎng)站主色與Logo顏色保持一致，顯得活潑。首頁(yè)的小圖片組合設計展現了一種小創(chuàng )意。
網(wǎng)站導航中有一個(gè)欄目單獨成一行，與后面色塊沖突，顯得突兀，在視覺(jué)上不美觀(guān)。
而且當鼠標懸停時(shí)，下拉出現了文字重疊，影響瀏覽效果。
網(wǎng)站整體設計仍然屬于傳統風(fēng)格，除了詳情頁(yè)大量文字的擁擠排版，缺乏圖片搭配等，很多細節處理上還存在一些問(wèn)題，導致整體視覺(jué)體驗欠佳。如下圖中圖片和文字缺乏融合，整體顯得單調的內容排版：
國內鋼鐵行業(yè)網(wǎng)站有一個(gè)典型特征，即在整體風(fēng)格上趨近，使用擬物化設計風(fēng)格，多用灰色背景，大量采用高光、漸變或陰影。
這種設計風(fēng)格的網(wǎng)站屬于傳統風(fēng)格，可能在降低認知學(xué)習成本上有一定優(yōu)勢，但大量擬物化的設計很容易造成審美疲勞，并讓網(wǎng)站看起來(lái)很呆板。
不過(guò)我們也能學(xué)習到其中的一些小亮點(diǎn)。
寶鋼集團有限公司官網(wǎng)導航背景色采用與Logo色一致的藍色，除了Banner圖的紅色，內頁(yè)的整體顏色搭配看起來(lái)比較舒適。
內頁(yè)顏色搭配：
水平導航下拉設計屬于典型的擬物化風(fēng)格，這部分內容雖然顯得突出形象，但是與側導航的扁平化風(fēng)格形成沖突，在視覺(jué)上顯得復雜。
該網(wǎng)站在細節處理上還有一些需要優(yōu)化的地方，比如風(fēng)格不統一。如下圖中，同為搜索框，上面的搜索圖標采用了擬物化設計，下面的搜索圖標則采用了扁平化設計。
與美國AK鋼鐵公司案例相比（玫紅色），武漢鋼鐵集團公司官網(wǎng)也應用了企業(yè)自身Logo的紅色。
但武鋼官網(wǎng)與美國AK鋼鐵公司網(wǎng)站有所不同，武鋼Logo的紅色在網(wǎng)站中是作為輔助色，而不是主色。
武鋼網(wǎng)站以灰色作為主色，整體看起來(lái)顯得比較沉悶。
該網(wǎng)站設計也采用了擬物化風(fēng)格，比如背景、導航和各欄目的漸變與高光效果。
從布局和圖片來(lái)看，網(wǎng)站整體看起來(lái)中規中矩，看起來(lái)很古板，顯得不靈活。
該網(wǎng)站展示了公司出版物，是其中一個(gè)特色。如果能在交互上做一些優(yōu)化，可以為網(wǎng)站增色。
首鋼集團網(wǎng)站采用藍色，圖片和文字整體的搭配，有一種清新的感覺(jué)，但網(wǎng)站仍然屬于傳統風(fēng)格。
網(wǎng)站的詳情頁(yè)有一些排版不合理，比如圖片不清晰、文字太小看不清楚、文字排版擁擠，整體瀏覽和用戶(hù)體驗欠佳。
河鋼集團公司旗下有很多分公司。此網(wǎng)站的傳統風(fēng)格看起來(lái)像10年前的網(wǎng)站樣式，在內容和布局上毫無(wú)亮點(diǎn)。
河鋼近兩年在世界鋼鐵行業(yè)排名靠前，但網(wǎng)站只是展現企業(yè)基本情況，并沒(méi)有屬于自己的特色。與作為大企業(yè)所具備的實(shí)力相比，網(wǎng)站顯得過(guò)時(shí)、落后。
鞍鋼集團的官網(wǎng)與前幾個(gè)國內案例相比有很大的改善，網(wǎng)站雖然仍然采用了擬物化設計風(fēng)格，比如導航和各欄目名稱(chēng)部分等，不過(guò)在細節處理上顯得比較自然。
而且該網(wǎng)站的配色合理，整站色彩搭配和圖文排版看起來(lái)比較統一。如下圖，展現出網(wǎng)站較好的的整體視覺(jué)效果。
網(wǎng)站內頁(yè)：
該網(wǎng)站也存在一些問(wèn)題，比如二維碼拉伸變形、圖片變形不清晰等，會(huì )影響用戶(hù)體驗。
以上就是此次分享的案例，后期我們會(huì )根據實(shí)際情況再進(jìn)行案例補充與分析。
從目前收集的案例來(lái)看，我們可以初步總結出鋼鐵行業(yè)網(wǎng)站一些普遍特征：鋼鐵行業(yè)大部分網(wǎng)站以藍色為主色（或者灰色、Logo色）；
網(wǎng)站設計風(fēng)格大致分為兩種，一種是傳統風(fēng)格；另一種符合近幾年網(wǎng)頁(yè)設計趨勢，也相對注重視覺(jué)和交互效果。
從整體來(lái)說(shuō)，國內鋼鐵公司網(wǎng)站的設計更傾向于傳統風(fēng)格，顯得過(guò)時(shí)落后，不過(guò)也開(kāi)始有企業(yè)關(guān)注企業(yè)轉型和網(wǎng)站改版；國外鋼鐵公司的網(wǎng)站雖然也有一些傳統網(wǎng)站，但總體來(lái)說(shuō)比較注重視覺(jué)效果和公司形象展現，而且整個(gè)行業(yè)對公司網(wǎng)站的關(guān)注相比國內早。
了解到這些信息后，設計師面對鋼鐵行業(yè)的客戶(hù)可以參考行業(yè)案例，并根據客戶(hù)的公司戰略及業(yè)務(wù)需求，有針對性地深入研究，設計出符合客戶(hù)需求的網(wǎng)站就更容易了。
投稿者：ued.anyforweb
【優(yōu)設網(wǎng) 原創(chuàng )文章 投稿郵箱：2650232288@qq.com】
聯(lián)系客服
