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