網站改版怎麼做？從全球百大品牌網站案例看網頁設計趨勢

APPLE 形象網站改版| 官網首頁採用一頁式RWD網頁設計，區塊清楚且不擾亂消費者的視覺動線 · IBM公司官網改版| 簡而有力的網站主視覺，勾勒出企業優勢與未來 ... WDR網頁設計庫 NEWALL官網設計形象網站百大品牌網站推薦UI設計設計新知設計公司推薦 網站改版怎麼做？從全球百大品牌網站案例看網頁設計趨勢 2020-12-29 我們曾經在五年前挑選幾個全球百大品牌形象網站設計進行分析，我們來看看五年後這些居於世界領導地位的品牌如何進行官網改版設計，改版的前後又有什麼差異？如果你正在著手企業網站改版工作，這些網站改版前後案例將極具參考價值。

    相較於過去五年，各大品牌網站經常在首頁採用多個不同比例的版面配置建置出豐富的首頁畫面，在RWD響應式網頁設計的趨勢下，為了考量電腦版網站和手機版網站間的設計落差，改版後的各大品牌官網大多簡化了設計樣式，甚至只用幾個基本的區塊樣式就完成首頁設計，回應近年來「減法設計」的趨勢。

  從這些案例可以看出，整個網頁設計趨勢在RWD響應式網頁設計下，已經是以「行動裝置使用性優先」為主要設計法則，回應現下「手機瀏覽為王」的市場策略，同時也回應了Google行動優先索引（GoogleMobileFirstIndexing）的宣告，行動裝置的時代正式來臨。

    目錄APPLE形象網站改版|官網首頁採用一頁式RWD網頁設計，區塊清楚且不擾亂消費者的視覺動線IBM公司官網改版|簡而有力的網站主視覺，勾勒出企業優勢與未來願景GE美國奇異公司網站改版|採用破格排版計，突破RWD網頁設計框架、讓標語更加鮮明SAP企業官網改版|RWD大版面的設計，就像閱讀PPT簡報一樣輕鬆容易星巴克官網改版|目標導向式的BANNER圖，讓消費族群在RWD網頁中專注瀏覽不分心     APPLE形象網站改版|官網首頁採用一頁式RWD網頁設計，區塊清楚且不擾亂消費者的視覺動線 APPLE新版網站一改原本只有主視覺輪播和4個主題區塊的設計，在新網站上使用一頁式網頁設計，延長整個頁面的長度，透過鮮明亮眼的主題式區塊帶領訪客進入各個主題網頁。

仔細觀察你會發現，雖然APPLE官網跟現在主流網站一樣在首頁採用一頁式設計，整個畫面還是一樣簡潔利落，其中的原因在於圖片設計的巧思。

因應RWD響應式網頁，APPLE官網的圖片設計都是採用「主體置中」的方式，這個做法得以在響應式網頁中因應手機版網頁，將兩旁的背景區塊去除後，圖片主體還可以完整呈現。

因此，未來在設計網頁時，可以考慮採用「主體置中」的方式進行圖片設計，在RWD響應式網頁中，得到最佳觀看效果。

  資料來源：APPLE官網   2016年Apple舊版網站設計     2021年Apple網站改版               IBM公司官網改版|簡而有力的網站主視覺，勾勒出企業優勢與未來願景 相較於IBM舊網站採用柔和配色和背景圖案的運用，IBM在新版官網中以鮮明的配色(如主視覺的部份)提高了文字的明視度與識別性，顯然IBM已經逐漸重視網頁文字的瀏覽體驗。

IBM在內容區塊(Container)保留了以白色、灰色為主的設計，讓訪客可以毫不費力地閱讀內文。

少了裝飾性線條的設計，加大區塊間的間距，IBM網站顯得自信而有條理。

  資料來源：IBM官網   2016年IBM舊版網站設計     2021年IBM網站改版           GE美國奇異公司網站改版|採用破格排版計，突破RWD網頁設計框架、讓標語更加鮮明 GE新網站上某種程度地延續「破格式圖文編排」的設計風格，不同的是，它在主視覺區塊採用許多設計公司網站會採用的「文字性引導」設計，不再使用大背景做為主視覺設計(這幾年被用爛了)。

