實踐與總結：如何做好響應式設計
響應式網頁(yè)設計很(hěn)流行，而且絕無秘密可(kě)言。行家們倡導，各品牌趨之若鹜。這不僅是創建一個移動端站點，而是讓你的網站适用(yòng)于每種浏覽器尺寸，不論桌面端、平闆還是智能(néng)手機。
響應式設計的秘訣，是創建一個不論大小(xiǎo)尺寸都美觀的網站。在點開你的設計軟件着手動工(gōng)之前，你需要考慮很(hěn)多(duō)。這是個額外步驟，最終成品卻總能(néng)證明它的價值所在。很(hěn)明顯，設計師若不考慮響應式設計，網站就會傾向于呆闆無趣
設計師絕對有(yǒu)必要保持自己的創意貫穿整個響應式站點。鑒于更多(duō)人在使用(yòng)平闆和智能(néng)手機，你總希望保證每個人都能(néng)訪問你的網站。這裏有(yǒu)一些提示，可(kě)以幫助你在設計響應式網站的同時，保持創意和高效
1. 使用(yòng)絕妙的字體(tǐ)
對于響應式網站，你不得不考慮它在小(xiǎo)屏幕上看起來如何。好的字體(tǐ)是所有(yǒu)優秀網站的重頭戲，然而它在響應式設計中(zhōng)，卻幾乎成了必需品。随着屏幕減小(xiǎo)，大部分(fēn)元素都應該變化、縮小(xiǎo)或者移動位置。首先，也是重中(zhōng)之重，你的字體(tǐ)要具(jù)備這種能(néng)力
第二，你得用(yòng)不同标題尺寸和多(duō)種文(wén)字大小(xiǎo)。如今，我們在桌面端設計中(zhōng)常常使用(yòng)巨大的标題和頁(yè)頭。這點不必延續整個網站，因為(wèi)你總得考慮更小(xiǎo)尺寸。确保你使用(yòng)FitText這類插件來縮小(xiǎo)字号就好，它很(hěn)管用(yòng)
Smith用(yòng)了很(hěn)多(duō)種不同字體(tǐ)來打造引人注目的外觀和氛圍。也将不同字體(tǐ)大小(xiǎo)貫穿全站。桌面模式下，文(wén)字和段落多(duō)列布局的方式很(hěn)有(yǒu)意思。當窗口被縮小(xiǎo)，文(wén)字壓縮成一列。所幸文(wén)字的比例和樣式沒變，保持了一緻性
Smashing magazine的做法也一樣。窗口縮小(xiǎo)時，整個抛棄了右半邊的設計（廣告）。無論如何，窗口中(zhōng)的文(wén)字、樣式、顔色和大小(xiǎo)都始終如一。
2. 使用(yòng)精(jīng)彩的圖片
和 文(wén)字排版一樣，圖像在任何網頁(yè)設計中(zhōng)都至關重要。在響應式設計中(zhōng)，當你在更小(xiǎo)的屏幕上查看網站，你的圖片應該相應更小(xiǎo)或等比縮放，這點也和文(wén)字相同。響應 式設計中(zhōng)有(yǒu)成百上千種不同布局和圖片尺寸。注重圖片的選擇和使用(yòng)，因為(wèi)它們毫無疑問會發生變化。随着屏幕變大或變小(xiǎo)，圖片會改變形狀和展現方式，或被裁切 掉一部分(fēn)
理(lǐ)想情況下，你會希望确保窗口尺寸變化時，大幅攝影圖片不會有(yǒu)任何裁切。另外，在你制作(zuò)圖像時，必須保證你的作(zuò)品加載速度快，而且對小(xiǎo)尺寸屏幕可(kě)見。這就是為(wèi)什麽設計師推崇扁平設計，它使得這點更容易
在Pandiscio中(zhōng)，首先你得注意一下這個大标題圖片在桌面端的樣子。它是完整的，伸向兩側邊緣，而且質(zhì)量相當高。當你縮小(xiǎo)窗口尺寸，圖片也跟着變小(xiǎo)、變化形狀（從矩形變成方形）、被裁切。他(tā)們找到了随屏幕尺寸變化仍保持美觀的圖片
KinHR是個使用(yòng)了各種不同圖形化元素的網站。請注意在大小(xiǎo)尺寸下，頭圖會像Pandiscio一樣縮小(xiǎo)。但無論如何，在網頁(yè)主體(tǐ)部分(fēn)中(zhōng)，圖片縮小(xiǎo)卻保持外形不被裁切
3. 不要忽視導航
如果人們不知道如何浏覽你的網站，那他(tā)們就直接不浏覽了。響應式設計的導航更難處理(lǐ)，因為(wèi)我們已經習慣于為(wèi)橫向設計打造導航。如今，我們得創建能(néng)夠輕易壓縮以适應縱向規格的導航
隻有(yǒu)少量鏈接時這并不是大問題。你可(kě)以将你的導航變小(xiǎo)或縮至頂部，也可(kě)以為(wèi)訪客提供一個下拉菜單。主要問題是該如何處理(lǐ)包含更多(duō)内容的繁重導航
Mashable有(yǒu)大量鏈接，因為(wèi)它有(yǒu)大量的分(fēn)類甚至更多(duō)的文(wén)章。在這之上，他(tā)們還有(yǒu)自己的公(gōng)司二級頁(yè)鏈接。Mashable決定在左側為(wèi)小(xiǎo)屏幕浏覽器創建一個彈出菜單
Monocle網站導航頂部有(yǒu)兩塊延伸部分(fēn)。為(wèi)适應小(xiǎo)尺寸浏覽器，他(tā)們為(wèi)極端情況的内容創建了下拉菜單，并且縮減了導航的第二部分(fēn)
4. 使它好玩
點擊網上的鏈接，在看見頁(yè)面之前，你很(hěn)可(kě)能(néng)要坐(zuò)等内容加載。精(jīng)确地找到“下一頁(yè)”按鈕來浏覽更多(duō)内容也非常令人讨厭。這類的事情并不好玩，也不直觀
注重細節并使你的網站更加直觀，會令你的網站更值得分(fēn)享。想想在所有(yǒu)尺寸的浏覽器上使用(yòng)同一個網站會是怎樣。想想你執行一個操作(zuò)時網站應該如何反應。找到這些問題并修複它們，你的網站用(yòng)起來就會很(hěn)容易、好玩和直觀，同時也使它更有(yǒu)趣點！
Mud注重各種過渡效果，使得他(tā)們的網站更加有(yǒu)趣。很(hěn)多(duō)元素滑動下拉和淡入，而不僅是唐突地移動和出現，從而創造一種非常順滑的感覺，與衆不同
在作(zuò)品集之間跳轉時，Neue Yorke用(yòng)了很(hěn)多(duō)動态效果。動畫再次創造出了高端的感覺，讓訪客對即将顯示的内容興趣十足
5. 跳出條條框框
如果其他(tā)辦(bàn)法都沒效果，那就發揮創意吧。響應式設計并不意味着要束縛我們的創作(zuò)方式。總有(yǒu)實現創意的空間，無論通過代碼還是設計
Enso創造了一個看起來絕非響應式的網站。注意尺寸縮小(xiǎo)時布局如何一點點變化，卻仍然保持着他(tā)們的品牌和創意
TBWA有(yǒu)一個創意精(jīng)彩的網站，不過他(tā)們也有(yǒu)精(jīng)彩的圖片和字體(tǐ)！他(tā)們物(wù)盡其用(yòng)打造了一個非凡且有(yǒu)趣的響應式設計
結論
在 響應式設計或任何網站設計中(zhōng)保持創意，和畫出構思并修改定稿一樣簡單。開始計劃網站的作(zuò)用(yòng)和功能(néng)時，會比着手動工(gōng)更好玩。響應式設計未必是一件重大、萬全 的任務(wù)，廣大設計師畏懼的那種。它非常簡單！記牢所有(yǒu)我們之前讨論過的，然後創造世所罕見的精(jīng)彩網站吧！祝你在響應式設計中(zhōng)好運相伴。
響應式設計的秘訣，是創建一個不論大小(xiǎo)尺寸都美觀的網站。在點開你的設計軟件着手動工(gōng)之前，你需要考慮很(hěn)多(duō)。這是個額外步驟，最終成品卻總能(néng)證明它的價值所在。很(hěn)明顯，設計師若不考慮響應式設計，網站就會傾向于呆闆無趣
設計師絕對有(yǒu)必要保持自己的創意貫穿整個響應式站點。鑒于更多(duō)人在使用(yòng)平闆和智能(néng)手機，你總希望保證每個人都能(néng)訪問你的網站。這裏有(yǒu)一些提示，可(kě)以幫助你在設計響應式網站的同時，保持創意和高效
1. 使用(yòng)絕妙的字體(tǐ)
對于響應式網站，你不得不考慮它在小(xiǎo)屏幕上看起來如何。好的字體(tǐ)是所有(yǒu)優秀網站的重頭戲，然而它在響應式設計中(zhōng)，卻幾乎成了必需品。随着屏幕減小(xiǎo)，大部分(fēn)元素都應該變化、縮小(xiǎo)或者移動位置。首先，也是重中(zhōng)之重，你的字體(tǐ)要具(jù)備這種能(néng)力
第二，你得用(yòng)不同标題尺寸和多(duō)種文(wén)字大小(xiǎo)。如今，我們在桌面端設計中(zhōng)常常使用(yòng)巨大的标題和頁(yè)頭。這點不必延續整個網站，因為(wèi)你總得考慮更小(xiǎo)尺寸。确保你使用(yòng)FitText這類插件來縮小(xiǎo)字号就好，它很(hěn)管用(yòng)
Smith用(yòng)了很(hěn)多(duō)種不同字體(tǐ)來打造引人注目的外觀和氛圍。也将不同字體(tǐ)大小(xiǎo)貫穿全站。桌面模式下，文(wén)字和段落多(duō)列布局的方式很(hěn)有(yǒu)意思。當窗口被縮小(xiǎo)，文(wén)字壓縮成一列。所幸文(wén)字的比例和樣式沒變，保持了一緻性
Smashing magazine的做法也一樣。窗口縮小(xiǎo)時，整個抛棄了右半邊的設計（廣告）。無論如何，窗口中(zhōng)的文(wén)字、樣式、顔色和大小(xiǎo)都始終如一。
2. 使用(yòng)精(jīng)彩的圖片
和 文(wén)字排版一樣，圖像在任何網頁(yè)設計中(zhōng)都至關重要。在響應式設計中(zhōng)，當你在更小(xiǎo)的屏幕上查看網站，你的圖片應該相應更小(xiǎo)或等比縮放，這點也和文(wén)字相同。響應 式設計中(zhōng)有(yǒu)成百上千種不同布局和圖片尺寸。注重圖片的選擇和使用(yòng)，因為(wèi)它們毫無疑問會發生變化。随着屏幕變大或變小(xiǎo)，圖片會改變形狀和展現方式，或被裁切 掉一部分(fēn)
理(lǐ)想情況下，你會希望确保窗口尺寸變化時，大幅攝影圖片不會有(yǒu)任何裁切。另外，在你制作(zuò)圖像時，必須保證你的作(zuò)品加載速度快，而且對小(xiǎo)尺寸屏幕可(kě)見。這就是為(wèi)什麽設計師推崇扁平設計，它使得這點更容易
在Pandiscio中(zhōng)，首先你得注意一下這個大标題圖片在桌面端的樣子。它是完整的，伸向兩側邊緣，而且質(zhì)量相當高。當你縮小(xiǎo)窗口尺寸，圖片也跟着變小(xiǎo)、變化形狀（從矩形變成方形）、被裁切。他(tā)們找到了随屏幕尺寸變化仍保持美觀的圖片
KinHR是個使用(yòng)了各種不同圖形化元素的網站。請注意在大小(xiǎo)尺寸下，頭圖會像Pandiscio一樣縮小(xiǎo)。但無論如何，在網頁(yè)主體(tǐ)部分(fēn)中(zhōng)，圖片縮小(xiǎo)卻保持外形不被裁切
3. 不要忽視導航
如果人們不知道如何浏覽你的網站，那他(tā)們就直接不浏覽了。響應式設計的導航更難處理(lǐ)，因為(wèi)我們已經習慣于為(wèi)橫向設計打造導航。如今，我們得創建能(néng)夠輕易壓縮以适應縱向規格的導航
隻有(yǒu)少量鏈接時這并不是大問題。你可(kě)以将你的導航變小(xiǎo)或縮至頂部，也可(kě)以為(wèi)訪客提供一個下拉菜單。主要問題是該如何處理(lǐ)包含更多(duō)内容的繁重導航
Mashable有(yǒu)大量鏈接，因為(wèi)它有(yǒu)大量的分(fēn)類甚至更多(duō)的文(wén)章。在這之上，他(tā)們還有(yǒu)自己的公(gōng)司二級頁(yè)鏈接。Mashable決定在左側為(wèi)小(xiǎo)屏幕浏覽器創建一個彈出菜單
Monocle網站導航頂部有(yǒu)兩塊延伸部分(fēn)。為(wèi)适應小(xiǎo)尺寸浏覽器，他(tā)們為(wèi)極端情況的内容創建了下拉菜單，并且縮減了導航的第二部分(fēn)
4. 使它好玩
點擊網上的鏈接，在看見頁(yè)面之前，你很(hěn)可(kě)能(néng)要坐(zuò)等内容加載。精(jīng)确地找到“下一頁(yè)”按鈕來浏覽更多(duō)内容也非常令人讨厭。這類的事情并不好玩，也不直觀
注重細節并使你的網站更加直觀，會令你的網站更值得分(fēn)享。想想在所有(yǒu)尺寸的浏覽器上使用(yòng)同一個網站會是怎樣。想想你執行一個操作(zuò)時網站應該如何反應。找到這些問題并修複它們，你的網站用(yòng)起來就會很(hěn)容易、好玩和直觀，同時也使它更有(yǒu)趣點！
Mud注重各種過渡效果，使得他(tā)們的網站更加有(yǒu)趣。很(hěn)多(duō)元素滑動下拉和淡入，而不僅是唐突地移動和出現，從而創造一種非常順滑的感覺，與衆不同
在作(zuò)品集之間跳轉時，Neue Yorke用(yòng)了很(hěn)多(duō)動态效果。動畫再次創造出了高端的感覺，讓訪客對即将顯示的内容興趣十足
5. 跳出條條框框
如果其他(tā)辦(bàn)法都沒效果，那就發揮創意吧。響應式設計并不意味着要束縛我們的創作(zuò)方式。總有(yǒu)實現創意的空間，無論通過代碼還是設計
Enso創造了一個看起來絕非響應式的網站。注意尺寸縮小(xiǎo)時布局如何一點點變化，卻仍然保持着他(tā)們的品牌和創意
TBWA有(yǒu)一個創意精(jīng)彩的網站，不過他(tā)們也有(yǒu)精(jīng)彩的圖片和字體(tǐ)！他(tā)們物(wù)盡其用(yòng)打造了一個非凡且有(yǒu)趣的響應式設計
結論
在 響應式設計或任何網站設計中(zhōng)保持創意，和畫出構思并修改定稿一樣簡單。開始計劃網站的作(zuò)用(yòng)和功能(néng)時，會比着手動工(gōng)更好玩。響應式設計未必是一件重大、萬全 的任務(wù)，廣大設計師畏懼的那種。它非常簡單！記牢所有(yǒu)我們之前讨論過的，然後創造世所罕見的精(jīng)彩網站吧！祝你在響應式設計中(zhōng)好運相伴。
留言