如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

藍(lán)藍(lán)設(shè)計(jì)最近收集關(guān)于『大氣』的專題，有一些文章是自己寫的，有一些是從網(wǎng)站摘的，摘的會(huì)注明出處，
目的讓大家有系列、整體的認(rèn)識(shí)了解，眾人眼中的『大氣的網(wǎng)站長什么樣』
電商類網(wǎng)站一般會(huì)比較瑣碎，但下面的這45個(gè)網(wǎng)站，明顯不一樣。大氣和格局、氣質(zhì)氣場相關(guān)，與網(wǎng)站的品類無關(guān)。

01. 大膽用色+產(chǎn)品大圖

Bose 的官網(wǎng)采用了大膽的水平式布局，高清細(xì)膩的 產(chǎn)品圖和絢麗的背景用色，讓產(chǎn)品和網(wǎng)站都顯得個(gè)性十足，視覺優(yōu)先式的布局讓產(chǎn)品看起來誘人無比。



02. 少即是多

ETQ Amsterdam 是著名的鞋類品牌，優(yōu)雅、永恒和品質(zhì)是這個(gè)品牌的三大核心價(jià)值，而他們的網(wǎng)站也同樣采用了這樣的設(shè)計(jì)理念。整個(gè)網(wǎng)站的設(shè)計(jì)充滿了現(xiàn)代式的簡約美，簡潔的排版，清爽的配色方案，大量的圖像和微妙的動(dòng)畫共同營造出少即是多的美感。



03. 使用漂亮的超大字體

木材車床公司 Brdr. Krüger 將產(chǎn)品名稱和重要的信息制作成為漂亮的超大字體置于網(wǎng)站首頁上，這種充滿沖擊力的字體設(shè)計(jì)在移動(dòng)端上看起來尤其明顯。



04. 使用柵格框架來設(shè)計(jì)

Chris Niedenthal 使用了柵格系統(tǒng)來展現(xiàn)他們多年來的工作成果，柵格系統(tǒng)強(qiáng)大的擴(kuò)展性和整個(gè)網(wǎng)站的內(nèi)容協(xié)調(diào)地在一起工作。



05. 實(shí)驗(yàn)性的表單和功能

誰說菜單設(shè)計(jì)一定是單調(diào)無聊的?Chickenbot 作為一家意大利雞肉外賣服務(wù)商，就使用了華麗的全屏式的列表漢堡菜單，來呈他們的獨(dú)到之處。相比于沉悶的下拉式菜單和傳統(tǒng)的側(cè)邊欄設(shè)計(jì)，Chickenbot的設(shè)計(jì)也算的上是獨(dú)樹一幟了。



06. 極簡導(dǎo)航

My Deejo 為用戶提供了自定義產(chǎn)品的服務(wù)，用戶無需離開頁面就可以搞定一切。用戶只需要通過托拽和多選框選擇就可以完成自定義設(shè)定，一旦完成，便可下單了。



07. 創(chuàng)建互動(dòng)

Emporium Pies 是一家在線銷售烘培類食品的網(wǎng)站，當(dāng)用戶將光標(biāo)懸停在不同的餡餅或者面包上的時(shí)候，相關(guān)的信息會(huì)呈現(xiàn)出來。創(chuàng)建出令人愉悅的交互能讓用戶駐足更久。



08. 做好產(chǎn)品介紹

國內(nèi)電商設(shè)計(jì)師對(duì)于電商網(wǎng)站詳情頁設(shè)計(jì)有這豐富的經(jīng)驗(yàn)，但是靜態(tài)的產(chǎn)品介紹并不夠。加拿大家居制造商 JM & Sons 在他們的產(chǎn)品介紹部分，用戶可以360度全方位查看他們的家具的細(xì)節(jié)，滿足用戶的全部好奇心。這也會(huì)有效緩解到手之后“官圖無限好”的感受。



09. 使用大量的留白

Best Made Co 是一個(gè)專門銷售戶外用的服裝的在線電商，網(wǎng)頁中使用了大量的留白，營造出干凈整潔的感覺，即使產(chǎn)品很多也并未將頁面空間堆滿。



10. 使用字體設(shè)計(jì)

Leather Head Sports 是一家提供皮質(zhì)體育用品的在線電商網(wǎng)站，網(wǎng)站的頂部使用了單獨(dú)設(shè)計(jì)的英文字體，這些微妙的字體設(shè)計(jì)會(huì)讓網(wǎng)站看起來更加優(yōu)雅有品味，也足夠個(gè)性化。



11. 用色彩高亮重要文本

