22個網(wǎng)設(shè)計經(jīng)典案例不容錯過

1、22個網(wǎng)頁設(shè)計經(jīng)典案例不容錯過！22個網(wǎng)頁設(shè)計經(jīng)典案例不容錯過！2015-12-29 10:30:14 |閱讀原文 摘要：響應(yīng)式頁面設(shè)計與傳統(tǒng)設(shè)計的技術(shù)和創(chuàng)意方面有著顯著的不同，巧妙利用響應(yīng)式 設(shè)計在設(shè)計網(wǎng)站時就能得到驚人的效果。Responsive webdesign【響應(yīng)式網(wǎng)頁設(shè)計】這個概念與開發(fā)網(wǎng)站設(shè)計有關(guān)， 該設(shè)計用以幫助網(wǎng)頁適應(yīng)每個用戶的計算機(jī)的分辨率，即根 據(jù)每個用戶使用的計算機(jī)的分辨率不同而改變網(wǎng)頁的表現(xiàn)方式。更確切地說，這個概念允許一個4列布局的1292px寬度的網(wǎng)頁可以在1025px的寬度屏幕中顯示并自動簡化成 為兩列。止匕外，它還能適應(yīng)智能手機(jī)和電腦平板電腦。這種特殊的設(shè)計

2、理念我們稱之為“響應(yīng)式設(shè)計”?，F(xiàn)在你可以測試一下你的網(wǎng)站使用的響應(yīng)式設(shè)計工具。相比較與傳統(tǒng)的網(wǎng)頁開發(fā)設(shè)計，響應(yīng)式網(wǎng)頁設(shè)計是一個完全 不同的形式，并且開發(fā)人員【尤其是年輕的開發(fā)人員】要知 道響應(yīng)式網(wǎng)頁設(shè)計的利與弊。這篇博客就是一個能夠說明響 應(yīng)式網(wǎng)頁設(shè)計用途的一個很有用的例子。用來開發(fā)一個響應(yīng) 式網(wǎng)站最基礎(chǔ)直接的可能就是選擇“media queries”【媒體查詢，即根據(jù)條件給相應(yīng)符合條件的媒體調(diào)用相應(yīng)的樣式表】 然而唯一比較麻煩的是，新的查詢可以在瞬間彈由，但每一次跳動，網(wǎng)頁的外觀和組織都會產(chǎn)生突然和急劇的變化。專家建議這種情況可以使用 CSS來緩解頁面的跳動。包含數(shù)據(jù)表的頁面給響應(yīng)式頁面設(shè)計

3、師帶來了特殊挑戰(zhàn)。數(shù) 據(jù)表在默認(rèn)的情況下是非常寬的，當(dāng)用戶縮小頁面去看整個 列表時，列表就會變得太小以至于難以閱讀。但當(dāng)你試著放 大它以便可以閱讀時，就只能通過水平或豎直的滾動頁面來 查看它。好吧，其實是有多種方式來避免這個問題的。轉(zhuǎn)變 數(shù)據(jù)表的形式為餅狀圖或者微型圖形是已經(jīng)被認(rèn)可的一種 解決方式。這種迷你圖形更適合狹小的屏幕。圖片在響應(yīng)式頁面設(shè)計中被稱作情景感知。這獨(dú)有的技術(shù)服 務(wù)存在真正意義是在響應(yīng)式設(shè)計中可以作為圖像服務(wù)于不 同的分辨率，從大屏幕到小屏幕都可以完美適應(yīng)。縮放圖像 顯然在更新開發(fā)者的工具和編碼語言的幫助下更新的更加 流暢，允許其在任何情況下都能更快反應(yīng)。響應(yīng)式頁面設(shè)計與傳統(tǒng)

4、設(shè)計的技術(shù)和創(chuàng)意方面有著顯著的 不同，巧妙利用響應(yīng)式設(shè)計在設(shè)計網(wǎng)站時就能得到驚人的效 果。響應(yīng)式網(wǎng)頁設(shè)計實例Simon Collison盡管現(xiàn)在這個色調(diào)看起來灰蒙蒙的，網(wǎng)格式 風(fēng)格的網(wǎng)頁看起來有點單調(diào)無趣，但是當(dāng)這個網(wǎng)頁發(fā)布時還 是引起了一定程度上的熱議，因為他那高檔的布局。主要原因是設(shè)計師集中精力在網(wǎng)頁的響應(yīng)式交互上，這使得 響應(yīng)式設(shè)計能在最近開始流行，從而給普通設(shè)計師提供了一 個典型事例，告訴普通設(shè)計師怎樣讓普通網(wǎng)格式布局的網(wǎng)頁 優(yōu)雅轉(zhuǎn)型。Andersson-Wise Architects我們來看一下這個建筑與設(shè)計工 作室的網(wǎng)站，這個網(wǎng)站的主要焦點是以照片的形式來展示代 表作品、以往經(jīng)驗以

