關於卡片式設計,你需要知道這4點

2020-12-20 人人都是產品經理

在本文中，作者對卡片式設計進行了梳理：從卡片式設計的由來、到卡片式設計的各種形態和卡片式設計的優缺點，希望通過此文能夠加深你對卡片式設計的認識。

01 卡片式設計的由來

卡片設計來源於早已存在於人類生活的各種現實物品。

舉個例子，顯示器、手機、名片，一封信、等等，都是獨立承載信息的一個個卡片。人們不用把電影院搬走就可以通過電視觀看到不同的內容載體，這時候電視充當的是內容載體的入口。而名片盒書信這種卡片感就更強了，你可以把一封信摺疊起來，方便攜帶，等到需要的時候再伸展開來，進行詳細閱讀。

正是人類生活早已充斥著「卡片設計」，所以當我們手中的設備界面有了「卡片式設計」的時候，人們反而覺得使用起來很方便和有熟悉感。

而我們現在用的系統界面的卡片式設計來自哪裡呢？

最早應用卡片式設計並不是google 的Material Design 也不是蘋果的iOS Design，而是palm webOS。

2009年palm發布的webOS系統的多任務管理和卡片式窗口徵服了發布會現場的所有觀眾。可惜因為各種BUG和代碼的陳舊導致沒有辦法在市場佔好先機。但是卻也留下了很優秀的遺產。

2009年CES發布會

webOS中，傳統意義上的程序概念被弱化，取而代之的是卡片系統。所有的任務均以卡片的形式出現。任何時候點擊手勢區，都會進入卡片視圖。卡片視圖中展現出正在運行的任務，這些任務以多窗口的形式呈現。你可以看到正在運行的全部任務，可以通過滑動進行切換，點擊後進入任務，這樣一種操作方式，是極其美妙的。

更為重要的是webOS 中的多任務的流暢度可以得到很好的保證，可以說webOS的多任務是世界上最好的移動系統多任務平臺。

圖片來自：Tim Schofield

02 卡片式設計中的各種形態

放眼望去，其實我們使用的app或多或少都有用到卡片式的設計，最常見的一種形態則是首頁的輪播Banner

淘寶（左）、Appstore（右）

不論是圖文內容還是視頻內容都可以通過卡片進行承載：

大眾點評（左）、花瓣（右）

大至系統級的App任務界面，小至一個文本條目，卡片式設計的形態各異，多種多樣。幾乎涵蓋了所有能想到的設計。

03 卡片式設計的優點

而為什麼那麼多設計師熱衷於卡片式設計呢？當然是因為優點極多：

1. 獨立、聚焦

卡片設計因為會跟其他內容有天然的斷層，所以會更容易形成獨立的視覺焦點。

2. 輕便靈活

相比於從傳統列表點擊進內容詳情頁，卡片可以直接點擊展開直接瀏覽詳情，交互體驗更輕，而且隨時可以恢復卡片模式，十分靈活。

Appstore首頁

Appstore首頁

3. 自由組合

參考淘寶首頁和appstore首頁可以看出，不同形態的內容例如輪播廣告、入口、推薦位、列表、文章通過承載於卡片之中，可以進行自由排版組合。沒有了死板的排版規則，對於設計師甚至客戶端工程師來說，都是十分的方便，少了各種各樣的限制。

4. 多終端兼容性好

不同終端由於屏幕的不同，導致做設計的時候需要做設計兼容。比如bootstrap框架在pc端的柵格兼容。屏幕從540一直往上擴展，都能完美顯示。這裡應用的正是卡片式設計，用卡片容器包著內容。

Bootstrap card grid

不僅僅是一設計兼容多終端的情況適用，即便是針對不同終端重新做設計也是需要做品牌或者設計元素的延伸。如果能保持樣式的視覺基本一致，會減少很多的學習成本。

5. 多態操作

