“設(shè)計(jì)師的工作，并不只是設(shè)計(jì)實(shí)踐。在當(dāng)前環(huán)境中，為設(shè)計(jì)一個(gè)合適的場(chǎng)所，并對(duì)設(shè)計(jì)領(lǐng)域中心配置，對(duì)于設(shè)計(jì)師來(lái)說(shuō)也許是更為重要的工作 ”? ? ?————— ? ?原研哉

想想在我們的工作，生活，學(xué)習(xí)中又何不是這樣呢?；貧w正文：

這篇文章提到卡片式設(shè)計(jì)與用戶(hù)體驗(yàn)，不管是Web和移動(dòng)應(yīng)用的頁(yè)面設(shè)計(jì)，都不能脫離了真實(shí)使用完全個(gè)性化的體驗(yàn)，卡片是新的創(chuàng)造性概念。

無(wú)論你對(duì)這個(gè)概念的感覺(jué)如何，卡片設(shè)計(jì)都已經(jīng)是近兩年最流行的界面設(shè)計(jì)的排列樣式

什么是卡片

卡片是那些裝滿(mǎn)包含圖像和文本的小矩形，作為功能、內(nèi)容入口點(diǎn)，以提供更詳細(xì)的信息。可以平衡用戶(hù)界面的設(shè)計(jì)美學(xué)和良好的可用性，最近卡片幾乎成了移動(dòng)端界面設(shè)計(jì)的一個(gè)默認(rèn)的選擇。因?yàn)榭ㄊ且环N方便的顯示不同元素組成的內(nèi)容的方式。

卡片的體驗(yàn)

在用戶(hù)界面中使用的卡是一個(gè)很好的體驗(yàn)，因?yàn)樗麄兛雌饋?lái)像現(xiàn)實(shí)世界的有形卡。在移動(dòng)設(shè)備上，卡片是一種使用非常廣的交互模式，因此，它更直觀的給用戶(hù)知道這一塊卡片里的內(nèi)容是代表一個(gè)整體，一個(gè)模塊的信息。

卡片是一個(gè)很好的工具，用于交流快速的故事。棒球卡是一個(gè)很好的例子，從現(xiàn)實(shí)生活中的對(duì)象。你需要了解一個(gè)玩家的基本信息包含在一張小卡片的兩邊。

內(nèi)容劃分

卡片將內(nèi)容劃分成幾個(gè)部分，這樣劃分可以占用的屏幕空間更少，而且更清晰的區(qū)分不同的內(nèi)容。就想寫(xiě)文章一樣，你會(huì)用段落，標(biāo)點(diǎn)符號(hào)來(lái)區(qū)分表達(dá)不同的內(nèi)容?？ㄆO(shè)計(jì)就是一樣的意思，可以收集各種信息，形成連貫的一塊內(nèi)容。

當(dāng)Facebook、twitter、騰訊等巨頭們的產(chǎn)品使用卡片式設(shè)計(jì)web和移動(dòng)端產(chǎn)品時(shí)，卡片的設(shè)計(jì)布局被大量的產(chǎn)品設(shè)計(jì)師隨波逐流的推到了設(shè)計(jì)的最前沿。如果你在用Facebook你會(huì)發(fā)現(xiàn)它的卡片設(shè)計(jì)不多也不少，剛好充分的展現(xiàn)出卡片設(shè)計(jì)為它的產(chǎn)品設(shè)計(jì)帶來(lái)的內(nèi)容涉及區(qū)分的效果，雖然說(shuō)有一個(gè)瀑布流的首頁(yè)無(wú)休止的往下刷信息。但這也是用戶(hù)在使用過(guò)程中最低的成本，（這里的成本指的是用戶(hù)成本）

賞心悅目

設(shè)計(jì)是一門(mén)語(yǔ)言，通常一個(gè)產(chǎn)品通過(guò)設(shè)計(jì)和內(nèi)容為用戶(hù)傳達(dá)信息，而卡片式的視覺(jué)效果設(shè)計(jì)也剛好能給用戶(hù)傳達(dá)了清晰的信息，在卡片設(shè)計(jì)中還會(huì)為特定的信息內(nèi)容加入圖形圖像，還能大大提升網(wǎng)站或應(yīng)用的體驗(yàn)效果，因?yàn)閳D像有效地吸引用戶(hù)的視線，更加集中明確的引導(dǎo)用戶(hù)去操作這一功能。

Dribbble創(chuàng)意社區(qū)展示設(shè)計(jì)師作品的知名網(wǎng)站，基于卡片設(shè)計(jì)真的是最合適呈現(xiàn)這種類(lèi)型的內(nèi)容。

如何設(shè)計(jì)一張卡片

OK上面簡(jiǎn)單的介紹了一些卡片設(shè)計(jì)的優(yōu)點(diǎn)，接下來(lái)我們談?wù)勅绾卧O(shè)計(jì)一張卡片。在恒定的移動(dòng)端應(yīng)用中相同的卡片設(shè)計(jì)，可以根據(jù)內(nèi)容調(diào)整期高度，但寬度是固定的，F(xiàn)acebook的瀑布流頁(yè)面無(wú)限的往下，單寬度是不變的，內(nèi)容顯示也是一樣，這可減少用戶(hù)的視覺(jué)成本。當(dāng)然最大高度限制應(yīng)該在一個(gè)平臺(tái)上可用內(nèi)容信息展示，但它可以設(shè)置好自動(dòng)展示擴(kuò)展。

