從2012年開始到(dào)2014年，各大(dà)家對Web設計的(de)趨勢預測中，都提到(dào)響應式設計。2015年網頁設計趨勢預測中，響應式仍在(zài)繼續。這(zhè)個(gè)經曆了(le／liǎo)幾年依然大(dà)熱的(de)響應式，在(zài)過去的(de)幾年裏，快速鞏固了(le／liǎo)自己的(de)地(dì / de)位，并掀起了(le／liǎo)一(yī / yì ／yí)股網頁設計新标準的(de)浪潮。

    源起

　　2010年5月，伊桑.馬科特(Ethan Marcotte)在(zài)“A List Apart”寫了(le／liǎo)一(yī / yì ／yí)篇開創性的(de)文章(題爲(wéi / wèi)“Responsive Web Design” )，他(tā)利用三種已有的(de)工具：流動布局(Fluid grids)、媒介查詢(Media queries)和(hé / huò)彈性圖片(Scalable images)創建了(le／liǎo)一(yī / yì ／yí)個(gè)在(zài)不(bù)同分辨率屏幕下都能漂亮地(dì / de)顯示的(de)網站。 Ethan Marcotte力勸設計師們要(yào / yāo)去利用那些Web獨有的(de)特性去進行設計： “我們可以(yǐ)将不(bù)同聯網設備上(shàng)衆多的(de)體驗，當作是(shì)同一(yī / yì ／yí)網站體驗的(de)不(bù)同側面來(lái)對待，而(ér)不(bù)要(yào / yāo)爲(wéi / wèi)每種設備進行單獨剪裁而(ér)使得設計彼此斷開，這(zhè)才是(shì)我們前進的(de)方向。雖然我們已經能夠設計出(chū)最佳的(de)視覺體驗，但還要(yào / yāo)把基于(yú)标準的(de)技術也(yě)嵌入到(dào)我們的(de)設計中去，這(zhè)樣才能使得我們的(de)設計不(bù)僅靈活，而(ér)且還能适應渲染它們的(de)各種媒介。” Ethan Marcotte證明了(le／liǎo)一(yī / yì ／yí)種在(zài)多種設備上(shàng)都能提供卓越體驗的(de)方法的(de)存在(zài)，而(ér)且這(zhè)一(yī / yì ／yí)方法不(bù)會忽視不(bù)同設備的(de)差異，也(yě)不(bù)會強調設計師的(de)控制權，而(ér)是(shì)選擇了(le／liǎo)順其自然并擁抱Web的(de)靈活性。

　　這(zhè)裏簡單介紹下上(shàng)面的(de)提到(dào)的(de)三個(gè)概念：流動布局(Fluid grids)、媒介查詢(Media queries)和(hé / huò)彈性圖片(Scalable images)原本都是(shì)指現有的(de)一(yī / yì ／yí)些技術手段，但在(zài)做響應式設計研究的(de)過程中，這(zhè)些概念還是(shì)有更廣泛的(de)意義，設計師也(yě)應該有所了(le／liǎo)解：

　　流動布局

　　原特指以(yǐ)百分比爲(wéi / wèi)度量單位的(de)布局技術實現方式。這(zhè)裏就(jiù)不(bù)對如流動布局、彈性布局、流體栅格等各種概念做一(yī / yì ／yí)一(yī / yì ／yí)說(shuō)明。謝謝網絡就(jiù)此統爲(wéi / wèi)一(yī / yì ／yí)個(gè)大(dà)的(de)概念：在(zài)響應式設計的(de)布局中，不(bù)再以(yǐ)像素(px)作爲(wéi / wèi)唯一(yī / yì ／yí)單位，而(ér)是(shì)采用百分比或者混合百分比、像素爲(wéi / wèi)單位，設計出(chū)更具靈活性的(de)布局方式。

　　媒介查詢

　　媒介查詢可以(yǐ)讓你根據在(zài)特定環境下查詢到(dào)的(de)各種屬性值——比如設備類型、分辨率、屏幕物理尺寸及色彩等——來(lái)決定應用什麽樣的(de)樣式。通過使用媒介查詢，可以(yǐ)獲取到(dào)設備及設備的(de)特性，并給出(chū)求同存異的(de)方案，從而(ér)解決之(zhī)前在(zài)單純的(de)布局設計中遺留的(de)問題。

　　彈性圖片

　　伴随布局的(de)彈性，圖片作爲(wéi / wèi)信息重要(yào / yāo)的(de)形式之(zhī)一(yī / yì ／yí)也(yě)必須有更靈活的(de)方式去适應布局的(de)變化。個(gè)人(rén)認爲(wéi / wèi)彈性圖片是(shì)Ethan Marcotte提出(chū)設計産品時(shí)提出(chū)的(de)概念，我們在(zài)後續的(de)研究中可以(yǐ)以(yǐ)圖片爲(wéi / wèi)典型，擴大(dà)研究範圍：除了(le／liǎo)圖片，還應該包括圖标、圖表、視頻等信息内容的(de)響應方式研究。

　　盛行