卡片是可操作性十分強的設計模式，可以縱向滑動，可以橫向滾動，可以點擊進行上下伸展，還可以長按拖動等等。

圖片來自：Behance

6. 視覺舒適感

卡片設計由於卡片本身的上下Padding（內邊距）和卡片間的Margin（外間距），往往帶有很充足的空間留白。加上通過輕投影形成合理的層次感，看上去既自然又舒適，而且對於接近真實世界的設計，人會自然而然產生熟悉感和親切感。所以從視覺體驗上，卡片式設計也是完勝。

圖片來自：Behance

04 卡片式設計的缺點

儘管有這麼多的優點，但是我一直都認為世界上是沒有絕對完美的設計體驗。所以人類對交互體驗和美感的探索腳步才會從沒有停過。而卡片式設計也有它的缺點：

浪費空間，導致一屏展現的信息量很少

拋開卡片設計形態不說，單單是卡片設計本身就比普通列表的設計需要佔用更多的空間。

圖片來自：我自己

加上很多卡片設計不同的內容（視頻、圖文）都會跟單純的列表有很大的不同，所以需要佔用的空間會只多不少。

不適用使用卡片設計的場景

因為有上面提到的缺點，所以有些場景就不適合用卡片式設計了。

1）上下文具有連續性的內容，例如：文章翻頁

具體請體驗下UC瀏覽器的閱讀模式，上滑翻頁的時候，會馬上講刷新出來的下一頁文字無縫連接上一頁的文字，沉浸式閱讀是不應該產生阻礙或者斷層的。

2）依賴於文本進行閱讀的，簡單的，重複的內容，例如：文章列表、聊天列表

今日頭條（左）、微信（右）

3）需要同時獲取並且比較多條列表進行比較的內容，例如：搜索結果

京東（左）、淘寶（右）

上述這些頁面使用了卡片式設計會導致閱讀效率降低，使設計失去優勢。

本文由 @Chamon 原創發布於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議

