除非你現(xiàn)在正處在世外桃源，否則你不可能沒有聽說過web設(shè)計(jì)者間最近廣泛流行的響應(yīng)設(shè)計(jì)（Responsive Design）。Ethan Marcotte使用responsive design這一術(shù)語描述一種新興的技術(shù)，它采用易變的布局和媒體查詢擴(kuò)展網(wǎng)站，使得網(wǎng)站能夠動(dòng)態(tài)適應(yīng)各種尺寸大小的屏幕。如果你之前從未聽說過響應(yīng)設(shè)計(jì)，那么你可以好好讀讀Marcotte的介紹文章。

簡(jiǎn)而言之，響應(yīng)設(shè)計(jì)就是使用非固定的網(wǎng)格、非固定的布局和@多媒體查詢使得現(xiàn)在的（以及將來的）web能夠適應(yīng)不同尺寸的屏幕。無論你的用戶使用的是一個(gè)電話，一個(gè)iPad或是巨大的臺(tái)式顯示器，你的網(wǎng)站都能夠適應(yīng)。

響應(yīng)設(shè)計(jì)將成為一個(gè)非常有吸引力的工具，正如Luke Wroblewski所說的，設(shè)計(jì)需要遵循移動(dòng)優(yōu)先原則。也就是，從小屏幕開始考慮。先理清你的網(wǎng)站的核心，然后一點(diǎn)點(diǎn)開始構(gòu)建。從骨架開始構(gòu)建能夠保證網(wǎng)站的質(zhì)量，促使開發(fā)人員關(guān)注用戶所關(guān)注的問題。

你打算如何構(gòu)建一個(gè)響應(yīng)良好的網(wǎng)站呢？這個(gè)問題因人而異，但是還是存在一些通用的方法的。為了幫助你開始響應(yīng)設(shè)計(jì)，這里列出了一些初期設(shè)計(jì)時(shí)的最好實(shí)踐經(jīng)驗(yàn)，都是從大量的web資源中總結(jié)出來的：

使用@media控制你的屏幕布局，但是需要記住，只有這些并不是一個(gè)真正的響應(yīng)設(shè)計(jì)。

使用非固定的布局適應(yīng)各種屏幕的尺寸。不要將你的設(shè)計(jì)限制在iPhone或是Android上，不要將它切割為平板電腦版本和桌面電腦版本。布局設(shè)計(jì)需要更加靈活可變，否則，如果某個(gè)新的屏幕尺寸突然變成潮流，你的網(wǎng)站將無法應(yīng)對(duì)。

根據(jù)你的網(wǎng)站的具體內(nèi)容設(shè)定你的網(wǎng)格。封裝好的網(wǎng)格系統(tǒng)可能并不適用于你的應(yīng)用。這類網(wǎng)格的最大問題就是它們可能與你的具體內(nèi)容不符。根據(jù)網(wǎng)站內(nèi)容設(shè)計(jì)你的布局，而不是根據(jù)canvas（或是網(wǎng)格）。

從小屏幕開始。從最新的屏幕開始設(shè)計(jì)，然后逐步在浮動(dòng)元素中加入@media規(guī)則，滿足更大的平板或是桌面瀏覽器的窗口需要。從一個(gè)窄的單列布局開始設(shè)計(jì)移動(dòng)瀏覽器網(wǎng)站，然后再逐步擴(kuò)大。

使用Respond或是CSS3 Media Queries這類JavaScript庫引導(dǎo)@media查詢，因?yàn)樵谂f版本的瀏覽器中可能不支持直接的@media查詢。從最小的屏幕開始然后逐步擴(kuò)大意味著，桌面瀏覽器需要處理@media，確保使用Respond這類輔助工具能夠支持舊版本的瀏覽器處理@media。

不要指望Photoshop，在瀏覽器中構(gòu)建你的組件。使用Photoshop構(gòu)建動(dòng)態(tài)的布局壓根就沒有可能性，應(yīng)該在瀏覽器中實(shí)現(xiàn)。

使用img { max-width： 100%; }控制圖像大小。對(duì)于大規(guī)模的圖像，可以考慮在小屏幕中使用Responsive Images這類工具縮小圖像的大小，然后在大屏幕中使用JavaScript還原大圖像。

延遲下載�？赡苣愕木W(wǎng)站中有些輔助元素，能夠優(yōu)化你的網(wǎng)站，但并不是必須的。這類元素可以在下載完基本內(nèi)容后再使用JavaScript加載這些元素。

不用處處要求完美。即使做到了上述建議，你可能還是會(huì)漏掉某些使用不支持JavaScript的舊版本瀏覽器的用戶。現(xiàn)在這樣的用戶已經(jīng)越來越少了，如果他們?cè)谧烂鏋g覽器中看到了移動(dòng)版本的布局，這也并不就是世界末日。你的網(wǎng)站已經(jīng)具備很好的可用性了。

記住響應(yīng)設(shè)計(jì)是一個(gè)非常年輕的概念——是一個(gè)新的工具——每天都會(huì)涌現(xiàn)出一些新的東西。不要將上面的建議當(dāng)做是一些硬性或是速成的規(guī)則，它只是一些引導(dǎo)指南罷了。

本文編譯自byane，原文地址。

譯文出處webapptrend.com，轉(zhuǎn)載請(qǐng)注明出處鏈接。

標(biāo)簽： 響應(yīng)設(shè)計(jì) 交互設(shè)計(jì) 移動(dòng)交互設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。