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