卡片式設(shè)計(jì)是如何占領(lǐng)設(shè)計(jì)圈的？發(fā)布者：本站     時(shí)間：2020-06-20 13:06:48

正如同你所看到的，充滿魅力的卡片式設(shè)計(jì)已經(jīng)不僅僅是設(shè)計(jì)趨勢(shì)了，它早已流行開來。這種設(shè)計(jì)手法的流行很大程度上是得益于占據(jù)主流的移動(dòng)端，響應(yīng)式設(shè)計(jì)成為標(biāo)準(zhǔn)配置，簡(jiǎn)約、扁平和極簡(jiǎn)比以往任何時(shí)候都受歡迎，卡片式設(shè)計(jì)自然而然成為了大家的選擇。

使用卡片式設(shè)計(jì)的UI在加載速度和跨設(shè)備、跨屏幕兼容上有著天然的優(yōu)勢(shì)，也更加實(shí)用，更小的流量消耗無疑迎合了移動(dòng)端用戶的需求。從早已投入卡片式設(shè)計(jì)的Pinterest 到主流社交媒體Facebook和Twitter，卡片式設(shè)計(jì)幾乎覆蓋了所有了主流領(lǐng)域的網(wǎng)站。

在今天的文章中，我們將探討一下卡片式界面模式，它到底有什么特異之處，它又是如何同響應(yīng)式設(shè)計(jì)和Material Design 兼容，又有著怎樣的未來。

容器模型

為了了解這種設(shè)計(jì)模式，你首先要了解卡片作為容器本身的特性。

我們通常所說的卡片式設(shè)計(jì)中的卡片，是信息的容器，每個(gè)卡片都承載著屬于自己的內(nèi)容?？ㄆ艹休d著幾乎所有類型的內(nèi)容——多媒體、文本、鏈接，等等，而這所有的信息都經(jīng)由卡片，被收納到統(tǒng)一的主題之下。

這些承載著信息的容器將屏幕填滿，這種設(shè)計(jì)模式被稱之為“容器模型”。這樣的設(shè)計(jì)提供了更加清爽、更易于理解的界面，更貼合快速瀏覽的需求，讓用戶可以更直接地尋求他們想要的東西。而這種設(shè)計(jì)還有一個(gè)重要的優(yōu)勢(shì)，就是更符合手勢(shì)操作的需求。

實(shí)用而富有吸引力：卡片式UI模式的好處是多重的

Trello 允許用戶創(chuàng)建創(chuàng)建任意想要的卡片，團(tuán)隊(duì)中每個(gè)人都能創(chuàng)建一個(gè)“待辦事項(xiàng)”卡片，并且按照需求來歸類。

這不僅呈現(xiàn)出卡片的靈活性，也展示了它潛藏的組織性。Trello 是成功的，它的成功是立足于卡片式設(shè)計(jì)的靈活運(yùn)用，同傳統(tǒng)的事務(wù)管理方式區(qū)別了開來。

卡片式設(shè)計(jì)與移動(dòng)端和響應(yīng)式設(shè)計(jì)

正如上述提到的，卡片式設(shè)計(jì)和響應(yīng)式框架有著良好的兼容性，Des Traynor 甚至將它稱之為“網(wǎng)絡(luò)的未來”。這種設(shè)計(jì)充分地打通了桌面端和移動(dòng)端，接下來我們仔細(xì)分析一下為什么。

首先，卡片柵格系統(tǒng)能夠隨著整個(gè)框架的膨脹和收縮，以適配斷點(diǎn)和屏幕尺寸。設(shè)計(jì)師可以輕松而靈活地控制卡片的高寬比，從而創(chuàng)造出不同的響應(yīng)模式。比如，你可有設(shè)置寬度固定，高度可變，設(shè)定卡片之間的寬度保持一致。