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

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

固定寬度對設計很重要

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

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

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

卡片式設計與柵格

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

但柵格的問題是無法對柵格內的排版進行***設置，當內容變化、乃至寬度變化時，柵格內容展現可能會很難看。對于這種情況，一般會規定最小寬度和***寬度，以使模塊內容不變形。

柵格里面的模塊可以用卡片的形式來進行展示，但我這里時說的卡片式設計是對模塊進行固定顯示尺寸設計，而網頁容器可以是固定寬度，也可以是響應式。

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

卡片式設計的依賴性

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

卡片式設計從根本上來說，是將網站/App徹底的分解，將它們模塊化，分解成一個個無法再解耦的部分，我們稱之為元內容，比如一篇文章的標題、縮略圖和摘要，它們如在首頁出現時必須作為一個整體出現，不可分割。因此卡片式設計也可以說是基于元內容的設計。

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

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

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

結語：

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

PS. 目前，網頁上的Google Play已采用固定卡片寬度的設計，只是它還規定了網頁容器的最小寬度，無法實現每行一個卡片的效果。