這(zhè)樣的(de)例子比比皆是：企業網站的(de)風格、圖片、布局與産品的(de)包裝，乃至品牌格調，力圖保持一緻。如麥當勞的(de)網站，配色以金黃(huáng)色爲主，布局采用(yòng)宮格布局，文案歡快(kuài)，就如同是一張麥當勞的(de)“菜單”。
但是，也(yě)有反例。比如娃哈哈的(de)官網，似乎不太考慮不同産品的(de)特點以及公司文化(huà)。
如果我們将網站、小程序、APP稱之爲線上設計，将産品包裝、招商手冊，乃至廠房(fáng)顔色等稱之爲線下(xià)設計，這(zhè)裏就有一個(gè)問題——線上設計是否需要與線下(xià)設計保持一緻？
辨析
我們可(kě)以看這(zhè)樣兩個(gè)例子：一個(gè)是農夫山泉，一個(gè)是娃哈哈。兩者同屬于快(kuài)消行業，并且公司運營戰略也(yě)有一定的(de)相似性。
但是兩家公司的(de)網站卻風格差異很大(dà)。
農夫山泉的(de)網站顯然是希望保持與産品和(hé)企業輸出價值觀一緻的(de)。企業網站布局簡潔，使用(yòng)不少的(de)插畫(huà)作爲配圖，給訪客純淨之感。這(zhè)與農夫山泉的(de)衆多(duō)産品情懷是一緻的(de)，特别是農夫山泉礦泉水(shuǐ)。
同樣是做(zuò)飲料産品的(de)娃哈哈則不一樣。其公司官網傾向于“新聞發布會”風格，展示了(le)大(dà)量新聞，布局、配色、格局，參考企業線下(xià)物(wù)料的(de)地方極少。
通(tōng)過如上分(fēn)析，我們似乎可(kě)以得(de)出這(zhè)樣的(de)結論：當産品強勢，消費者“認”産品而不認識公司的(de)時(shí)候，網站設計需要與産品設計等相匹配；相反，當公司強勢，公司走在産品認知之前的(de)時(shí)候，公司網站設計可(kě)以不匹配産品設計。另外，當一個(gè)公司的(de)産品線很多(duō)的(de)時(shí)候，并且各個(gè)産品較爲平均，網站設計則可(kě)以不參考産品設計。我們可(kě)以進行驗證。
驗證
例如娃哈哈集團旗下(xià)的(de)産品非常之多(duō)，并且企業較爲強勢，所以，官網設計幾乎不參考産品設計。包括百事可(kě)樂(yuè)、可(kě)口可(kě)樂(yuè)也(yě)屬于此種情況。
但是，如王老吉、彙源果汁等公司，産品線較爲單一，所以，企業官網設計無論是字體、布局、配色等都參考了(le)産品設計。
這(zhè)裏就出現了(le)另一個(gè)問題：如果網站設計需要參考線下(xià)物(wù)料設計，需要參考哪些呢(ne)？
參考
字體：網站設計需要參考線下(xià)字體，包括産品名稱字體、企業強制使用(yòng)的(de)字體等等。如王老吉，因爲強調傳統文化(huà)，所以網站選擇使用(yòng)隸書(shū)這(zhè)一書(shū)法字體。
顔色：網站設計可(kě)以參考産品的(de)配色，如百事官網以藍色作爲主要顔色；可(kě)口可(kě)樂(yuè)則選擇了(le)紅色。
圖片：網站設計可(kě)以使用(yòng)與産品包裝一緻的(de)圖片。或者與公司投放的(de)廣告片一樣的(de)圖片。
活動：網站可(kě)以上線正在線下(xià)進行的(de)活動。
情懷：如果産品力圖輸出某些情感和(hé)情懷，網站設計的(de)時(shí)候，可(kě)以借助圖片、配色等體現。
交互：産品與消費者之間也(yě)有交互，如打開方式、使用(yòng)方法等等。如果此類交互較爲新穎，是産品的(de)一個(gè)賣點，可(kě)以在網站上實現類似的(de)交互，增強消費者對(duì)品牌的(de)認同。
