設計中的卡片式設計與體驗

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

「設計師的工作，並不只是設計實踐。在當前環境中，為設計一個合適的場所，並對設計領域中心配置，對於設計師來說也許是更為重要的工作 」     —————    原研哉

想想在我們的工作，生活，學習中又何不是這樣呢。回歸正文：

這篇文章提到卡片式設計與用戶體驗，不管是Web和移動應用的頁面設計，都不能脫離了真實使用完全個性化的體驗，卡片是新的創造性概念。

無論你對這個概念的感覺如何，卡片設計都已經是近兩年最流行的界面設計的排列樣式

什麼是卡片

卡片是那些裝滿包含圖像和文本的小矩形，作為功能、內容入口點，以提供更詳細的信息。可以平衡用戶界面的設計美學和良好的可用性，最近卡片幾乎成了移動端界面設計的一個默認的選擇。因為卡是一種方便的顯示不同元素組成的內容的方式。

卡片的體驗

在用戶界面中使用的卡是一個很好的體驗，因為他們看起來像現實世界的有形卡。在行動裝置上，卡片是一種使用非常廣的交互模式，因此，它更直觀的給用戶知道這一塊卡片裡的內容是代表一個整體，一個模塊的信息。

卡片是一個很好的工具，用於交流快速的故事。棒球卡是一個很好的例子，從現實生活中的對象。你需要了解一個玩家的基本信息包含在一張小卡片的兩邊。

內容劃分

卡片將內容劃分成幾個部分，這樣劃分可以佔用的屏幕空間更少，而且更清晰的區分不同的內容。就想寫文章一樣，你會用段落，標點符號來區分表達不同的內容。卡片設計就是一樣的意思，可以收集各種信息，形成連貫的一塊內容。

當Facebook、twitter、騰訊等巨頭們的產品使用卡片式設計web和移動端產品時，卡片的設計布局被大量的產品設計師隨波逐流的推到了設計的最前沿。如果你在用Facebook你會發現它的卡片設計不多也不少，剛好充分的展現出卡片設計為它的產品設計帶來的內容涉及區分的效果，雖然說有一個瀑布流的首頁無休止的往下刷信息。但這也是用戶在使用過程中最低的成本，（這裡的成本指的是用戶成本）

賞心悅目

設計是一門語言，通常一個產品通過設計和內容為用戶傳達信息，而卡片式的視覺效果設計也剛好能給用戶傳達了清晰的信息，在卡片設計中還會為特定的信息內容加入圖形圖像，還能大大提升網站或應用的體驗效果，因為圖像有效地吸引用戶的視線，更加集中明確的引導用戶去操作這一功能。

Dribbble創意社區展示設計師作品的知名網站，基於卡片設計真的是最合適呈現這種類型的內容。

如何設計一張卡片

OK上面簡單的介紹了一些卡片設計的優點，接下來我們談談如何設計一張卡片。在恆定的移動端應用中相同的卡片設計，可以根據內容調整期高度，但寬度是固定的，Facebook的瀑布流頁面無限的往下，單寬度是不變的，內容顯示也是一樣，這可減少用戶的視覺成本。當然最大高度限制應該在一個平臺上可用內容信息展示，但它可以設置好自動展示擴展。

從設計的角度來看，卡片設計應該是跟我們平時看到的名片一樣有圓角、直角，卡片式設計給用戶看起來像一個內容塊，而圓角和直角只是一種視覺設計的樣式，給人不一樣的印象設計。

可以說這些元素在你的設計中就像是添加了一點視覺上的香料，更好的給用戶帶來全新，不一樣的感受，而不會成為一種分心的事。卡的優點正確實施，卡片式設計可以提高產品的用戶體驗方面，由於其功能和形狀的特性，設計師們也很方便去再添加一個有趣的UI元素，直觀的使用。

消化的形式

在設計中完美都知道內容是驅動設計去主導，而設計樣式則是修飾內容的重要部分，比如：設計是一個容器，裡面可以裝任何能裝得下的物體，但這個容器是否合適裝下這個物體來展示給其他用戶，在這設計裡用戶可以很容易地訪問他們感興趣的內容，或功能產品，這能使用戶能夠從產品本身，功能需求，或者他們想要內容快速瀏覽他們想要的內容。

