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