網(wǎng)站建設中如何利用“卡片式設計”提升用戶(hù)體驗發(fā)布者：本站     時(shí)間：2022-03-17 15:03:42

一、卡片是什么？
卡片通常是指那些包含一定圖片和文本信息在內的一個(gè)長(cháng)方形，作為指向更多詳細信息的一個(gè)入口?，F如今，在保證界面具有優(yōu)秀可用性的同時(shí)，卡片式的設計甚至成為了平衡界面美學(xué)的默認做法。因為卡片很方便的顯示出界面中的內容由不同的元素組成的。

如何利用“卡片式設計”提升用戶(hù)體驗

1、杰出的隱喻效果
因為看起來(lái)如同真實(shí)世界中的卡片一樣，在界面設計中的卡片具有非常棒的隱喻效果。其實(shí)，在移動(dòng)設備出現之前，卡片已經(jīng)遍布我們周身——商業(yè)名片、棒球卡片、撲克牌等等，它已然成為一個(gè)應用及其廣泛的實(shí)體性質(zhì)的交互模型。因此，對于用戶(hù)來(lái)講，他們能更直觀(guān)地意識到界面設計中的這些卡片如同實(shí)體卡片一樣都代表一定的信息。

在快速的傳遞信息時(shí)，卡片是一個(gè)優(yōu)秀的工具。拿棒球卡片來(lái)講，你需要了解的棒球運動(dòng)員的基本信息就包含在一張小卡片的正反兩面。

如何利用“卡片式設計”提升用戶(hù)體驗

2、良好的內容組織
卡片在占用較少屏幕空間的情況下將信息有組織的劃分到不同的區域中。類(lèi)似于文本段落是對語(yǔ)句的組織結果，卡片聚集多樣的信息形成一個(gè)連貫的內容體。

如何利用“卡片式設計”提升用戶(hù)體驗

Facebook 充分利用卡片式的設計將每個(gè)事件的概要信息打包到卡片中?？ㄆ降牟季衷O計正是在諸如 Facebook 這樣的巨頭的引領(lǐng)下變得流行開(kāi)來(lái)。

3、視覺(jué)上賞心悅目
基于卡片式的設計通常都嚴重依賴(lài)于其視覺(jué)效果。而卡片本身又對圖片有很強的依賴(lài)性。多項研究都已經(jīng)指出圖片確實(shí)能夠提升網(wǎng)站或應用程序的設計效果和瀏覽體驗，因為圖片能夠快速有效地吸引用戶(hù)的注意力。因此，在卡片中如果能突出使用圖片，那自然會(huì )對用戶(hù)產(chǎn)生更強的吸引力。

不妨看看 Dribble——一個(gè)知名的專(zhuān)注于展示設計師作品的社區網(wǎng)站，不得不說(shuō)，卡片式的設計確實(shí)是呈現這類(lèi)信息的最合適的方式。

如何利用“卡片式設計”提升用戶(hù)體驗

二、如何設計卡片？
在相同的布局下，卡片應該保持寬度不變，但高度可以不同。其最大高度受限于所在平臺中可用空間的最大高度，不過(guò)這個(gè)高度也可臨時(shí)擴展（比如，擴展顯示出評論區）。

如何利用“卡片式設計”提升用戶(hù)體驗

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

 

從設計美學(xué)的角度來(lái)看，卡片應該具有一定的圓角和陰影。因為圓角使得卡片看起來(lái)更像是一個(gè)內容塊，而陰影則能體現出層級深度的效果。

如何利用“卡片式設計”提升用戶(hù)體驗

這些元素在不分散用戶(hù)注意力的前提下為設計增添了一些光彩，它們也使得卡片跟頁(yè)面間看起來(lái)有層次感。

另外，我們也可以利用動(dòng)畫(huà)和動(dòng)態(tài)設計。

如何利用“卡片式設計”提升用戶(hù)體驗

三、卡片的優(yōu)點(diǎn)
如果應用得當，卡片可以在一定方面提升應用程序的用戶(hù)體驗。因為它們的功能特性和形狀，它們本身成為一種使用上更具直觀(guān)性的吸引人的界面元素。

1、摘要性的格式易于消化
你應該已經(jīng)知道現如今是一個(gè)內容為王的時(shí)代，而卡片幾乎可以被用來(lái)容納任何形式的信息，其摘要性的信息屬性也易于用戶(hù)快速消化。 就這一點(diǎn)而言，用戶(hù)通過(guò)卡片可以很容易地訪(fǎng)問(wèn)到他們感興趣的內容。進(jìn)而讓用戶(hù)愿意參與到對卡片的瀏覽和操作中來(lái)。

如何利用“卡片式設計”提升用戶(hù)體驗

卡片集包含不同類(lèi)型內容的卡片

