規劃師給你科普什么是卡片規劃

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

1. 遵從「一卡一概念」準則

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

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

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

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

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

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

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

當開端著手規劃卡片時，你應當特別注意以下幾個方面：

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

暗影和突變

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

4. 約束卡片內容篇幅

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

5. 參加動畫和動效

       動畫如果運用得好，能夠大大提高用戶體會。其能夠協助用戶在根據卡片的界面中更好地定位，并樹立不同卡片狀態之間的視覺相關。

視覺提示

視覺提示協助用戶更好地了解怎么與界面進行交互。當需求向用戶展示某些詳細功用怎么操作時，它就顯得頗為有用了。展示導航功用的提示。

視覺反應

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

擴大

擴大能夠呈現從原圖到細節視圖的過渡：用戶選中卡片就能夠直接看到相關詳細信息。不過要注意，要確認讓用戶感覺他們仍在相同布景框架下進行交互。

動畫能夠將縮略圖和細節視圖相相關。

結束語

      卡片是界面規劃領域創新型新元素。它不僅僅是一張卡片，它仍是發明優質內容和規劃最佳用戶體會最靈活的布局方式之一。