石家莊集團(tuán)企業(yè)網(wǎng)站建設(shè)改變網(wǎng)頁(yè)設(shè)計(jì)的面貌：25年的案例研究在萬(wàn)維網(wǎng)慶祝3月11日2014年和它的進(jìn)化過(guò)程中其25歲生日，網(wǎng)頁(yè)設(shè)計(jì)也是先進(jìn)的跨越式發(fā)展。我們不再需要忍受無(wú)休止的笨拙文本和低分辨率圖像。
如今，信息豐富，創(chuàng)新且易于導(dǎo)航的網(wǎng)站是如此普遍，以至于您可能已經(jīng)忘記了1990年代的網(wǎng)站。
那么，讓我們來(lái)看看三大品牌的網(wǎng)站，它是怎么回來(lái)那么，他們現(xiàn)在怎么看，對(duì)究竟是如何網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)改變了多年來(lái)。他們經(jīng)歷的旅程可能會(huì)為您自己的網(wǎng)站設(shè)計(jì)歷程帶來(lái)一些靈感。
推薦讀物： 網(wǎng)頁(yè)設(shè)計(jì)– 2014年值得關(guān)注的20個(gè)最熱門趨勢(shì)
蘋果
我們回顧一下Wayback Machine提供的數(shù)十年來(lái)蘋果的主頁(yè)設(shè)計(jì)。
1997年
對(duì)此有利的是，1997年的Apple網(wǎng)站設(shè)計(jì)包括徽標(biāo)，簡(jiǎn)潔的信息，并且左側(cè)有清晰的導(dǎo)航欄。但是，它不具備我們今天與Apple相關(guān)的能力；字體非常基本，側(cè)邊欄占用大量空間，分散了觀眾的注意力，整個(gè)設(shè)計(jì)很擁擠。
蘋果1997
1999年– 2002年
然后，蘋果公司創(chuàng)建了一個(gè)專業(yè)的網(wǎng)頁(yè)首頁(yè)設(shè)計(jì)，這種網(wǎng)站簡(jiǎn)直令人難忘，它構(gòu)成 了所有未來(lái)設(shè)計(jì)的基礎(chǔ)。它以醒目的橫幅照片為特色，并輔以以下一些精選圖片。
無(wú)論是最新產(chǎn)品還是滿意的客戶，這些中的每一個(gè)都最大程度地利用了空白。一個(gè)簡(jiǎn)單的頂部導(dǎo)航欄幫助訪問(wèn)者輕松找到他們喜歡的產(chǎn)品。
蘋果1999
蘋果2000
蘋果2001
蘋果2002
2003年– 2006年
在此期間，整潔的設(shè)計(jì)得以保留，但蘋果也開(kāi)始以黑色背景出現(xiàn)偏差。無(wú)論哪種方式，首頁(yè)的鮮明背景都非常有效地展示了產(chǎn)品。
而且使用諸如“ Introducing Mighty Mouse”之類的古怪的襯墊也反映了蘋果的大膽本性。
蘋果2003
蘋果2004
蘋果2005
蘋果2006
2007年– 2010年
2007年的首頁(yè)設(shè)計(jì)完全擺脫了下面的部分 -毫無(wú)疑問(wèn)，這樣手機(jī)可以產(chǎn)生更大的影響。這種情況在2008年和2009年一直持續(xù)，但是在2010年推出iPad時(shí)，大多數(shù)主頁(yè)都專門用于蘋果公司的最新寶貝。
蘋果2007
蘋果2008
蘋果2009
蘋果2010
2011年– 2013年
石家莊集團(tuán)企業(yè)網(wǎng)站建設(shè)主要設(shè)計(jì)元素完全沒(méi)有改變。iPad Air的2013年網(wǎng)頁(yè)設(shè)計(jì)確實(shí)值得特別提及-當(dāng)產(chǎn)品的獨(dú)特賣點(diǎn)是產(chǎn)品的纖薄性時(shí)，還有什么比這種具有異常角度的圖像更好地向全世界展示的產(chǎn)品了？
蘋果2011
蘋果2012
蘋果2013
現(xiàn)在
當(dāng)今的網(wǎng)頁(yè)設(shè)計(jì)仍然基于90年代末以來(lái)使用的簡(jiǎn)單方法。主要照片引人注目，但不再單獨(dú)顯示產(chǎn)品，而是顯示在真實(shí)人的手中。
字體是現(xiàn)代的，互補(bǔ)色的有限調(diào)色板看起來(lái)非常專業(yè)。
現(xiàn)在的蘋果
現(xiàn)在，導(dǎo)航欄已牢固地固定在頁(yè)面頂部，以簡(jiǎn)化導(dǎo)航。除了使用巧妙的詞來(lái)鼓勵(lì)點(diǎn)擊（“ 您的詩(shī)句會(huì)是什么？ ”）外，底部的四個(gè)部分還向訪問(wèn)者確切顯示可以在其中找到哪些信息，只需單擊即可訪問(wèn)。
他們做得好嗎？
他們不再關(guān)注硬賣，而更關(guān)注人們的情感和包容性故事講述的概念。希望與新網(wǎng)站產(chǎn)生類似影響的Web設(shè)計(jì)師應(yīng)使用真實(shí)的人來(lái)展示他們的產(chǎn)品。
越多的客戶可以想象自己使用該產(chǎn)品，并看到該產(chǎn)品如何使他們的生活方式受益，那么購(gòu)買該產(chǎn)品的可能性就越大。
間隙
接下來(lái)，我們來(lái)看一下時(shí)尚界的另一個(gè)主要品牌。
1997年
脫帽向設(shè)計(jì)師為獲得ACROS一個(gè)明確的信息小號(hào)，通過(guò)他們的設(shè)計(jì)。頂部導(dǎo)航欄（而不是側(cè)邊欄）為展示產(chǎn)品提供了更多空間，并且整體外觀簡(jiǎn)潔明了。
不過(guò)，不利的一面是，網(wǎng)絡(luò)設(shè)計(jì)師的提要可能實(shí)際上是在強(qiáng)調(diào)客戶可以在線購(gòu)買他們最喜歡的GAP服裝，如出現(xiàn)兩次的徽標(biāo)所示，并且“在線商店”和“在線購(gòu)物”這兩個(gè)詞都塞在一個(gè)小首頁(yè)中。 。
差距1997
2000年– 2009年
到2000年，網(wǎng)頁(yè)設(shè)計(jì)不斷發(fā)展。它顯然與GAP標(biāo)志品牌與使用的有吸引力的主要形象和適度的導(dǎo)航欄在頂部。但是隨著時(shí)間的流逝，讓我們繼續(xù)關(guān)注導(dǎo)航欄。
差距2000
差距2003
2004年，主圖像與GAP徽標(biāo)效果很好，GAP徽標(biāo)現(xiàn)在封裝在一個(gè)明亮的藍(lán)色框中，以使其更加突出。但是導(dǎo)航選項(xiàng)在哪里？通過(guò)點(diǎn)擊鏈接位于底部。絕對(duì)要倒退一步。
差距2005
導(dǎo)航欄位于2006年的主頁(yè)頂部。該公司現(xiàn)在為孩子們提供了衣服，并在照片中使用了兒童模型來(lái)說(shuō)明。在主要橫幅照片下面是4個(gè)不同的部分，用于推廣各種獎(jiǎng)勵(lì)措施。不幸的是，每個(gè)設(shè)計(jì)都沒(méi)有表現(xiàn)出任何聯(lián)系，導(dǎo)致混亂和混亂的混合，這在眼中并不容易。
差距2006
2009年，主要導(dǎo)航選項(xiàng)巧妙地放置在全新的位置- 主圖像中。在我們贊揚(yáng)創(chuàng)新設(shè)計(jì)的同時(shí)，大多數(shù)客戶希望從首頁(yè)邊緣進(jìn)行導(dǎo)航 -通常通過(guò)頂部的條形導(dǎo)航或不經(jīng)常通過(guò)左側(cè)的條形導(dǎo)航。
差距2009
客戶越難找到他們想要的東西，他們?cè)接锌赡芴鼍W(wǎng)站。
2010年– 2012年
GAP終于在2010年掌握了它。導(dǎo)航欄始終位于頁(yè)面頂部，并且一直停留在頁(yè)面頂部。2010年的網(wǎng)頁(yè)也是一個(gè)巨大的進(jìn)步，因?yàn)樗褂昧苏嬲男涯亢蜁r(shí)尚的車型精心設(shè)計(jì)的拼貼。
差距2010
石家莊集團(tuán)企業(yè)網(wǎng)站建設(shè)也許在首頁(yè)上使用更多圖片受到了訪問(wèn)者的歡迎，因?yàn)檫@在2011年和2012年的網(wǎng)頁(yè)設(shè)計(jì)中仍然存在。但是，這兩個(gè)目標(biāo)均嚴(yán)重不足。有在整體設(shè)計(jì)上沒(méi)有明確的戰(zhàn)略，這些照片沒(méi)有在一起凝膠與各種顏色被壓倒。
差距2011
差距2012
差距2013
現(xiàn)在
看來(lái)，GAP終于總結(jié)了之前的所有努力，并在一個(gè)令人愉悅的主頁(yè)上創(chuàng)建了一個(gè)網(wǎng)站，其中包含許多出色的設(shè)計(jì)元素。該網(wǎng)站旨在以其城市感覺(jué)和主要形象的選擇來(lái)吸引年輕一代。有趣的是，“住進(jìn)去”一詞分為三個(gè)部分，吸引了游客的注意。
現(xiàn)在差距
導(dǎo)航欄仍位于頁(yè)面頂部，為每種服裝提供了便捷的快捷方式，搜索功能使訪客可以找到他們真正想要的東西。購(gòu)物袋位于右上角，使客戶在頁(yè)面之間移動(dòng)時(shí)可以更輕松地計(jì)劃購(gòu)物。
他們做得好嗎？
GAP已經(jīng)經(jīng)歷了許多網(wǎng)頁(yè)設(shè)計(jì)，直到今天，但是現(xiàn)在電子商務(wù)網(wǎng)站的設(shè)計(jì)師可以很好地仿效此示例來(lái)創(chuàng)建用戶友好的在線購(gòu)買體驗(yàn)。它并不總是顯示從各個(gè)角度的產(chǎn)品; 巧妙地使用生活照片可以幫助訪問(wèn)者想象該產(chǎn)品將如何改善他們的生活。
喜力啤酒
最后，讓我們看看喜力在網(wǎng)頁(yè)設(shè)計(jì)品牌方面的表現(xiàn)。從Wayback Machine檢索到的圖像。
1997年
該網(wǎng)站在品牌塑造和吸引眼球方面運(yùn)作良好，但是通過(guò)向網(wǎng)站訪問(wèn)者提供大量按鈕和選項(xiàng)，很可能引起客戶下一步的困惑。
有沒(méi)有清晰的導(dǎo)航，太多的字體，并坦率地說(shuō)，那些直接疊加在水滴難以閱讀。
海因1997
2010年– 2012年
到2010年，喜力（Heineken）網(wǎng)頁(yè)設(shè)計(jì)已達(dá)到我們今天所追求的完美水平。乍一看，首頁(yè)看起來(lái)很簡(jiǎn)單，但是深綠色的背景將幾何形狀和有趣的，凝結(jié)著水滴的星星有效地結(jié)合在一起，并在全世界公認(rèn)的啤酒瓶旁邊。
即使在那時(shí)，非常簡(jiǎn)單的導(dǎo)航按鈕的今天趨勢(shì)仍然顯而易見(jiàn)，每個(gè)按鈕都有一個(gè)可視圖標(biāo)。
海因2010
海因2011
海因2012
2011和2012年的網(wǎng)頁(yè)設(shè)計(jì)遵循相同的清晰度公式。但是，他們還介紹了喜力公司的創(chuàng)新方法，該方法使用視頻和關(guān)聯(lián)性來(lái)吸引知名電影來(lái)幫助銷售更多啤酒！
現(xiàn)在
該網(wǎng)站上的每一頁(yè)都采用了一些很棒的獨(dú)特字體來(lái)進(jìn)行出色的設(shè)計(jì)，令人欣喜的是，自1997年以來(lái)，喜力綠色一直在不斷地被調(diào)低。網(wǎng)頁(yè)非常整潔，絕對(duì)是簡(jiǎn)約的。
現(xiàn)在
然后，在其網(wǎng)站設(shè)計(jì)中添加了幾段視頻，這些視頻可以補(bǔ)充–運(yùn)動(dòng)圖像可以說(shuō)出一千個(gè)單詞。而不是帶有選項(xiàng)的常規(guī)下拉導(dǎo)航欄，而是顯示每個(gè)項(xiàng)目的縮略圖，而不是使其更加有趣。
他們做得好嗎？
整體設(shè)計(jì)現(xiàn)代，活潑，必定會(huì)吸引喜歡喜力啤酒（Heineken）的60多種產(chǎn)品中的20多種。這些視頻非常適合當(dāng)今的社交媒體瘋狂行為，并且更有可能被分享，從而在全球范圍內(nèi)提高了品牌知名度。
網(wǎng)頁(yè)設(shè)計(jì)
從上世紀(jì)90年代的早期例子來(lái)看，即使是最大的公司網(wǎng)站也顯得業(yè)余，設(shè)計(jì)不佳，與當(dāng)今的復(fù)雜網(wǎng)頁(yè)設(shè)計(jì)相去甚遠(yuǎn)。
這可以用以下事實(shí)來(lái)解釋：25年前，網(wǎng)頁(yè)設(shè)計(jì)師面臨著更多的技術(shù)限制，例如互聯(lián)網(wǎng)速度緩慢，字體選項(xiàng)有限，以及關(guān)于使訪問(wèn)者感到愉悅的網(wǎng)站數(shù)據(jù)不足。
隨著網(wǎng)頁(yè)設(shè)計(jì)師可以使用更多工具來(lái)創(chuàng)建更復(fù)雜，外觀更專業(yè)的網(wǎng)站，某些趨勢(shì)無(wú)法忍受這些條件，并且此后逐漸消失。這些包括：
Flash動(dòng)畫 –幾年前，主頁(yè)上的Flash動(dòng)畫可能被認(rèn)為是動(dòng)態(tài)的，但訪問(wèn)者感到無(wú)聊。Flash動(dòng)畫看起來(lái)便宜又俗氣，網(wǎng)站訪問(wèn)者不喜歡它，并且當(dāng)主頁(yè)上有Flash簡(jiǎn)介時(shí)，搜索引擎的優(yōu)化就變得棘手了。它不是用于現(xiàn)代網(wǎng)站設(shè)計(jì)。
背景音樂(lè) –美妙的節(jié)奏和民謠，很棒的主意。叮當(dāng)作響的神經(jīng)而不是那么多（90年代的用戶會(huì)知道這種感覺(jué)）。在當(dāng)今的網(wǎng)頁(yè)設(shè)計(jì)中，沉默是黃金。
內(nèi)容過(guò)多 –一些公司認(rèn)為他們的網(wǎng)站需要大量頁(yè)面，詳細(xì)解釋了他們的公司，理念和產(chǎn)品。事實(shí)是，太多的信息可能會(huì)造成混亂，使人煩惱–我們大多數(shù)人只想要裸露的事實(shí)。2014年，簡(jiǎn)約的設(shè)計(jì)以及照片和圖標(biāo)的使用取代了文本繁多的頁(yè)面。
今天有效
當(dāng)今最流行，最有效的網(wǎng)站經(jīng)常使用令人回味的圖像或大量幽默來(lái)吸引人和令人難忘。他們結(jié)構(gòu)合理，并鼓勵(lì)游客動(dòng)turn購(gòu)物。每個(gè)網(wǎng)站都應(yīng)遵循一些基本規(guī)則，以幫助其更趨完美。但是，如果網(wǎng)頁(yè)設(shè)計(jì)師真的想跟上時(shí)代的步伐，那么以下是一些關(guān)鍵要素：
固定的導(dǎo)航欄 –這可能是一個(gè)相當(dāng)新的趨勢(shì)，但完全有意義。訪客可以瀏覽自己內(nèi)心的內(nèi)容，而不會(huì)忘記自己在哪里。
唯一字體 -使用不尋?；蛭ㄒ蛔煮w可以真正幫助網(wǎng)站出售其消息。當(dāng)新的令人激動(dòng)的字體等待時(shí)，Web設(shè)計(jì)人員不應(yīng)滿足于舊字體。
滑塊 –滑動(dòng)橫幅照片的趨勢(shì)非常棒。每個(gè)圖像都很大，可以真正打動(dòng)訪客。隨著圖像的自動(dòng)變化，無(wú)需做任何事情，就可以使觀看者獲得一系列出色的視覺(jué)效果。
個(gè)性化照片 –除非絕對(duì)必要，否則網(wǎng)站設(shè)計(jì)師應(yīng)避免使用庫(kù)存照片，而應(yīng)選??擇個(gè)性化專業(yè)照片來(lái)維護(hù)網(wǎng)站公正并使其更具特色。
號(hào)召性用語(yǔ)按鈕 –當(dāng)有很多有趣的按鈕可供選擇時(shí)，為什么不愿意使用無(wú)聊的“聯(lián)系我們”按鈕？按鈕越吸引人，訪問(wèn)者單擊它的可能性就越大。
無(wú)限滾動(dòng)/卡片設(shè)計(jì) – Pinterest可能已在這種類型的Web設(shè)計(jì)中處于領(lǐng)先地位，但由于它是呈現(xiàn)單個(gè)信息塊的好方法，因此被許多公司所接受。
平面設(shè)計(jì)與擬態(tài)化 –無(wú)論您是喜歡Microsoft如此喜歡的平面設(shè)計(jì)（想想簡(jiǎn)約的簡(jiǎn)單圖標(biāo)）還是使用更傳統(tǒng)的3D效果的擬態(tài)化，好消息是兩者現(xiàn)在都在發(fā)展。
網(wǎng)絡(luò)功能區(qū) –愛(ài)或恨它們，這些3D功能區(qū)旨在擁抱信息框或照片，看起來(lái)很漂亮，并且可以為任何設(shè)計(jì)提供專業(yè)效果
