[ 平面理論教程 ] 卡片式設計並不能支撐所有的設計需求- 設計教程 - 骨子愛創意

教學主題: 卡片式設計並不能支撐所有的設計需求

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 卡片式設計並不能支撐所有的設計需求

這教學的重點為這幾點 [ 設計,需求,所有,不能,卡片,支撐,我們,用戶,內容,網站, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

卡片式設計一直是以強兼容性和“百搭”的形象出現在大眾的面前，但是它同樣有無法滿足用戶需求的時候，今天的文章我們就在實戰中聊聊這件事。

卡片式設計一直是以強兼容性和“百搭”的形象出現在大眾的面前，但是它同樣有無法滿足用戶需求的時候，今天的文章我們就在實戰中聊聊這件事。

Material Design的流行讓卡片式設計走上神壇，卡片式設計在如今的網頁設計中更是隨處可見。尤其是那些偏向於大量信息匯總的頁面，卡片式設計幾乎是不二的選擇。

卡片常常被用作信息詳情的進入入口。

我們的用戶體驗團隊近期負責了好幾個重設計的項目。毫無疑問，其中有不少就是借用卡片式設計來實現的。而有意思的地方在於，我們通過這些項目實踐發現一些有意思的情況：卡片式設計在一些新聞類的網站，尤其是首頁和歸檔頁面，並不是那麼適用。

這個截圖是源自於Goal.com 的APP，它用的就是卡片式設計。

重設計后的反饋

完成產品的重設計之後，產品的用戶通常會即時給予一些負面的信息反饋。之後，你會收到一堆電子郵件，其中許多會提出恢復舊版UI的要求。

我們在發布新版 Goal News 和 Live Scores APP 的時候，就已經預計到了這一點，這兩個應用新版發布之後的情況也確實如此。所以，在有了心理準備的情形下，我們也打算聽取用戶的批評，基於用戶反饋給予一定的調整。之後，我們也摸索出一套模式。

在Goal News 發布之後，關於卡片式設計的第一個問題就凸顯出來了。有一部分用戶開始吐槽每屏展示的內容的數量和方式了：

·反饋1：圖片太多，得一直翻頁。我就想簡單快速的看個新聞啊。

·反饋2：為了看一眼新聞我得翻過一整張大圖啊，而且新聞沒法一次加載完……

這些用戶反饋是極其重要的。它所關乎的不僅僅是功能，而且還清楚的解釋了他們的目標和導致問題的原因。通過這一點，我們確定了普通用戶的目標：他們想要快速的瀏覽，並且簡單地了解這些新聞所包含的信息的概況。

那麼接下來，我們要研究一下，為什麼卡片式設計不能滿足用戶的要求，達成目標。我們的研究是這麼做的：

稍微深挖一下

我們藉助 HotJar 來分析了一下我們其他幾個網站在滾動翻頁過程中的距離和點擊次數，發現確實都有類似的問題。Spox.com 的首頁最近也進行了重新設計。

舊的首頁入上圖所示。你可以看到，“Spox TV Playoffs”的banner上方的輪播展示模塊吸引了大量的用戶點擊，佔據總點擊量的43%，以為單個用戶可能在此點擊多個內容。

而22% 的用戶點擊則是來自“Themen des tages”(每日主題)這個列表，而這個列表對應的就是第一個輪播圖!重新設計之後，輪播圖和列表就徹底分開了：

重新設計之後的結果非常令人置信，“每日主題”這個點擊量增加了三倍，達到了總點擊數的59%。有趣的地方在於，輪播圖+列表的模式其實是有反效果的。刪除了圖片的模塊，它們失去了幾乎所有的交互性，現在僅佔有總點擊數的1%。和之前43%的點擊量相比差異巨大。

由此可以推斷用戶常常是藉助輪播圖來找尋新聞列表。

移動端模式

為了研究用戶在移動端上的行為模式，我們對比了常見列表是UI的網站(左)和採用卡片式設計的移動端網站(中，右)，雖然它們並不是同一個站點，但是對比的結果依然非常的具有參考價值。

卡片式設計提升了漢堡圖標的使用率

在採用卡片式設計的移動端網站中，漢堡圖標的使用頻率明顯高了很多，我們可以看看這三個網站的數據：

·左：Voetbalzon——列表UI——0.48%

·中：Spox——卡片式UI——17.43%

·右：Goal——卡片式UI——4.93%

可能是用戶不耐煩可見性有限的標題，常常藉助菜單尋求更符合它們需求的內容。

卡片需要更多的翻頁滾動

最右邊的網站一直在鼓勵用戶向下滾動翻頁，其實這種情況並不正常，因為這個網站的卡片式設計使得每塊內容的高度要比最左側的列表式UI的內容模塊高出38%，雖然用戶滾動的更多，但是他們看到的內容其實依然偏少。

視野中的文章數

很明顯，同等大小的界面中，列表式UI 其實會讓你的視野中的文章數更多，用戶快速掃視下，能夠獲取更多的內容。為了理解這種差異，我們需要仔細研究一下卡片式UI當中，空間都被什麼佔用了。我們將自己的網站同我們的競爭者的網站進行對比，讓3個卡片式設計的網站和3個基於列表的網站進行對比。

測試過程中，我們只對比首頁，並且只測試兩種情形：1、頁面被滾動到頂端，2、頁面被滾動到最合適的位置(視野中新聞標題最多的情況下)。為了讓這個測試更加公平，我們還做了如下設定：

·只計算標題100%可以被看到的新聞

·採用的13英寸Macbook來瀏覽，瀏覽器頁面最大化

·使用相同的Chrome瀏覽器來測試

·瀏覽器顯示比例為100%，不縮放

·開啟廣告屏蔽

下面是頁面都處於頂端時候的顯示狀況：

下面是頁面處於最佳可視位置時的顯示狀況：

通過對比和分析，我們可以確知，列表式的界面所能顯示的新聞數量是卡片式設計的兩倍，顯示最少的 OneFootball 一頁僅能顯示6篇新聞，而Voetbalzone 則多達19條。

其他的列表式UI和卡片式UI的對比

我想，我們並不是唯一在意這個問題的設計團隊，實際上谷歌已經做過類似的AB測試了。

Google 搜索的AB測試

“卡片式設計下的Google 搜索結果看起來會更加豐富多彩，但是每頁提供的信息更少。”

來自Material Design 的建議

實際上，Material Design 的設計規範中也考慮到這種情況，規範中建議設計需要“快速掃視”的內容的時候採用列表式UI，它適合展示是類似的、重複的內容。

當用戶並不需要“對文本和圖片直接進行對比”的時候，並不推薦使用卡片式UI。新聞類網站上圖片和文字都不少，用戶需要對比內容選取更感興趣的內容來瀏覽，同時也需要密集的信息展示來儘可能快地多看內容。這樣一來，參考 Material Design的建議，用列表式UI更合理。

結論

嚴格意義上來說，兩種UI模式都各有優勢，這並不奇怪。

卡片式設計目前具有更強的影響力，圖片也非常抓人眼球，但是列表式UI更加緊湊，更加便於用戶快速瀏覽信息。另一方面，卡片式設計可以承載多種多樣的內容和元素，比如摘要、標籤，它們能夠讓內容更加豐富，擁有不同的縱深。

作為設計師，我們都喜歡新趨勢，但是同樣也需要靈活的選擇更合理的方案，不迷信流行趨勢。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 卡片式設計並不能支撐所有的設計需求 這教學會喜歡

文章標題: 骨子愛創意- 卡片式設計並不能支撐所有的設計需求–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 設計,需求,所有,不能,卡片,支撐,我們,用戶,內容,網站,

本文永久連結 :卡片式設計並不能支撐所有的設計需求

本文轉載自 :VIA