　　響應式設計的(de)概念從提出(chū)至今，一(yī / yì ／yí)直不(bù)斷蔓延擴散，并得到(dào)各方認可的(de)主要(yào / yāo)原因：

　　1、外部環境

　　快速增長且日趨加劇的(de)可聯網設備的(de)多樣化，讓現今已不(bù)再有标準的(de)屏幕尺寸;

　　2、自身特色

　　嚴格定義的(de)響應式一(yī / yì ／yí)般是(shì)指響應式Web設計，而(ér)Web憑借其特有的(de)靈活性和(hé / huò)可塑性，可以(yǐ)适應各種尺寸和(hé / huò)配置的(de)設備，可以(yǐ)無處不(bù)在(zài)。

　　3、内部需求

　　響應式設計概念一(yī / yì ／yí)提出(chū)，各大(dà)網站及平台都希望能夠采用這(zhè)秉一(yī / yì ／yí)應萬的(de)模式，可以(yǐ)更靈活地(dì / de)去适配更多設備，尤其是(shì)現在(zài)移動設備大(dà)爆棚的(de)時(shí)代。

    當然也(yě)并不(bù)是(shì)所有的(de)情況都理所應帶應該采用響應式設計，那麽什麽情況下更适合采用響應式呢?

　　1、你想節約成本地(dì / de)去适應更多場景

　　資源都是(shì)有限的(de)，但總是(shì)希望能利用有限的(de)資源去獲得更大(dà)的(de)價值。雖然比起開發設計一(yī / yì ／yí)個(gè)普通的(de)網站來(lái)說(shuō)，要(yào / yāo)打造一(yī / yì ／yí)個(gè)響應式站點，所需要(yào / yāo)的(de)人(rén)力和(hé / huò)時(shí)間資源都會有所增加，但比起爲(wéi / wèi)不(bù)同設備分别打造多個(gè)版本的(de)成本還是(shì)要(yào / yāo)低很多;從維護的(de)角度來(lái)說(shuō)，也(yě)會輕松很多。

　　2、你并不(bù)清楚要(yào / yāo)設計開發的(de)全新産品更适合哪個(gè)場景

　　與其通過預測挑選核心設備再進行分别設計，倒不(bù)如先花些心思将網站打造得更具彈性，使其在(zài)各種設備中都擁有盡可能優秀體驗。因爲(wéi / wèi)在(zài)各方面都未知都情況下，做預測會加劇過程風險，使得結果存在(zài)巨大(dà)的(de)挑戰性。

　　3、你希望網站可以(yǐ)兼容未來(lái)的(de)新設備

　　新的(de)設備層出(chū)不(bù)窮，與其被動地(dì / de)進行更新維護，不(bù)如主動應萬變，成爲(wéi / wèi)響應式。 當然這(zhè)裏隻是(shì)說(shuō)更适合，其實個(gè)人(rén)認爲(wéi / wèi)隻要(yào / yāo)項目資源和(hé / huò)時(shí)間允許，基本上(shàng)大(dà)部分網站都可以(yǐ)去嘗試實現響應式;而(ér)對于(yú)初次嘗試響應式設計的(de)，也(yě)可以(yǐ)從“簡單浏覽型頁面”開始。

　　模式

　　目前大(dà)多網站中選擇成爲(wéi / wèi)響應式的(de)設計模式主要(yào / yāo)有兩種：

　　1、基于(yú)設備

　　通過主流設備的(de)類型及尺寸來(lái)确定布局斷點(Break point)，設計多套樣式，再分别投射到(dào)響應的(de)設備。

    2、内容優先

　　根據内容的(de)可讀性、易讀性作爲(wéi / wèi)确定斷點(Break point)的(de)标準，即在(zài)對内容進行布局設計的(de)時(shí)候，可以(yǐ)無視設備，有内容決定何時(shí)需要(yào / yāo)采用不(bù)同的(de)呈現方式。

    蘇州網站設計還是(shì)傾向内容優先的(de)方式，這(zhè)是(shì)真正符合響應式設計核心策略的(de)模式，也(yě)是(shì)對未來(lái)友好的(de)方式。從過去基本上(shàng)是(shì)基于(yú)pc的(de)幾個(gè)尺寸，選擇最佳的(de)标準尺寸去設計頁面;到(dào)現在(zài)移動設備已經玲琅滿目，同時(shí)電視、穿戴設備也(yě)慢慢開始起來(lái)，已經不(bù)再有固定的(de)尺寸;未來(lái)，将是(shì)更加無法預知的(de)設備環境;那麽什麽才是(shì)王道(dào)呢?——就(jiù)是(shì)内容本身! 變化總是(shì)來(lái)得快且狠，我們要(yào / yāo)做的(de)就(jiù)是(shì)抓住那根可以(yǐ)貫通全局的(de)線!

    在(zài)内容優先的(de)策略中，有三點思維模式可以(yǐ)貫穿整個(gè)響應式設計的(de)過程：

　　1、忘記設備

