服裝網站需求很大，那有哪些優秀的服裝網站設計呢？

作為設計愛好者的我，一共精選了八支，主要來自時尚奢侈品品牌，并試著從配色、版式和交互等設計角度作了淺要賞析，期待給大家帶了些幫助。

注：點擊圖片上的網站名稱，即可進入官網體驗；所選網站有的是中國版，有的是國際版，不同版本可能有所區別；同一網站在不同時間打開可能有變化；國外網站打開可能比較慢，請耐心等待。

1.GUCCI古馳

古馳官網整體設計很棒，土豪金的整體配色和它的品牌風格相統一，精致奢華。

磨刀不誤砍柴工，沒有品牌“視覺識別系統”建議先大概定下，比如品牌基色，這樣后續的設計工作才能科學進行。

2.NIKE耐克

我比較喜歡運動，逛 NIKE、Adidas 這兩家官網比較多，相對于 Adidas 窄版官網，我更喜歡 NIKE 寬版官網，即官網在瀏覽器最大化狀態下，兩邊沒有空白。

寬版顯得更大氣些，大家不妨進這兩家官網感受感受。

3.MUJI無印良品

無印良品官網首頁無任何動效，鼠標懸停時只是出現一個系統超鏈接手勢，整個網站和品牌調性一致：簡約安靜。

之所以提到這一點，是因為感覺一些新手設計師喜歡帶點動效的網站，比如鼠標懸停在某圖片上時觸發點小動畫。在我看來，如果追求質感，一般來說，首頁交互動效越少越好，大部分奢侈品品牌官網的動效都是很少的。

4.JOHN LOBB 約翰·羅布

首頁交互動效一般越少越好，那其它頁面呢？我覺得 John Lobb（愛馬仕旗下品牌）做了一個很好的示范。

John Lobb 前面的“男人”、“女人”、“按要求”三欄目頁里除了懸停有觸發小動畫，其它都是靜止的。到了“定制”和“探索”欄目頁，隨著頁面向下，圖片緩動出現，鼠標懸停時自動播放視頻動畫，讓人感覺這些欄目頁和前面的欄目頁有些不同，也讓網站訪問者的心情變得靈動起來。我想這應該是設計中“對比”原則的運用，如果所有頁面是靜止的，整個網站也許會顯得呆板。

再舉個例子，Apple 官網首頁題圖是 iPhone X 的靜態 Banner，點擊后就出現了一個很未來感的放大縮小動畫，接下來的是視差滾動效果。

簡單總結下，網站首頁盡量少動效，其它頁面根據主題，可以適當設計一些簡約動畫效果，從而起到對比突出作用。

5.PRADA普拉達

PRADA官網也比較特色，鼠標懸停到左邊菜單時，依此展現相應的大圖，很大氣簡潔。懸停到中間的“prada榮宅”時，展示的是自動播放的大屏視頻，一靜一動也有對比突出的效果。

6.CHANEL香奈兒

香奈兒的官網簡潔優雅，其中“2017/18秋冬高級定制服系列”頁面（“高級定制服”版塊）里的視頻和圖片雖然不像常規排版那樣對齊的很規整，但是錯落有致，給人時尚之感。

7.Lilly Pulitze 莉莉·普立茲

Lilly Pulitzer 專題頁令人印象深刻，隨著鼠標移動，場景也隨著移動，相信大家和我一樣，被這魔幻現實的場景化設計深深吸引。在設計專題頁時，我們不妨腦洞大開下，作一些創新。

8.Victoria's Secret 維多利亞的秘密

Victoria's Secret 官網很性感，其中的 banner（如上所示）令人印象深刻，有時需要凸顯或者不好橫版展示的不妨學學維秘的設計。

最后，我再試著整體總結下我的心得：

  • 官網風格應該和品牌調性相搭；

  • 網站首頁盡量少動效，這樣可以增強官網質感度；

  • 官網非首頁頁面可以適當設計一些簡約動效，從而起到對比突出作用；

  • 設計專題頁時可以開開腦洞，試著做一些創意設計；

  • 細節方面如果有創新，也能讓訪問者記住你。

設計一個網站需要考慮的因素有很多，比如適配、SEO，我上面主要是從設計的角度考慮，期待大家的補充和分享。

另外，我們專業響應式網站設計工具 Coolsite360官網也有一些不錯的網站案例，歡迎大家前往免費注冊體驗。

關注公眾號，獲取更多H5設計、響應式網頁設計資訊