當(dāng)設(shè)計(jì)技巧或設(shè)計(jì)方法接近成熟時(shí)，我們通?？梢钥偨Y(jié)出足夠的完整最佳實(shí)踐。在移動(dòng)終端逐漸占主導(dǎo)地位且桌面設(shè)備仍然主導(dǎo)生產(chǎn)力的時(shí)代，強(qiáng)調(diào)兩個(gè)平臺(tái)的設(shè)計(jì)是很自然的。對(duì)于很多人來(lái)說(shuō)，在桌面和移動(dòng)設(shè)備之間來(lái)回切換是很常見(jiàn)的事情。設(shè)計(jì)人員需要使設(shè)計(jì)與不同的屏幕兼容?？ㄆO(shè)計(jì)就是在這種背景下誕生的，并且蓬勃發(fā)展。如今。

無(wú)論Android的主推卡設(shè)計(jì)，或越來(lái)越多的iOS卡，還是Facebook和Twitter等玩卡牌元素的巨頭，我們都可以清楚地看到卡式設(shè)計(jì)的普及和巨大的能量。它足夠干凈，具有良好的參與感，更有條理，易于擴(kuò)展，而且非常靈活。

同時(shí)，許多優(yōu)點(diǎn)和可能性也意味著你想要設(shè)計(jì)一個(gè)足夠好的卡元素，你需要有一個(gè)足夠好的策略和仔細(xì)的想法，否則你的設(shè)計(jì)很可能是一個(gè)失敗的產(chǎn)品。

我來(lái)談?wù)効ㄆO(shè)計(jì)本身

在我們真正開(kāi)始探索卡片設(shè)計(jì)的最佳實(shí)踐之前，我們?nèi)匀恍枰砬蹇ㄆO(shè)計(jì)的基本概念及其優(yōu)點(diǎn)。

用戶(hù)界面中的卡片借用了現(xiàn)實(shí)世界中卡片的功能和概念。通常，UI中的卡片是矩形的，帶有不同的元素，如圖像，文本，鏈接，按鈕等。卡片是一個(gè)容器，但通?？ㄆ瑢⒐餐瑪y帶一組元素或一個(gè)元素或核心。不同的元素在不同的卡中工作，并且不同的卡被組合在一起以形成功能頁(yè)面或組合。

典型的卡片結(jié)構(gòu)

例如，在電子商務(wù)網(wǎng)站中，設(shè)計(jì)師使用卡片來(lái)攜帶類(lèi)別列表。在設(shè)計(jì)媒體中，卡用于攜帶用戶(hù)發(fā)送的一條內(nèi)容。在新聞網(wǎng)站中，卡片通常用于攜帶不同的類(lèi)別。新聞。

卡的優(yōu)點(diǎn)也很明顯：

攜帶不同元素的卡片具有不斷變化的游戲玩法，適合于顯示不同大小和屬性的各種元素。

響應(yīng)性：卡的移動(dòng)屏幕上的顯示非常漂亮，移動(dòng)端需要平滑靈活的布局。這張卡非常合適。該卡使布局更靈活。三張卡可以在桌面上并排顯示三行，在移動(dòng)側(cè)，它們可以垂直繪制成一列。兩種布局都符合用戶(hù)的閱讀習(xí)慣。

組織：卡片可以有效地組織不同類(lèi)型的元素，無(wú)論是圖片，視頻，文本還是CTA按鈕。由于卡本身的靈活性，設(shè)計(jì)人員可以靈活而有目的地調(diào)整每個(gè)元素而無(wú)需使用它。擔(dān)心影響他人的因素。該卡構(gòu)建了統(tǒng)一的用戶(hù)模型，允許用戶(hù)更好，更快地完成任務(wù)。

極簡(jiǎn)主義：極簡(jiǎn)主義設(shè)計(jì)是目前主流和流行的設(shè)計(jì)風(fēng)格。在極簡(jiǎn)主義風(fēng)格中，用戶(hù)更容易理解內(nèi)容并且外觀更優(yōu)雅?？ㄊ皆O(shè)計(jì)在精神上與極簡(jiǎn)主義相關(guān)聯(lián)。

