起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計中的卡片式設計與體驗
“設計師的工作，并不只是設計實踐。在當前環境中，為設計一個合適的場所，并對設計領域中心配置，對于設計師來說也許是更為重要的工作 ”? ? ?————— ? ?原研哉
想想在我們的工作，生活，學習中又何不是這樣呢。回歸正文：
這篇文章提到卡片式設計與用戶體驗，不管是Web和移動應用的頁面設計，都不能脫離了真實使用完全個性化的體驗，卡片是新的創造性概念。
無論你對這個概念的感覺如何，卡片設計都已經是近兩年最流行的界面設計的排列樣式
什么是卡片
卡片是那些裝滿包含圖像和文本的小矩形，作為功能、內容入口點，以提供更詳細的信息。可以平衡用戶界面的設計美學和良好的可用性，最近卡片幾乎成了移動端界面設計的一個默認的選擇。因為卡是一種方便的顯示不同元素組成的內容的方式。
卡片的體驗
在用戶界面中使用的卡是一個很好的體驗，因為他們看起來像現實世界的有形卡。在移動設備上，卡片是一種使用非常廣的交互模式，因此，它更直觀的給用戶知道這一塊卡片里的內容是代表一個整體，一個模塊的信息。
卡片是一個很好的工具，用于交流快速的故事。棒球卡是一個很好的例子，從現實生活中的對象。你需要了解一個玩家的基本信息包含在一張小卡片的兩邊。
內容劃分
卡片將內容劃分成幾個部分，這樣劃分可以占用的屏幕空間更少，而且更清晰的區分不同的內容。就想寫文章一樣，你會用段落，標點符號來區分表達不同的內容?？ㄆO計就是一樣的意思，可以收集各種信息，形成連貫的一塊內容。
當Facebook、twitter、騰訊等巨頭們的產品使用卡片式設計web和移動端產品時，卡片的設計布局被大量的產品設計師隨波逐流的推到了設計的最前沿。如果你在用Facebook你會發現它的卡片設計不多也不少，剛好充分的展現出卡片設計為它的產品設計帶來的內容涉及區分的效果，雖然說有一個瀑布流的首頁無休止的往下刷信息。但這也是用戶在使用過程中最低的成本，（這里的成本指的是用戶成本）
賞心悅目
設計是一門語言，通常一個產品通過設計和內容為用戶傳達信息，而卡片式的視覺效果設計也剛好能給用戶傳達了清晰的信息，在卡片設計中還會為特定的信息內容加入圖形圖像，還能大大提升網站或應用的體驗效果，因為圖像有效地吸引用戶的視線，更加集中明確的引導用戶去操作這一功能。
Dribbble創意社區展示設計師作品的知名網站，基于卡片設計真的是最合適呈現這種類型的內容。
如何設計一張卡片
OK上面簡單的介紹了一些卡片設計的優點，接下來我們談談如何設計一張卡片。在恒定的移動端應用中相同的卡片設計，可以根據內容調整期高度，但寬度是固定的，Facebook的瀑布流頁面無限的往下，單寬度是不變的，內容顯示也是一樣，這可減少用戶的視覺成本。當然最大高度限制應該在一個平臺上可用內容信息展示，但它可以設置好自動展示擴展。
從設計的角度來看，卡片設計應該是跟我們平時看到的名片一樣有圓角、直角，卡片式設計給用戶看起來像一個內容塊，而圓角和直角只是一種視覺設計的樣式，給人不一樣的印象設計。
可以說這些元素在你的設計中就像是添加了一點視覺上的香料，更好的給用戶帶來全新，不一樣的感受，而不會成為一種分心的事。卡的優點正確實施，卡片式設計可以提高產品的用戶體驗方面，由于其功能和形狀的特性，設計師們也很方便去再添加一個有趣的UI元素，直觀的使用。
消化的形式
在設計中完美都知道內容是驅動設計去主導，而設計樣式則是修飾內容的重要部分，比如：設計是一個容器，里面可以裝任何能裝得下的物體，但這個容器是否合適裝下這個物體來展示給其他用戶，在這設計里用戶可以很容易地訪問他們感興趣的內容，或功能產品，這能使用戶能夠從產品本身，功能需求，或者他們想要內容快速瀏覽他們想要的內容。
響應和移動設計
關于卡片式設計最重要的事情是，他們幾乎有無限的可能。當然這里說的無限可能是指卡樣式設計作品既適用于臺式機和移動設備，因為卡提供了更多可消化的內容。他們是很好的響應設計，因為卡作為內容容器，容易擴大或下降。這就是為什么它如此容易創建一個一致的卡片樣式設計，無論設備，都可以適配。
瀑布流設計
在扁平化設計趨勢出現時，即出現了瀑布流的操作模式，顧名思義瀑布流就是可以無限制的往下滑動來刷新內容，不需要切換頁面，就像Facebook、Pinterest使用卡片式設計，然后下滑刷新。以新內容中最近的事件稱現在最前端的一個快速概述。Facebook新聞提要是一個無休止的瀑布流，而卡是一個內容的入口。他們把內容無限流，發現卡式內容允許相關內容自然地展示自己，讓用戶深入他們的興趣。
Pinterest使用引腳在動態的磚混結構的網格布局來組織內容，讓用戶在瀏覽內容時會不經意發現下一個內容已展示了一個半磚的內容，所以會吸引用戶不停往下刷。網格磚是一個干凈的和輕量級的方式來呈現一個圖像畫廊。你可以看到它在下面的例子。
屏幕尺寸適配
基于內容設計的卡片樣式可以在小屏幕上很好地工作，但在一個大屏幕，它會很好的放大，縮小適配到不同的機型。從視覺上看，它仍然是一個不錯的產品設計，如閱讀速度和閱讀理解。
在使用中用戶發現你的應用程序易于操作，且卡片式的設計也能夠很好的選擇內容，這將大大的提升了用戶的使用感受和熟悉的視覺邏輯。在產品上線后，你應該想辦法得到你的用戶的反饋，他們想看到什么。隨著用戶的反饋，你可以設計測試，以逐步優化你的產品。
結論
我希望你有一個很好的感覺為什么卡式設計越來越受歡迎。我相信，這種趨勢不會消失的很快。因為卡不只是簡單的眼睛，他們是最靈活的布局格式之一，創造極致的體驗。今天人們很快就找到了信息，卡片服務起來相當不錯，無論設備和偉大的用戶體驗。
作者：道士
來源：不知道UI（公眾號ID：buzhidaoui）
版權：人人都是產品經理遵循行業規范，任何轉載的稿件都會明確標注作者和來源，若標注有誤，請聯系主編QQ：419297645
干貨