目前“卡片式規(guī)劃”在越來越遭到規(guī)劃師的青睞，尤其是在APP的界面規(guī)劃上�！翱ㄆ�式規(guī)劃”已經(jīng)漸漸進(jìn)入到各行各業(yè)之中，咱們耳熟能詳?shù)膌inkedin和facebook都是在用卡片式規(guī)劃。那么什么是卡片式規(guī)劃，卡片式規(guī)劃又會帶來怎樣的用戶體會呢�，F(xiàn)在就由規(guī)劃師給咱們科普一下吧。

1. 遵從「一卡一概念」準(zhǔn)則

      卡片的一切內(nèi)容只能和一個主題相關(guān)。一個卡片能夠包含多種元素，但應(yīng)該首要表現(xiàn)同類信息或內(nèi)容。這樣用戶才能更輕松地挑選他們所喜歡或愿意分享的內(nèi)容。

一個模塊(或卡片)「包含」一次用戶交互。

2. 保證整個卡片都可點擊

     遵從菲茲規(guī)律(Fitts’s Law)，要讓用戶能夠點擊或觸擊卡片的任何部分，而不只是文字鏈接或圖片。無論在移動端的觸擊屏幕，仍是需求鼠標(biāo)操作的主桌面端，有相對大面積的觸擊區(qū)都可大大提高卡片的可用性。菲茲規(guī)律是人機(jī)交互領(lǐng)域一個非常重要的法則。其基本觀念是，當(dāng)一個人用鼠標(biāo)來移動鼠標(biāo)指針時，屏幕上的方針其某些特征會使得點擊變得輕松或困難。方針離得越遠(yuǎn)，抵達(dá)就越費勁;方針越小，就越難點中。

小提示：推薦運用一點暗影來呈現(xiàn)深度，讓咱們知道卡片是可點擊的。

3. 保證卡片的視覺享受感

      要說什么樣的卡片才是成功的，那必定是有杰出規(guī)劃和可用性的卡片了。對卡片稍加打磨，參加少許美學(xué)特征，卡片會讓人感覺了解，一起構(gòu)思十足。

當(dāng)開端著手規(guī)劃卡片時，你應(yīng)當(dāng)特別注意以下幾個方面：

     根據(jù)卡片的規(guī)劃一般首要依托視覺規(guī)劃，而運用很多圖片便是卡片規(guī)劃的一大亮點。研討發(fā)現(xiàn)已證實，圖片能夠提高網(wǎng)頁或 app 的全體規(guī)劃。所以，參加圖片也使得根據(jù)卡片的規(guī)劃愈加引人入勝。

暗影和突變

      參加暗影和突變這兩種元素，能夠有效地讓用戶將你規(guī)劃的卡片與現(xiàn)實生活中的對應(yīng)什物聯(lián)絡(luò)在一起。但在規(guī)劃時，一定要仔細(xì)考慮怎么運用這兩種元素：如果卡片四周和旮旯都加上暗影，要再想讓用戶將它與現(xiàn)實生活中的對應(yīng)什物聯(lián)絡(luò)在一起就有點難了。帶有圓角的卡片從視覺上看來就像是一張撲克牌。當(dāng)然，要想吸引用戶注意力，還能夠經(jīng)過排版來實現(xiàn)。卡片一切內(nèi)容都應(yīng)該簡略易懂，無妨試試從最大可讀性角度來規(guī)劃：挑選簡略的字體和易于閱覽的配色方案(文本內(nèi)容在純色布景下，且布景色彩和文字色彩有鮮明對比的，這樣的文本才是最清晰易讀的)。
盡量操控字體的種類數(shù)量。關(guān)于絕大多數(shù)狀況而言，單一的字體足矣。
小提示：卡片主內(nèi)容文本，選用 sans-serif 字體正常粗細(xì)的作用非常好。

4. 約束卡片內(nèi)容篇幅

      卡片一般不大，其作為用戶了解更多細(xì)節(jié)信息的「入口」，所以它本身不需求承載過多細(xì)節(jié)內(nèi)容。當(dāng)你試圖在卡片里添加很多內(nèi)容，導(dǎo)致卡片變得過寬或過長，那它就會失去其原有的「擬物」作用。

5. 參加動畫和動效

       動畫如果運用得好，能夠大大提高用戶體會。其能夠協(xié)助用戶在根據(jù)卡片的界面中更好地定位，并樹立不同卡片狀態(tài)之間的視覺相關(guān)。

視覺提示

視覺提示協(xié)助用戶更好地了解怎么與界面進(jìn)行交互。當(dāng)需求向用戶展示某些詳細(xì)功用怎么操作時，它就顯得頗為有用了。展示導(dǎo)航功用的提示。

視覺反應(yīng)

視覺反應(yīng)在界面規(guī)劃中適當(dāng)重要，因為它能直接和用戶的自然希望相相關(guān)。在現(xiàn)實生活中，各種物品一般都會對咱們的行為作出反應(yīng)，這也是大眾習(xí)以為常的反應(yīng)。比方電腦的開關(guān)按鈕，當(dāng)你按下開關(guān)鍵時，你能夠感遭到按鈕被按下的力氣反應(yīng)，一起還有聲音反應(yīng)。在電腦端，你能夠經(jīng)過「懸停作用」來顯示相關(guān)元素的交互行為。懸停動畫能夠增加功用的可發(fā)現(xiàn)性，一起，也運用戶體會愈加風(fēng)趣。在卡片中參加懸停動畫。運用懸停作用還能夠激活更多選項。

擴(kuò)大

擴(kuò)大能夠呈現(xiàn)從原圖到細(xì)節(jié)視圖的過渡：用戶選中卡片就能夠直接看到相關(guān)詳細(xì)信息。不過要注意，要確認(rèn)讓用戶感覺他們?nèi)栽谙嗤�布景框架下進(jìn)行交互。

動畫能夠?qū)⒖s略圖和細(xì)節(jié)視圖相相關(guān)。

結(jié)束語

      卡片是界面規(guī)劃領(lǐng)域創(chuàng)新型新元素。它不僅僅是一張卡片，它仍是發(fā)明優(yōu)質(zhì)內(nèi)容和規(guī)劃最佳用戶體會最靈活的布局方式之一。