用戶在操作卡片式設(shè)計(jì)的應(yīng)用界面時(shí)饱苟，會(huì)更加清晰的瀏覽卡片上的內(nèi)容腊凶，順理成章的它也成為了當(dāng)前UI界面設(shè)計(jì)中的一個(gè)潮流芙粱，其中包含的元素也是五花八門：多媒體祭玉、文本、鏈接春畔、圖表和標(biāo)題說(shuō)明等脱货。
卡片一般會(huì)作為一個(gè)詳細(xì)的信息入口點(diǎn)，不同的信息通過(guò)一張張卡片匯聚在一起律姨，并幫助用戶清晰的呈現(xiàn)有效信息振峻，這種趨勢(shì)也是現(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)出來(lái)不同的內(nèi)容躏吊，用戶能夠高效快速的瀏覽并選擇點(diǎn)擊進(jìn)入頁(yè)面查看詳情氛改。卡片之間的信息有時(shí)具有同等級(jí)別的關(guān)系比伏，類似于在一個(gè)貨架上擺滿了很多商品，以最高效的方式瀏覽內(nèi)容疆导，同時(shí)用戶在提交每一步的操作時(shí)也能明確的知道這張卡的信息赁项。
卡片式設(shè)計(jì)具有靈活性，所以能很好的適應(yīng)響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)澈段。通過(guò)使用media標(biāo)簽悠菜，內(nèi)容可以有效被重新排列在任何屏幕上。這種可適應(yīng)性使得視覺(jué)設(shè)計(jì)和用戶體驗(yàn)達(dá)到來(lái)完美統(tǒng)一败富。
解構(gòu)卡片
要做出好的卡片式設(shè)計(jì)悔醋，有必要了解它們所需要的組成元素，卡片中通常包括：標(biāo)題兽叮、副標(biāo)題芬骄、基本摘要猾愿、多媒體、圖片账阻、視頻蒂秘、圖表、評(píng)論和相關(guān)操作淘太。由于點(diǎn)擊區(qū)域有限姻僧，所以通常會(huì)使整個(gè)卡片充當(dāng)一個(gè)大的按鈕，并進(jìn)入詳情頁(yè)面蒲牧。
卡片式設(shè)計(jì)通常也會(huì)以多種方式呈現(xiàn)出來(lái)撇贺，包括在單一的、在同一個(gè)時(shí)間軸上的冰抢、畫廊式的排列的松嘶、彼此相鄰或者像儀表盤一樣等多種選擇。
最佳實(shí)踐
從卡片式設(shè)計(jì)的流行中能看到什么
一張卡片就相當(dāng)于目前人與人之間的疏密關(guān)系橙弱，并有著高度社會(huì)化的模塊特性，使功能信息高度集中燥狰。這樣的結(jié)果就好比媒體希望能無(wú)限制的吸引用戶的注意力棘脐，并通過(guò)振動(dòng)、跳躍龙致、無(wú)限的循環(huán)蛀缝、頂和踩來(lái)喚醒情緒，甚至直接通過(guò)內(nèi)容本身來(lái)操縱用戶的吸引力目代，在廣告營(yíng)銷和警告提示上屈梁，希望我們察覺(jué)到：喜悅、幸福榛了、憤怒在讶、沮喪、仇恨和興奮等霜大，以此來(lái)作為一種暫時(shí)分散我們的注意力和激發(fā)更大潛力构哺。
這種現(xiàn)象將會(huì)推動(dòng)設(shè)計(jì)師和開(kāi)發(fā)者在互聯(lián)網(wǎng)中的發(fā)展軌跡，并直接投射到現(xiàn)實(shí)生活中战坤。在未來(lái)曙强，這張卡片將會(huì)成為入口點(diǎn)残拐、目標(biāo)與自我的載體∑炱耍互聯(lián)網(wǎng)的發(fā)展快慢是由我們自己決定的蹦骑，而卡片式設(shè)計(jì)好比一個(gè)容器來(lái)更好服務(wù)互聯(lián)網(wǎng)的發(fā)展。最后希望這篇文章能幫到讀者更好的設(shè)計(jì)臀防。
作者：Andrew Coyle
原文鏈接：Design Better Cards
