我現在所使用的chrome瀏覽器就是google卡片式設計的典范，你現在所使用的瀏覽器上的選項卡就是最常見的google"Inside Out Design (由內而外式)"的設計思路。

?

在web端的使用（chrome網上商店）：

?

我們現在所使用的手機APP都大量使用卡片式設計：

? ? ? ? ? ? ? ??? ? ? ??

?

卡片作為普遍使用的信息傳達的承載樣式，它具有以下這些特點：

當內容都被規劃為不同的卡片時, 傳統的框架便會被打破, 空間利用的方式會得到極大的拓展. (比方說, 一個列表, 在傳統的列表狀態下基本上是釘死了只能縱向滾動, 但是如果將列表內容組織成卡片, 就可以很容易的實現橫向卷動.)

不同大小/內容的卡片能夠被方便的放到一個"卡片組"中, 或者說, 同一種大小, 方向的卡片很自然的會被歸結為同一種邏輯類型. (比方說, 對于一個需要分組的集合而言, 合理利用不同類型的卡片比起傳統列表項 + 分割線 + 標題的視覺效率要高太多.)?

在不同大小的畫布 (屏幕) 上排布內容變得更簡單了, 可以很方便的做到視覺風格的統一. (比方說, 在 4" 手機設備上可以橫向顯示三個小號卡片, 7" 橫向平板設備可以橫向顯示六個, 10" 橫向平板上顯示八個. 傳統的列表項很難做到這點的同時保持列表的規整.)

卡片作為一種擬真元素, 可以被堆疊, 覆蓋, 移動和劃去. 這樣就極大的拓展了一個內容塊的視覺深度和可操作性.(比方說, 在 Google Now 里面, 多個城市的天氣卡片會被堆疊為一個卡片組, 默認只顯示出當前城市的卡片, 其他城市的卡片在其下方露出個城市名稱, 每張卡片都可以被滑動消去.)

承上, 卡片是立體的, 有深度, 可以被翻轉, 擴展性很強. 翻轉之后的卡片可以顯示針對卡片的操作或者更多信息, 等等, 而這是和當前卡片緊密相關的操作/信息, 是非常自然而方便的. (雖然說我第一想到的例子是微軟的 Live Tiles... 在 Android 上找例子最現成的還是 Google Now 和 Google+, Now Cards 反過來之后是和這張卡片相關的操作, 比如是否需要顯示這個信息, Plus Cards 反過來之后是現實這張卡片相關的信息)

依然承上, 卡片是立體的, 所以自帶邊緣, 可以很容易的制造出"不可視邊界"和暗示觸摸區域的大小, 比起傳統的分割線要靈活很多. (通常情況下, 卡片這一個視覺元素就等于一個觸摸區域, 而用戶的觸摸范圍會被引導到這個卡片的視覺邊界內)

更多關于卡片式設計：

卡片式設計——移動設計的未來

卡片式設計探討

轉載于:https://www.cnblogs.com/TheLegendofAJ/p/3559059.html

總結

以上是生活随笔為你收集整理的卡片式设计二三事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。