最近看到一個響應(yīng)式設(shè)計的教程，里面講到將頁面元素一切彈性化，不僅有些感慨。

以前我也是一切彈性化的堅定擁躉，還鉆研了一下可縮放矢量圖形svg，想用之來替代頁面的一切UI元素，也非常認(rèn)同Android與分辨率無關(guān)的dp思想。但是現(xiàn)在，我不得不承認(rèn)，固定分辨率，無論在網(wǎng)站架構(gòu)，還是UI設(shè)計上都是有必要的，不可能完全被彈性設(shè)計所替代。

固定寬度對設(shè)計很重要

最簡單的例子是，頁面上的圖片。依賴于分辨率的位圖圖片應(yīng)該盡量避免非整比縮放，因為這會造成圖片質(zhì)量損失，進(jìn)而看起來模糊或者有鋸齒。蘋果就很好 地執(zhí)行了這一原則，即使使用了Retina屏幕，也是對分辨率進(jìn)行整比放大。iPhone5雖然改變尺寸，但寬度仍然是不變的，舊應(yīng)用在iPhone5上 不是拉伸顯示而是對多余的高度進(jìn)行填充。

對網(wǎng)站設(shè)計來說，如果網(wǎng)站頁面由很多模塊組成（通常是首頁），并且模塊還經(jīng)常有變動的話，那么網(wǎng)站固定寬度設(shè)計和響應(yīng)式設(shè)計是兩個不同的難度級別。 對于某些模塊來說，采用響應(yīng)式會讓內(nèi)容顯得非常難看。對另一些有自定義HTML代碼的模塊，如果代碼寫的不好，也會在響應(yīng)式的排版下出現(xiàn)錯誤。

那么有沒有方法來避免響應(yīng)式設(shè)計下的排版錯誤呢？有的，那就是卡片式設(shè)計與柵格。

卡片式設(shè)計與柵格

對響應(yīng)式設(shè)計的一個實踐就是柵格系統(tǒng)，將網(wǎng)頁容器分為若干個柵格，用百分比來表示寬度而非用像素，但柵格的寬度仍是可變的。柵格系統(tǒng)可以避免一部分的排版錯誤，柵格內(nèi)的內(nèi)容對網(wǎng)站整體框架不產(chǎn)生影響。

但柵格的問題是無法對柵格內(nèi)的排版進(jìn)行***設(shè)置，當(dāng)內(nèi)容變化、乃至寬度變化時，柵格內(nèi)容展現(xiàn)可能會很難看。對于這種情況，一般會規(guī)定最小寬度和***寬度，以使模塊內(nèi)容不變形。

柵格里面的模塊可以用卡片的形式來進(jìn)行展示，但我這里時說的卡片式設(shè)計是對模塊進(jìn)行固定顯示尺寸設(shè)計，而網(wǎng)頁容器可以是固定寬度，也可以是響應(yīng)式。

對模塊固定顯示尺寸，可以保證模塊內(nèi)容的***展現(xiàn)，人眼看到的始終是同樣大小的卡片，而網(wǎng)頁容器響應(yīng)式，可以在同一行內(nèi)展現(xiàn)不同數(shù)量的卡片。這樣，它就可以***程度上的匹配任意分辨率。

卡片式設(shè)計的依賴性

從上面可以看出，卡片式設(shè)計是柵格與依賴于分辨率的固定寬度設(shè)計的折中妥協(xié)。

卡片式設(shè)計從根本上來說，是將網(wǎng)站/App徹底的分解，將它們模塊化，分解成一個個無法再解耦的部分，我們稱之為元內(nèi)容，比如一篇文章的標(biāo)題、縮略圖和摘要，它們?nèi)缭谑醉摮霈F(xiàn)時必須作為一個整體出現(xiàn)，不可分割。因此卡片式設(shè)計也可以說是基于元內(nèi)容的設(shè)計。

但卡片式設(shè)計也并不是***的，它也有一定的局限性，不能用在所有的場合。比如智能電視的分辨率正在像4K邁進(jìn)，但如果以卡片式設(shè)計展示，一行還是以 3個卡片以下為宜，多了的話無法看清楚上面的內(nèi)容，但這又和卡片式設(shè)計的固定顯示尺寸沖突了，因為若是4寸卡片在60寸電視上顯示，每行足足可以顯示十幾個卡片。為什么會這樣呢？

卡片式設(shè)計是Google最近大力推廣的設(shè)計風(fēng)格，它繼承和拓展了Android Design的設(shè)計思想，但同時也繼承了它的缺點。Android上的dp與分辨率無關(guān)，但是與顯示尺寸有關(guān)，而顯示效果其實和距離是密切相關(guān)的。手機(jī)、 平板和人眼的距離差不多，在上面顯示同樣4英寸的卡片都能看清，但在智能電視上，在正常距離人眼是不可能看清楚4英寸的卡片。

所以，對于不同距離的屏幕，卡片式設(shè)計都需要重新設(shè)計。

結(jié)語：

UI設(shè)計仍在不斷發(fā)展，卡片式設(shè)計雖然不是***的解決方案，但足以成為一種風(fēng)潮了。而UI設(shè)計師們必須對流行風(fēng)潮敏感把握，才不會落后于時代。相信有了更多設(shè)計師對卡片式設(shè)計的研究，這種設(shè)計將會越來越完善，會應(yīng)用到更多的地方。

PS. 目前，網(wǎng)頁上的Google Play已采用固定卡片寬度的設(shè)計，只是它還規(guī)定了網(wǎng)頁容器的最小寬度，無法實現(xiàn)每行一個卡片的效果。