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

作為設(shè)計師，雖然我們都喜歡最新的流行趨勢，額外的白色空間和大圖像，但對于新聞和數(shù)據(jù)，列表式是更好地解決基本的用戶目標(biāo)的方法。

隨著Material Design的流行，卡片式UI已經(jīng)成為現(xiàn)代web設(shè)計的一部分。尤其是在你在提供一個匯總歸檔信息的界面時。

卡片是提供詳細(xì)信息的入口。——來源：Google Material Design

我們的用戶體驗設(shè)計團隊最近重新設(shè)計基于卡片的模式。本文將進(jìn)行簡單地總結(jié)，你會明顯得得到更多的信息。然而，當(dāng)涉及到新聞，尤其是家庭和歸檔的頁面時，會發(fā)現(xiàn)我們遠(yuǎn)遠(yuǎn)超過了使用這種模式。

基于卡片式UI設(shè)計的app截圖

文章排版設(shè)計的反饋

在重新設(shè)計后，經(jīng)常用戶群會有及時的負(fù)面反應(yīng)。緊隨其后的是大量的投訴和電子郵件，要求你撤回到舊的UI界面。

我們計劃重新設(shè)計Goal News 和Live Scores這兩款app，這兩個app都沒有受到變化的影響。所以考慮到這一點，我們要對策略進(jìn)行一些改變。聽從批評，然后建立共同的模式。

我們第一次接觸卡片問題是在Goal News發(fā)布之后 – 見圖。屏幕上可以看見少量的抱怨的文章。例如：

用戶關(guān)于卡片得反饋截圖

太多的圖片而且需要不停地滾動。我只是想快速的瀏覽新聞。

為了看所有的新聞我必須滾動大圖。而且不能夠一次查看加載的新聞。

從用戶的反饋得到：反饋是很重要的。這不僅僅是抱怨一個性能，而是花時間解釋引起的問題。通過這個我們確定了一個共同的用戶目標(biāo)，需要快速閱讀，只得到最新新聞的概述就夠了。

進(jìn)一步需要研究一下現(xiàn)在問什么沒有實現(xiàn)這一目標(biāo)。下面是我們得一些研究。

更深入的挖掘

通過使用HotJar分析其他網(wǎng)站上的點擊和滾動距離，我們注意到類似的問題。Spox.com的主頁最近被重新設(shè)計，新的設(shè)計側(cè)重于新聞列表，從其他的分離開來。

Spox.com – 重新設(shè)計

舊主頁如上所示。 您可以在“Spox電視季后賽”橫幅上方的小圖片上看到大量的可點擊事件。 這些點擊會使導(dǎo)航輪播。 他們在此頁面上的被點擊次數(shù)為43％。 這可能會吸引大量點擊，因為單個用戶可能在同一會話期間點擊多個卡。

22％的總點擊次數(shù)是通過“Themen des tages”的列表。 這個列表實際上只出現(xiàn)在第一個輪播項目！ 于是通過分離“Themen des tages”重新設(shè)計和旋轉(zhuǎn)木馬導(dǎo)航的方法來解決這個問題，如下：

Spox.com – 重新設(shè)計

結(jié)果令人難以置信，“Themen des tages”的點擊次數(shù)增加了三倍，達(dá)到了點擊總數(shù)的59％。

有趣的是，旋轉(zhuǎn)木馬導(dǎo)航的列表方法有相反的效果。 通過刪除圖像，我們幾乎失去了與該區(qū)域的所有交互。 現(xiàn)在只占總點擊次數(shù)的1％。 與以前相比有巨大的差異，其中43％的點擊在導(dǎo)航轉(zhuǎn)盤。

這可能表示用戶正在使用導(dǎo)航，以找到剛剛消失的新聞列表。 記住它只出現(xiàn)在第一張幻燈片，這個導(dǎo)航啟用了自動播放。

移動模式

當(dāng)我們研究在移動設(shè)備上的行為時， 我們訪問了一個基于列表的UI網(wǎng)站（下面，左）和兩個基于卡片的UI網(wǎng)站（下面，中，右）。 我們承認(rèn)存在偏見，我們不是像上面做的比較同一個網(wǎng)站 ，但仍能總結(jié)出一些結(jié)論。

移動單擊并滾動地圖。來自：HotJar

卡片式增加了漢堡菜單的使用