5、及公司的顧客，這樣的設(shè)計方式并不奇 怪。整個網(wǎng)站頁面包括三個主要部分，每個部分都是以圖片為背 景。這個靈活的解決方案有效地為每個標(biāo)準(zhǔn)屏幕尺寸都匹配 了一個恰當(dāng)?shù)牟季帧樽x者提供了舒適靈活的網(wǎng)頁內(nèi)容。Stephen CaverStephen Caver是一個一流的響應(yīng)式網(wǎng)站。你一 定會問，他有什么特別。答案很簡單，仔細(xì)看一下前面的頁 面，你就會知道，它包括：1 .一個巨大印刷字體的歡迎消息；2 .網(wǎng)站頂部有一個巨大的區(qū)域放置菜單；3 .博客的規(guī)則布局?？梢赃@樣來說，每個網(wǎng)站都包含這三個基本方面。設(shè)計師給 了我們一個對于網(wǎng)格式標(biāo)記和博文根據(jù)設(shè)備的屏幕尺寸如 何排版的正確示例。SparkboxSpe

6、akbox展示了一個企業(yè)網(wǎng)站的基本結(jié)構(gòu)。布局相當(dāng)簡單，它是基于一個標(biāo)準(zhǔn)，通常使用一組橫向色塊使每一 組數(shù)據(jù)都能有序排列。這樣的結(jié)構(gòu)是很容易適應(yīng)各種屏幕尺寸的。按次序排列的色塊即使發(fā)生變化也非常的順利和靈活，給用戶一個好看的和 組織有序的布局。Food Sense這是一個普通的左側(cè)博客風(fēng)格雜志布局加上眾多 美味圖片充斥的一塊一塊的布局的網(wǎng)站，這個網(wǎng)站展示了它 是如何轉(zhuǎn)化和適應(yīng)不同分辨率的，并讓用戶看起來這些網(wǎng)站 是同一個網(wǎng)站。然而，并沒有什么一致的網(wǎng)頁布局規(guī)律，這個是公認(rèn)的典型解決方案，用來吸引移動網(wǎng)絡(luò)的在線讀者，贏得了新的用戶。與此同時，網(wǎng)站解決了視覺過載的美學(xué)問題。The Boston Gl

7、obe波士頓環(huán)球報 是一個很好的例子，是一個經(jīng)過用心規(guī)劃的新聞類響應(yīng)式網(wǎng)站。網(wǎng)站采用傳統(tǒng)的方法幫助那些需要運(yùn)營自己經(jīng)常更新的在線雜志的用戶們，讓他 們能更好地使用網(wǎng)站功能。雖然網(wǎng)頁很符合響應(yīng)式規(guī)律，但是乍一看似乎網(wǎng)站有一點復(fù) 雜，混亂的外表讓人覺得難以處理，實際上解決方案非常原 始。設(shè)計師已經(jīng)明智地把所有信息分割成了3歹U,并根據(jù)屏幕的大小，而讓數(shù)量增減，當(dāng)屏幕變小時，布局從3列慢慢地 遞減至2列直到只能顯示一列為止，這樣就能有秩序的展現(xiàn) 你的所有信息。Think Vitamin說實在的，Think Vitamin無法吹噓任何關(guān)于它 自身的博客設(shè)計。它的結(jié)構(gòu)跟其他網(wǎng)站一樣。整個網(wǎng)站右側(cè) 是一欄

8、單列補(bǔ)充信息，一個網(wǎng)頁導(dǎo)航、一個 logo、一個搜索 框以及一個頁尾。然而，這個團(tuán)隊并不只是簡單地使用基礎(chǔ)的響應(yīng)式結(jié)構(gòu)；他 們也積極地將設(shè)計元素集合起來。而且，對比色的色塊有助 于分辨內(nèi)容區(qū)域和一些功能性元素例如社交的視頻和廣告， 擴(kuò)大了手機(jī)用戶的可視區(qū)域以及加強(qiáng)了可讀性。Sasquatch! Music FestivalSasquatch! Music Festival 有大量的 多媒體內(nèi)容，包括視頻和動態(tài)效果，此外網(wǎng)頁上加入了一些 藝術(shù)的手寫體和夢幻的圖形內(nèi)容。因此對于這種組合而言， 如何在手機(jī)和平板電腦上能正確地顯示每一塊內(nèi)容就成了 一個挑戰(zhàn)。盡管如此，這個網(wǎng)站中的響應(yīng)式設(shè)計能夠被很好的

