寫這篇文章的目的就是總結(jié)一下自己的設(shè)計方法和工作中遇到的問題，今天我們來聊一聊卡片式設(shè)計，如果有和我不同的意見以及文章中沒有提到的點，歡迎大家積極交流，廢話不多說，讓我們正式開始。以下是目錄。
先從我們身邊的能聯(lián)想到的卡片說起，例如賀卡、明信片、名片等都是卡片。在14年發(fā)布的Material Design中，類似卡片式設(shè)計的理念就已經(jīng)被提及了，其理念也是基于傳統(tǒng)的紙張媒介。
“與真正的紙張不同，我們的數(shù)字材質(zhì)可以智能地擴大和變形。材質(zhì)具有實體的表面和邊緣。接縫和陰影表明組件的含義。”
互聯(lián)網(wǎng)中的卡片式設(shè)計是一種將信息和功能封裝在獨立、矩形容器中的用戶界面設(shè)計方法。這些容器通常具有清晰的邊界，類似前文提到身邊中的名片。每張卡片通常包含一組相關(guān)的信息或功能，從而形成一個獨立的內(nèi)容單元，就像我們收到的名片和賀卡。
通過觀察使用的APP對卡片進(jìn)行分類，列表卡片是其中一種，基礎(chǔ)的列表卡片可以由標(biāo)題、正文、輔助文案、按鈕和圖片等組成。我們平常使用的大部分APP的卡片組件都是由這些基礎(chǔ)控件組成的，大致上可以分為橫向和縱向排布內(nèi)容。
這種簡單排布的設(shè)計可以在一些排行榜單，熱搜模塊中看到。還可以通過橫向與縱向組合排列提供更多的交互，例如網(wǎng)易云的音樂推薦和米游社中的同人榜單。
平常接觸到的瀑布流以及信息流，將其元素拆解開來，本質(zhì)也是多個有序的列表卡片組合在一起的。瀑布流主要正針對圖片較多、或以以圖片內(nèi)容為主設(shè)計，它最大的優(yōu)點是無需過于在意圖片的高度，可以很好的還原圖片全貌，也符合我們雙眼的瀏覽動線。例如小紅書。
而信息流更需要按行來閱讀，加以圖片輔助，符合大多數(shù)用戶的閱讀習(xí)慣，同時可以加入更多的交互元素，例如轉(zhuǎn)贊評。在運營層面，信息流便于插入新的樣式的內(nèi)容或廣告，不會打亂整體布局。比較常用的例如微博。
而非列表式卡片比較突出的一個特點，在內(nèi)容上排列不像列表卡片那么有序，往往會有更多元素參與進(jìn)來，它在有限空間內(nèi)能展示更多樣化的信息，允許更自由的排列和組合，可以打破傳統(tǒng)網(wǎng)格的限制。在設(shè)計上會更加重視視覺層面的塑造，更多會出現(xiàn)在運營設(shè)計中，例如活動、推廣、彈窗提醒。通常會包含更大的按鈕、圖標(biāo)、富有吸引力圖片等。
從視覺層面來講，在卡片式的設(shè)計中，卡片往往會附帶圓角。原因一是趨于移動設(shè)備外觀方向的圓角，這樣做可以使用戶在使用APP的過程中更有沉浸感。二是同時可以將信息分割成易于理解的小塊。三是在同樣大小數(shù)量的模塊中，你會發(fā)現(xiàn)一眼看過去，帶圓角的可以更容易數(shù)清楚有多少個數(shù)量，確定性會更強。同時，你的視線也會更加傾向于聚焦某個卡片模塊內(nèi)的內(nèi)容。
帶圓角更容易數(shù)清數(shù)量，也更容易聚焦單個內(nèi)容
從業(yè)務(wù)層面講，我們在接到一個需求時，大致都會按
要實現(xiàn)什么功能→需要哪些字段→元素排列與交互設(shè)計→最終輸出
這個路徑來的。你會發(fā)現(xiàn)在排列組合的階段，所做的自然而然就形成一個功能模塊了，而將這個模塊與其他模塊區(qū)分的一個非常好用的手段就是卡片式。不同的卡片組合起來可以實現(xiàn)非常豐富的頁面。
卡片式設(shè)計還可以輕松添加、移除或重新排序內(nèi)容，而不影響整體布局，廣告可以自然地融入內(nèi)容卡片中，不影響用戶體驗。每個卡片還可以作為獨立單元進(jìn)行數(shù)據(jù)追蹤，精確分析用戶行為，用來優(yōu)化內(nèi)容策略。
保持卡片的視覺風(fēng)格、交互方式和信息結(jié)構(gòu)的一致性。不要用奇奇怪怪的圓角，使用太大的圓角只會讓你的設(shè)計看起來像飛機稿，同時也會加重用戶的視覺疲勞。同一個頁面內(nèi)的圓角、描邊、陰影和間距大部分情況下要遵循設(shè)計規(guī)范。
適合卡片式設(shè)計的內(nèi)容：獨立的、自成一體的信息單元、圖文混合的內(nèi)容、需要快速比較或選擇的項目。比如儀表盤、瀑布流等；
不適合卡片式設(shè)計的內(nèi)容：長文本閱讀、需要連續(xù)性或上下文的信息、高度結(jié)構(gòu)化的數(shù)據(jù)，例如表格、會話列表、新聞資訊等。
還有一點就是遵循行業(yè)共通的規(guī)則，比如社交軟件的聯(lián)系人和會話頁，幾乎都是用的列表式設(shè)計，不要設(shè)計成卡片，這樣只會增加用戶理解成本，造成勸退。
卡片式設(shè)計不可避免地會占用一些空間，因此我們可以合理利用橫向空間進(jìn)行拓展，豐富交互內(nèi)容的同時使空間利用率更高，例如拼多多首頁的金剛區(qū)和微信讀書的首頁推薦區(qū)域，都可以通過向右滑動來獲取更多的信息。
一般來說判斷一個卡片內(nèi)的內(nèi)容是否可以再用嵌套卡片的方法是：1.彼此之間的大小占比是否一致；2.各部分內(nèi)容具有相似的重要性；3.信息結(jié)構(gòu)相對平級；
如果內(nèi)容占比大小不一樣，結(jié)構(gòu)相對來說有一些差異，就不太適合設(shè)計成嵌套卡片了。不當(dāng)使用嵌套卡片可能會導(dǎo)致層級過多，信息密度過高，導(dǎo)致用戶感到壓力，難以快速理解內(nèi)容，從而降低內(nèi)容的可讀性。
選擇是否使用卡片式設(shè)計應(yīng)該是一個深思熟慮的決定，基于對需求、功能、用戶和產(chǎn)品特性的全面分析?？ㄆ皆O(shè)計不是萬能的解決方案，而是眾多設(shè)計選項中的一種。在某些情況下，它可能是最佳選擇；在其他情況下，可能需要不同的方法或混合策略。
最重要的是，設(shè)計應(yīng)該服務(wù)于內(nèi)容和用戶需求，而不是相反。好的設(shè)計應(yīng)該是幾乎不被注意的，它應(yīng)該讓用戶能夠輕松、直觀地完成他們的任務(wù)，而不會感到困惑或受阻。因此，在決定是否采用卡片式設(shè)計時，始終將用戶體驗放在首位，并準(zhǔn)備根據(jù)反饋和數(shù)據(jù)進(jìn)行調(diào)整和優(yōu)化。
以上就是今天要分享的內(nèi)容~下篇再見~最后附上搜集的一些卡片素材~
