中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

重設(shè)計后的反饋

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

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

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

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

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

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

挖得更深一點

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

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

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

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

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

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

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

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

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

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

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

卡片式增加滾動的深度

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

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

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

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

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

首先來看一下首屏：

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

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

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

其他一些例子

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

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

MaterialDesign的建議

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

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

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

總之

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

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

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

作者：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)注有誤，請聯(lián)系主編QQ：419297645更改。