響應式網(wǎng)頁設計：22個經(jīng)典案例不容錯過！
Responsive web design【響應式網(wǎng)頁設計】這個概念與開發(fā)網(wǎng)站設計有關，該設計用以幫助網(wǎng)頁適應每個用戶的計算機的分辨率，即根據(jù)每個用戶使用的計算機的分辨率不同而改變網(wǎng)頁的表現(xiàn)方式。更確切地說，這個概念允許一個4列布局的1292px寬度的網(wǎng)頁可以在1025px的寬度屏幕中顯示并自動簡化成為兩列。此外，它還能適應智能手機和電腦平板電腦。這種特殊的設計理念我們稱之為“響應式設計”。
現(xiàn)在你可以測試一下你的網(wǎng)站使用的響應式設計工具。
相比較與傳統(tǒng)的網(wǎng)頁開發(fā)設計，響應式網(wǎng)頁設計是一個完全不同的形式，并且開發(fā)人員【尤其是年輕的開發(fā)人員】要知道響應式網(wǎng)頁設計的利與弊。這篇博客就是一個能夠說明響應式網(wǎng)頁設計用途的一個很有用的例子。用來開發(fā)一個響應式網(wǎng)站最基礎直接的可能就是選擇“media queries”【媒體查詢，即根據(jù)條件給相應符合條件的媒體調(diào)用相應的樣式表】。然而唯一比較麻煩的是，新的查詢可以在瞬間彈出，但每一次跳動，網(wǎng)頁的外觀和組織都會產(chǎn)生突然和急劇的變化。專家建議這種情況可以使用CSS來緩解頁面的跳動。
包含數(shù)據(jù)表的頁面給響應式頁面設計師帶來了特殊挑戰(zhàn)。數(shù)據(jù)表在默認的情況下是非常寬的，當用戶縮小頁面去看整個列表時，列表就會變得太小以至于難以閱讀。但當你試著放大它以便可以閱讀時，就只能通過水平或豎直的滾動頁面來查看它。好吧，其實是有多種方式來避免這個問題的。轉(zhuǎn)變數(shù)據(jù)表的形式為餅狀圖或者微型圖形是已經(jīng)被認可的一種解決方式。這種迷你圖形更適合狹小的屏幕。
圖片在響應式頁面設計中被稱作情景感知。這獨有的技術服務存在真正意義是在響應式設計中可以作為圖像服務于不同的分辨率，從大屏幕到小屏幕都可以完美適應?？s放圖像顯然在更新開發(fā)者的工具和編碼語言的幫助下更新的更加流暢，允許其在任何情況下都能更快反應。
響應式頁面設計與傳統(tǒng)設計的技術和創(chuàng)意方面有著顯著的不同，巧妙利用響應式設計在設計網(wǎng)站時就能得到驚人的效果。
響應式網(wǎng)頁設計實例
盡管現(xiàn)在這個色調(diào)看起來灰蒙蒙的，網(wǎng)格式風格的網(wǎng)頁看起來有點單調(diào)無趣，但是當這個網(wǎng)頁發(fā)布時還是引起了一定程度上的熱議，因為他那高檔的布局。
主要原因是設計師集中精力在網(wǎng)頁的響應式交互上，這使得響應式設計能在最近開始流行，從而給普通設計師提供了一個典型事例，告訴普通設計師怎樣讓普通網(wǎng)格式布局的網(wǎng)頁優(yōu)雅轉(zhuǎn)型。
我們來看一下這個建筑與設計工作室的網(wǎng)站，這個網(wǎng)站的主要焦點是以照片的形式來展示代表作品、以往經(jīng)驗以及公司的顧客，這樣的設計方式并不奇怪。
整個網(wǎng)站頁面包括三個主要部分，每個部分都是以圖片為背景。這個靈活的解決方案有效地為每個標準屏幕尺寸都匹配了一個恰當?shù)牟季?。為讀者提供了舒適靈活的網(wǎng)頁內(nèi)容。
Stephen Caver是一個一流的響應式網(wǎng)站。你一定會問，他有什么特別。答案很簡單，仔細看一下前面的頁面，你就會知道，它包括：
一個巨大印刷字體的歡迎消息；
網(wǎng)站頂部有一個巨大的區(qū)域放置菜單；
博客的規(guī)則布局。
可以這樣來說，每個網(wǎng)站都包含這三個基本方面。設計師給了我們一個對于網(wǎng)格式標記和博文根據(jù)設備的屏幕尺寸如何排版的正確示例。
Speakbox 展示了一個企業(yè)網(wǎng)站的基本結構。布局相當簡單，它是基于一個標準，通常使用一組橫向色塊使每一組數(shù)據(jù)都能有序排列。
這樣的結構是很容易適應各種屏幕尺寸的。按次序排列的色塊即使發(fā)生變化也非常的順利和靈活，給用戶一個好看的和組織有序的布局。
這是一個普通的左側(cè)博客風格雜志布局加上眾多美味圖片充斥的一塊一塊的布局的網(wǎng)站，這個網(wǎng)站展示了它是如何轉(zhuǎn)化和適應不同分辨率的，并讓用戶看起來這些網(wǎng)站是同一個網(wǎng)站。
然而，并沒有什么一致的網(wǎng)頁布局規(guī)律，這個是公認的典型解決方案，用來吸引移動網(wǎng)絡的在線讀者，贏得了新的用戶。與此同時，網(wǎng)站解決了視覺過載的美學問題。
《波士頓環(huán)球報》是一個很好的例子，是一個經(jīng)過用心規(guī)劃的新聞類響應式網(wǎng)站。網(wǎng)站采用傳統(tǒng)的方法,幫助那些需要運營自己經(jīng)常更新的在線雜志的用戶們，讓他們能更好地使用網(wǎng)站功能。
雖然網(wǎng)頁很符合響應式規(guī)律，但是乍一看似乎網(wǎng)站有一點復雜,混亂的外表讓人覺得難以處理，實際上解決方案非常原始。設計師已經(jīng)明智地把所有信息分割成了3列，并根據(jù)屏幕的大小，而讓數(shù)量增減,當屏幕變小時，布局從3列慢慢地遞減至2列直到只能顯示一列為止,這樣就能有秩序的展現(xiàn)你的所有信息。
說實在的，Think Vitamin無法吹噓任何關于它自身的博客設計。它的結構跟其他網(wǎng)站一樣。整個網(wǎng)站右側(cè)是一欄單列補充信息，一個網(wǎng)頁導航、一個logo、一個搜索框以及一個頁尾。
然而，這個團隊并不只是簡單地使用基礎的響應式結構；他們也積極地將設計元素集合起來。而且，對比色的色塊有助于分辨內(nèi)容區(qū)域和一些功能性元素例如社交的視頻和廣告，擴大了手機用戶的可視區(qū)域以及加強了可讀性。
Sasquatch! Music Festival有大量的多媒體內(nèi)容，包括視頻和動態(tài)效果，此外網(wǎng)頁上加入了一些藝術的手寫體和夢幻的圖形內(nèi)容。因此對于這種組合而言，如何在手機和平板電腦上能正確地顯示每一塊內(nèi)容就成了一個挑戰(zhàn)。
盡管如此，這個網(wǎng)站中的響應式設計能夠被很好的詮釋。它恰到好處地處理了每一個細節(jié)，創(chuàng)造一個視覺上討人喜歡的外觀，甚至在小屏幕上也并沒有失去它獨創(chuàng)性的魅力。
這是一個干凈的有組織的網(wǎng)站，由一個靈活的橫向色塊條布局構成。這里也是通過強烈的視覺對比區(qū)分信息，從而完成響應式結構。
這種簡單卻強大的組合有助于提高可讀性，尤其是在小型設備上，十分規(guī)律的布局，每一塊都能持續(xù)地閱讀下去。但也由于這種固有的單調(diào)性，也能輕易地摧毀讀者的熱情從而降低讀者的閱讀興趣。
在這里，如果能夠處理好小屏幕的適應性功能，就如同在大屏幕上獲取內(nèi)容的效果一樣。
出色的響應式是不管你的手機設備如何，都能展示出的網(wǎng)頁設計
良好的外觀結構增加了信息的層級關系
手機和平板是一個為讀者快速傳達信息的媒介。
盡管博客設計并不會與其他不同，但是它如果需要滿足web上精準的需求，還需要全新的一個水平。
Seminal Responsive Web Design Example
作為一個極受歡迎的網(wǎng)站意味著這個網(wǎng)站必須是一個響應式設計的完美的例子。它甚至有一個恰當?shù)臉祟}“一個靈活的網(wǎng)格”，網(wǎng)站的一切都沿襲一套完美的規(guī)則，所以它非常清晰。正如你看到的那樣，這個團隊更注重對信息和數(shù)據(jù)的展現(xiàn)而非視覺上，所以它所有的樣式都是暗色調(diào)的。
演示頁包括導航、文本區(qū)域、網(wǎng)格樣式區(qū)甚至是logo樣式，可以說它涵蓋了所有最簡單的元素。這個網(wǎng)站有邏輯地分區(qū)和布局，為網(wǎng)頁在適應用戶所攜帶的不同大小分辨率的設備上展示帶來了完美的解決經(jīng)驗。
Naomi Atkinson利用馬賽克風格布局。這種解決方案被廣泛應用于想立刻創(chuàng)建固定長寬比作品的在線作品集。
這個網(wǎng)站值得一提的并不是因為他的設計，因為（說的婉轉(zhuǎn)一些）它還需要繼續(xù)努力，但由于其聰明的功能性，這點還是相當不錯的。設計師能很很好地解決當你縮小你的瀏覽器窗口的時候的問題，他將不規(guī)則的網(wǎng)格轉(zhuǎn)換成規(guī)則的網(wǎng)格。這還不是全部；頁面的變換隨著流暢的動效實現(xiàn)，這增加了這個網(wǎng)頁的吸引力。
你會怎么評價這個網(wǎng)站？當然，它給人一種特殊地、完全壓倒性的印象，這確實是一個無與倫比精巧的設計。這個團隊沒有張揚的設計，就是在一些細節(jié)中很好地把握，并傳達出它要表達的藝術效果。
網(wǎng)站的魅力與令人難以忘懷的復古風格字體、出色的手繪插圖、紋理背景和夸張的圖形。所有的這些元素巧妙地配合文字內(nèi)容占據(jù)了整個網(wǎng)站。
因此，正如你縮看到的，這個團隊需要考慮大量的細節(jié)才能使網(wǎng)站看起來舒服一些，并讓網(wǎng)站能夠通過所有的設備瀏覽到。
這個網(wǎng)頁中的響應式動作確實給用戶留下深刻的印象，不管是在包含網(wǎng)格式、逐行式數(shù)據(jù)顯示的標準布局中，還是在開場視頻、動態(tài)圖形和菜單中。
考慮到這一點，這個團隊致力于為在線觀眾提供一個優(yōu)雅的設計。它有吸引人的特效和留白，更重要的是，這樣的設計很好地適應了各個屏幕的大小。
New Adventures In Web Design Conference 2012
基于靈活的網(wǎng)格設計，這個組織贏得了盡可能多的潛在訪客。同時，這種特性，不僅有助于網(wǎng)站的外觀，更有利于網(wǎng)站的宣傳活動。由于這個網(wǎng)站是專門為網(wǎng)頁設計的團隊，它很好地向用戶展示了這個團隊所認識到的當今網(wǎng)頁的需求，并嚴格地堅持于此。因此，建立一個具備所有流行元素的網(wǎng)站，是走向成功的重要途徑。
響應式設計對于高質(zhì)量促銷網(wǎng)站來說是一種重要的功能，這樣能夠使網(wǎng)站更受消費者青睞。Illy Issimo就很巧妙地運用了這個特點，打造出一個靈活的界面：
為客戶提供一個舒適的體驗效果；
擴大受眾面；
吸引使用其他設備的潛在用戶。
因此，網(wǎng)頁上方放置有一個醒目的廣告圖。
這個網(wǎng)站把重點集中在文案上，而不是利用多媒體技術。網(wǎng)站基于一個單調(diào)的白色背景，使得文字能夠清晰地顯現(xiàn)，同時也加入了最近很流行的“虛擬按鈕”（“ghost”buttons）。
整個網(wǎng)頁可以隨著瀏覽器的大小進行適配；它能夠從1920像素到240像素之間進行靈活適配，對于紅寶石買家來說就是一個巨大的福利，她們可以用平板或者手機隨時在網(wǎng)上搜索必要的東西。
Robot or Not?是一個提出了靈活的網(wǎng)格布局的演示網(wǎng)站。
用文本和多媒體數(shù)據(jù)等量搭配，占據(jù)了整個瀏覽器屏幕（通常情況下）失去了網(wǎng)頁設計中所有的裝飾和創(chuàng)意造型，團隊試圖將這種常規(guī)的頁面設計成為一個優(yōu)秀的案例，讓新手生動地了解布局是如何適應各種屏幕尺寸的。
Earth Hour 的確是一個先進、復雜的網(wǎng)站，其中充斥著許多多媒體，這些多媒體包括視頻和吸引眼球的照片。同時，這個網(wǎng)站更是一個在線信息圖表，利用漂亮的圖形和流暢的變換使人們關注網(wǎng)站需要表達的信息。
不幸運的是，網(wǎng)站的適應性沒有做好，網(wǎng)站遭遇了來自平板版本引發(fā)的矛盾，更不必說在手機等更小設備上的展示效果。
這個創(chuàng)意團隊通過使用紋理，豐富多彩的圖片和插畫這種巧妙的手法更有效地在網(wǎng)上展現(xiàn)自己的公司， 讓它看上去與眾不同并抓人眼球。
擁有藝術性的一面絕對會非常吸引人。更別說還有適應競爭環(huán)境的能力了。這也是現(xiàn)在所要展現(xiàn)的正確方式。盡管網(wǎng)站是靜態(tài)的，沒有華麗的特效或是動態(tài)設計，但是響應行為很大程度促進了用戶體驗，這是非常有意義的。
Ribot是一個高端的數(shù)碼設計工作室，專業(yè)從事手機，平板電腦和未來產(chǎn)品的設計–正如標題所說。
這里的關鍵詞是移動和平板電腦，這意味著這個團隊專注于創(chuàng)造出適合于這種設備的設計，所以這個網(wǎng)站即使在很小的屏幕上，也能很好地顯示信息，并提供給在線訪問者最適合的訪問公司服務的方式。
Deren Keskin具有緊湊的排版，干凈的在線作品集，顯然依賴于一個規(guī)則，每個頁面都能占據(jù)瀏覽器屏幕，甚至博客也是如此。
同樣根據(jù)響應而改變的布局，一切都壓縮到整個結構非常適合的屏幕中。而且，設計師設法保留所有的比例和元素，以確保網(wǎng)頁一開始設定的所有元素之間的優(yōu)先級，使它們很好的布局。
我們是DATS翻譯小組，我們愛設計愛英語，通過翻譯設計的文章共同學習進步，雖然我們還有許多不足，但是只要把每個人的微小的力量聚集起來，總有一天會發(fā)出耀眼的光芒~ 歡迎到主頁關注我們。
本文地址：http://pkvc.cn/tutorial/de3022.html
