用戶在操作卡片式設(shè)計(jì)的應(yīng)用界面時(shí)，會(huì)更加清晰的瀏覽卡片上的內(nèi)容，順理成章的它也成為了當(dāng)前UI界面設(shè)計(jì)中的一個(gè)潮流，其中包含的元素也是五花八門：多媒體、文本、鏈接、圖表和標(biāo)題說明等。
卡片一般會(huì)作為一個(gè)詳細(xì)的信息入口點(diǎn)，不同的信息通過一張張卡片匯聚在一起，并幫助用戶清晰的呈現(xiàn)有效信息，這種趨勢也是現(xiàn)在數(shù)字化媒體發(fā)展的客觀反映。
隨著屏幕尺寸的不斷多樣化以及HTML5/CSS3在最近十年的高速發(fā)展，卡片式設(shè)計(jì)成為現(xiàn)代互聯(lián)網(wǎng)應(yīng)用的一種設(shè)計(jì)方式的代表，例如一些耳熟能詳?shù)纳缃粦?yīng)用：Facebook、Twitter、Pinterest這些主流的應(yīng)用，另外互聯(lián)網(wǎng)的發(fā)展相比較于以前變得更加的可定制化和社交化了，而卡片正好作為一個(gè)容器，可以很好的呈現(xiàn)信息。
卡片式設(shè)計(jì)就像一個(gè)短小精悍的帖子，提供用戶有效信息，將最重要的信息和圖片展示給用戶，就像在金魚缸中的展示金魚一樣。
卡片的特征
一組卡片會(huì)呈現(xiàn)出來不同的內(nèi)容，用戶能夠高效快速的瀏覽并選擇點(diǎn)擊進(jìn)入頁面查看詳情。卡片之間的信息有時(shí)具有同等級(jí)別的關(guān)系，類似于在一個(gè)貨架上擺滿了很多商品，以最高效的方式瀏覽內(nèi)容，同時(shí)用戶在提交每一步的操作時(shí)也能明確的知道這張卡的信息。
卡片式設(shè)計(jì)具有靈活性，所以能很好的適應(yīng)響應(yīng)式的網(wǎng)頁設(shè)計(jì)。通過使用media標(biāo)簽，內(nèi)容可以有效被重新排列在任何屏幕上。這種可適應(yīng)性使得視覺設(shè)計(jì)和用戶體驗(yàn)達(dá)到來完美統(tǒng)一。
解構(gòu)卡片
要做出好的卡片式設(shè)計(jì)，有必要了解它們所需要的組成元素，卡片中通常包括：標(biāo)題、副標(biāo)題、基本摘要、多媒體、圖片、視頻、圖表、評(píng)論和相關(guān)操作。由于點(diǎn)擊區(qū)域有限，所以通常會(huì)使整個(gè)卡片充當(dāng)一個(gè)大的按鈕，并進(jìn)入詳情頁面。
卡片式設(shè)計(jì)通常也會(huì)以多種方式呈現(xiàn)出來，包括在單一的、在同一個(gè)時(shí)間軸上的、畫廊式的排列的、彼此相鄰或者像儀表盤一樣等多種選擇。
最佳實(shí)踐
從卡片式設(shè)計(jì)的流行中能看到什么
一張卡片就相當(dāng)于目前人與人之間的疏密關(guān)系，并有著高度社會(huì)化的模塊特性，使功能信息高度集中。這樣的結(jié)果就好比媒體希望能無限制的吸引用戶的注意力，并通過振動(dòng)、跳躍、無限的循環(huán)、頂和踩來喚醒情緒，甚至直接通過內(nèi)容本身來操縱用戶的吸引力，在廣告營銷和警告提示上，希望我們察覺到：喜悅、幸福、憤怒、沮喪、仇恨和興奮等，以此來作為一種暫時(shí)分散我們的注意力和激發(fā)更大潛力。
這種現(xiàn)象將會(huì)推動(dòng)設(shè)計(jì)師和開發(fā)者在互聯(lián)網(wǎng)中的發(fā)展軌跡，并直接投射到現(xiàn)實(shí)生活中。在未來，這張卡片將會(huì)成為入口點(diǎn)、目標(biāo)與自我的載體?；ヂ?lián)網(wǎng)的發(fā)展快慢是由我們自己決定的，而卡片式設(shè)計(jì)好比一個(gè)容器來更好服務(wù)互聯(lián)網(wǎng)的發(fā)展。最后希望這篇文章能幫到讀者更好的設(shè)計(jì)。
作者：Andrew Coyle
原文鏈接：Design Better Cards