從設(shè)計(jì)的角度來(lái)看，卡片設(shè)計(jì)應(yīng)該是跟我們平時(shí)看到的名片一樣有圓角、直角，卡片式設(shè)計(jì)給用戶(hù)看起來(lái)像一個(gè)內(nèi)容塊，而圓角和直角只是一種視覺(jué)設(shè)計(jì)的樣式，給人不一樣的印象設(shè)計(jì)。

可以說(shuō)這些元素在你的設(shè)計(jì)中就像是添加了一點(diǎn)視覺(jué)上的香料，更好的給用戶(hù)帶來(lái)全新，不一樣的感受，而不會(huì)成為一種分心的事。卡的優(yōu)點(diǎn)正確實(shí)施，卡片式設(shè)計(jì)可以提高產(chǎn)品的用戶(hù)體驗(yàn)方面，由于其功能和形狀的特性，設(shè)計(jì)師們也很方便去再添加一個(gè)有趣的UI元素，直觀的使用。

消化的形式

在設(shè)計(jì)中完美都知道內(nèi)容是驅(qū)動(dòng)設(shè)計(jì)去主導(dǎo)，而設(shè)計(jì)樣式則是修飾內(nèi)容的重要部分，比如：設(shè)計(jì)是一個(gè)容器，里面可以裝任何能裝得下的物體，但這個(gè)容器是否合適裝下這個(gè)物體來(lái)展示給其他用戶(hù)，在這設(shè)計(jì)里用戶(hù)可以很容易地訪問(wèn)他們感興趣的內(nèi)容，或功能產(chǎn)品，這能使用戶(hù)能夠從產(chǎn)品本身，功能需求，或者他們想要內(nèi)容快速瀏覽他們想要的內(nèi)容。

響應(yīng)和移動(dòng)設(shè)計(jì)

關(guān)于卡片式設(shè)計(jì)最重要的事情是，他們幾乎有無(wú)限的可能。當(dāng)然這里說(shuō)的無(wú)限可能是指卡樣式設(shè)計(jì)作品既適用于臺(tái)式機(jī)和移動(dòng)設(shè)備，因?yàn)榭ㄌ峁┝烁嗫上膬?nèi)容。他們是很好的響應(yīng)設(shè)計(jì)，因?yàn)榭ㄗ鳛閮?nèi)容容器，容易擴(kuò)大或下降。這就是為什么它如此容易創(chuàng)建一個(gè)一致的卡片樣式設(shè)計(jì)，無(wú)論設(shè)備，都可以適配。

瀑布流設(shè)計(jì)

在扁平化設(shè)計(jì)趨勢(shì)出現(xiàn)時(shí)，即出現(xiàn)了瀑布流的操作模式，顧名思義瀑布流就是可以無(wú)限制的往下滑動(dòng)來(lái)刷新內(nèi)容，不需要切換頁(yè)面，就像Facebook、Pinterest使用卡片式設(shè)計(jì)，然后下滑刷新。以新內(nèi)容中最近的事件稱(chēng)現(xiàn)在最前端的一個(gè)快速概述。Facebook新聞提要是一個(gè)無(wú)休止的瀑布流，而卡是一個(gè)內(nèi)容的入口。他們把內(nèi)容無(wú)限流，發(fā)現(xiàn)卡式內(nèi)容允許相關(guān)內(nèi)容自然地展示自己，讓用戶(hù)深入他們的興趣。

Pinterest使用引腳在動(dòng)態(tài)的磚混結(jié)構(gòu)的網(wǎng)格布局來(lái)組織內(nèi)容，讓用戶(hù)在瀏覽內(nèi)容時(shí)會(huì)不經(jīng)意發(fā)現(xiàn)下一個(gè)內(nèi)容已展示了一個(gè)半磚的內(nèi)容，所以會(huì)吸引用戶(hù)不停往下刷。網(wǎng)格磚是一個(gè)干凈的和輕量級(jí)的方式來(lái)呈現(xiàn)一個(gè)圖像畫(huà)廊。你可以看到它在下面的例子。

屏幕尺寸適配

基于內(nèi)容設(shè)計(jì)的卡片樣式可以在小屏幕上很好地工作，但在一個(gè)大屏幕，它會(huì)很好的放大，縮小適配到不同的機(jī)型。從視覺(jué)上看，它仍然是一個(gè)不錯(cuò)的產(chǎn)品設(shè)計(jì)，如閱讀速度和閱讀理解。

在使用中用戶(hù)發(fā)現(xiàn)你的應(yīng)用程序易于操作，且卡片式的設(shè)計(jì)也能夠很好的選擇內(nèi)容，這將大大的提升了用戶(hù)的使用感受和熟悉的視覺(jué)邏輯。在產(chǎn)品上線后，你應(yīng)該想辦法得到你的用戶(hù)的反饋，他們想看到什么。隨著用戶(hù)的反饋，你可以設(shè)計(jì)測(cè)試，以逐步優(yōu)化你的產(chǎn)品。

結(jié)論

我希望你有一個(gè)很好的感覺(jué)為什么卡式設(shè)計(jì)越來(lái)越受歡迎。我相信，這種趨勢(shì)不會(huì)消失的很快。因?yàn)榭ú恢皇呛?jiǎn)單的眼睛，他們是最靈活的布局格式之一，創(chuàng)造極致的體驗(yàn)。今天人們很快就找到了信息，卡片服務(wù)起來(lái)相當(dāng)不錯(cuò)，無(wú)論設(shè)備和偉大的用戶(hù)體驗(yàn)。

作者：道士

來(lái)源：不知道UI（公眾號(hào)ID：buzhidaoui）

版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會(huì)明確標(biāo)注作者和來(lái)源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645