設(shè)計(jì)趨勢(shì)！設(shè)計(jì)的現(xiàn)狀與趨勢(shì)

從2012年開(kāi)始到2014年，各大家對(duì)Web設(shè)計(jì)的趨勢(shì)預(yù)測(cè)中，都提到響應(yīng)式設(shè)計(jì)。2015年網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)預(yù)測(cè)中，響應(yīng)式仍在繼續(xù)。這個(gè)經(jīng)歷了幾年依然大熱的響應(yīng)式，在過(guò)去的幾年里，快速鞏固了自己的地位，并掀起了一股網(wǎng)頁(yè)設(shè)計(jì)新標(biāo)準(zhǔn)的浪潮。新年補(bǔ)課，從頭聊起 >>

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

這里簡(jiǎn)單介紹下上面的提到的三個(gè)概念：流動(dòng)布局（Fluid grids）、媒介查詢（Media queries）和彈性圖片（Scalable images）原本都是指現(xiàn)有的一些技術(shù)手段，但在做響應(yīng)式設(shè)計(jì)研究的過(guò)程中，這些概念還是有更廣泛的意義，設(shè)計(jì)師也應(yīng)該有所了解：

流動(dòng)布局

原特指以百分比為度量單位的布局技術(shù)實(shí)現(xiàn)方式。這里就不對(duì)如流動(dòng)布局、彈性布局、流體柵格等各種概念做一一說(shuō)明。筆者就此統(tǒng)為一個(gè)大的概念：在響應(yīng)式設(shè)計(jì)的布局中，不再以像素（px）作為唯一單位，而是采用百分比或者混合百分比、像素為單位，設(shè)計(jì)出更具靈活性的布局方式。

媒介查詢

媒介查詢可以讓你根據(jù)在特定環(huán)境下查詢到的各種屬性值——比如設(shè)備類(lèi)型、分辨率、屏幕物理尺寸及色彩等——來(lái)決定應(yīng)用什么樣的樣式。通過(guò)使用媒介查詢，可以獲取到設(shè)備及設(shè)備的特性，并給出求同存異的方案，從而解決之前在單純的布局設(shè)計(jì)中遺留的問(wèn)題。

彈性圖片

伴隨布局的彈性，圖片作為信息重要的形式之一也必須有更靈活的方式去適應(yīng)布局的變化。個(gè)人認(rèn)為彈性圖片是Ethan Marcotte提出設(shè)計(jì)產(chǎn)品時(shí)提出的概念，我們?cè)诤罄m(xù)的研究中可以以圖片為典型，擴(kuò)大研究范圍：除了圖片，還應(yīng)該包括圖標(biāo)、圖表、視頻等信息內(nèi)容的響應(yīng)方式研究。

響應(yīng)式設(shè)計(jì)的概念從提出至今，一直不斷蔓延擴(kuò)散，并得到各方認(rèn)可的主要原因：

1、外部環(huán)境

快速增長(zhǎng)且日趨加劇的可聯(lián)網(wǎng)設(shè)備的多樣化，讓現(xiàn)今已不再有標(biāo)準(zhǔn)的屏幕尺寸；

2、自身特色

嚴(yán)格定義的響應(yīng)式一般是指響應(yīng)式Web設(shè)計(jì)，而Web憑借其特有的靈活性和可塑性，可以適應(yīng)各種尺寸和配置的設(shè)備，可以無(wú)處不在。

3、內(nèi)部需求

響應(yīng)式設(shè)計(jì)概念一提出，各大網(wǎng)站及平臺(tái)都希望能夠采用這秉一應(yīng)萬(wàn)的模式，可以更靈活地去適配更多設(shè)備，尤其是現(xiàn)在移動(dòng)設(shè)備大爆棚的時(shí)代。