如何利用“卡片式設(shè)計(jì)”提升用戶體驗(yàn)？創(chuàng)新互聯(lián)告訴您：

一、卡片是什么?

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

1、杰出的隱喻效果

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

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

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

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

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

3、視覺上賞心悅目

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

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

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

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

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

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

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

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

三、卡片的長(zhǎng)處

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

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

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

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

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

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

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

3、直觀的可操作性

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

四、在哪里運(yùn)用?

1、信息流

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

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

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

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

3、對(duì)話框

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

不論你挑選哪一項(xiàng)，都只要一個(gè)動(dòng)作

4、作業(yè)流

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

五、不要運(yùn)用卡片的當(dāng)?shù)?/h2>

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

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

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

2、大的屏幕尺度

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

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

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

六、結(jié)論

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

網(wǎng)站標(biāo)題：如何利用“卡片式設(shè)計(jì)”提升用戶體驗(yàn)？
標(biāo)題URL：http://jinyejixie.com/news/172546.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有用戶體驗(yàn)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)