如何利用“卡片式設計”提升用戶體驗？創新互聯告訴您：

一、卡片是什么?

卡片一般是指那些包括必定圖像和文本信息在內的一個長方形，作為指向更多詳細信息的一個進口。現如今，在確保界面具有優異可用性的同時，卡片式的規劃乃至變成了平衡界面美學的默認做法。由于卡片很便利的顯示出界面中的內容由不一樣的元素構成的。

1、杰出的隱喻效果

由于看起來好像實在國際中的卡片一樣，在界面規劃中的卡片具有十分棒的隱喻效果。本來，在移動設備出現之前，卡片現已遍及咱們周身——商業手刺、棒球卡片、撲克牌等等，它已然變成一個運用及其廣泛的實體性質的交互模型。因而，關于用戶來講，他們能更直觀地意識到界面規劃中的這些卡片好像實體卡片一樣都代表必定的信息。

在迅速的傳遞信息時，卡片是一個優異的東西。拿棒球卡片來講，你需求了解的棒球運動員的根本信息就包括在一張小卡片的正反兩面。

2、杰出的內容安排

卡片在占用較少屏幕空間的情況下將信息有安排的劃分到不一樣的區域中。類似于文本階段是對句子的安排成果，卡片聚集多樣的信息形成一個連接的內容體。

Facebook 充分運用卡片式的規劃將每個事情的概要信息打包到卡片中。卡片式的規劃規劃恰是在比方 Facebook 這么的巨頭的引領下變得盛行開來。

3、視覺上賞心悅目

根據卡片式的規劃一般都嚴重依賴于其視覺效果。而卡片自身又對圖像有很強的依賴性。多項研討都現已指出圖像的確可以提高網站或運用程序的規劃效果和閱覽體會，由于圖像可以迅速有效地招引用戶的注意力。因而，在卡片中假如能杰出運用圖像，那天然會對用戶發生更強的招引力。

無妨看看 Dribble——一個聞名的專心于展示規劃師著作的社區網站，不得不說，卡片式的規劃的確是出現這類信息的最適宜的辦法。

二、怎么規劃卡片?

在一樣的規劃下，卡片應當堅持寬度不變，但高度可以不一樣。其大高度受限于地點平臺中可用空間的大高度，不過這個高度也可臨時拓展(比方，拓展顯示出談論區)。

卡片可以是固定高度或可變高度

從規劃美學的視點來看，卡片應當具有必定的圓角和暗影。由于圓角使得卡片看起來更像是一個內容塊，而暗影則能體現出層級深度的效果。

這些元素在不渙散用戶注意力的條件下為規劃增添了一些光榮，它們也使得卡片跟頁面間看起來有層次感。

另外，咱們也可以運用動畫和動態規劃。

三、卡片的長處

假如運用妥當，卡片可以在必定方面提高運用程序的用戶體會。由于它們的功用特性和形狀，它們自身變成一種運用上更具直觀性的招引人的界面元素。

1、摘要性的格局易于消化

你應當現已知道現如今是一個內容為王的年代，而卡片簡直可以被用來包容任何辦法的信息，其摘要性的信息屬性也易于用戶迅速消化。 就這一點而言，用戶經過卡片可以很簡單地拜訪到他們感興趣的內容。進而讓用戶情愿參加到對卡片的閱覽和操作中來。

卡片集包括不一樣類型內容的卡片

2、可面向呼應式的規劃

關于卡片最主要的作業是它們簡直是可以無限變形的。卡片式的規劃在桌面電腦和移動設備都作業杰出，由于它以更易于用戶消化的辦法向其出現內容。正由于卡片作為一個內容容器，能很簡單的擴大或減小，所以關于呼應式的規劃來說，卡片是一個十分適宜的挑選。

最后但一樣主要的一點是，卡片在多設備間能創造出一個共同獨立的美學效果，這即是為何它能在不一樣的設備間如此簡單的創立出共同的體會的原因。

3、直觀的可操作性

卡片的動作應當是面向手指的。關于移動端的運用程序來說，這是卡片之所以盛行起來的一個關鍵原因。這些卡片跟實體的卡片依照一樣的辦法起效果，讓用戶感受到很舒暢的體會進程。用戶不需求再去考慮終究該怎么操作卡片。 他們喜愛卡片的這種簡潔性，并可以直觀的了解出翻閱一張卡片即是檢查更多信息，滑動則是切換不一樣的卡片。

四、在哪里運用?

1、信息流

卡片出現在一個信息流中時，便可以創立出一系列契合天然時刻軸的事情。想想看 Facebook 在新的信息流中是怎么運用卡片來描繪一個事情概述的。盡管總的信息流是無底限的，可是每一個卡片都是互相獨立，且包括了必定的可供操作的內容。

2、用于發現感興趣的內容

卡片答應有關的內容顯而易見，答應用戶發現他們感興趣的內容。看看 Tinder 的卡片方法：你在向左滑動或向右滑動的時分，本來即是在尋找契合你品嘗的人。

Pinterest 在信息的動態中運用到大頭針(用戶找到自己感興趣的內容可以保藏)，招引用戶在不斷的閱覽中上癮。+7

3、對話框

已然卡片即是一個內容容器，那么它們也可以極好的代表動作。一個卡片里邊的根本動作即是卡片自身。 想想看 Apple 設備上的 AirDrop ，當你收到一個數據傳輸懇求的時分，一個卡片會彈出來提示你是贊同仍是回絕。

不論你挑選哪一項，都只要一個動作

4、作業流

卡片很簡單將必定范圍的使命進行歸類。拿 Trello 來舉例說明再適宜不過，從 Kanban 里邊看，一切的管理項都是完全根據卡片的，每一個板子了都填充著卡片，而每個卡片都代表一個獨自的使命。

五、不要運用卡片的當地

1、同種(同類)內容

關于那些沒有太多動作的同種(同類)內容而言，相比于卡片式的規劃，運用列表(網格)的展示辦法是更適宜的辦法。

左：在這里運用卡片渙散了用戶迅速閱覽的注意力

2、大的屏幕尺度

卡片式的信息展示辦法可能在小屏幕上會十分不錯，在大屏上的話單就其視覺效果來講，也仍是很棒，不過關于用戶的閱覽了解速度就會帶來很差勁的影響了。比方大屏上的 Pinterest ：

3、從頭規劃現有的運用程序

假如按著文中這個新的視覺視點來看，那些本來覺得你的運用程序還挺易用的用戶可能就不會買你的賬了。 你應當嘗試從用戶那里取得反應，搞清楚他們想看到的東西。有了反應后，你可以進行規劃修正乃至從頭規劃，然后看看在用戶那里帶來的改變。

六、結論

我希望經過這篇文章，你可以了解到為何卡片式的規劃會越來越盛行開來。這一趨勢帶給人們的那些體驗。由于卡片不但閱覽起來不吃力，它們更是在創立共同的用戶體驗時最為靈敏的規劃辦法之一。現如今，大家在內容花費面前更重視迅速的找到滿足的內容，而卡片已然能極好的起到效果，并且APP界面設計與網頁設計都不受設備影響，這不就是最好的挑選。

新聞名稱：如何利用“卡片式設計”提升用戶體驗？
網頁鏈接：http://m.js-pz168.com/news46/172546.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有用戶體驗等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