設(shè)計(jì)趨勢(shì)!設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
從2012年開始到2014年,各大家對(duì)Web設(shè)計(jì)的趨勢(shì)預(yù)測(cè)中,都提到響應(yīng)式設(shè)計(jì)。2015年網(wǎng)頁設(shè)計(jì)趨勢(shì)預(yù)測(cè)中,響應(yīng)式仍在繼續(xù)。這個(gè)經(jīng)歷了幾年依然大熱的響應(yīng)式,在過去的幾年里,快速鞏固了自己的地位,并掀起了一股網(wǎng)頁設(shè)計(jì)新標(biāo)準(zhǔn)的浪潮。新年補(bǔ)課,從頭聊起 >>
源起2010年5月,伊桑.馬科特(Ethan Marcotte)在“A List Apart”寫了一篇開創(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è)面來對(duì)待,而不要為每種設(shè)備進(jìn)行單獨(dú)剪裁而使得設(shè)計(jì)彼此斷開,這才是我們前進(jìn)的方向。雖然我們已經(jīng)能夠設(shè)計(jì)出最佳的視覺體驗(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ì)研究的過程中,這些概念還是有更廣泛的意義,設(shè)計(jì)師也應(yīng)該有所了解:
流動(dòng)布局
原特指以百分比為度量單位的布局技術(shù)實(shí)現(xiàn)方式。這里就不對(duì)如流動(dòng)布局、彈性布局、流體柵格等各種概念做一一說明。筆者就此統(tǒng)為一個(gè)大的概念:在響應(yīng)式設(shè)計(jì)的布局中,不再以像素(px)作為唯一單位,而是采用百分比或者混合百分比、像素為單位,設(shè)計(jì)出更具靈活性的布局方式。
媒介查詢
媒介查詢可以讓你根據(jù)在特定環(huán)境下查詢到的各種屬性值——比如設(shè)備類型、分辨率、屏幕物理尺寸及色彩等——來決定應(yīng)用什么樣的樣式。通過使用媒介查詢,可以獲取到設(shè)備及設(shè)備的特性,并給出求同存異的方案,從而解決之前在單純的布局設(shè)計(jì)中遺留的問題。
彈性圖片
伴隨布局的彈性,圖片作為信息重要的形式之一也必須有更靈活的方式去適應(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è)備,可以無處不在。
3、內(nèi)部需求
響應(yīng)式設(shè)計(jì)概念一提出,各大網(wǎng)站及平臺(tái)都希望能夠采用這秉一應(yīng)萬的模式,可以更靈活地去適配更多設(shè)備,尤其是現(xiàn)在移動(dòng)設(shè)備大爆棚的時(shí)代。
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- Photoshop初級(jí)教程-命令的技巧
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- 圖片畫冊(cè)平面設(shè)計(jì)排版ps理論教程
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論