比較菜單圖標(biāo)的使用。我們可以看到一個基于卡片式的網(wǎng)站的更大的用途。統(tǒng)計數(shù)據(jù)的分析如下：

• 左：Voetbalzone – 0.48％ – 列表UI
• 中：Spox – 17.43％ – 卡片UI
• 右：Goal – 4.93％ – 卡片UI

這可能是因為用戶對有限的可見標(biāo)題會感到不耐煩，并且已經(jīng)訴諸使用菜單來找到與其需要相匹配的內(nèi)容。

卡片式增加了滾動的深度

在Goal（最右邊）上使用卡片鼓勵用戶向下滾動頁面。這不是常見的，因為每個卡片相比于Voetbalzone（最左邊）占用高出38％的高度。雖然用戶滾動更多，他們?nèi)匀豢吹捷^少的內(nèi)容，比較左側(cè)網(wǎng)站少了3篇文章。

可閱讀的文章數(shù)

很明顯，列表的好處是你可以在視圖中放更多的新聞文章，從而更快地掃描標(biāo)題。為了理解這種差異，我們需要研究基于卡的設(shè)計所需的額外空間。我們已將研究擴展到競爭對手的新聞網(wǎng)站。將3個依靠卡片式的網(wǎng)站與3個喜歡列表的網(wǎng)站進(jìn)行比較。

只考慮主頁，我們已經(jīng)看了2種情況。一是在折疊，二是向下滾動到“最好”的位置 – 最可能是新聞標(biāo)題的地方。為了使測試公平：

• 只計算標(biāo)題100％可見的新聞報道
• 確保瀏覽器設(shè)置為最大寬度/高度為Macbook?13″
• 使用相同的瀏覽器：Google Chrome
• 縮放級別設(shè)置為100％。
• 屏蔽廣告，因為廣告橫幅的高度可能有所不同

首先讓我們來看看折疊效果：

折疊效果。 頂行是卡片式網(wǎng)站。 底部是列表式網(wǎng)站。

下面是“最好的”案例 – 你可以看到最多的新聞。

最好的位置看到最多的新聞。 頂行是卡片式。 底部是列表式。

分析這些結(jié)果表明，通過使用列表，您可以將新聞的數(shù)量增加一倍。 當(dāng)比較最壞的情況和最好的情況，OneFootball（卡片式）最多只能放6篇文章的標(biāo)題。 其中Voetbalzone（列表式）在類似位置有19個標(biāo)題。

列表與卡片的其他示例

我相信我們不是唯一來解決這個問題的人。 例如，Google已經(jīng)對其搜索結(jié)果頁進(jìn)行AB測試。

Google搜索的AB測試。

Google的搜索結(jié)果可能會更加豐富多彩，但每頁提供的信息較少?！獊碜裕?a target="_blank" rel="nofollow">GreenBot

Material Design的建議

什么時候適合使用列表？ Material Design建議的是列表是“可快速掃描”，適合顯示類似的重復(fù)的內(nèi)容。
當(dāng)用戶不直接比較圖像或文本時，不推薦使用卡片式。新聞網(wǎng)站的用戶經(jīng)常想比較新聞標(biāo)題，特別是在首頁上以獲得對當(dāng)前故事的概述并決定對哪些文章再進(jìn)一步探索。

Google Material Design團隊的一些關(guān)于卡片式的建議。

總結(jié)

這兩種模式都有各自明顯的好處。 這不奇怪的是，列表式更緊湊，因此你可以看到更多的新聞文章，更容易的瀏覽標(biāo)題。

雖然卡片式有更大的影響。 圖片是抓住用戶的注意。 附加信息如摘錄和標(biāo)簽，也可以出現(xiàn)在卡上。 在用戶提交請求之前給他們更多的信息。

作為設(shè)計師，雖然我們都喜歡最新的流行趨勢，額外的白色空間和大圖像，但對于新聞和數(shù)據(jù)，列表式是更好地解決基本的用戶目標(biāo)的方法。 快速的瀏覽以查找相關(guān)內(nèi)容。希望你會從我們的錯誤中學(xué)習(xí)，在設(shè)計下一個主頁或歸檔頁面時打破嚴(yán)格的卡片模式。

原文作者：@rob_gill

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

譯者：厲嗣傲

譯文地址：http://www.ui.cn/detail/193772.html

本文由 @厲嗣傲 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。