9、詮釋。它 恰到好處地處理了每一個細(xì)節(jié)，創(chuàng)造一個視覺上討人喜歡的 外觀，甚至在小屏幕上也并沒有失去它獨(dú)創(chuàng)性的魅力。Internet Images這是一個干凈的有組織的網(wǎng)站，由一個靈活 的橫向色塊條布局構(gòu)成。這里也是通過強(qiáng)烈的視覺對比區(qū)分 信息，從而完成響應(yīng)式結(jié)構(gòu)。這種簡單卻強(qiáng)大的組合有助于提高可讀性，尤其是在小型設(shè) 備上，十分規(guī)律的布局，每一塊都能持續(xù)地閱讀下去。但也 由于這種固有的單調(diào)性，也能輕易地摧毀讀者的熱情從而降 低讀者的閱讀興趣。Staffanstorp在這里，如果能夠處理好小屏幕的適應(yīng)性功能， 就如同在大屏幕上獲取內(nèi)容的效果一樣。1 .由色的響應(yīng)式是不管你的手機(jī)設(shè)備如何，都能展示曲的

10、網(wǎng) 頁設(shè)計2 .良好的外觀結(jié)構(gòu)增加了信息的層級關(guān)系3.手機(jī)和平板是一個為讀者快速傳達(dá)信息的媒介。盡管博客設(shè)計并不會與其他不同，但是它如果需要滿足web上精準(zhǔn)的需求，還需要全新的一個水平。Seminal Responsive Web Design Example 作為一個極受歡迎的網(wǎng)站意味著這個網(wǎng)站必須是一個響應(yīng)式設(shè)計的完美的例子。它甚至有一個恰當(dāng)?shù)臉?biāo)題“一個靈活的網(wǎng)格”，網(wǎng)站的一切都沿襲一套完美的規(guī)則，所以它非常清晰。正如你看到 的那樣，這個團(tuán)隊更注重對信息和數(shù)據(jù)的展現(xiàn)而非視覺上， 所以它所有的樣式都是暗色調(diào)的。演示頁包括導(dǎo)航、文本區(qū)域、網(wǎng)格樣式區(qū)甚至是logo樣式，可以說它涵蓋了所有最簡單的

11、元素。這個網(wǎng)站有邏輯地分區(qū)和布局，為網(wǎng)頁在適應(yīng)用戶所攜帶的不同大小分辨率的設(shè)備 上展示帶來了完美的解決經(jīng)驗。Naomi AtkinsonNaomi Atkinson 利用馬賽克風(fēng)格布局。這種解決方案被廣泛應(yīng)用于想立刻創(chuàng)建固定長寬比作品的在線作品集。這個網(wǎng)站值得一提的并不是因為他的設(shè)計，因為（說的婉轉(zhuǎn) 一些）它還需要繼續(xù)努力，但由于其聰明的功能性，這點還 是相當(dāng)不錯的。設(shè)計師能很很好地解決當(dāng)你縮小你的瀏覽器窗口的時候的問題，他將不規(guī)則的網(wǎng)格轉(zhuǎn)換成規(guī)則的網(wǎng)格。這還不是全部；頁面的變換隨著流暢的動效實現(xiàn)，這增加了 這個網(wǎng)頁的吸引力。Forefathers Group你會怎么評價這個網(wǎng)站？當(dāng)然，它給人

12、一 種特殊地、完全壓倒性的印象，這確實是一個無與倫比精巧 的設(shè)計。這個團(tuán)隊沒有張揚(yáng)的設(shè)計，就是在一些細(xì)節(jié)中很好 地把握，并傳達(dá)由它要表達(dá)的藝術(shù)效果。網(wǎng)站的魅力與令人難以忘懷的復(fù)古風(fēng)格字體、由色的手繪插 圖、紋理背景和夸張的圖形。所有的這些元素巧妙地配合文 字內(nèi)容占據(jù)了整個網(wǎng)站。因此，正如你縮看到的，這個團(tuán)隊需要考慮大量的細(xì)節(jié)才能 使網(wǎng)站看起來舒服一些，并讓網(wǎng)站能夠通過所有的設(shè)備瀏覽 到。Spigot Design這個網(wǎng)頁中的響應(yīng)式動作確實給用戶留下深刻 的印象，不管是在包含網(wǎng)格式、逐行式數(shù)據(jù)顯示的標(biāo)準(zhǔn)布局 中，還是在開場視頻、動態(tài)圖形和菜單中?？紤]到這一點，這個團(tuán)隊致力于為在線觀眾提供一個優(yōu)雅

