UI界面中的卡片設(shè)計是一種常見且有效的設(shè)計方式，它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn)，提升了界面的可讀性和用戶體驗。通過分割特性，可以賦予界面更多的層次感，為用戶帶來視覺上的愉悅。然而，卡片式設(shè)計并不是無懈可擊的，由于其分割的特性可能會對用戶的沉浸式瀏覽體驗產(chǎn)生一定的影響，例如造成橫向和縱向空間的浪費等問題。因此，在決定是否使用卡片式設(shè)計時，我們需要根據(jù)實際場景和內(nèi)容形式進行判斷，而不是刻意追求“卡片式”而設(shè)計。
卡片在移動端設(shè)備上，運用的越來越多，然而，在選擇使用卡片設(shè)計、視覺呈現(xiàn)方式以及其優(yōu)點和缺點等關(guān)鍵因素方面，仍然存在一些被忽視的細節(jié)。在進行卡片設(shè)計時，我們應該注意哪些細微之處呢?以下我們就一起來探討下如何設(shè)計卡片。
在日常生活中，一些常用的銀行卡、名片、VIP卡、撲克牌等就是一張卡片，這些卡片主要是用來傳遞卡片本身的一些信息。例如使用者可以從銀行卡上獲取卡片的所屬銀行、卡號等信息；可以從名片中知道卡片所屬人以及此人的一些基本信息等。
UI界面中的卡片設(shè)計是一種常見且有效的設(shè)計方式，它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn)，提升了界面的可讀性和用戶體驗。
卡片出現(xiàn)在了我們生活中的方方面面，如名片、不干膠標簽、便利貼、會員卡..等，不管是何種類型的卡片，它都將代表著我們現(xiàn)實生活中的某個特定信息。卡片，通常包含圖片或文本信息，是一種有效的信息承載方式。UI界面中的卡片設(shè)計是一種常見且有效的設(shè)計方式，它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn)，提升了界面的可讀性和用戶體驗。
卡片式設(shè)計是一種常見的UI組件，它能夠?qū)⒉煌膬?nèi)容分層次組合在一起，從而讓頁面看起來更有秩序感?？ㄆǔＳ蓸祟}、內(nèi)容描述、圖像、按鈕等元素組成，自帶簡約和易用的屬性，方便用戶快速理解和操作。
當用戶與卡片進行交互時，卡片需要星現(xiàn)特定的視覺反饋。常見的卡片狀態(tài)包括默認、
懸浮(pc端)、激活、選中
等。
為了更好的區(qū)分卡片和背景，可以用填充底色、措邊、添加陰影來讓卡片與背景有區(qū)分。
卡片的可讀性主要取決于字體的選擇和字號的大小，例如，即使兩個卡片具有相同的布局，但如果選擇的字體和字號不同，它們的可讀性和視覺效果可能會有很大的差別。
卡片上的文字間距最好有一定的規(guī)律，這里可以按網(wǎng)格法來規(guī)劃，比如8px網(wǎng)格，10px網(wǎng)格等等。網(wǎng)格的使用其實可以很靈活，比如我這里的卡片其實就用到了8px網(wǎng)格，各間距就會用8的倍數(shù)來做。大小比例就盡量用黃金比例來處理，這樣做目的一方面是為了讓界面有秩序，另一方面是提升決策效率。
在設(shè)計卡片布局時，通常會將多個卡片以網(wǎng)格的形式排列在頁面上，以保持水平方向和垂直方向的對齊，這樣可以使頁面看起來更有序、更規(guī)范。
當卡片中包含標題、內(nèi)容、圖片和按鈕等多種元素時，需要考慮到標題與圈片的位置關(guān)系以及標題和內(nèi)容的長短等因素。例如，如果卡片的頂部是標題，由于標題字數(shù)可能不確定，我們可以在卡片上方保留至少兩行的空間以容納標題，而保持卡片內(nèi)的圖片和按鈕位置不變。
邊距卡片，
這種類型的卡片在UI設(shè)計中最為常見，柔和的固角、邊緣陰影以及四周很自然的留白，讓內(nèi)容模塊的存在感更加強烈，整個頁面信息的層級也更加清晰。
懸浮卡片
并非模態(tài)彈窗，與模態(tài)彈窗相比，懸浮卡片無需主動操作觸發(fā)，可作為臨時控件或長期固定顯示。此外，懸浮卡片能承載更多信息內(nèi)容，可通過伸縮來定義卡片中的信息數(shù)量，多則展示全部內(nèi)容，少則僅顯示關(guān)鍵信息，非常靈活。
通欄卡片
具有更強的視覺阻斷，對區(qū)分不同的功能模塊有不錯的效果，不過這種類型只通過頁面背最色保留上下邊間、且不會過多，不然頁面會顯得零散、雜亂。
卡片式設(shè)計借用了現(xiàn)實世界中的卡片的特征，就像一張信用卡或名片，它承載了圖片、文字、按鈕等元素，以一個縮略的形式提供了快速瀏覽信息的模塊。在視覺表現(xiàn)形式上，卡片式設(shè)計可以分為扁平式卡片和通欄式卡片，前者更像傳統(tǒng)意義上的卡片，上下左右都留有空隙:后者僅在上下留有空隙，甚至無空隙。
1.獨特的設(shè)計語言
，卡片本身是一種設(shè)計語言,就像面形圖標一樣具有矩形的形狀，帶著圓角或直角，甚至還有輕微的陰影。這種獨特的設(shè)計語言可以快速地從扁平化設(shè)計中區(qū)分出來，帶給用戶強烈的辨識度。例如 Google 將卡片作為 Material design 的設(shè)計語言，運用到 Android系統(tǒng)所有的移動設(shè)備上，形成了獨一無二的視覺風格。
2.靈活的空間擴展
，相比傳統(tǒng)的列表式設(shè)計只能縱向滾動瀏覽，卡片式設(shè)計的空間擴展性更加靈活多變。由于每一個卡片都是獨立存在的因此既可以縱向滾動，也可以橫向滑動。例如馬蜂窩的卡片式設(shè)計通過橫向滑動在狹窄的屏幕上展示更多內(nèi)容，花瓣的兩列卡片式設(shè)計也為界面空間提供了更多的展示內(nèi)容，這些都大大提高用戶的瀏覽效率。
3.清晰的視覺呈現(xiàn)。
卡片化繁為簡，將不同類型的元素有效地組織!在一起，形成一個封閉式的視覺形式。每一個卡片之間都具有獨立性不會相互干擾，它們保持著一致的外觀，讓界面看上去干凈和簡潔。例如 App Store 和去哪兒賦予每一個卡片一個主題，以簡單明快的內(nèi)容表現(xiàn)形式吸引用戶的注意力，簡潔、連貫的卡片也避免了因為內(nèi)容太長讓用戶產(chǎn)生畏懼心理。
4.易于的內(nèi)容整理。
卡片是一個容器，將不同緯度的內(nèi)容進行區(qū)分或?qū)⑾嗤暥鹊膬?nèi)容歸納在一起，形成一個獨立的模塊，能有效地避免信息散亂和分類不清晰的狀況發(fā)生，讓界面的視覺層次變得清晰。例如途牛在一個界面中展示了多種不同形式的卡片式設(shè)計，通過卡片的大小顏色、圖文組合進行區(qū)分，視覺層次清晰明了。再例如騰訊視頻將相同功能的列表進行分組，有助于用戶快速獲取信息。
5.特殊的功能屬性。
卡片不僅是內(nèi)容的容器，同樣也是操作和交與的載體，由于它的視覺表現(xiàn)是獨立存在的，因此可以用于背景之上的對話框設(shè)計，以強烈的視覺表現(xiàn)力尋求一次互動。例如進入后彈出一個對話框，請求用戶開啟通知。再例如滴滴出行和美團外賣將一次活動推廣展現(xiàn)在卡片上，以此快速吸引用戶的注意力。
列表式設(shè)計是 App 中最常見的表現(xiàn)形式，它使用分割線對不同的元素進行有效的組織，幫助用戶理解界面的視覺層次。在視覺表現(xiàn)形式上，列表式設(shè)計根據(jù)分割線的不同長度可以分為半分割線式列表、縮進分割線式列表和通欄分割線式列表。
1.輕量化的設(shè)計。
列表式設(shè)計是真正意義上的扁平化設(shè)計，不像卡片式設(shè)計那樣有著清晰的視覺層次，它讓所有的信息內(nèi)容處于同一個平面。這樣的好處是干凈的界面可以減少對用戶的視覺干擾，以便用戶順暢的進行瀏覽。親切和友好的用戶體驗是列表式設(shè)計的最大優(yōu)點，它非常適合于形式簡單的信息內(nèi)容。例如網(wǎng)易云音樂和今日頭條的每一條動態(tài)都有著相似的形式，輕量化的列表式設(shè)計讓用戶的瀏覽變得輕松和優(yōu)雅。
2.提升瀏覽效率。
列表式設(shè)計沒有寬厚的空隙作為信息內(nèi)容的區(qū)分而是使用一條細窄的分割線。它非常適合于非常多的同類的信息內(nèi)容、可以極大地節(jié)省界面的空間，讓狹小的屏幕顯示更多內(nèi)容，在無形中就提升了用戶的瀏覽效率。例如 微博 和騰訊新聞的商品都是左圖右文的結(jié)構(gòu)，使用簡單的列表式設(shè)計，有助于用戶快建地進行瀏覽。
我們再來試看分析微博動態(tài)為什么使用卡片式設(shè)計，而不是列表式設(shè)計。首先，微博強調(diào)每一個動志的豐富內(nèi)容和獨特個性，希望用戶進行分事、評論和點贊操作，卡片式設(shè)計有效地將用戶的注意力停量在當前的卡片上;其次，五花八門的內(nèi)容形式使用卡片式設(shè)計易于整理，可以保持清晰的視覺層次。
無框式設(shè)計是一種去形式化的設(shè)計，它強調(diào)化繁為簡，去除一切與內(nèi)容無類的裝飾性元素，旨在突出內(nèi)容本身、好讓重要的信息及功能更容易被關(guān)注，讓用戶更加清晰和直觀地進行瀏覽。在無框式設(shè)計中，你幾乎看不到區(qū)分內(nèi)容的分割線,它通過大間距就完成了視覺層次的劃分留白是它的最大武器。
1.極簡主義風格。
相比卡片式設(shè)計追求“多”，無框式設(shè)計則追求“少”,即用最簡單的形式和最理性的設(shè)計創(chuàng)造最深入人的藝術(shù)感受例如余音使用白色的背景，左小右大的邊距和大量的留白，呈現(xiàn)出一種獨特的產(chǎn)品氣質(zhì)。列表設(shè)計去掉分割線，干凈到一塵不染的界面讓用戶產(chǎn)生極為深刻的印象。
2.掌控注意力
。無框式設(shè)計最顯著的特征就是去除裝飾性的分割線通過間距的親密和疏遠對比進行視覺層次的劃分。大量的留白設(shè)計把空間留給內(nèi)容,把內(nèi)容留給用戶。使用了無框式設(shè)計沒有了那些分割線的干擾，有效地掌控了用戶的注意力，讓用戶把目光集中在內(nèi)容本身。
3.保持界面整潔。
設(shè)計是連貫、統(tǒng)一的，沒有了邊框可以讓界面保持干凈、整潔的畫面。而一旦有了邊框，這種簡潔的設(shè)計就會被打部精王德商處可見那些細碎的分副線或描邊，使得界面變的擁擠不堪。大部分用戶都喜愛干凈、整潔的畫面，微博和騰訊新聞就是這樣的設(shè)計。
瀑布流主要正針對圖片較多、或以圖片為主的內(nèi)容設(shè)計，它最大的優(yōu)點是無需過于在意圖片的高度，最大限度的還原原始圖片效果。
信息流主要通過文字、圖片或視頻等媒介來展示較長的內(nèi)容，這需要用戶花費一定的時間進行滑動和瀏覽，才能篩選出對自己有用的信息。
在音樂、視頻等以圖片為主要內(nèi)容的產(chǎn)品中，卡片式左右滑動的設(shè)計最為常見。這是因為卡片式設(shè)計能夠更好地展現(xiàn)內(nèi)容的層次感和吸引力，尤其對于以圖片為主的產(chǎn)品來說，卡片式設(shè)計可以提供更豐富的視覺效果，增強用戶的瀏覽體驗。
卡片式設(shè)計是一種有效的布局方式，它可以在個人中心、個人主頁、會員等頁面中，將關(guān)鍵信息進行整合和概括，從而形成清晰、連貫的視覺結(jié)構(gòu)。
在UI界面中，卡片設(shè)計是一種重要的布局方式，它以其簡潔性、模塊化和可自定義特性而備受設(shè)計師與使用者青睞。以下是卡片設(shè)計時需要遵循的一些關(guān)鍵原則：
信息精煉：每張卡片應僅展示關(guān)鍵信息或功能，防止信息負荷過大，確保用戶能夠快速獲取所需內(nèi)容。
視覺元素簡潔：避免在卡片上添加過多的裝飾性元素，保持設(shè)計的簡潔性。
視覺風格統(tǒng)一：不同卡片之間應保持一致的視覺風格，包括顏色、字體、圖標等，以提高用戶識別及使用效率。
布局規(guī)范：卡片的布局應遵循一定的規(guī)范，如邊距、圓角大小等，以保持整體的一致性。
信息層級明確：通過字體大小、顏色、圖標等方式明確信息的層級關(guān)系，引導用戶按照重要性順序瀏覽信息。
視覺空間感：利用投影、前后顏色設(shè)定等手段提升整體設(shè)計層次感，使卡片看起來更加立體和自然。
操作便捷：為用戶提供充足的操作空間與方式，如點擊、滑動等，鼓勵用戶深度參與信息生成與傳播過程。
反饋及時：在用戶與卡片進行交互時，應提供及時的反饋效果，如顏色變化、動畫等，以增強用戶的交互體驗。
響應式設(shè)計：卡片設(shè)計應能夠適應不同屏幕尺寸和設(shè)備類型，確保在各種環(huán)境下都能保持良好的顯示效果。
內(nèi)容靈活：卡片的內(nèi)容應具有一定的靈活性，可以根據(jù)實際需求進行調(diào)整和更新。
圓角設(shè)計：圓角的設(shè)定應符合整體的風格調(diào)性，大圓角表達柔和，小圓角表達硬朗。
邊距與留白：合理的邊距和留白可以提升整體設(shè)計的層次感，使內(nèi)容更加突出且易于閱讀。
標題與正文：標題應簡短明了，用于說明卡片的內(nèi)容；正文部分則應簡潔精煉，避免冗余信息。
卡片設(shè)計在UI界面中扮演著重要角色，它不僅能夠提升用戶體驗，還能增強信息的可讀性和可理解性。因此，在進行卡片設(shè)計時，應遵循簡潔清晰、一致性、層次性、交互體驗、適應性以及設(shè)計細節(jié)等原則，以確?？ㄆO(shè)計的質(zhì)量和效果。
隨著科技的不斷進步和用戶需求的變化，卡片設(shè)計也在不斷發(fā)展和創(chuàng)新。未來，卡片設(shè)計將更加注重個性化和智能化。通過用戶行為分析和機器學習等先進技術(shù)手段，可以為用戶提供更加精確和個性化的推薦和服務(wù)。同時，虛擬現(xiàn)實（VR）和增強現(xiàn)實（AR）等新技術(shù)的發(fā)展也將為卡片設(shè)計帶來更多元化的應用場景和更豐富的用戶體驗。
綜上所述，UI界面中的卡片設(shè)計是一種重要且有效的設(shè)計方式。通過遵循設(shè)計原則、掌握設(shè)計技巧并借鑒優(yōu)秀案例，可以設(shè)計出既美觀又實用的卡片界面。
作者：蘑菇小象117
鏈接：https://www.zcool.com.cn/article/ZMTYzNjU2MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