響應和移動設計

關於卡片式設計最重要的事情是，他們幾乎有無限的可能。當然這裡說的無限可能是指卡樣式設計作品既適用於臺式機和行動裝置，因為卡提供了更多可消化的內容。他們是很好的響應設計，因為卡作為內容容器，容易擴大或下降。這就是為什麼它如此容易創建一個一致的卡片樣式設計，無論設備，都可以適配。

瀑布流設計

在扁平化設計趨勢出現時，即出現了瀑布流的操作模式，顧名思義瀑布流就是可以無限制的往下滑動來刷新內容，不需要切換頁面，就像Facebook、Pinterest使用卡片式設計，然後下滑刷新。以新內容中最近的事件稱現在最前端的一個快速概述。Facebook新聞提要是一個無休止的瀑布流，而卡是一個內容的入口。他們把內容無限流，發現卡式內容允許相關內容自然地展示自己，讓用戶深入他們的興趣。

Pinterest使用引腳在動態的磚混結構的網格布局來組織內容，讓用戶在瀏覽內容時會不經意發現下一個內容已展示了一個半磚的內容，所以會吸引用戶不停往下刷。網格磚是一個乾淨的和輕量級的方式來呈現一個圖像畫廊。你可以看到它在下面的例子。

屏幕尺寸適配

基於內容設計的卡片樣式可以在小屏幕上很好地工作，但在一個大屏幕，它會很好的放大，縮小適配到不同的機型。從視覺上看，它仍然是一個不錯的產品設計，如閱讀速度和閱讀理解。

在使用中用戶發現你的應用程式易於操作，且卡片式的設計也能夠很好的選擇內容，這將大大的提升了用戶的使用感受和熟悉的視覺邏輯。在產品上線後，你應該想辦法得到你的用戶的反饋，他們想看到什麼。隨著用戶的反饋，你可以設計測試，以逐步優化你的產品。

結論

我希望你有一個很好的感覺為什麼卡式設計越來越受歡迎。我相信，這種趨勢不會消失的很快。因為卡不只是簡單的眼睛，他們是最靈活的布局格式之一，創造極致的體驗。今天人們很快就找到了信息，卡片服務起來相當不錯，無論設備和偉大的用戶體驗。

 

作者：道士

來源：不知道UI（公眾號ID：buzhidaoui）

版權：人人都是產品經理遵循行業規範，任何轉載的稿件都會明確標註作者和來源，若標註有誤，請聯繫主編QQ：419297645