2、可面向響應式的設計
關(guān)于卡片最重要的事情是它們幾乎是可以無(wú)限變形的?？ㄆ降脑O計在桌面電腦和移動(dòng)設備都工作良好，因為它以更易于用戶(hù)消化的方式向其呈現內容。正因為卡片作為一個(gè)內容容器，能很容易的放大或縮小，所以對于響應式的設計來(lái)說(shuō)，卡片是一個(gè)非常合適的選擇。 

最后但同樣重要的一點(diǎn)是，卡片在多設備間能創(chuàng )造出一個(gè)一致獨立的美學(xué)效果，這就是為什么它能在不同的設備間如此容易的創(chuàng )建出一致的體驗的原因。

如何利用“卡片式設計”提升用戶(hù)體驗

3、直觀(guān)的可操作性
卡片的動(dòng)作應該是面向手指的。對于移動(dòng)端的應用程序來(lái)說(shuō)，這是卡片之所以流行起來(lái)的一個(gè)關(guān)鍵原因。這些卡片跟實(shí)體的卡片按照相同的方式起作用，讓用戶(hù)感受到很舒服的體驗過(guò)程。用戶(hù)不需要再去思考究竟該如何操作卡片。 他們喜歡卡片的這種簡(jiǎn)潔性，并能夠直觀(guān)的理解出翻閱一張卡片就是查看更多信息，滑動(dòng)則是切換不同的卡片。

如何利用“卡片式設計”提升用戶(hù)體驗

四、在哪里使用？
1、信息流
卡片出現在一個(gè)信息流中時(shí)，便能夠創(chuàng )建出一系列符合自然時(shí)間軸的事件。想想看 Facebook 在新的信息流中是如何使用卡片來(lái)描述一個(gè)事件概述的。雖然總的信息流是無(wú)底限的，但是每一個(gè)卡片都是互相獨立，且包含了一定的可供操作的內容。

如何利用“卡片式設計”提升用戶(hù)體驗

2、用于發(fā)現感興趣的內容
卡片允許相關(guān)的內容不言而喻，允許用戶(hù)發(fā)現他們感興趣的內容?？纯?Tinder 的卡片模式：你在向左滑動(dòng)或向右滑動(dòng)的時(shí)候，其實(shí)就是在尋找符合你品味的人。

如何利用“卡片式設計”提升用戶(hù)體驗

Pinterest 在信息的動(dòng)態(tài)中使用到大頭針（用戶(hù)找到自己感興趣的內容可以收藏），吸引用戶(hù)在不停的瀏覽中上癮。

如何利用“卡片式設計”提升用戶(hù)體驗

3、對話(huà)框
既然卡片就是一個(gè)內容容器，那么它們也可以很好的代表動(dòng)作。一個(gè)卡片里面的基本動(dòng)作就是卡片本身。 想想看 Apple 設備上的 AirDrop ，當你收到一個(gè)數據傳輸請求的時(shí)候，一個(gè)卡片會(huì )彈出來(lái)提示你是同意還是拒絕。

如何利用“卡片式設計”提升用戶(hù)體驗

不管你選擇哪一項，都只有一個(gè)動(dòng)作

4、工作流
卡片很容易將一定范圍的任務(wù)進(jìn)行歸類(lèi)。拿 Trello 來(lái)舉例說(shuō)明再適合不過(guò)，從 Kanban 里面看，所有的管理項都是完全基于卡片的，每一個(gè)板子了都填充著(zhù)卡片，而每個(gè)卡片都代表一個(gè)單獨的任務(wù)。 

如何利用“卡片式設計”提升用戶(hù)體驗

五、不要使用卡片的地方
1、同種（同類(lèi)）內容
對于那些沒(méi)有太多動(dòng)作的同種（同類(lèi)）內容而言，相比于卡片式的設計，使用列表（網(wǎng)格）的展現形式是更合適的方法。

如何利用“卡片式設計”提升用戶(hù)體驗

左：在這里使用卡片分散了用戶(hù)快速瀏覽的注意力

在圖片庫中使用卡片也是不必要的，此時(shí)采用網(wǎng)格這種干凈輕量的方式會(huì )是更好的選擇，如下例中：

如何利用“卡片式設計”提升用戶(hù)體驗

2、大的屏幕尺寸
卡片式的信息展現形式可能在小屏幕上會(huì )非常不錯，在大屏上的話(huà)單就其視覺(jué)效果來(lái)講，也還是很棒，不過(guò)對于用戶(hù)的閱讀理解速度就會(huì )帶來(lái)很糟糕的影響了。比如大屏上的 Pinterest ：

如何利用“卡片式設計”提升用戶(hù)體驗

3、重新設計現有的應用程序
如果按著(zhù)文中這個(gè)新的視覺(jué)角度來(lái)看，那些原本覺(jué)得你的應用程序還挺易用的用戶(hù)可能就不會(huì )買(mǎi)你的賬了。 你應該嘗試從用戶(hù)那里獲得反饋，搞清楚他們想看到的東西。有了反饋后，你可以進(jìn)行設計修改甚至重新設計，然后看看在用戶(hù)那里帶來(lái)的變化。