用色彩來高亮文本本不是特別的設(shè)計(jì)手法，但是結(jié)合網(wǎng)站配色和UI來設(shè)定高亮文本的色彩，倒是常常能收到奇效。Longboard Living 則在網(wǎng)站文本高亮設(shè)計(jì)上非常用心，從側(cè)邊欄到正文部分都采用了這樣的設(shè)計(jì)技巧，配合動(dòng)效，兼顧到了美觀和功能。



12. 讓網(wǎng)站更加易于導(dǎo)航

導(dǎo)航、搜索、篩選是方便用戶尋找想要內(nèi)容的重要手段，也是用戶獲取有用信息的必要途徑。LEIF 的網(wǎng)站不僅提供了常用的搜索功能，而且提供了相應(yīng)的篩選功能，讓用戶很快定位并獲取想要的東西。



13. 使用信息化的標(biāo)題

視頻公司 Graze 在網(wǎng)頁設(shè)計(jì)上同樣有獨(dú)到之處。我們熟知的淘寶當(dāng)中，專業(yè)的賣家會(huì)在標(biāo)題中加入大量相關(guān)的文案，確保能能容易被搜索到。但是這還不夠。Graze 還讓產(chǎn)品的標(biāo)題更加視覺化，根據(jù)每種小吃的色彩和特征來定制相應(yīng)的字體，讓標(biāo)題的視覺信息更加豐富，看起來“更好吃”，用戶可以更加快速地定位想要的食品。



14. 更好的客戶支持

對(duì)于新興的電商網(wǎng)站而言，客戶支持是非常重要的事情。讓用戶能在網(wǎng)站中快速找到客服入口，是很有必要的。在Farmdrop 的網(wǎng)站中，右側(cè)下方的常駐聊天對(duì)話圖標(biāo)會(huì)讓用戶可以隨時(shí)同客服進(jìn)行溝通，頂部的“更進(jìn)一步溝通”也是常駐的入口。



15. 有趣的插畫

毛巾制造商 Vertty 在自己的官網(wǎng)著陸頁上放滿了毛巾的插畫，每個(gè)產(chǎn)品都有對(duì)應(yīng)的插畫。這些插畫不僅代表了產(chǎn)品，而且讓整個(gè)網(wǎng)站顯得更加俏皮有趣。



16. 卡片式布局

多產(chǎn)品展示型電商網(wǎng)站同卡片式布局有著先天的契合，Oliver Bonas 的網(wǎng)站就使用卡片展示不同的產(chǎn)品和信息。不同的卡片相互組合成有機(jī)的整體，圍繞著品牌，讓網(wǎng)站總體上看起來協(xié)調(diào)而統(tǒng)一。



17. 補(bǔ)充視頻影像

Bellroy 和360度細(xì)節(jié)展示一項(xiàng)，補(bǔ)充視頻影像資料會(huì)讓用戶更好地了解他們將要購買的產(chǎn)品的細(xì)節(jié)，滿足他們的好奇心。



18. 使用紋理背景

潮流歸潮流，紋理的使用并未過時(shí)。Dollar Shave Club 網(wǎng)頁中的拇指紋理賦予整個(gè)頁面以質(zhì)感和陽剛的氣息，這不僅符合產(chǎn)品的定位，而且在視覺上有著突出的效果。



19. 折疊大量文本

將頁面用大量的信息堆滿不僅過時(shí)，而且難看。Hand Graft 同樣需要在網(wǎng)頁中呈現(xiàn)他們產(chǎn)品的全部細(xì)節(jié)，但是要為大量文本而犧牲美觀似乎不現(xiàn)實(shí)。所以設(shè)計(jì)師將文字折疊起來，這樣不僅擁有漂亮的外觀，而且保持了界面的清爽干凈。



20. 用視頻背景替代Banner大圖

動(dòng)態(tài)的視頻背景無疑可以承載遠(yuǎn)超單一圖片的信息，如果你不想將網(wǎng)站制作成長滾動(dòng)單頁，那么使用視頻背景是非常不錯(cuò)的選擇。漂亮的視頻背景不僅讓整個(gè)頁面鮮活起來，還很好地起到了產(chǎn)品展示的功能。



21. 提供多級(jí)側(cè)邊欄

相比于傳統(tǒng)的頂部多級(jí)導(dǎo)航欄，側(cè)邊欄會(huì)讓頁面顯得更加整齊易用。Carolina Herrera 的側(cè)邊欄設(shè)計(jì)則更有意思，它采用的是多級(jí)側(cè)邊欄，功能上不弱于前者，提升了瀏覽體驗(yàn)，而視覺上的效果則更加突出。



22.無需跳轉(zhuǎn)的購物車管理