相關焦點

  • 設計中的卡片式設計與體驗
    在當前環境中，為設計一個合適的場所，並對設計領域中心配置，對於設計師來說也許是更為重要的工作 」     —————    原研哉想想在我們的工作，生活，學習中又何不是這樣呢。回歸正文：這篇文章提到卡片式設計與用戶體驗，不管是Web和移動應用的頁面設計，都不能脫離了真實使用完全個性化的體驗，卡片是新的創造性概念。
  • 卡片式設計用戶界面 | 人人都是產品經理
    卡片式的交互方式正在廣泛傳播，無論是新聞網站或是外賣應用，你都可以看到幾乎無處不在的「電子卡片」。如果你對設計自己的卡片式用戶界面感興趣，可以免費下載並體驗Adobe的Experience Design CC。卡片是什麼？卡片通常是指那些包含一定圖片和文本信息在內的長方形，作為查看更多詳細信息的一個入口。
  • 思考總結:談談卡片式設計
    Feed流卡片式的feed流設計是一種非常常見的設計，早在前幾年Facebook、Google+等產品就使用了這一方式，Feed流作為一種長內容的媒介，用戶需要長時間的滑動看內容並篩選有效信息，卡片式設計很好的解決了內容與內容的區塊分隔，讓用戶在長屏幕滑動中依舊可以很好的明確每一塊的內容。
  • 電商活動卡片式設計思考
    在這次女神節活動中，我們重點針對活動中的【卡片式設計原則】進行了深入思考，希望通過簡化卡片層級，讓活動頁面更簡潔。二、活動中的卡片設計卡片式設計最早來源於Google Material Design。卡片式設計的優點很多，它可以較好的對內容進行區域劃分，解決了內容與內容的區塊分隔，讓用戶在長屏幕滑動中，依舊可以很好的識別每一塊內容。
  • UI設計中卡片式應如何設計
    卡片設計在界面中已經是非常常見的一種設計形式，大家做設計時幾乎都會用到。關於卡片設計的文章網上已經有很多了，今天我想從我自己的經驗來總結卡片設計的細節要點，期望能給大家總結一些快速提升卡片設計效果的方法。
  • 卡片分類法-打破產品設計的慣性思維
    當然根據不同的遊戲規則，會有各種不同的分法，拿鬥地主來說：4張同點牌是炸彈，我們會放一起，其他的三帶一放一起，順子......、這樣分類擺放後更清晰直觀，容易找，而且還好拿；舉這個例子的目的是想說明，人類天生就有分類整理的習慣，有這個習慣也是為了更方便地找到自己所需要的東西。
  • 5個小細節,提升卡片式UI設計的質量
    」設計。這是一種易於使用的設計形式，卡片能承載很多信息，但也存在很多設計細節。 卡片是屏幕中最實用的元素，能承載圖像、標題、信息概述等不同類型的內容。 例如，Google使用卡片式設計來更新新聞動態，每個卡片上都有圖片、標題和概述，這有助於用戶在不閱讀整篇文章的情況下就能輕鬆理解主題。
  • 想做好卡片設計,原來要注意這麼多細節
    編輯導讀：卡片式設計對於我們來說並不陌生，從設計類網站上或市場上的一些APP中也會看到很多的卡片式設計的案例，卡片式設計也是UI設計中最常用的方式之一。本文作者從自身經驗出發，結合案例等分享了卡片設計過程中需要注意的一些細節，供大家一同參考和學習。
  • 計算機編程設計卡片式電腦:「樹莓派」
    一種只有信用卡大小的電腦，真可謂是麻雀雖小，可五臟俱全，這傢伙可是擁有和普通電腦的基本一樣的功能！怎麼樣，是不是很厲害，反正小編是服了，接下來我們就去了解一下這種卡片式電腦。     樹莓派Raspberry Pi(中文名為「樹莓派」,簡寫為RPi，(或者RasPi / RPI)是為學生計算機編程教育而設計               卡片電腦樹莓派由註冊於英國的慈善組織「Raspberry Pi 基金會」開發，Eben·Upton/埃·厄普頓為項目帶頭人。
  • 如何高效實踐卡片式寫作?
    有了大綱之後，你再規劃每一個章節的具體寫作目標。包括分成幾個小點，然後大概字數應當是多少。這之後，你才對應著每一個小點，分別建立一張卡片，然後進去填寫東西。初看起來，你每次只需要對一個很小的點來著手，因此注意力容易集中，認知負擔也不大。
  • App設計新潮流:卡片化滑動派
    這就是交友應用Tinder，它以卡片的形式展示用戶的照片和資料。Tinder每次只展示一位用戶的照片，如果你向左滑動某位用戶的照片，那麼你就不會再看到這位用戶。 Tinder聯合創始人兼CEO西恩•拉德（Sean Rad）表示：「滑動操作之美在於，用戶只需最少的動作，便可瀏覽內容。通常，在瀏覽器或手機上，你需要滾動頁面，然後才能閱讀內容。
  • UI設計中卡片化設計的運用方法
    上面所說的形式功能的組織與呈現其實講的是設計排版上的問題，當然對設計師排版功力也有相當的要求。這種排版優化的方法有很多種，我這裡主要圍繞卡片式設計的理論進行深入探討，相信大家對卡片式設計已非常熟悉，雖然已流行了好多年，但是設計形式並不是隨著使用年齡的增長而消失，今天AAA教育郭老師就針對UI設計中卡片化設計的運用方法進行簡單的說明。
  • 關於阿莫西林克拉維酸鉀,你至少需要知道這四點
    關於阿莫西林克拉維酸鉀，你至少需要知道這四點 2020-08-17 11:39 來源：澎湃新聞·澎湃號·湃客
  • App中列表、卡片和雙欄卡片的布局思考
    APP中常見的布局有列表式、卡片式以及雙欄卡片，這些不同的布局方式的最佳使用場景是什麼？作者將App中列表、卡片和雙欄卡片的布局思考總結成文，看一看和你的思考有無異同。但由於卡片的信息很多，在小屏幕上並不能顯示多個卡片，一屏內卡片數很少會超過3個。而雙欄卡片的布局形式，比較常見於以圖片信息為主導的App。例如Pinterest，一些商城的商品陳列頁面。這種形式與卡片式類似，但它能在一屏裡顯示更多的內容，至少4張卡片。同時，由於分開左右兩欄的顯示，用戶可以更加方便地對比左右兩欄卡片的內容。
  • 新浪科技改版「變身」:採用卡片式設計 主推原創
    新首頁在版式上改變了傳統門戶條框樣式，首次採用卡片式信息流設計，增加了根據微博用戶閱讀偏好進行個性化推薦的內容。 在這之前，網易科技等頻道都追隨騰訊科技、數碼改版的腳步，將首頁設計為流行的「瀑布流」樣式，減少信息量，突出原創、精選內容。截止目前，僅有搜狐IT仍然保留傳統的門戶樣式。 新浪科技本次改版摒棄了傳統門戶條框樣式，首頁打破傳統標題羅列，採用卡片設計。
  • 關於菜單設計,這四個點你必須知道
    這一切的問題，很可能是菜單出了問題！在很多餐飲人看來，菜單就是一個普通的點菜工具，無足輕重。但菜單的作用遠不止於此，裡面的學問大有講究。一個優秀的菜單能起到降低食材成本，提高點餐效率，品牌價值清晰突出等作用。不同的餐飲品類菜單規劃設計有所不同，但有幾個基本原則是通用的。
  • 關於兒童安全，家長需要知道這4點
    這一點學過遊泳的人都明白。4、告訴孩子，面對同伴落水時，不管你會不會遊泳都不要下水救人（沒有足夠的體力就算你會遊泳河裡不斷撲騰的同伴也會使你喪生）或者組成人鏈去拉，而是應該就近尋找大人並大聲呼救或者撥打消防電話（119）前來救援。二、燙傷燙傷常見於年齡比較小的小孩子身上，家裡有小朋友時，燒水瓶之類的家長應該收起來，此外家裡常備燒傷燙傷的藥膏。
  • 關於氯吡格雷,至少需要知道這4點!
    僅供醫學專業人士閱讀參考關於氯吡格雷的用藥實用指南，一文了解！ 氯吡格雷是一種抗血小板藥物，臨床上廣泛用於心肌梗死、缺血性腦卒中和周圍動脈缺血等疾病的治療。合理使用氯吡格雷，至少需要知道以下4點。一藥代動力學特徵氯吡格雷是一個前體藥物。
  • 新浪科技「因你而變」:卡片式社交首頁新版上線
    新首頁不但在版式上改變傳統門戶條框樣式，首次採用卡片式信息流設計，而且增加了根據微博用戶閱讀偏好進行個性化推薦的內容，開啟「因你而變」的門戶社交化和個性化閱讀新時代。新浪科技主編曾祥雪表示：「基於數據挖掘的個性化推薦是我們未來的重要發展方向，同時我們也會更加重視門戶與微博的深度結合，我相信通過持續不斷的產品改進一定會給廣大用戶提供更好的用戶體驗。」
  • 深度解析 | 關於汽車座椅設計我們需要知道什麼?
    為了讓這篇乾貨文章足夠深度，我花了1個月的時間，從各處搜閱資料。除對日本平成21年（2009年）4月發行的《Motor Fan》雜誌內容進行詳細研究之外……還與品牌座椅工程師進行了深度交流。設計座椅是汽車設計的第一步沒開玩笑，在所有的汽車設計中，設計師們第一步都是先確定座椅的設計。準確點說，設計師們最先考慮的是車內成員的坐姿。