卡片設(shè)計(jì)最佳實(shí)踐

·有目的地使用卡

雖然卡在UI設(shè)計(jì)中功能強(qiáng)大，但不要只使用它們。大多數(shù)設(shè)計(jì)師使用這個(gè)設(shè)計(jì)元素，以利用卡本身的強(qiáng)大組織。

如果UI中有大量不同類(lèi)型的元素，例如圖像，文本，列表，CTA按鈕等，則需要將它們與卡集成。

顯示元素的長(zhǎng)度是可變的

用戶(hù)不必考慮各種元素之間的大小差異

需要托管某些交互，例如輸入框，按鈕和鏈接等。

·保持簡(jiǎn)單

每張卡都帶有執(zhí)行任務(wù)的元素。各種元素通常不應(yīng)混合在一起，不同的卡片將它們分開(kāi)，使它們相互干擾。如果您需要具有不同屬性的內(nèi)容來(lái)共同完成任務(wù)，那么讓他們保持在一起并進(jìn)行多卡協(xié)作。限制卡中的文本數(shù)量，盡量不添加段落。

·引導(dǎo)用戶(hù)獲取最重要的信息或行動(dòng)

充分利用卡片的層次結(jié)構(gòu)來(lái)突出顯示關(guān)鍵內(nèi)容和信息。例如，將帶有管家信息的卡放在頂部，您還可以使用排版來(lái)突出顯示關(guān)鍵信息和交互。

·精心挑選的地圖

圖像是UI中視覺(jué)元素的表示，可以使界面吸引人并使卡片脫穎而出。但是圖像質(zhì)量越好，UI越好，圖片必須傳達(dá)正確的信息，這是第一要?jiǎng)?wù)。卡片中圖像的位置通常取決于它是主要的還是支持性的。

·支持微觀互動(dòng)

卡本身是一個(gè)交互元素，卡上的鏈接和按鈕可以指向更詳細(xì)的信息，卡可以自然地進(jìn)行更多樣化的微交互。例如，將光標(biāo)懸停在卡片上時(shí)，可以觸發(fā)其他內(nèi)容的顯示。

·支持手勢(shì)

在移動(dòng)設(shè)計(jì)中，手勢(shì)是主要的互動(dòng)。手勢(shì)不僅可以使用，而且有趣的手勢(shì)和互動(dòng)創(chuàng)造了有趣和愉快的體驗(yàn)。早在webOS時(shí)代，通過(guò)輕掃，組織卡片，長(zhǎng)按，以及通過(guò)向上和向下滑動(dòng)來(lái)關(guān)閉卡片來(lái)移動(dòng)卡片。但是，整個(gè)手勢(shì)交互的邏輯應(yīng)該是平滑和自包含的，以便體驗(yàn)無(wú)可挑剔。

·精心打磨

創(chuàng)意設(shè)計(jì)將讓人眼前一亮。尺寸和尺寸合適的高清晰度圖像令人賞心悅目。精心打磨的細(xì)節(jié)讓您感覺(jué)舒適。您應(yīng)該嘗試使卡片成為愉快和愉快的體驗(yàn)。

結(jié)論

如果可以很好地使用卡片設(shè)計(jì)，則對(duì)整個(gè)體驗(yàn)的影響是顯而易見(jiàn)的。今天的設(shè)計(jì)師已經(jīng)對(duì)卡片設(shè)計(jì)進(jìn)行了足夠深入的討論，更多的例子可以讓你更好地掌握這種設(shè)計(jì)技巧。

« 該女子輕信“表示報(bào)銷(xiāo)”泄露密碼50元賠償被騙5萬(wàn)元 | 小程序市場(chǎng)競(jìng)爭(zhēng)激烈，這八款營(yíng)銷(xiāo)游戲可以讓它脫穎而出！ »