作為電商網(wǎng)站，編輯管理購物車是重要的功能之一。為了提升整體體驗(yàn)，Everlane 的設(shè)計(jì)師允許用戶將鼠標(biāo)懸停在某個(gè)產(chǎn)品上，選擇大小類別，添加到購物車，整個(gè)過程無需離開相關(guān)頁面。無需跳轉(zhuǎn)搞定一切，用戶可以更便捷地完成購物環(huán)節(jié)。



23. 使用簡明的布局

Helmut Lang 是以為奧地利時(shí)裝設(shè)計(jì)師，他在維也納創(chuàng)辦了自己的設(shè)計(jì)工作室。在構(gòu)建他的在線購物網(wǎng)站之時(shí)，Lang將他簡單到無與倫比的設(shè)計(jì)風(fēng)格也引入到網(wǎng)頁設(shè)計(jì)中來，他將他認(rèn)為最重要也是最關(guān)鍵的元素保留下來，而其核心，就是他的收藏。



24. 用輪播圖做頁頭

Groovemade 是著名的數(shù)碼設(shè)備配件制造商，他們?yōu)锳pple 的數(shù)碼產(chǎn)品提供優(yōu)雅的木質(zhì)外設(shè)。而他們的網(wǎng)站也采用了同樣的優(yōu)雅設(shè)計(jì)，精心拍攝的動(dòng)態(tài)輪播圖會(huì)讓用戶快速了解他們的產(chǎn)品，整欄式的高清大圖能給用戶的視覺沖擊力，無需更多文案，一圖勝千言。



25. 高大上的俯拍圖

近年來俯拍圖是營造網(wǎng)站設(shè)計(jì)感的流行手法之一。Munchery 作為一個(gè)美食類的網(wǎng)站，自然也不能落于人后，俯拍圖不僅能呈現(xiàn)出美食的全貌，而且能夠營造出整齊而優(yōu)雅的質(zhì)感。



26. 用網(wǎng)站來補(bǔ)充配色

時(shí)尚剃須刀品牌Harry的網(wǎng)站配色方案是參考他們的產(chǎn)品配色來做的，背景色會(huì)隨著操作而改變，剃須刀本身的橙色、棕色和深藍(lán)色也是貫穿整個(gè)網(wǎng)站設(shè)計(jì)的配色方案。



27. 信息化的產(chǎn)品簡介

Beo Play 在線商店將產(chǎn)品的信息以漂亮的信息圖展現(xiàn)出來，在其他的產(chǎn)品還在簡單展現(xiàn)名稱和價(jià)格標(biāo)簽的同時(shí)，Beo Play 更有前瞻性地將圖片展示、版本信息、新系列的相關(guān)信息都合理地整合到了一起。



28. 提供滾動(dòng)式交互

著名的品牌53為iPad 提供的觸控筆Paper Pencil 想必各位不會(huì)感到陌生，這款革命性的手寫筆為現(xiàn)在的Apple Pencil 提供了設(shè)計(jì)靈感。他們的網(wǎng)上商店用無限滾動(dòng)的交互方式將筆的所有零部件拆開給你看，用漂亮的高清圖片來講述他們的產(chǎn)品設(shè)計(jì)故事。



29. 用產(chǎn)品制作圖案

Aark Collective 的產(chǎn)品展示方式和傳統(tǒng)的略顯不同，相比于高清大圖、系列特寫，他們更喜歡將自家產(chǎn)品整齊地?cái)[放成不同的圖案。這些漂亮的手表均勻排放著，配合干凈而寧和的配色方案，使得整個(gè)網(wǎng)站顯得優(yōu)雅而不同凡響。



30. 360度全景展示

高端手包品牌 Bagigia 源自意大利，他們的網(wǎng)站會(huì)將產(chǎn)品以360度全景展示出來，讓用戶可以在網(wǎng)站上了解這些高端手包的全部細(xì)節(jié)。網(wǎng)站的配色方案更多的是配合這些產(chǎn)品的配色來進(jìn)行調(diào)整的，目標(biāo)非常明確。



31. 稍加調(diào)整的經(jīng)典柵格系統(tǒng)

Diesel 基于傳統(tǒng)的對(duì)稱式柵格系統(tǒng)來展示他們的產(chǎn)品，不過他們?cè)诮?jīng)典的柵格系統(tǒng)上稍稍做了點(diǎn)調(diào)整，覆蓋上了白色的紋理。如何使用經(jīng)典的方案設(shè)計(jì)出現(xiàn)代的風(fēng)格?這是一個(gè)不錯(cuò)的案例。



32. 整合社交媒體與分享

