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