www.renewa的部落格

卡片設計作爲席卷設計圈的主流趨勢，好處多多，例如便于組織信息、易于閱讀、視覺美觀、是配性好等等優點占領了設計師內心。但是卡片真的是萬能的麽？強套卡片式設計又會有什麽致命的後果呢？接下來我們理性的分析卡片的兩面性，卡片究竟適合在什麽樣的場景下出現，而在什麽使用場景下是不適合出現的！

目錄

1.卡片的定義

2.卡片的作用

3.卡片不是萬能的

4.卡片設計注意事項

4.總結

01

卡片的定義

卡片包含有關單個主題的內容和操作。我們可以簡單的理解爲主要的功能是承載“信息”和“交互”的容器。

02

卡片的作用

卡片是在單個主題上顯示內容和操作的表面。他們應該易于掃描相關和可操作的信息。文本和圖像等元素應以明確指示層次結構的方式放置在它們上面。卡片三大設計要素。如下所示。

卡片三要素

A.承載：卡片能夠承載信息

B.獨立：卡片可以獨立存在，而不依賴于周圍的元素。

C.個體：卡不能與其他卡合並，也不能分成多張卡。

03

卡片是萬能的

由谷歌提出 Material Design 的設計概念之後，卡片設計便風靡大街小巷，衆多一線互聯網公司也爲此進行了嘗試性改版設計。但大家發現沒有，其實谷歌搜索自身並沒有選用卡片式設計，爲什麽呢？作爲自己家的當家花旦，竟然沒有使用？

原因很簡單，谷歌搜索的最終目標是幫助用戶快速搜索，所以說界面上的元素越多越是幹擾用戶執行當前的操作。卡片雖然視覺醒目、美觀，但是不符合産品的最終目的，所以谷歌搜索自身也就放棄了使用卡片設計。

A.優勢有時候是劣勢

首先我們需要了解，每一個設計樣式的優勢和劣勢都是相對的，即使現下最流行的設計樣式的也是一樣。我們在設計的過程中要充分的考慮到産品業務目標和用戶的操作感受。

B.卡片承載量有限

卡片能夠有效的組織信息，但是卡片的承載量是有限的。首先我們要理解，卡片式設計是詳細信息的入口，而不是純信息展示呈現。

卡片可以承載單一單元的信息，承擔著信息入口的作用點擊交互作用，無法承擔大量信息展示的作用。例如花瓣：

花瓣中的畫板頁面，選用卡片形式來有效的組織其中的“圖片、名稱、收集者、數量、”的信息以及“關注”功能。

卡片有承載信息的能力，但卻不能承載大量的信息，並不適用重內容的産品中或者有這大量文字信息的使用場景。我們以36氪爲例：

例如上面的36氪詳情頁，詳情頁承擔著大量的信息，首先用戶最關注的是所浏覽的內容，其次如果用卡片的形式則會破壞用戶對頁面的沈浸感。

C.卡片式真的能100%提升空間利用率？

我們知道卡片設計可以通過 X 軸的交互來提高頁面空間的利用率，通過側滑可以展示更多的信息。這裏我們以下廚房爲例：

下廚房通過 X 軸的交互可以在一定範圍內通過側滑顯示更多的信息，我們可以看出，卡片式設計中提升空間利用率需要建立在 X 軸側滑的基礎上，利用橫向的隱藏空間，而且頁面中卡片信息都集中于圖片的展示，文字位于卡片的下端。

假設我們換成文字內容或混合內容呢？內容的轉變引發出卡片式設計的一劑硬傷-空間占比大，由于本身的設計屬性信息需要通過卡片去承載，所以在卡片與屏幕邊界需要保持一定的距離，而且卡片單元與單元之間必須通過空間距離進行分割。這種方式大大縮減了頁面對于信息展示的程度，我們以列表頁爲例：

如圖所示，我們發現同面積下，卡片式設計所能展示的信息比分割線形式所展現的信息會更少一下，所以說卡片式設計並不能100%提高頁面的空間利用率，需要建立合適適用使用場景之下，例如側重流量分發引導的業務場景中。

D.卡片並不能每時每刻提高浏覽效率

通過設計層面的分析，我們結合實際案例進行分析。前言中我們提到卡片有組織信息的提高浏覽效率的作用，但是這也是建立在它承擔信息入口的前提下，對信息進行了組織歸納，來告訴用戶需要點擊才能查看詳細信息，這種使用場景更加適合內容平台的流量分發，例如閑魚：

閑魚使用卡片式的設計，通過空間間隔使得每個卡片上的信息更加獨立、醒目，卡片自身也將關鍵信息進行了提煉，這樣大大提高了用戶浏覽效率，幫助用戶快速點擊選擇完成當前任務。但是卡片式設計就能100%提高用戶的浏覽效率麽？我們看下一個例子。

卡片雖然能夠有效的組織信息，提高用戶的浏覽效率。但不適用于每個場景，在重視效率和操作任務的産品中，最重要是從各個方面幫助用戶提高獲取信息的效率。這個時候卡片式的設計就顯得心有余而力不足。

首先卡片的空間占比會比普通的列表流更大一些，因爲卡片設計的間隔需要通過卡片之間的控件間隔來區分，這樣看來卡片並沒有想的那麽節省控件。我們以12306和筆者的概念高爲例：

大家可以看到改版使用卡片設計，單個信息的卡片占比直線上升，大大削減了信息展示的空間。對于類似于12306這種注重效率的産品中，如何提高信息浏覽率才是關鍵，卡片式的設計大大縮減了信息展示的區域，導致用戶浏覽信息數量急劇下降，需要用戶通過頻繁的滑動來查詢信息，再次降低用戶的浏覽效率。

04

卡片設計注意事項

A.首先，我們不能爲了卡片而卡片，卡片形式雖然設計美觀，但是我們最終的目標是解決問題而不是産生問題。

B.設計上避免設計過度，陰影“有助于”顯示卡片，而不是無時不刻的爲了增加設計細節而存在的。

C.卡片是信息的入口，要避免信息承載過量，並要斟酌功能的設置，避免幹擾用戶的目的。

D.卡片提高空間利用率，需要借助橫向 X 軸交互利用隱藏的空間，縱向 Y 軸並不能幫助界面提高頁面的空間利用率，反而會增強頁面的割裂感。

E.卡片雖然是信息集合的呈現，但並不能每時每刻都能夠提高浏覽效率，我們要意識到卡片的自身的設計屬性是比較耗費空間的，如果你的目的是提升浏覽效率則需要選擇更加節省空間的設計形式，避免刻意設計。05

上述我們通過對比的方式來簡單介紹了卡片的兩面性，卡片的是信息的入口，承載量有限不適宜展示大量的信息；卡片在適合的使用環境才能提升空間利用率而不是適用所用場景；卡片並不能每時每刻提高浏覽效率，而需要建立在用戶的所要執行的任務目標上。雖然我們喜愛的卡片並不是我們看到的那麽完美，但其實我們並不應該片面性評判一個樣式的好壞，而是要慎重考慮産品的業務目標和使用場景選擇最合適的設計樣式，而不是盲目跟風和主觀的對待。

更多設計咨詢：http://www.designnow.com.hk/