卡片式設(shè)計(jì)的好處是可以將內(nèi)容單元以統(tǒng)一的方式進(jìn)行混合呈現(xiàn)。對(duì)付多平臺(tái)，多分辨率的設(shè)計(jì)經(jīng)常有奇效。但說到底，設(shè)計(jì)最終是為了解決問題，為了體驗(yàn)，更為商業(yè)目標(biāo)?？ㄆ皆O(shè)計(jì)能在一定程度上保證美感，但能保證更好地解決用戶需求嗎？

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

卡片是一個(gè)通往詳情頁面的入口?！狦oogle Material Design

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

重設(shè)計(jì)后的反饋

任何產(chǎn)品的重設(shè)計(jì),都會(huì)收到一些忠實(shí)用戶即時(shí)的負(fù)面反饋，緊隨其后的是大量的投訴和切換到舊UI的呼聲。

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

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

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

上面的這些反饋，不僅僅是暴露出用戶對(duì)應(yīng)用某種設(shè)計(jì)的不滿，也促使我們花時(shí)間去研究為什么會(huì)出現(xiàn)這樣的問題。通過這些反饋我們確定了一個(gè)共同的用戶目標(biāo)：快速瀏覽，輕松獲取新聞概要。

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

挖得更深一點(diǎn)

使用HotJar分析了其他一些網(wǎng)站的點(diǎn)擊和滾動(dòng)距離后，我們發(fā)現(xiàn)了類似的問題。

Spox.com的主頁最近才剛被重設(shè)計(jì)過，新的設(shè)計(jì)采用了新聞列表的形式展現(xiàn)，獨(dú)立于主頁輪播圖。

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

輪播圖右側(cè)的“Themen des tages”版塊獲得了22%的點(diǎn)擊，這個(gè)列表實(shí)際上只出現(xiàn)在主頁輪播圖處。重設(shè)計(jì)之后，“Themen des tages”與輪播圖被分離開來，如下圖所示：

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

再來看看移動(dòng)模式下的情況

為了測(cè)試用戶手機(jī)上的行為，我們獲取了一個(gè)基于網(wǎng)站的列表式UI應(yīng)用（下圖左）和兩個(gè)卡片式UI應(yīng)用（下圖中、右）的點(diǎn)擊數(shù)據(jù)，雖然不是用同一個(gè)網(wǎng)站進(jìn)行對(duì)比可能會(huì)造成一定的偏差，但通過這種對(duì)比我們?nèi)匀荒馨l(fā)現(xiàn)：

卡片式設(shè)計(jì)中漢堡菜單的使用率增加了

比較菜單icon的點(diǎn)擊率，我們能發(fā)現(xiàn)卡片式應(yīng)用的菜單使用率上升，具體數(shù)據(jù)如下：

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

這可能是因?yàn)?，?dāng)用戶發(fā)現(xiàn)沒辦法快速瀏覽大量的內(nèi)容時(shí)就會(huì)選擇使用菜單去尋找符合他們需求的內(nèi)容。

卡片式增加滾動(dòng)的深度

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

視野中文章的數(shù)量

列表式有一個(gè)很明顯的好處是，你可以一次性發(fā)現(xiàn)更多的新聞或文章，可以很容易地快速瀏覽。為了理解列表式與卡片式設(shè)計(jì)的這種差異,我們要擴(kuò)大研究對(duì)象，所以我們分析了對(duì)標(biāo)網(wǎng)站的設(shè)計(jì)，分別選取了3個(gè)列表式設(shè)計(jì)和卡片式設(shè)計(jì)的網(wǎng)站。

我們先只考慮主頁，比較兩個(gè)場(chǎng)景，1、首屏；2、向下滾動(dòng)到的“最佳”位置——也就是一次能看到最多標(biāo)題的那一屏。為了公平起見，我們規(guī)定：

• 只統(tǒng)計(jì)100%可見的標(biāo)題
• 確保瀏覽器設(shè)置為13英寸Macbook能達(dá)到的最大寬度/高度
• 使用相同的Google Chrome瀏覽器
• 縮放級(jí)別設(shè)置為100%
• 廣告版塊不算在整體高度內(nèi)

首先來看一下首屏：

圖中上三個(gè)為卡片式設(shè)計(jì)，下三為列表式設(shè)計(jì)（下圖同）。

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

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

其他一些例子

我相信我們不是唯一在思考這個(gè)問題的人，例如，谷歌就已經(jīng)對(duì)搜索結(jié)果頁面的呈現(xiàn)方式進(jìn)行過A/B測(cè)試。

谷歌的搜索結(jié)果頁面也許可以設(shè)計(jì)的更美觀，但這樣就意味著每個(gè)頁面呈現(xiàn)更少的搜索結(jié)果?！狦reenBot

MaterialDesign的建議

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

而卡片式設(shè)計(jì)不建議用在“用戶需要直接對(duì)比圖片或文本”的情況下，像新聞網(wǎng)站的用戶就經(jīng)常要先瀏覽標(biāo)題或概要，確定是自己喜歡的才會(huì)點(diǎn)進(jìn)去進(jìn)一步了解。

谷歌MD團(tuán)隊(duì)的卡片設(shè)計(jì)建議。

總之

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

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

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

作者：Rob Gill

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

版權(quán)聲明：人人都是產(chǎn)品經(jīng)理尊重行業(yè)規(guī)范，所轉(zhuǎn)載的文章都注明作者和來源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645更改。