2016-7-2 藍(lán)藍(lán)設(shè)計(jì)的小編
如果您想訂閱本博客內(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)站長(zhǎng)什么樣』
電商類網(wǎng)站一般會(huì)比較瑣碎，但下面的這45個(gè)網(wǎng)站，明顯不一樣。大氣和格局、氣質(zhì)氣場(chǎng)相關(guān)，與網(wǎng)站的品類無(wú)關(guān)。
01. 大膽用色+產(chǎn)品大圖
Bose 的官網(wǎng)采用了大膽的水平式布局，高清細(xì)膩的 產(chǎn)品圖和絢麗的背景用色，讓產(chǎn)品和網(wǎng)站都顯得個(gè)性十足，視覺(jué)優(yōu)先式的布局讓產(chǎn)品看起來(lái)誘人無(wú)比。
02. 少即是多
ETQ Amsterdam 是著名的鞋類品牌，優(yōu)雅、永恒和品質(zhì)是這個(gè)品牌的三大核心價(jià)值，而他們的網(wǎng)站也同樣采用了這樣的設(shè)計(jì)理念。整個(gè)網(wǎng)站的設(shè)計(jì)充滿了現(xiàn)代式的簡(jiǎn)約美，簡(jiǎn)潔的排版，清爽的配色方案，大量的圖像和微妙的動(dòng)畫共同營(yíng)造出少即是多的美感。
03. 使用漂亮的超大字體
木材車床公司 Brdr. Krüger 將產(chǎn)品名稱和重要的信息制作成為漂亮的超大字體置于網(wǎng)站首頁(yè)上，這種充滿沖擊力的字體設(shè)計(jì)在移動(dòng)端上看起來(lái)尤其明顯。
04. 使用柵格框架來(lái)設(shè)計(jì)
Chris Niedenthal 使用了柵格系統(tǒng)來(lái)展現(xiàn)他們多年來(lái)的工作成果，柵格系統(tǒng)強(qiáng)大的擴(kuò)展性和整個(gè)網(wǎng)站的內(nèi)容協(xié)調(diào)地在一起工作。
05. 實(shí)驗(yàn)性的表單和功能
誰(shuí)說(shuō)菜單設(shè)計(jì)一定是單調(diào)無(wú)聊的?Chickenbot 作為一家意大利雞肉外賣服務(wù)商，就使用了華麗的全屏式的列表漢堡菜單，來(lái)呈他們的獨(dú)到之處。相比于沉悶的下拉式菜單和傳統(tǒng)的側(cè)邊欄設(shè)計(jì)，Chickenbot的設(shè)計(jì)也算的上是獨(dú)樹(shù)一幟了。
06. 極簡(jiǎn)導(dǎo)航
My Deejo 為用戶提供了自定義產(chǎn)品的服務(wù)，用戶無(wú)需離開(kāi)頁(yè)面就可以搞定一切。用戶只需要通過(guò)托拽和多選框選擇就可以完成自定義設(shè)定，一旦完成，便可下單了。
07. 創(chuàng)建互動(dòng)
Emporium Pies 是一家在線銷售烘培類食品的網(wǎng)站，當(dāng)用戶將光標(biāo)懸停在不同的餡餅或者面包上的時(shí)候，相關(guān)的信息會(huì)呈現(xiàn)出來(lái)。創(chuàng)建出令人愉悅的交互能讓用戶駐足更久。
08. 做好產(chǎn)品介紹
國(guó)內(nèi)電商設(shè)計(jì)師對(duì)于電商網(wǎng)站詳情頁(yè)設(shè)計(jì)有這豐富的經(jīng)驗(yàn)，但是靜態(tài)的產(chǎn)品介紹并不夠。加拿大家居制造商 JM & Sons 在他們的產(chǎn)品介紹部分，用戶可以360度全方位查看他們的家具的細(xì)節(jié)，滿足用戶的全部好奇心。這也會(huì)有效緩解到手之后“官圖無(wú)限好”的感受。
09. 使用大量的留白
Best Made Co 是一個(gè)專門銷售戶外用的服裝的在線電商，網(wǎng)頁(yè)中使用了大量的留白，營(yíng)造出干凈整潔的感覺(jué)，即使產(chǎn)品很多也并未將頁(yè)面空間堆滿。
10. 使用字體設(shè)計(jì)
Leather Head Sports 是一家提供皮質(zhì)體育用品的在線電商網(wǎng)站，網(wǎng)站的頂部使用了單獨(dú)設(shè)計(jì)的英文字體，這些微妙的字體設(shè)計(jì)會(huì)讓網(wǎng)站看起來(lái)更加優(yōu)雅有品味，也足夠個(gè)性化。
11. 用色彩高亮重要文本
用色彩來(lái)高亮文本本不是特別的設(shè)計(jì)手法，但是結(jié)合網(wǎng)站配色和UI來(lái)設(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)頁(yè)設(shè)計(jì)上同樣有獨(dú)到之處。我們熟知的淘寶當(dāng)中，專業(yè)的賣家會(huì)在標(biāo)題中加入大量相關(guān)的文案，確保能能容易被搜索到。但是這還不夠。Graze 還讓產(chǎn)品的標(biāo)題更加視覺(jué)化，根據(jù)每種小吃的色彩和特征來(lái)定制相應(yīng)的字體，讓標(biāo)題的視覺(jué)信息更加豐富，看起來(lái)“更好吃”，用戶可以更加快速地定位想要的食品。
14. 更好的客戶支持
對(duì)于新興的電商網(wǎng)站而言，客戶支持是非常重要的事情。讓用戶能在網(wǎng)站中快速找到客服入口，是很有必要的。在Farmdrop 的網(wǎng)站中，右側(cè)下方的常駐聊天對(duì)話圖標(biāo)會(huì)讓用戶可以隨時(shí)同客服進(jìn)行溝通，頂部的“更進(jìn)一步溝通”也是常駐的入口。
15. 有趣的插畫
毛巾制造商 Vertty 在自己的官網(wǎng)著陸頁(yè)上放滿了毛巾的插畫，每個(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)站總體上看起來(lái)協(xié)調(diào)而統(tǒng)一。
17. 補(bǔ)充視頻影像
Bellroy 和360度細(xì)節(jié)展示一項(xiàng)，補(bǔ)充視頻影像資料會(huì)讓用戶更好地了解他們將要購(gòu)買的產(chǎn)品的細(xì)節(jié)，滿足他們的好奇心。
18. 使用紋理背景
潮流歸潮流，紋理的使用并未過(guò)時(shí)。Dollar Shave Club 網(wǎng)頁(yè)中的拇指紋理賦予整個(gè)頁(yè)面以質(zhì)感和陽(yáng)剛的氣息，這不僅符合產(chǎn)品的定位，而且在視覺(jué)上有著突出的效果。
19. 折疊大量文本
將頁(yè)面用大量的信息堆滿不僅過(guò)時(shí)，而且難看。Hand Graft 同樣需要在網(wǎng)頁(yè)中呈現(xiàn)他們產(chǎn)品的全部細(xì)節(jié)，但是要為大量文本而犧牲美觀似乎不現(xiàn)實(shí)。所以設(shè)計(jì)師將文字折疊起來(lái)，這樣不僅擁有漂亮的外觀，而且保持了界面的清爽干凈。
20. 用視頻背景替代Banner大圖
動(dòng)態(tài)的視頻背景無(wú)疑可以承載遠(yuǎn)超單一圖片的信息，如果你不想將網(wǎng)站制作成長(zhǎng)滾動(dòng)單頁(yè)，那么使用視頻背景是非常不錯(cuò)的選擇。漂亮的視頻背景不僅讓整個(gè)頁(yè)面鮮活起來(lái)，還很好地起到了產(chǎn)品展示的功能。
21. 提供多級(jí)側(cè)邊欄
相比于傳統(tǒng)的頂部多級(jí)導(dǎo)航欄，側(cè)邊欄會(huì)讓頁(yè)面顯得更加整齊易用。Carolina Herrera 的側(cè)邊欄設(shè)計(jì)則更有意思，它采用的是多級(jí)側(cè)邊欄，功能上不弱于前者，提升了瀏覽體驗(yàn)，而視覺(jué)上的效果則更加突出。
22.無(wú)需跳轉(zhuǎn)的購(gòu)物車管理
作為電商網(wǎng)站，編輯管理購(gòu)物車是重要的功能之一。為了提升整體體驗(yàn)，Everlane 的設(shè)計(jì)師允許用戶將鼠標(biāo)懸停在某個(gè)產(chǎn)品上，選擇大小類別，添加到購(gòu)物車，整個(gè)過(guò)程無(wú)需離開(kāi)相關(guān)頁(yè)面。無(wú)需跳轉(zhuǎn)搞定一切，用戶可以更便捷地完成購(gòu)物環(huán)節(jié)。
23. 使用簡(jiǎn)明的布局
Helmut Lang 是以為奧地利時(shí)裝設(shè)計(jì)師，他在維也納創(chuàng)辦了自己的設(shè)計(jì)工作室。在構(gòu)建他的在線購(gòu)物網(wǎng)站之時(shí)，Lang將他簡(jiǎn)單到無(wú)與倫比的設(shè)計(jì)風(fēng)格也引入到網(wǎng)頁(yè)設(shè)計(jì)中來(lái)，他將他認(rèn)為最重要也是最關(guān)鍵的元素保留下來(lái)，而其核心，就是他的收藏。
24. 用輪播圖做頁(yè)頭
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)品，整欄式的高清大圖能給用戶的視覺(jué)沖擊力，無(wú)需更多文案，一圖勝千言。
25. 高大上的俯拍圖
近年來(lái)俯拍圖是營(yíng)造網(wǎng)站設(shè)計(jì)感的流行手法之一。Munchery 作為一個(gè)美食類的網(wǎng)站，自然也不能落于人后，俯拍圖不僅能呈現(xiàn)出美食的全貌，而且能夠營(yíng)造出整齊而優(yōu)雅的質(zhì)感。
26. 用網(wǎng)站來(lái)補(bǔ)充配色
時(shí)尚剃須刀品牌Harry的網(wǎng)站配色方案是參考他們的產(chǎn)品配色來(lái)做的，背景色會(huì)隨著操作而改變，剃須刀本身的橙色、棕色和深藍(lán)色也是貫穿整個(gè)網(wǎng)站設(shè)計(jì)的配色方案。
27. 信息化的產(chǎn)品簡(jiǎn)介
Beo Play 在線商店將產(chǎn)品的信息以漂亮的信息圖展現(xiàn)出來(lái)，在其他的產(chǎn)品還在簡(jiǎ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)上商店用無(wú)限滾動(dòng)的交互方式將筆的所有零部件拆開(kāi)給你看，用漂亮的高清圖片來(lái)講述他們的產(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度全景展示出來(lái)，讓用戶可以在網(wǎng)站上了解這些高端手包的全部細(xì)節(jié)。網(wǎng)站的配色方案更多的是配合這些產(chǎn)品的配色來(lái)進(jìn)行調(diào)整的，目標(biāo)非常明確。
31. 稍加調(diào)整的經(jīng)典柵格系統(tǒng)
Diesel 基于傳統(tǒng)的對(duì)稱式柵格系統(tǒng)來(lái)展示他們的產(chǎn)品，不過(guò)他們?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)站深度整合到一起，讓用戶可以更方便更無(wú)縫地分享他們的購(gòu)物體驗(yàn)與感受。
33. 重新設(shè)計(jì)下拉菜單
如果下拉框并不只是一個(gè)布局用的控件，那么 The Horse 的頁(yè)面設(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)航和頁(yè)眉的設(shè)計(jì)讓人容易想起傳統(tǒng)的報(bào)紙頁(yè)頭，襯線體和非襯線體的搭配讓網(wǎng)站很容易喚醒用戶對(duì)于傳統(tǒng)排版的瀏覽體驗(yàn)。
35. 采用堆棧式界面
堆棧式界面在iPad 的APP中非常常見(jiàn)，這種結(jié)構(gòu)可以更好地組織樹(shù)狀結(jié)構(gòu)的信息，而 Travel Alberta 的頁(yè)面中也很好地使用這種界面模式來(lái)替代傳統(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)圖片能更好地展示客戶的故事，配合陽(yáng)剛無(wú)比動(dòng)態(tài)十足的風(fēng)格，令人印象深刻。
37. 使用超大尺寸產(chǎn)品圖
Warby and Parker 使用超大尺寸的產(chǎn)品圖來(lái)呈現(xiàn)產(chǎn)品的每一個(gè)令人稱道的系列，不論是在手機(jī)還是在桌面上，都足夠有沖擊力。
38. 順滑無(wú)縫的購(gòu)物體驗(yàn)
如果說(shuō) Coin 的網(wǎng)站設(shè)計(jì)有什么令人難忘的地方，那肯定是它無(wú)縫的結(jié)帳購(gòu)買體驗(yàn)。
39. 鮮明的色彩對(duì)比
Capellos 所提供的產(chǎn)品是各種面點(diǎn)，從包裝到網(wǎng)頁(yè)設(shè)計(jì)都采用的是強(qiáng)對(duì)比的黑白色，搭配點(diǎn)綴的紅色，整體散發(fā)出一種協(xié)調(diào)而鮮明的視覺(jué)效果，協(xié)調(diào)而對(duì)比強(qiáng)烈。
40. 以字體排版為中心的設(shè)計(jì)
高清大圖往往會(huì)讓用戶忘記，以字體排版為重心的設(shè)計(jì)有多么美妙。精致的線條，別具一格的排版，精致的圖片和獨(dú)特的柵格，整個(gè)網(wǎng)站看起來(lái)像是一個(gè)高端的畫廊。
41. 基于模板的設(shè)計(jì)
對(duì)于龐雜而繁復(fù)的產(chǎn)品類型，基于模板的設(shè)計(jì)會(huì)讓整個(gè)網(wǎng)站看起來(lái)整飭而清爽，這樣的設(shè)計(jì)也會(huì)極大的提升生產(chǎn)力。
42. 講故事
革命性的紐約餐廳Maple 在網(wǎng)站上用視頻來(lái)講述屬于他們自己的故事，那些關(guān)于餐廳的細(xì)節(jié)會(huì)讓用戶更了解他們，了解美食的誕生過(guò)程。
43. 用視覺(jué)形象代表產(chǎn)品
Visual Supply Co 將他們的產(chǎn)品用不同的色塊來(lái)代表，雖然這種手法并不一定適用于所有的電商網(wǎng)站，但是某些特殊類型的產(chǎn)品而言，這種方式也挺不錯(cuò)。
44. 讓產(chǎn)品便于定制
對(duì)于服裝這類具備可定制屬性的產(chǎn)品而言，讓用戶易于定制是非常有必要的。服裝品牌 Le Coq Sportif 就是這么做的，讓每個(gè)定制屬性都非常容易選擇和操作。
45. 一頁(yè)搞定所有問(wèn)題
Hunters Wine Shop 的網(wǎng)頁(yè)設(shè)計(jì)走的就是一頁(yè)搞定所有問(wèn)題的路線，你可以在瀏覽完之后直接在頁(yè)面內(nèi)完成購(gòu)買環(huán)節(jié)。易于瀏覽和簡(jiǎn)約設(shè)計(jì)是它們的突出之處。
來(lái)源：designschool
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com