卡片式設計一定要避免的5個誤區
卡片式設計一定要避免的5個誤區
發布日期：2018-06-13
瀏覽次數：2837
近幾年來，隨著移動用戶的不斷增加，卡片式設計越來越受到人們的歡迎。一方面，卡片式設計可以輕松容納多種不同類型的元素，將各種元素以整齊劃一的布局呈現出來，提供良好的視覺效果，另一方面，卡片在調整高度和寬度上很是靈活，對移動端的兼容性很高，能輕松適應不同大小的屏幕，實現真正的響應式。這一點小飛在《解密網站設計潮流：為什么卡片式設計這么火？》中已經進行了詳細的介紹。遺憾的是，小飛發現在實際的設計過程中，不少站長進入了一些誤區，使卡片𓂃式設計的強大效用大打折扣。因此，小飛今天特意總結了一些大家在做卡片式設計經常會出現的5個錯誤，希望能給大家一點啟發。
1.卡片間距過大
在理想的狀態之中，每張卡片應該都是大小相同、整齊一致的，這就要求卡片上的各種元素要保持協調，但實際狀況常常沒有那么完美。在實際設計過程中，我們可能會發現這張卡片的標題太長，那張卡片的文字描述太短。當這些卡片在大屏幕設備上顯示時，間距過大的問題就顯露出來了。你可不要傻乎乎的認♎為這是"留白"的藝術，這種不恰當的間距往往不能做到"以無勝有"，更會影響網站的整體排版，讓布局雜亂無序，有損信息的密度，甚至還會妨礙訪客們的瀏覽體驗，這使得卡片式設計的優勢蕩然無存。
遇到這種情況，我們應該怎么辦呢？小飛總結了兩個方法。其一，我們應該考慮卡片上的元素是否可以縮減：簡練標題或描述文字是否會影響用戶對重要信息的獲取？盡量確保每張卡片在尺寸、涵蓋內容上相差無幾。其二，我們可以看看卡片式設計是否可以應用到砌體布局中。目前我們一般都是在柵格系統中使用卡片式布局，固定的格子設計更能保證網站的整潔，而砌體布局是指將網站中的元素自動填充在頁面的空白區域，就像是墻上堆砌的石頭♛一樣。如果卡片式設計可以與砌體布局結合起來，卡片就自動適應空白區域，間距過大的問題也就不存在了。
2.一次性展示太多卡片
對很多站長來說，多使用卡片填滿網站就等同于充🐓分利用網站的空間，盡可能給用戶提供更多信息。其實，這是個錯誤的想法。在柵格系統的卡片式布局中，如果一次性展示許多張卡片，常會帶來兩種負面結果，一是用戶被密密麻麻的信息墻嚇到，直接退出離開，還有一種情況就是用戶勉強瀏覽，但過多卡片帶來的負擔會嚴重影響用戶的體驗效果。
和第一個誤區一樣，在遇到這種情況的時候，我們也要仔細考慮一番：頁面上放置這么多的卡片有必要的嗎？用戶合理的閱讀容量是多少？用戶在瀏覽屏幕時可能的注意范圍有多廣？除此以外，小飛還有一個建議，我們可以給單張頁面可放🦋置卡片的𝔍數量設置一個限額，當數量超過這個范圍時就會彈出提醒的對話框，防止我們無意識的犯錯。不過這個方法的難度在于卡片的限額數量應該設為多少，這可能需要我們在自己的網站上進行測試，發現自己網站的規律所在。
3.卡片上行為引導太多
熟悉卡片式設計的朋友們都知道每張卡片只是某個功能或內容的入口點，常展示一些摘要而不是所有細節，所以我們通常會在卡片上放置一些如"閱🔥讀全文"等其他鏈接，引導用戶做出預期的行為。但是，在很多糟糕的卡片式設計實例中，不少人在卡片上設置了太多的行為引導，比如"閱讀全文"的鏈接、"查看視頻"的鏈接、CTA按鈕、主頁鏈接等等。小飛可以很負責任的告訴你：這么多的行為引導不會有助于延長用戶在網頁上停留的時長，增加網站流量或提高轉化率，卻會讓用戶更加困惑、手足無措。
站長們在遇到這個問題時也要多想想每個行為引導的存在是否是必要的，或者可以按照不同的重要程度或類型將行為引導🍬分類，按優先次꧑序進行擺放，這樣更便于作出取舍。
4.卡片上各種元素過多
這個誤區和卡片上行為引導太多有點類似，從更宏觀的角度來說，行為引導可以歸納為元素的一種，但由于行為引導在網站流量和銷量等方面扮演的重要作用，小飛特意將𝔉它拎出來講了。現在我們來看一下元素過多的問題吧！卡片式設計💯廣受歡迎的其中一個原因就是它很靈活，能夠整合各種形式的內容： 圖片、文本、動畫效果、視頻、按鈕、鏈接等。但這并不意味著我們一定要將多種不同的元素一股腦兒放到卡片上，這樣不僅不能給用戶提供有用的信息，反而容易干擾用戶，分散他們的注意力，讓他們找不到重點。
因此卡片涵蓋元素的多少應該把握一個度。這一點可以通過對網站元素進行優先等級分類做到，將內容分為首要信息，次要信息等等，這樣一來我們就能有目的的安排卡片元素。為了做到這一點，我們還可以深入了解一下自身🦋產品的目標用戶群以及他們可能的喜好。
5.過度使用圖片
在卡片式設計中使用圖片似乎已經成ꦗ為了一種思維定勢。雖然我們經常在卡片中使用圖片、插圖和圖標等，它也確實能夠增加網站的視覺♛表現力，是卡片式設計的最佳拍檔。但我們可不能過度使用圖片，不能為了圖片而放置圖片，卡片上圖片的存在應該是有一定意義的。
當我們在卡片上添加圖片時，記得問問自己，這張圖片是必要的嗎？這真的能夠幫助用戶更好的獲取想要的信息嗎？或者說它反而會造成🏅視覺上的干擾？最好的解決方法就是實事求是，先確定每張卡片上圖片的真正需求，然后根據網站的整體布局探索一下卡片的最佳排版，與此同時也要注重內容⛎的優先等級，思考怎樣能讓卡片的呈現更加平衡、更加清楚易懂。
卡片式設計能夠給網站帶來很多益處，但這要求我們能夠成功避免設計的誤區。小飛今天介紹的這5個𝓀錯誤，大家一定要牢記，可不能掉進"坑"里啦！起飛頁自助建站平臺最近新增加了不少卡片式風格的模板，您無需絞盡腦汁考慮排版（起飛頁的♒大牛們已經幫您想好了），只要仔細挑選自己滿意的就可以輕松建站。很多模板上還使用了微妙的CSS動畫，能讓網站更加活潑、出彩，快來起飛頁自助建站平臺做一個響應式網站吧！
