2016-12-9 周周
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
編者按:卡片式設(shè)計(jì)一直是以強(qiáng)兼容性和“百搭”的形象出現(xiàn)在大眾的面前,但是它同樣有無(wú)法滿足用戶需求的時(shí)候,今天的文章我們就在實(shí)戰(zhàn)中聊聊這件事~
Material Design的流行讓卡片式設(shè)計(jì)走上神壇,卡片式設(shè)計(jì)在如今的網(wǎng)頁(yè)設(shè)計(jì)中更是隨處可見(jiàn)。尤其是那些偏向于大量信息匯總的頁(yè)面,卡片式設(shè)計(jì)幾乎是不二的選擇。
我們的用戶體驗(yàn)團(tuán)隊(duì)近期負(fù)責(zé)了好幾個(gè)重設(shè)計(jì)的項(xiàng)目。毫無(wú)疑問(wèn),其中有不少就是借用卡片式設(shè)計(jì)來(lái)實(shí)現(xiàn)的。而有意思的地方在于,我們通過(guò)這些項(xiàng)目實(shí)踐發(fā)現(xiàn)一些有意思的情況:卡片式設(shè)計(jì)在一些新聞?lì)惖木W(wǎng)站,尤其是首頁(yè)和歸檔頁(yè)面,并不是那么適用。
這個(gè)截圖是源自于Goal.com 的APP,它用的就是卡片式設(shè)計(jì)。
完成產(chǎn)品的重設(shè)計(jì)之后,產(chǎn)品的用戶通常會(huì)即時(shí)給予一些負(fù)面的信息反饋。之后,你會(huì)收到一堆電子郵件,其中許多會(huì)提出恢復(fù)舊版UI的要求。
我們?cè)诎l(fā)布新版 Goal News 和 Live Scores APP 的時(shí)候,就已經(jīng)預(yù)計(jì)到了這一點(diǎn),這兩個(gè)應(yīng)用新版發(fā)布之后的情況也確實(shí)如此。所以,在有了心理準(zhǔn)備的情形下,我們也打算聽(tīng)取用戶的批評(píng),基于用戶反饋給予一定的調(diào)整。之后,我們也摸索出一套模式。
在Goal News 發(fā)布之后,關(guān)于卡片式設(shè)計(jì)的第一個(gè)問(wèn)題就凸顯出來(lái)了。有一部分用戶開(kāi)始吐槽每屏展示的內(nèi)容的數(shù)量和方式了:
這些用戶反饋是極其重要的。它所關(guān)乎的不僅僅是功能,而且還清楚的解釋了他們的目標(biāo)和導(dǎo)致問(wèn)題的原因。通過(guò)這一點(diǎn),我們確定了普通用戶的目標(biāo):他們想要快速的瀏覽,并且簡(jiǎn)單地了解這些新聞所包含的信息的概況。
那么接下來(lái),我們要研究一下,為什么卡片式設(shè)計(jì)不能滿足用戶的要求,達(dá)成目標(biāo)。我們的研究是這么做的:
我們借助 HotJar 來(lái)分析了一下我們其他幾個(gè)網(wǎng)站在滾動(dòng)翻頁(yè)過(guò)程中的距離和點(diǎn)擊次數(shù),發(fā)現(xiàn)確實(shí)都有類似的問(wèn)題。Spox.com 的首頁(yè)最近也進(jìn)行了重新設(shè)計(jì)。
舊的首頁(yè)入上圖所示。你可以看到,“Spox TV Playoffs”的banner上方的輪播展示模塊吸引了大量的用戶點(diǎn)擊,占據(jù)總點(diǎn)擊量的43%,以為單個(gè)用戶可能在此點(diǎn)擊多個(gè)內(nèi)容。
而22% 的用戶點(diǎn)擊則是來(lái)自“Themen des tages”(每日主題)這個(gè)列表,而這個(gè)列表對(duì)應(yīng)的就是第一個(gè)輪播圖!重新設(shè)計(jì)之后,輪播圖和列表就徹底分開(kāi)了:
重新設(shè)計(jì)之后的結(jié)果非常令人置信,“每日主題”這個(gè)點(diǎn)擊量增加了三倍,達(dá)到了總點(diǎn)擊數(shù)的59%。有趣的地方在于,輪播圖+列表的模式其實(shí)是有反效果的。刪除了圖片的模塊,它們失去了幾乎所有的交互性,現(xiàn)在僅占有總點(diǎn)擊數(shù)的1%。和之前43%的點(diǎn)擊量相比差異巨大。
由此可以推斷用戶常常是借助輪播圖來(lái)找尋新聞列表。
為了研究用戶在移動(dòng)端上的行為模式,我們對(duì)比了常見(jiàn)列表是UI的網(wǎng)站(左)和采用卡片式設(shè)計(jì)的移動(dòng)端網(wǎng)站(中,右),雖然它們并不是同一個(gè)站點(diǎn),但是對(duì)比的結(jié)果依然非常的具有參考價(jià)值。
卡片式設(shè)計(jì)提升了漢堡圖標(biāo)的使用率
在采用卡片式設(shè)計(jì)的移動(dòng)端網(wǎng)站中,漢堡圖標(biāo)的使用頻率明顯高了很多,我們可以看看這三個(gè)網(wǎng)站的數(shù)據(jù):
·左:Voetbalzon——列表UI——0.48%
·中:Spox——卡片式UI——17.43%
·右:Goal——卡片式UI——4.93%
可能是用戶不耐煩可見(jiàn)性有限的標(biāo)題,常常借助菜單尋求更符合它們需求的內(nèi)容。
卡片需要更多的翻頁(yè)滾動(dòng)
最右邊的網(wǎng)站一直在鼓勵(lì)用戶向下滾動(dòng)翻頁(yè),其實(shí)這種情況并不正常,因?yàn)檫@個(gè)網(wǎng)站的卡片式設(shè)計(jì)使得每塊內(nèi)容的高度要比最左側(cè)的列表式UI的內(nèi)容模塊高出38%,雖然用戶滾動(dòng)的更多,但是他們看到的內(nèi)容其實(shí)依然偏少。
很明顯,同等大小的界面中,列表式UI 其實(shí)會(huì)讓你的視野中的文章數(shù)更多,用戶快速掃視下,能夠獲取更多的內(nèi)容。為了理解這種差異,我們需要仔細(xì)研究一下卡片式UI當(dāng)中,空間都被什么占用了。我們將自己的網(wǎng)站同我們的競(jìng)爭(zhēng)者的網(wǎng)站進(jìn)行對(duì)比,讓3個(gè)卡片式設(shè)計(jì)的網(wǎng)站和3個(gè)基于列表的網(wǎng)站進(jìn)行對(duì)比。
測(cè)試過(guò)程中,我們只對(duì)比首頁(yè),并且只測(cè)試兩種情形:1、頁(yè)面被滾動(dòng)到頂端,2、頁(yè)面被滾動(dòng)到最合適的位置(視野中新聞標(biāo)題最多的情況下)。為了讓這個(gè)測(cè)試更加公平,我們還做了如下設(shè)定:
下面是頁(yè)面都處于頂端時(shí)候的顯示狀況:
下面是頁(yè)面處于最佳可視位置時(shí)的顯示狀況:
通過(guò)對(duì)比和分析,我們可以確知,列表式的界面所能顯示的新聞數(shù)量是卡片式設(shè)計(jì)的兩倍,顯示最少的 OneFootball 一頁(yè)僅能顯示6篇新聞,而Voetbalzone 則多達(dá)19條。
我想,我們并不是唯一在意這個(gè)問(wèn)題的設(shè)計(jì)團(tuán)隊(duì),實(shí)際上谷歌已經(jīng)做過(guò)類似的AB測(cè)試了。
Google 搜索的AB測(cè)試
“卡片式設(shè)計(jì)下的Google 搜索結(jié)果看起來(lái)會(huì)更加豐富多彩,但是每頁(yè)提供的信息更少。”
來(lái)自Material Design 的建議
實(shí)際上,Material Design 的設(shè)計(jì)規(guī)范中也考慮到這種情況,規(guī)范中建議設(shè)計(jì)需要“快速掃視”的內(nèi)容的時(shí)候采用列表式UI,它適合展示是類似的、重復(fù)的內(nèi)容。
當(dāng)用戶并不需要“對(duì)文本和圖片直接進(jìn)行對(duì)比”的時(shí)候,并不推薦使用卡片式UI。新聞?lì)惥W(wǎng)站上圖片和文字都不少,用戶需要對(duì)比內(nèi)容選取更感興趣的內(nèi)容來(lái)瀏覽,同時(shí)也需要密集的信息展示來(lái)盡可能快地多看內(nèi)容。這樣一來(lái),參考 Material Design的建議,用列表式UI更合理。
嚴(yán)格意義上來(lái)說(shuō),兩種UI模式都各有優(yōu)勢(shì),這并不奇怪。
卡片式設(shè)計(jì)目前具有更強(qiáng)的影響力,圖片也非常抓人眼球,但是列表式UI更加緊湊,更加便于用戶快速瀏覽信息。另一方面,卡片式設(shè)計(jì)可以承載多種多樣的內(nèi)容和元素,比如摘要、標(biāo)簽,它們能夠讓內(nèi)容更加豐富,擁有不同的縱深。
作為設(shè)計(jì)師,我們都喜歡新趨勢(shì),但是同樣也需要靈活的選擇更合理的方案,不迷信流行趨勢(shì)。
藍(lán)藍(lán)設(shè)計(jì)( m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.88yangsc.com