譯文｜卡片式設計或許沒你想象中那么美好

卡片式設計的好處是可以將內容單元以統一的方式進行混合呈現。對付多平臺，多分辨率的設計經常有奇效。但說到底，設計最終是為了解決問題，為了體驗，更為商業目標。卡片式設計能在一定程度上保證美感，但能保證更好地解決用戶需求嗎？

隨著Material Design的崛起，“卡片”已經成為如今網頁設計中非常常見的一種模式，特別是在一些歸檔頁面，經常會采用圖片加信息概要的圖文混排模式。

卡片是一個通往詳情頁面的入口。——Google Material Design

許多用戶體驗設計團隊的重設計方案中都有卡片式設計的身影，這種方式有一個好處就是頁面信息彼此之間相對獨立，看起來簡潔清晰，它可以顯示文章摘要，讓我們能更快地發現更多我們想要的信息。但是，當涉及到新聞頁面，尤其是主頁和歸檔頁面，我們會發現這種設計方式可能被過度濫用了。

重設計后的反饋

任何產品的重設計,都會收到一些忠實用戶即時的負面反饋，緊隨其后的是大量的投訴和切換到舊UI的呼聲。

我們本來期望Goal News和Live Scores這兩款應用在重新上線后能有不錯的反響，但很遺憾的是，這兩個產品都沒獲得什么激動人心的增長。所以,我們必須要做出改變。認真聽取用戶的批評，最終找到一個適用的模式。

我們第一次意識到卡片式設計存在問題是在Goal News上線后，如上圖。有些關于一屏所能顯示的文章數這類抱怨就開始出現了，比如：

• 我只是想迅速、簡單地瀏覽一下新聞而已，搞那么多圖片，還要向下滾動那么深……
• 想要掃完所有的新聞就不得不欣賞完這些大圖……根本沒辦法快速瀏覽完所有已更新的新聞。

上面的這些反饋，不僅僅是暴露出用戶對應用某種設計的不滿，也促使我們花時間去研究為什么會出現這樣的問題。通過這些反饋我們確定了一個共同的用戶目標：快速瀏覽，輕松獲取新聞概要。

這里我們還是要進一步來研究一下為什么卡片式設計會引起上面這些問題，以下是我們的研究分析。

挖得更深一點

使用HotJar分析了其他一些網站的點擊和滾動距離后，我們發現了類似的問題。

Spox.com的主頁最近才剛被重設計過，新的設計采用了新聞列表的形式展現，獨立于主頁輪播圖。

上圖是Spox以前的主頁，你可以看到“Spox TV Playoffs”這個banner上面的那些小圖被點擊的最多，這些小圖實際上是輪播圖的導航，它占到整個頁面點擊的43%。能得到這么多點擊的原因可能是單個用戶可以直接在這個會話界面同時打開多個卡片。

輪播圖右側的“Themen des tages”版塊獲得了22%的點擊，這個列表實際上只出現在主頁輪播圖處。重設計之后，“Themen des tages”與輪播圖被分離開來，如下圖所示：

結果是難以置信的，“Themen des tages”的點擊率變成了59%。更有趣的是，輪播圖切換式導航起了反效果，別看圖片這么大，這個區域的點擊率只有1%了，幾乎失去了與用戶互動的作用，與之前卡片式導航的43%相比簡直是天差地別。

再來看看移動模式下的情況

為了測試用戶手機上的行為，我們獲取了一個基于網站的列表式UI應用（下圖左）和兩個卡片式UI應用（下圖中、右）的點擊數據，雖然不是用同一個網站進行對比可能會造成一定的偏差，但通過這種對比我們仍然能發現：

卡片式設計中漢堡菜單的使用率增加了

比較菜單icon的點擊率，我們能發現卡片式應用的菜單使用率上升，具體數據如下：

• 左：Voetbalzone——0.48%——列表式UI
• 中：Spox——17.43%——卡片式UI
• 右：Goal——4.93%——=卡片式UI

這可能是因為，當用戶發現沒辦法快速瀏覽大量的內容時就會選擇使用菜單去尋找符合他們需求的內容。

卡片式增加滾動的深度

Goal中卡片的使用迫使用戶去滾動頁面，每張卡片占用的空間高度比Voetbalzone中的多了38%，這顯然是不太合適的，雖然用戶會滾動頁面，但只要在前幾個卡片中沒發現他們想要的內容，基本上就會離開。

視野中文章的數量

列表式有一個很明顯的好處是，你可以一次性發現更多的新聞或文章，可以很容易地快速瀏覽。為了理解列表式與卡片式設計的這種差異,我們要擴大研究對象，所以我們分析了對標網站的設計，分別選取了3個列表式設計和卡片式設計的網站。

我們先只考慮主頁，比較兩個場景，1、首屏；2、向下滾動到的“最佳”位置——也就是一次能看到最多標題的那一屏。為了公平起見，我們規定：

• 只統計100%可見的標題
• 確保瀏覽器設置為13英寸Macbook能達到的最大寬度/高度
• 使用相同的Google Chrome瀏覽器
• 縮放級別設置為100%
• 廣告版塊不算在整體高度內

首先來看一下首屏：

圖中上三個為卡片式設計，下三為列表式設計（下圖同）。

然后是最佳位置—也就是你一次性看到標題最多的那屏

分析結果顯示，列表式視圖中文章顯示數幾乎翻倍，OneFootball(卡片)最多只能一次顯示6篇文章，而Voetbalzone(列表)最多是19個。

其他一些例子

我相信我們不是唯一在思考這個問題的人，例如，谷歌就已經對搜索結果頁面的呈現方式進行過A/B測試。

谷歌的搜索結果頁面也許可以設計的更美觀，但這樣就意味著每個頁面呈現更少的搜索結果。——GreenBot

MaterialDesign的建議

所以，什么時候適合采用列表式設計？Material Design中的建議是它適合“快速掃描”相似內容模塊的設計。

而卡片式設計不建議用在“用戶需要直接對比圖片或文本”的情況下，像新聞網站的用戶就經常要先瀏覽標題或概要，確定是自己喜歡的才會點進去進一步了解。

谷歌MD團隊的卡片設計建議。

總之

這兩種模式都有各自明顯的好處。毫無疑問，列表更緊湊,可以同時看到更多的新聞文章，快速瀏覽標題也更容易。

而卡片式更具視覺沖擊力。圖片能抓住用戶的注意力，再加上一些額外的信息,比如摘要和標簽，也可以展現在卡片中，讓用戶在決定是否點擊前可以了解更多信息。

作為設計師，雖然我們都喜歡最新的趨勢，比如大面積留白和大圖，但對于新聞和數據類網站來說，列表能更好地解決用戶基本的訴求目標，通過快速掃描來找到相關內容。希望你能從我們的錯誤中吸取教訓吧，當你設計一個主頁或歸檔頁面時想想卡片式設計是不是合適的選擇。

作者：Rob Gill

原文地址：https://medium.theuxblog.com/when-card-ui-design-doesnt-work-f4343118d108

版權聲明：人人都是產品經理尊重行業規范，所轉載的文章都注明作者和來源，若標注有誤，請聯系主編QQ：419297645更改。