青島網(wǎng)站建設(shè)的H5網(wǎng)頁和手機(jī) app逐步向完全個(gè)性化、良好的用戶體驗(yàn)發(fā)展，也漸漸拋棄了傳統(tǒng)單一的頁面設(shè)計(jì)。大量獨(dú)立內(nèi)容模塊的流行和運(yùn)用，其中，卡片就是最新一種獨(dú)具創(chuàng)新的概念。

一、什么是卡片

卡片是含有圖片和文字在內(nèi)的小矩形模塊，它是用戶了解更多細(xì)節(jié)信息的「入口」。要平衡界面的美學(xué)和可用性，卡片基本是一個(gè)默認(rèn)選擇。因?yàn)榭ㄆ闷饋矸浅７奖?，還可以展示包含不同元素的內(nèi)容。

1.內(nèi)容架構(gòu)卡片

將內(nèi)容劃分成多個(gè)有意義的部分，這樣還節(jié)省了一定的屏幕空間。類似于「字詞句段篇」的組成形式，卡片也是由最小信息單元組成，并匯總形成連貫的整體內(nèi)容?？ㄆM成示例。圖片來源：Material Design像 Facebook 這類大企業(yè)，其采用卡片驅(qū)動(dòng)型的界面用于臺(tái)式桌面、手機(jī)網(wǎng)頁及 app 客戶端時(shí)，卡片布局就被認(rèn)作設(shè)計(jì)環(huán)節(jié)中的核心了。Facebook 充分利用了盒子風(fēng)格的設(shè)計(jì)(即卡片——譯者注)，將信息歸類，哪怕是在怎么也滑動(dòng)不到底端的頁面上。

2.完美的擬物

在用戶界面加入卡片設(shè)計(jì)可謂完美的擬物，它們看起來就像日常生活中真實(shí)存在的卡片?？ㄆ鋵?shí)在手機(jī)設(shè)備出現(xiàn)前就已經(jīng)存在了，比如名片、棒球卡、撲克卡等等?？ㄆ遮叧蔀槭褂幂^廣泛的一種交互模型。因此，對(duì)用戶而言，其更能憑直覺認(rèn)識(shí)到，這些卡片就代表真實(shí)生活中的某物。

3.視覺享受

研究發(fā)現(xiàn)圖片可以提升青島網(wǎng)站建設(shè)的網(wǎng)頁或 app 的整體設(shè)計(jì)，因?yàn)閳D片可以快速有效地吸引用戶的注意力?；诳ㄆ脑O(shè)計(jì)通常主要依靠視覺設(shè)計(jì)，而使用大量圖片就是卡片設(shè)計(jì)的一大亮點(diǎn)。所以，加入圖片也使得基于卡片的設(shè)計(jì)更加引人入勝。

二、如何設(shè)計(jì)卡片

在同一頁面布局中，卡片寬度應(yīng)保持不變，但高度可以相應(yīng)調(diào)整?？ㄆ畲蟾叨认抻谠撈脚_(tái)可用空間的高度，但也可以臨時(shí)延伸。例如，在顯示評(píng)論框的時(shí)候。卡片高度既可固定，又可調(diào)整。

從設(shè)計(jì)角度來看，卡片各角最好是圓角，并且最好稍有一點(diǎn)陰影。圓角使卡片看起來更像一個(gè)內(nèi)容塊，陰影則可以反映出深度。圓角和陰影。

這些元素在沒有分散用戶注意力的前提下，能給設(shè)計(jì)帶來一些視覺亮點(diǎn)。另外，還能給人一種卡片像是要從頁面中跳出來的感覺。除此之外，還可以加入動(dòng)畫和動(dòng)效。

卡片的優(yōu)勢(shì)設(shè)計(jì)恰當(dāng)?shù)脑?，卡片可以提?app 的用戶體驗(yàn)感。因?yàn)槠涔δ苄砸约巴庑蔚脑颍鼈兂闪擞脩艚缑娴囊粋€(gè)增值元素，對(duì)用戶來說，也更能憑直覺交互。