如何利用“卡片式設(shè)計”提升用戶體驗？海淘科技告訴您：

一、卡片是什么?

卡片一般是指那些包括必定圖像和文本信息在內(nèi)的一個長方形，作為指向更多詳細(xì)信息的一個進(jìn)口?，F(xiàn)如今，在確保界面具有優(yōu)異可用性的同時，卡片式的規(guī)劃乃至變成了平衡界面美學(xué)的默認(rèn)做法。由于卡片很便利的顯示出界面中的內(nèi)容由不一樣的元素構(gòu)成的。

1、杰出的隱喻效果

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

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

2、杰出的內(nèi)容安排

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

Facebook 充分運用卡片式的規(guī)劃將每個事情的概要信息打包到卡片中?？ㄆ降囊?guī)劃規(guī)劃恰是在比方 Facebook 這么的巨頭的引領(lǐng)下變得盛行開來。

3、視覺上賞心悅目

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

無妨看看 Dribble——一個聞名的專心于展示規(guī)劃師著作的社區(qū)網(wǎng)站，不得不說，卡片式的規(guī)劃的確是出現(xiàn)這類信息的最適宜的辦法。

二、怎么規(guī)劃卡片?

在一樣的規(guī)劃下，卡片應(yīng)當(dāng)堅持寬度不變，但高度可以不一樣。其最大高度受限于地點平臺中可用空間的最大高度，不過這個高度也可臨時拓展(比方，拓展顯示出談?wù)搮^(qū))。

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

從規(guī)劃美學(xué)的視點來看，卡片應(yīng)當(dāng)具有必定的圓角和暗影。由于圓角使得卡片看起來更像是一個內(nèi)容塊，而暗影則能體現(xiàn)出層級深度的效果。

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

另外，咱們也可以運用動畫和動態(tài)規(guī)劃。

三、卡片的長處

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

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

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

卡片集包括不一樣類型內(nèi)容的卡片

2、可面向呼應(yīng)式的規(guī)劃

關(guān)于卡片最主要的作業(yè)是它們簡直是可以無限變形的?？ㄆ降囊?guī)劃在桌面電腦和移動設(shè)備都作業(yè)杰出，由于它以更易于用戶消化的辦法向其出現(xiàn)內(nèi)容。正由于卡片作為一個內(nèi)容容器，能很簡單的擴(kuò)大或減小，所以關(guān)于呼應(yīng)式的規(guī)劃來說，卡片是一個十分適宜的挑選。

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

3、直觀的可操作性

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

四、在哪里運用?

1、信息流

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

2、用于發(fā)現(xiàn)感興趣的內(nèi)容

卡片答應(yīng)有關(guān)的內(nèi)容顯而易見，答應(yīng)用戶發(fā)現(xiàn)他們感興趣的內(nèi)容?？纯?Tinder 的卡片方法：你在向左滑動或向右滑動的時分，本來即是在尋找契合你品嘗的人。

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

3、對話框

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

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

4、作業(yè)流

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

五、不要運用卡片的當(dāng)?shù)?

1、同種(同類)內(nèi)容

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

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

在圖像庫中運用卡片也是不必要的，此刻選用網(wǎng)格這種潔凈輕量的辦法會是非常好的挑選，如下例中：

2、大的屏幕尺度

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

3、從頭規(guī)劃現(xiàn)有的運用程序

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

六、結(jié)論

我希望經(jīng)過這篇文章，你可以了解到為何卡片式的規(guī)劃會越來越盛行開來。這一趨勢帶給人們的那些體驗。由于卡片不但閱覽起來不吃力，它們更是在創(chuàng)立共同的用戶體驗時最為靈敏的規(guī)劃辦法之一?，F(xiàn)如今，大家在內(nèi)容花費面前更重視迅速的找到滿足的內(nèi)容，而卡片已然能極好的起到效果，并且app界面設(shè)計與網(wǎng)頁設(shè)計都不受設(shè)備影響，這不就是最好的挑選。想知道更多的網(wǎng)頁設(shè)計與網(wǎng)頁制作文章，可直接點擊進(jìn)行跳轉(zhuǎn)。