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