卡片式布局的優點有哪些，html如何實現卡片布局

UI布局有許多種形式，而卡片式作為目前比較常見的一種，也有著它適用和不適用的場景

前言：哪些是卡片

說到卡片式設計，大家的第一反應可能是下面這樣的頁面。

而從廣義上來說，以分隔條分割頁面的方式也可以算作通欄卡片，本身并沒有表現層上的作用，只是在框架層幫助用戶信息分類。

因此，此次討論的卡片主要是以下三類：通欄卡片、灰底+卡片、白底+卡片+投影。

此次要討論的場景

首先，卡片只是UI表現手法的一種，同類的方法還有分隔線和留白。如下圖

另一方面，UI界面又可較籠統地分為兩種：以信息為主的頁面，和以功能為主的頁面。

在以信息為主的頁面中，卡片往往作為單條信息的承載；而以功能為主的頁面中，卡片往往是作為整個模塊的承載。

以下就按這兩個場景討論哪些時候適用卡片，哪些時候不適合。

一.在以信息為主頁面中的卡片式布局

Q1：卡片與分隔線，這兩種形式如何選擇

卡片，尤其是通欄卡片，其實就是通過分隔條來區分不同內容，因此與分隔線有很大的相似度。MD規范中提到，列表類的信息更適合用分隔線而不是卡片。如下圖

但如果是復雜一點的情況呢？舉個例子，知乎里的以下4個不同的頁面，有些采用了分割線，有些采用了卡片，具體如何選擇？

A1：可以從以下3個方面綜合考慮

1.各信息之間的關聯度

比如電話聯系人頁面，搜索熱榜頁面等等，這些頁面的各信息之間幾乎沒有關聯，用戶需要快速瀏覽來找到哪條才是自己想看。而采用視覺上不顯眼的分隔線，有助于用戶快速瀏覽。

而比如知乎的答案頁，各條信息之間比較類似（都是對同一問題的回答），用戶需要更仔細的看每條信息的內容才能篩選出自己感興趣的。采用了通欄卡片的形式，可以用更明顯的分隔條打斷用戶向下瀏覽的視線，讓用戶更聚焦于單個卡片的內容。

2.信息的復雜度。

簡單的信息意味著單條信息內容很少，也就意味著在屏幕上，一屏可以顯示多條信息。比如新聞類APP，這種情況下采用分隔線才能起到快速瀏覽的效果。

而如果信息比較復雜，一屏只能顯示1-2條，甚至不到一條的信息，那么即使采用分隔線，用戶也無法快速瀏覽。

（PS.信息的復雜度其實是可控的，取決于希望用戶看到多少信息）

同時，如果單條信息復雜到需要內部使用分隔線來區分層級，那么信息與信息之間也只能采用卡片來區分。

典型的復雜信息頁面比如微博，一方面單屏常常顯示不下一條信息，另一方面信息內需要分隔線來區分操作和內容，因此整體采用了卡片式布局。、

3.信息種類的多少。

現在的信息流頁面往往會混入多種信息，比如資訊類信息中穿插一下推薦關注的人，穿插一下廣告等等。這種時候，采用通欄卡片，可以提高布局的靈活性。

例如知乎的關注頁面：下右圖嘗試將其他模塊全部去掉，只留一種信息，可以看出采用分隔線即可。而左圖為知乎的樣式，因為有各種模塊，所以采用了通欄卡片的布局。

Q2：通欄卡片與非通欄卡片，這兩種形式如何選擇

A2：非通欄卡片可以讓用戶的視線更加聚焦在單條信息內。

但個人認為這兩者相差不大，如下兩圖，均為復雜的搜索結果。左圖為通欄卡片，右圖為非通欄卡片。實際感受，左圖瀏覽更快速，更適合熟練用戶快速找到結果。右側瀏覽相對較慢，但是能更好的的了解每一條信息，適合不熟悉的用戶正確找到自己想要的。

Q3：什么時候選擇使用卡片

A3：偏向展現單條內容的一般采用卡片，偏向瀏覽效率的不采用卡片。

其實微信的改版是一個極好的例子。新版訂閱號頁面更加突出了單條文章，配圖+完整標題讓用戶更直觀的看到文章內容，但也讓用戶需要下滑更多頁才能看到其他訂閱號的內容。

二.在以功能為主頁面中的卡片式布局

Q1：卡片的特點是什么

1.獨立性

2.同類性

Q1：頁面整體是否要采用卡片式的風格？

A1：個人暫且認為是否采用卡片式并沒有太大的卻別，也希望能拋磚引玉。

下圖是天貓個人中心頁面，左圖舊版采用了卡片式設計，而新版采用了大標題+分隔線的風格。從兩者的效果對比來看，卡片式讓模塊更獨立清晰，整體也比較有統一感。而大標題風格則是讓用戶快速聚焦到自己想要的看的模塊。

Q2：頁面中非通欄卡片與其他UI方式的混搭

A2：混搭時，非通欄卡片有著極強的獨立性，從好的一面看，可以突出某個模塊；從不好的一面看，用的不當會使得頁面不夠統一。

例如下圖。圖1為原設計，純采用非通欄卡片，而另兩張只有簽到采用了非通欄卡片。可以看到，圖1在視覺上，三個模塊整體統一，而圖2圖3的三個模塊割裂成了兩部分，視線會更多地被簽到模塊吸引，而減少對下方模塊的關注。

1.重要級別相差不大的模塊，即使內容不相同，也盡量采用相同形式。

如下圖左為盒馬生鮮的個人中心頁，采用了非通欄卡片和通欄卡片混搭的形式，雖然突出了個人信息，但是視覺上不夠統一。個人嘗試如下圖右，均調整為非通欄卡片，并不會對個人信息有太多的弱化，反而讓界面整體更加統一。

當然，如果模塊類型完全不同，也不用強行統一為卡片式，例如大眾點評的個人中心頁，底下的列表功能并不適合轉化為卡片形式。

2.若頁面整體采用分隔線/空白/分隔條的風格來區分模塊，那么可以將裝飾性強的卡片作為輔助插入其中

如下圖為馬蜂窩的頁面，可見主要的模塊采用的是大標題+空白來分隔，而“推薦景點”（圖中的金雞湖卡片）和“玩樂熱銷榜”采用了卡片的形式。在架構層上，很明顯的表現出了從屬關系，但在表現層上，又適當的突出了營銷內容。

——END——