　　因爲(wéi / wèi)我們不(bù)知道(dào)用戶會用什麽樣的(de)設備來(lái)訪問網站，因此，我們必須盡可能地(dì / de)把所有情況都囊括進來(lái);所有的(de)東西(布局、組件等)都能與不(bù)同類型的(de)設備和(hé / huò)平台相兼容。

　　2、優雅降級

　　雖然這(zhè)個(gè)概念一(yī / yì ／yí)開始是(shì)技術實現上(shàng)對新的(de)特性在(zài)老的(de)浏覽器上(shàng)無法很好實現時(shí)的(de)折中做法，但在(zài)此僅想表達在(zài)對布局做彈性設計時(shí)，内容從寬到(dào)窄的(de)變化呈現，必須經過重重篩選，留存最核心的(de)内容塊。這(zhè)種模式非常适合對已存在(zài)的(de)pc頁面産品進行響應式設計改造。

　　3、漸進增強

　　此概念是(shì)在(zài)Steven在(zài)2003年的(de)SXSW活動上(shàng)提出(chū)的(de)。在(zài)本質上(shàng)來(lái)說(shuō)，就(jiù)是(shì)把優雅降級倒過來(lái)：先創建一(yī / yì ／yí)個(gè)基本體驗，側重讓内容以(yǐ)一(yī / yì ／yí)種簡介的(de)方式來(lái)展現;之(zhī)後，在(zài)保證基本體驗的(de)前提下，開始着手做有關顯示的(de)布局和(hé / huò)交互。而(ér)在(zài)此，也(yě)借用來(lái)說(shuō)明下對于(yú)響應式設計的(de)内容策略中，内容從窄到(dào)寬的(de)變化呈現中，可以(yǐ)讓内容的(de)豐富度也(yě)相應地(dì / de)有所增加。這(zhè)種模式與移動優先策略是(shì)相匹配的(de)。

　　當然，目前響應式也(yě)是(shì)有存在(zài)各種争論的(de)，也(yě)許你有一(yī / yì ／yí)個(gè)很好的(de)理由不(bù)用響應式網頁設計?但我想沒人(rén)會說(shuō)，“讓我們擺脫響應式設計吧”，而(ér)實際上(shàng)，越來(lái)越多的(de)網站選擇成爲(wéi / wèi)響應式。2014年如此，2015年也(yě)還是(shì)會繼續，因爲(wéi / wèi)這(zhè)已經不(bù)是(shì)種趨勢，而(ér)怡然是(shì)種常态了(le／liǎo)。

　　未來(lái)的(de)路

　　雖然響應式設計的(de)優勢和(hé / huò)趨勢已被普遍認可，但目前響應式設計的(de)模式的(de)普及還是(shì)有很多難題需要(yào / yāo)突破：

　　1、響應式圖片

　　目前彈性圖片的(de)做法主要(yào / yāo)是(shì)：縮放、剪裁、分條件加載等實現方法本質上(shàng)都隻是(shì)一(yī / yì ／yí)個(gè)技巧，隻是(shì)治标不(bù)治本地(dì / de)掩蓋了(le／liǎo)問題，并未真正完美地(dì / de)實現圖片的(de)彈性。

    2、跨端的(de)交互

　　在(zài)響應式設計中，我們不(bù)僅要(yào / yāo)需要(yào / yāo)考慮桌面用戶的(de)使用習慣，還必須兼顧不(bù)同尺寸的(de)手持設備。比如在(zài)桌面端無盡優雅的(de)Hover，在(zài)移動端卻是(shì)無比糟糕的(de)體驗，如何“求同存異”，讓各端體驗均能最佳，還是(shì)需要(yào / yāo)繼續深入探究的(de)。

　　3、性能

　　性能估計是(shì)在(zài)響應式開發中最大(dà)的(de)痛，按條件加載、隐藏或顯示什麽内容，都會比單一(yī / yì ／yí)條件判斷的(de)代碼結構來(lái)的(de)繁瑣，并影響體驗及維護。尤其是(shì)移動性能上(shàng)，更多樣的(de)設備具有更加複雜的(de)使用環境，如何識别設備，并讓設備在(zài)不(bù)同環境均能良好體驗，也(yě)是(shì)一(yī / yì ／yí)根硬骨頭。

　　4、合作流程

　　響應式設計遠遠不(bù)止是(shì)一(yī / yì ／yí)種簡單的(de)設計策略，它爲(wéi / wèi)Web項目帶來(lái)的(de)是(shì)一(yī / yì ／yí)整套全新的(de)、完整的(de)方法，還應該包括一(yī / yì ／yí)種新的(de)、可以(yǐ)更好地(dì / de)利用這(zhè)一(yī / yì ／yí)模式的(de)工作流程。

　　最後，我想說(shuō)下響應式體現的(de)是(shì)一(yī / yì ／yí)種高度适應性的(de)設計思維模式。在(zài)響應式設計探究的(de)道(dào)路上(shàng)，響應式本身不(bù)是(shì)唯一(yī / yì ／yí)目的(de)，基于(yú)任意設備對頁面内容進行完美規劃的(de)設計策略及工作流程應該是(shì)我們更大(dà)的(de)課題。