認識響應式表徵圖,如何製作響應式表徵圖

來源:互聯網
上載者:User

文章描述:說實話,第一次聽到“響應式表徵圖”我也覺得怪怪的,正如不久之前,人們為了讓表徵圖字型更適合不同裝置,而更改它們的大小一樣,但是這一想法卻讓響應式設計以及表徵圖設計有了長足的進步。那麼今天,我們就來八一八,這到底什麼個什麼玩意兒。

說實話,第一次聽到“響應式表徵圖”我也覺得怪怪的,正如不久之前,人們為了讓表徵圖字型更適合不同裝置,而更改它們的大小一樣,但是這一想法卻讓響應式設計以及表徵圖設計有了長足的進步。那麼今天,我們就來八一八,這到底什麼個什麼玩意兒。

他是什嗎?

響應式表徵圖並不是說表徵圖大小會隨螢幕尺寸的變動而改變,而是意味著表徵圖會根據自己所處何種裝置來改變自身大小。這就意味著螢幕尺寸對表徵圖來說不是那麼重要了,因為它能自動調節,它可以變大變小——同一時間,同一螢幕。表徵圖的設計上的差別不會太明顯,一般都是細節問題。詳細請看下圖:

響應式表徵圖很重要嗎?

隨著字型表徵圖、響應式網頁以及微型設計的流行,我們的風格也隨著改變,設計裡的扁平化表徵圖越來越多。我覺得這個東西有人接受那肯定就有人不願意接受,不願改變的不一定就是做的不好的,但是我相信走在改革前沿的肯定比沒有動作的人領先一大截。

響應式表徵圖推動了表徵圖設計的發展,讓使用者得到了更好的體驗,操作性更好,視覺效果更佳。為了讓網頁更加優秀,我們提出了響應式表徵圖,這也是每個設計師以及使用者心裡所想、所願。

Iconic?

如果你沒有聽說過iconic,那它可能就是一個產品,但是我覺得你肯定看到過,因為iconic製作了一系列非常流行的表徵圖,幾乎人盡皆知。這個團隊致力於開發響應式表徵圖,可以說他們是響應式表徵圖背後的男人。

Iconic近期幹過最大的一票是成功發起並完成 Kickstarted運動,這讓他們獲得92624美元的利潤,是的你沒看錯,我也沒有忘記小數點,這超出他們預期的15000美元的618%。有了這些錢,他們就可以進行深入研究,讓響應式表徵圖變得更好。所以說,有些事情你做了才知道對不對、行不行,就像你不知道他們最初的目的僅僅是對網頁表徵圖進行改革。

如果我想做響應式表徵圖,怎麼做?

如果你準備開發響應式表徵圖,這裡有幾種方法供你選擇,這些方法是iconic已經摸索到的、可能的方法,供你參考。

Media queries

這是迄今為止最簡單的方式,其允許我們在不改變內容的情況下,改變頁面的布局以適應不同的裝置,以此加強體驗。但是這種方法也有弊端,它無法將細節處理完美。從表面上看,media queries仍舊是響應式表徵圖設計的核心方法,試試就知道。

polyfills

很多人都不知道它是什麼,所以我跟大家解釋一下:你可以把它想象成media queries,只不過是由元素組成。比如說下面的例子,它的意思是當頁尾大於等於250px時,背景變為白色。這種方法比media queries要直接精確一些。

1 2 3 footer[min-width~=”250px”]{         background#fff; }

元素查詢是一個新興概念,不是所有的瀏覽器都支援,不過若你使用javascript,它就可以正常工作,詳細瞭解請點擊: here

SVG視窗

SVG視窗這個方法有點兒意思呵,完完全全意料之外。SVG允許動態控制元素以及表徵圖,這也給表徵圖設計帶來了新的方向。試想一下,如果將SVG與media queries相結合,那麼表徵圖就可以自己感受螢幕的大小隨之改變了~但是這點實現起來有一定的難度…就像SVG視窗很難和DOM相結合一樣。

總結

師父領進門,修行在個人,今天我們帶你感受了一下響應式表徵圖,對此,你心裡的想法是…?請在下方的評論裡告訴我們吧~



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。