以一般閱讀習慣由左而右來看，先出現文字再配上圖片，透過不對稱的色塊搭配，首頁第一眼給人感覺平穩而不呆板。

GE企業識別中的藍色，在新網站中分別用鮮藍和墨藍色混搭，在沉穩中帶有活力，也頗有年輕族群與中壯族群世代共融的意味。

  資料來源：GE官網   2016年GE舊版網站設計     2021年GE網站改版           SAP企業官網改版|RWD大版面的設計，就像閱讀PPT簡報一樣輕鬆容易 做為資訊產業龍頭，SAP新版官網首頁採用了較為沉著的暗灰色調，從配色上企圖跳脫舊網站的版面配色。

為了不讓整體色調過於沉重，新網站在icon設計上採用較為活潑的暖色，就像黑暗中的一盞明燈，抓住瀏覽者的眼球。

細心觀察後發現，SAP新官網在首頁上沒有採用太多不同比例的版面區塊，相對的，它只用了兩個東西，情境式BANNER和icon-bar，只用這兩個設計樣式交織出氣宇非凡的首頁的RWD網頁版面設計。

特別留意SAP在banner上的設計，文字是以中央區塊(container)為基準靠左對齊，背景圖的人物集中在中央區塊，這讓圖片在不同尺寸的RWD網頁畫面得以保留畫面重點。

  資料來源：SAP官網   2016年SAP舊版網站設計   2021年SAP網站改版              星巴克官網改版|目標導向式的BANNER圖，讓消費族群在RWD網頁中專注瀏覽不分心 星巴克新官網是這幾組官網首頁設計中，為了RWD響應式網頁設計簡化到極致的經典作品。

從圖中可以看到，星巴克首頁已經不再採用許多的設計元素進行「細緻化」的設計風格，相對的，它以手機使用族群為主，在手機中看不到這些細緻的設計，取而代之的，是更為單純簡化的色塊運用。

  資料來源：星巴克官網   2016年星巴克舊版網站設計     2021年星巴克網站改版         看到這裡，你是不是對公司網站改版有了一些想法？ 以上資料是由台中網站建置公司-凱士數位所整理出來的，提供給大家參考。

如果你對公司官網的改版有什麼想法，歡迎跟凱士網頁設計進一步洽詢。

    推薦閱讀：良好的企業網站應該如何設計？5大注意事項一次解析       ＊歡迎分享這篇文章，分享時請務必加入文章來源網址。

  訂閱文章 想要收到CADIIS網頁設計公司的相關訊息嗎？ 我們會不定期更新最新網頁設計相關文章，歡迎訂閱凱士知識+。

  想詢問網站設計方面的問題？ 做為網頁設計公司的領導品牌，凱士深受B2B外銷公司、上市櫃公司及外商公司推薦，10年來累積超過200個網頁設計作品。

我們很樂意用淺顯易懂的方式讓我們的客戶輕鬆了解網頁設計的各種疑難雜症。

  如果您對網站設計規劃有任何問題，歡迎聯絡凱士，我們將會為您提供最適合的建議。

    追蹤文章 想要收到網頁設計領域的相關訊息嗎？ 我們會不定時在FB更新上面的網頁設計相關文章，歡迎追蹤凱士臉書專頁       官網設計 網站推薦 形象網站 百大品牌 相關文章 TOP10日本食品形象網站設計參考範例 TOP10國外工業設備、精密加工、工具機、公司網站設計製作參考 台中攝影工作室推薦：陳記影像chenstudio 推薦2021公司官網設計案例，看看企業網站有哪些設計重點？ 推薦：TOP10頁尾區塊BigFooter網頁設計參考範例 TOP10產品相簿ProductGallery設計參考