13、的 設(shè)計。它有吸引人的特效和留白，更重要的是，這樣的設(shè)計 很好地適應(yīng)了各個屏幕的大小。New Adventures In Web Design Conference 2012 基于靈活的 網(wǎng)格設(shè)計，這個組織贏得了盡可能多的潛在訪客。同時，這 種特性，不僅有助于網(wǎng)站的外觀， 更有利于網(wǎng)站的宣傳活動。由于這個網(wǎng)站是專門為網(wǎng)頁設(shè)計的團(tuán)隊，它很好地向用戶展示了這個團(tuán)隊所認(rèn)識到的當(dāng)今網(wǎng)頁的需求，并嚴(yán)格地堅持于 此。因此，建立一個具備所有流行元素的網(wǎng)站，是走向成功 的重要途徑。Illy Issimo響應(yīng)式設(shè)計對于高質(zhì)量促銷網(wǎng)站來說是一種重要的功能，這樣能夠使網(wǎng)站更受消費(fèi)者青睞。111y Issimo就很巧

14、妙地運(yùn)用了這個特點，打造由一個靈活的界面： 為客戶提供一個舒適的體驗效果；擴(kuò)大受眾面；吸引使用其他設(shè)備的潛在用戶。因此，網(wǎng)頁上方放置有一個醒目的廣告圖。Arrrrcamp Conference這個網(wǎng)站把重點集中在文案上，而不是利用多媒體技術(shù)。網(wǎng)站基于一個單調(diào)的白色背景，使得文字 能夠清晰地顯現(xiàn)，同時也加入了最近很流行的“虛擬按鈕”("ghost" buttons)o整個網(wǎng)頁可以隨著瀏覽器的大小進(jìn)行適配；它能夠從 1920像素到240像素之間進(jìn)行靈活適配，對于紅寶石買家來說就 是一個巨大的福利，她們可以用平板或者手機(jī)隨時在網(wǎng)上搜 索必要的東西。Robot or Not ? R

15、obot or Not?是一個提由了靈活的網(wǎng)格布局 的演示網(wǎng)站。用文本和多媒體數(shù)據(jù)等量搭配，占據(jù)了整個瀏覽器屏幕(通常情況下）失去了網(wǎng)頁設(shè)計中所有的裝飾和創(chuàng)意造型，團(tuán)隊 試圖將這種常規(guī)的頁面設(shè)計成為一個優(yōu)秀的案例，讓新手生 動地了解布局是如何適應(yīng)各種屏幕尺寸的。Earth HourEarth Hour的確是一個先進(jìn)、 復(fù)雜的網(wǎng)站，其中充 斥著許多多媒體，這些多媒體包括視頻和吸引眼球的照片。同時，這個網(wǎng)站更是一個在線信息圖表，利用漂亮的圖形和流暢的變換使人們關(guān)注網(wǎng)站需要表達(dá)的信息。不幸運(yùn)的是，網(wǎng)站的適應(yīng)性沒有做好，網(wǎng)站遭遇了來自平板 版本引發(fā)的矛盾，更不必說在手機(jī)等更小設(shè)備上的展示效 果。Tei

16、xid 6這個創(chuàng)意團(tuán)隊通過使用紋理，豐富多彩的圖片和插畫這種巧妙的手法更有效地在網(wǎng)上展現(xiàn)自己的公司，讓它看上去與眾不同并抓人眼球。擁有藝術(shù)性的一面絕對會非常吸引人。更別說還有適應(yīng)競爭環(huán)境的能力了。這也是現(xiàn)在所要展現(xiàn)的正確方式。盡管網(wǎng)站 是靜態(tài)的，沒有華麗的特效或是動態(tài)設(shè)計，但是響應(yīng)行為很 大程度促進(jìn)了用戶體驗，這是非常有意義的。RibotRibot是一個高端的數(shù)碼設(shè)計工作室，專業(yè)從事手機(jī)， 平板電腦和未來產(chǎn)品的設(shè)計 ？正如標(biāo)題所說。這里的關(guān)鍵詞是移動和平板電腦，這意味著這個團(tuán)隊專注于 創(chuàng)造由適合于這種設(shè)備的設(shè)計，所以這個網(wǎng)站即使在很小的 屏幕上，也能很好地顯示信息，并提供給在線訪問者最適合的訪問公司服務(wù)的方式。D