1.卡是什么？

卡片通常是指包含某些圖像和文本信息的矩形，作為更詳細信息的入口點。如今，在確保界面出色的可用性的同時，卡式設計甚至成為平衡界面美學的默認實踐。因為顯卡非常方便，界面的內容是由不同的元素組成的。

1.杰出的隱喻效應

因為它看起來像現(xiàn)實世界中的卡片，所以界面設計中的卡片具有很大的隱喻效果。事實上，在移動設備出現(xiàn)之前，卡已經(jīng)遍布我們的身體 - — —名片，棒球卡，撲克牌等，它已成為一種應用及其廣泛的物理性質的互動模式。因此，對于用戶，他們可以更直觀地認識到界面設計中的這些卡表示某些信息，如物理卡。

在快速提供信息時，卡是一種出色的工具。在棒球卡的情況下，您需要知道的棒球運動員的基本信息包含在小卡片的兩側。

2.良好的內容組織

卡片以有組織的方式將信息組織到不同區(qū)域，屏幕空間更小。類似于文本段落是組織聲明的結果，卡片收集各種信息以形成連貫的內容體。

Facebook利用卡式設計將每個事件的摘要打包成一張卡片?？ㄆ季衷O計越來越受到Facebook等巨頭的歡迎。

3.視覺上賞心悅目

基于卡的設計通常嚴重依賴于它們的視覺效果?？ū旧韺D片有很強的依賴性。許多研究指出，圖像可以真正改善網(wǎng)站或應用程序的設計和瀏覽體驗，因為圖像可以快速有效地吸引用戶的注意力。因此，如果圖像可以在卡中突出顯示，則自然會對用戶更具吸引力。

看看Dribble——一個著名的社區(qū)網(wǎng)站，致力于展示設計師的作品。必須說卡式設計確實是呈現(xiàn)此類信息的最合適方式。

二，如何設計一張卡？

在相同的布局中，卡的寬度應相同，但高度可以不同。最大高度受平臺上可用空間的最大高度限制，但此高度也可以臨時擴展（例如，擴展顯示注釋區(qū)域）。

卡可以固定或可變高度

從設計美學的角度來看，卡片應該有一些圓角和陰影。因為圓角使卡看起來更像內容塊，陰影反映了圖層的深度。

這些元素為設計增添了一些亮點而不會分散用戶的注意力，并且它們還使卡片和頁面看起來分層。

此外，我們還可以利用動畫和動態(tài)設計。

三，卡的優(yōu)點

如果應用得當，該卡可以以某種方式增強應用程序的用戶體驗。由于它們的功能特性和形狀，它們本身成為一種更具直觀性的界面元素。

1.抽象格式易于理解

您應該已經(jīng)知道，今天是內容為王的時間，卡片可用于容納幾乎任何類型的信息，其摘要信息屬性易于用戶快速消化。在這方面，用戶可以通過卡輕松訪問他們感興趣的內容。反過來，用戶愿意參與卡的瀏覽和操作。

卡套包含不同類型內容的卡

2，可以進行響應式設計

卡片最重要的是它們幾乎可以無限變形?？ㄊ皆O計在桌面和移動設備上都能很好地工作，因為它以一種易于用戶消化的方式向用戶呈現(xiàn)內容。因為卡片是一個可以輕松放大或縮小的內容容器，所以卡片是響應式設計的不錯選擇。

最后但同樣重要的是，卡片可以在多個設備上創(chuàng)建一致的獨立美學，這就是為什么它可以輕松地跨設備創(chuàng)建一致的體驗。

3.直觀的可操作性

卡的動作應該是手指導向的。對于移動應用，這是卡受歡迎的一個關鍵原因。這些卡的工作方式與實體卡相同，讓用戶體驗到非常舒適的體驗。用戶無需考慮如何操作卡。他們喜歡卡的簡單性，并且可以直觀地理解翻轉卡片是為了獲取更多信息，滑動是在不同卡片之間切換。

在哪里使用？

1.信息流

當卡片顯示在流中時，會創(chuàng)建一系列與自然時間軸匹配的事件。想想Facebook如何使用卡片來描述新信息流中的事件概述。雖然總信息流不受限制，但每張卡彼此獨立并包含可以操縱的某些內容。

2，用于查找感興趣的內容

該卡允許相關內容不言而喻，允許用戶發(fā)現(xiàn)他們感興趣的內容?？纯碩inder的卡片模式：當您向左或向右滑動時，您正在尋找適合您口味的人。

Pinterest在信息動態(tài)中使用引腳（用戶可以收集他們感興趣的內容），吸引用戶沉迷于不間斷瀏覽。

3，對話框

由于卡片是內容容器，因此它們也可以很好地表示動作?？ㄖ械幕緞幼魇强ū旧怼Ｏ胂階pple設備上的AirDrop。當您收到數(shù)據(jù)傳輸請求時，會彈出一張卡片，提醒您是同意還是拒絕。

無論你選擇哪一個，都只有一個動作

4.工作流程

卡片很容易分類一系列任務。以Trello為例。從看板，所有管理項目都完全基于卡。每塊板都裝滿了卡片，每張卡片代表一個單獨的任務。

5.不要在任何地方使用卡片

1，相同的物種（如）內容

對于沒有太多動作的相同（類似）內容，使用列表（網(wǎng)格）表示是比卡式設計更合適的方法。

左：在這里使用卡分散了用戶的快速瀏覽

沒有必要在照片庫中使用卡片。在這種情況下，使用網(wǎng)格的干凈且輕量級的方式將是更好的選擇，如下例所示：

2，大屏幕尺寸

基于卡片的信息呈現(xiàn)在小屏幕上可能非常好，大屏幕上的成績單對于他們的視覺效果非常好，但是它們對閱讀理解的速度有很大的影響。例如，大屏幕上的Pinterest：

3.重新設計現(xiàn)有應用程序

根據(jù)這種新的視覺觀點，認為您的應用程序相當容易使用的用戶可能無法購買您的帳戶。您應該嘗試從用戶那里獲得反饋并找出他們想要看到的內容。通過反饋，您可以進行設計更改甚至重新設計，然后查看用戶隨附的更改。

6.結論

我希望通過這篇文章，您可以理解為什么卡式設計變得越來越流行。而且我相信這種趨勢不會在短期內消亡。由于卡不僅易于導航，因此它們是用于創(chuàng)建一致用戶體驗的最靈活布局之一。如今，人們更加注重在內容消費面前快速找到滿意的內容。由于卡片可以起到很好的作用而且不受設備的影響，這不是一個好的選擇嗎？

翻譯自：https://uxplanet.org/using-card-based-design-to-enhance-ux-51f965ab70cb.2uys07u81

« 回歸商業(yè)的本質：新零售潮下的電子商務創(chuàng)業(yè)故事 | “百川計劃”加速倉儲網(wǎng)多極化建設蘇寧打造國內頂級智能物流平臺 »