作為一個(gè)著名的電商網(wǎng)站，Vanmoof 將社交網(wǎng)絡(luò)分享和網(wǎng)站深度整合到一起，讓用戶可以更方便更無縫地分享他們的購物體驗(yàn)與感受。



33. 重新設(shè)計(jì)下拉菜單

如果下拉框并不只是一個(gè)布局用的控件，那么 The Horse 的頁面設(shè)計(jì)會(huì)給你展示它更多的可能性。這個(gè)網(wǎng)站中，下拉列表中不僅僅只有文字條目，還添加了圖標(biāo)等內(nèi)容，這使得菜單瞬間變得充滿趣味性和設(shè)計(jì)感。



34. 使用印刷式排版

電商平臺(tái) Mr Porter 很容易讓人聯(lián)想到傳統(tǒng)的報(bào)紙雜志排版，加粗的標(biāo)題和正文對(duì)比明顯，導(dǎo)航和頁眉的設(shè)計(jì)讓人容易想起傳統(tǒng)的報(bào)紙頁頭，襯線體和非襯線體的搭配讓網(wǎng)站很容易喚醒用戶對(duì)于傳統(tǒng)排版的瀏覽體驗(yàn)。



35. 采用堆棧式界面

堆棧式界面在iPad 的APP中非常常見，這種結(jié)構(gòu)可以更好地組織樹狀結(jié)構(gòu)的信息，而 Travel Alberta 的頁面中也很好地使用這種界面模式來替代傳統(tǒng)的面包屑。



36. 使用動(dòng)態(tài)產(chǎn)品圖

作為耐克的重要產(chǎn)品線之一，Nike Jordan 系列以其網(wǎng)站上獨(dú)特的動(dòng)態(tài)產(chǎn)品圖設(shè)計(jì)而著稱。這些動(dòng)態(tài)圖片能更好地展示客戶的故事，配合陽剛無比動(dòng)態(tài)十足的風(fēng)格，令人印象深刻。



37. 使用超大尺寸產(chǎn)品圖

Warby and Parker 使用超大尺寸的產(chǎn)品圖來呈現(xiàn)產(chǎn)品的每一個(gè)令人稱道的系列，不論是在手機(jī)還是在桌面上，都足夠有沖擊力。



38. 順滑無縫的購物體驗(yàn)

如果說 Coin 的網(wǎng)站設(shè)計(jì)有什么令人難忘的地方，那肯定是它無縫的結(jié)帳購買體驗(yàn)。



39. 鮮明的色彩對(duì)比

Capellos 所提供的產(chǎn)品是各種面點(diǎn)，從包裝到網(wǎng)頁設(shè)計(jì)都采用的是強(qiáng)對(duì)比的黑白色，搭配點(diǎn)綴的紅色，整體散發(fā)出一種協(xié)調(diào)而鮮明的視覺效果，協(xié)調(diào)而對(duì)比強(qiáng)烈。



40. 以字體排版為中心的設(shè)計(jì)

高清大圖往往會(huì)讓用戶忘記，以字體排版為重心的設(shè)計(jì)有多么美妙。精致的線條，別具一格的排版，精致的圖片和獨(dú)特的柵格，整個(gè)網(wǎng)站看起來像是一個(gè)高端的畫廊。



41. 基于模板的設(shè)計(jì)

對(duì)于龐雜而繁復(fù)的產(chǎn)品類型，基于模板的設(shè)計(jì)會(huì)讓整個(gè)網(wǎng)站看起來整飭而清爽，這樣的設(shè)計(jì)也會(huì)極大的提升生產(chǎn)力。



42. 講故事

革命性的紐約餐廳Maple 在網(wǎng)站上用視頻來講述屬于他們自己的故事，那些關(guān)于餐廳的細(xì)節(jié)會(huì)讓用戶更了解他們，了解美食的誕生過程。



43. 用視覺形象代表產(chǎn)品

Visual Supply Co 將他們的產(chǎn)品用不同的色塊來代表，雖然這種手法并不一定適用于所有的電商網(wǎng)站，但是某些特殊類型的產(chǎn)品而言，這種方式也挺不錯(cuò)。



44. 讓產(chǎn)品便于定制

對(duì)于服裝這類具備可定制屬性的產(chǎn)品而言，讓用戶易于定制是非常有必要的。服裝品牌 Le Coq Sportif 就是這么做的，讓每個(gè)定制屬性都非常容易選擇和操作。



45. 一頁搞定所有問題

Hunters Wine Shop 的網(wǎng)頁設(shè)計(jì)走的就是一頁搞定所有問題的路線，你可以在瀏覽完之后直接在頁面內(nèi)完成購買環(huán)節(jié)。易于瀏覽和簡約設(shè)計(jì)是它們的突出之處。

來源：designschool