相關焦點

  • 思考總結:談談卡片式設計
    本文作者結合實際項目中的得到了一些思考進行總結並歸納出一些卡片式設計的小知識點，同時希望自己通過本次的總結進行知識沉澱，以及跟大家一起探討下卡片式的設計。
  • 卡片式設計用戶界面 | 人人都是產品經理
    網頁和手機應用正徹底地從頁面轉向個性化體驗，這些新的體驗建立在許多單個內容的聚合上，而這些內容目前以卡的形式來呈現。卡片式的交互方式正在廣泛傳播，無論是新聞網站或是外賣應用，你都可以看到幾乎無處不在的「電子卡片」。如果你對設計自己的卡片式用戶界面感興趣，可以免費下載並體驗Adobe的Experience Design CC。
  • UI設計中卡片式應如何設計
    卡片設計在界面中已經是非常常見的一種設計形式，大家做設計時幾乎都會用到。關於卡片設計的文章網上已經有很多了，今天我想從我自己的經驗來總結卡片設計的細節要點，期望能給大家總結一些快速提升卡片設計效果的方法。
  • 電商活動卡片式設計思考
    卡片式設計的優點很多，它可以較好的對內容進行區域劃分，解決了內容與內容的區塊分隔，讓用戶在長屏幕滑動中，依舊可以很好的識別每一塊內容。一、背景活動設計中，我們經常會碰到復用性超高的組件。在物料的表象之下，存在一系列的基礎原則。
  • 關於卡片式設計,你需要知道這4點
    在本文中，作者對卡片式設計進行了梳理：從卡片式設計的由來、到卡片式設計的各種形態和卡片式設計的優缺點，希望通過此文能夠加深你對卡片式設計的認識。01 卡片式設計的由來卡片設計來源於早已存在於人類生活的各種現實物品。
  • UI設計中卡片化設計的運用方法
    上面所說的形式功能的組織與呈現其實講的是設計排版上的問題，當然對設計師排版功力也有相當的要求。這種排版優化的方法有很多種，我這裡主要圍繞卡片式設計的理論進行深入探討，相信大家對卡片式設計已非常熟悉，雖然已流行了好多年，但是設計形式並不是隨著使用年齡的增長而消失，今天AAA教育郭老師就針對UI設計中卡片化設計的運用方法進行簡單的說明。
  • 5個小細節,提升卡片式UI設計的質量
    這是一種易於使用的設計形式，卡片能承載很多信息，但也存在很多設計細節。 卡片是屏幕中最實用的元素，能承載圖像、標題、信息概述等不同類型的內容。 例如，Google使用卡片式設計來更新新聞動態，每個卡片上都有圖片、標題和概述，這有助於用戶在不閱讀整篇文章的情況下就能輕鬆理解主題。
  • 新浪科技改版「變身」:採用卡片式設計 主推原創
    新首頁在版式上改變了傳統門戶條框樣式，首次採用卡片式信息流設計，增加了根據微博用戶閱讀偏好進行個性化推薦的內容。 在這之前，網易科技等頻道都追隨騰訊科技、數碼改版的腳步，將首頁設計為流行的「瀑布流」樣式，減少信息量，突出原創、精選內容。截止目前，僅有搜狐IT仍然保留傳統的門戶樣式。 新浪科技本次改版摒棄了傳統門戶條框樣式，首頁打破傳統標題羅列，採用卡片設計。
  • 計算機編程設計卡片式電腦:「樹莓派」
    科技作品不斷更新中~周末好，各位親愛的家長同學們！昨天小編無意間看到了一種電腦，顛覆了我對傳統臺式機和筆記本的認知。一種只有信用卡大小的電腦，真可謂是麻雀雖小，可五臟俱全，這傢伙可是擁有和普通電腦的基本一樣的功能！怎麼樣，是不是很厲害，反正小編是服了，接下來我們就去了解一下這種卡片式電腦。
  • App設計新潮流:卡片化滑動派
    實際上，除了Tinder，很多移動應用同樣採用了卡片式界面，例如 Jelly, Swell和Weotta。如果要用一種界面來取代無線下拉式界面，那麼卡片式界面便是最佳的替代方式。卡片式界面每次只展示一個信息，如你可能約會的對象，你可能想回答的問題，或者一首你可能喜愛的歌曲。 越來越多的應用開始採用卡片式界面。
  • 沉浸式體驗設計,不止是黑色
    提起沉浸式設計，你腦袋你浮現的第一印象是「黑色」嗎？本文作者對沉浸式設計進行了分析梳理，總結了沉浸式設計主要的4種設計方式。沉浸式體驗就是讓人專注在當前的目標情境下感到愉悅和滿足，進而忘卻真實世界的情境。
  • 騰訊都參考的證券app:輕金融下的體驗式設計
    我們從整個體驗流程來剖析它的產品設計，也知曉下未來純網際網路券商的設計思路。體驗流程大致是：還有一點，Robinhood擅用「Snackbar」這種輕量級的反饋機制來實現某些交互結果的展現，例如當客戶從自選股列表中添加或刪除了一支股票後，Snackbar常以一個小的彈出框的形式，出現在手機屏幕下方通知用戶的操作結果。在material design風格設計裡的顏色表達和卡片設計，國內騰訊證券、京東股票、平安證券都有所嘗試。
  • 歷史文化館設計中如何打造沉浸式體驗?
    在歷史文化館設計中，通過會應用多媒體互動展項，讓場景更加真實，歷史縱深更感。那麼，歷史文化館設計中如何打造沉浸式體驗？首先，在歷史文化館設中計，主要通過聲、光、電布置，搭建出360°沉浸式空間和獨特場域，在這個精心營造的時空裡，歷史景象與文化作品被現代技術還原、放大，給觀眾帶來巨大的感官衝撞與心靈震撼。
  • 新浪微博發布PC端V6版:信息流採用卡片式設計
    DoNews 10月13日消息（記者 安宏）微博今日正式發布PC端V6版本，新版微博簡化了主頁，信息流呈現形式改為更趨移動端的卡片式設計。 外觀設計上，新版微博對信息流展示、導航欄、消息中心和個人首頁做出調整，整體風格更為簡潔。信息流會和移動端一樣以卡片的形式出現，微博信息間進行了明顯的區隔。 微博在首頁導航欄新增了「發現」頻道，針對不同領域的用戶對話題、微博及相關內容進行聚合呈現。
  • 卡片分類法-打破產品設計的慣性思維
    今天是0.01打卡第50天卡片分類法的好處好處1：生活中處處需要分類，有效的分類可以使我們更快的找到所需要的東西；我們都有玩過撲克牌，拿到一手牌後，大家都是怎麼分類的呢？這裡我們就用到了卡片分類+用戶訪談；什麼是卡片分類法卡片分類法是一種可靠的低成本的用戶觀察和調研方法。之所以說它可靠，是因為我們經常聽到一句話，千萬不要輕信用戶說的話，但卡片分類法我覺得是把用戶做的和說的結合在一起的一種方式。低成本是因為材料簡單，被試用戶的樣本數據也不需要很大；藉助卡片分類法，可以知道用戶期待的功能和內容，幫助我們設計出更好用的產品。
  • 618小米生態鏈推出新品剃鬚刀:卡片般輕薄設計,三大黑科技加持
    近日作為小米生態鏈的鬚眉科技推出一款卡片式剃鬚刀，入手後感覺不錯，和大家分享下。剛拿到這款剃鬚刀，黑底盒子正面印刷綠色剃鬚刀3D渲染圖，側面有黑膠效果的剃鬚效果展示圖，整體感覺從包裝上看這款剃鬚刀的設計感十足。產品包括剃鬚刀、清潔毛刷和充電線，USB-C口的和大部分手機充電線通用，不用出門多帶線材。
  • UI設計中首頁設計排版技巧
    今天我就針對UI設計中首頁設計排版技巧進行簡單的說明。一、網格布局網格列表是一個連續元素，該元素由棋盤式、規律性的小格子構成。網格列表最適合用於同類信息展示，典型的如圖片、圖標。以下總結了幾種網格的展示形式。
  • 森林公園體驗式設計_2020年森林公園體驗式設計資料下載_築龍學社
    森林公園體驗式設計專題為您提供森林公園體驗式設計的相關資料與視頻課程，您可以下載森林公園體驗式設計資料進行參考，觀看相關視頻課程提升技能。 森林公園的體驗式設計&附100套公園設計資料 查看詳情
  • 想做好卡片設計,原來要注意這麼多細節
    編輯導讀：卡片式設計對於我們來說並不陌生，從設計類網站上或市場上的一些APP中也會看到很多的卡片式設計的案例，卡片式設計也是UI設計中最常用的方式之一。本文作者從自身經驗出發，結合案例等分享了卡片設計過程中需要注意的一些細節，供大家一同參考和學習。
  • 優酷App卡片化設計 打造輕量簡約之美
    從精品內容發現，到優質播放體驗，在保留個性的同時，仍需給到用戶最貼心的在線視頻服務。換言之，勤做減法，精雕細琢，追求極致與完美已成為其必備準則，將「用戶優先」深入產品研發的各個角落。在此基礎上，回顧優酷App進化歷程，亦不難看出個中端倪。卡片設計 輕量簡約之美或許說，打造簡約而不簡單的輕量體驗，這一理念始終灌輸在整個優酷產品團隊中。