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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語(yǔ)：

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

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