卡片是信息的小容器,在平衡美學(xué)與簡(jiǎn)單易用的設(shè)計(jì)中,它幾乎成了默認(rèn)的選項(xiàng)。它是由Pinterest 和Facebook最先引入的,如今眾多的行業(yè)都有它的足跡。
由Pinterest 引入這樣的概念,即與同一個(gè)主題相關(guān)的內(nèi)容都可以用一個(gè)容器被組織在一起
恰當(dāng)使用的卡片可以提高應(yīng)用的用戶體驗(yàn)。本文將融入實(shí)例詳細(xì)介紹5種有用的卡片使用方法。
1.遵循一個(gè)原則“一張卡片,一個(gè)主題”
一張卡片的所有內(nèi)容都應(yīng)與該卡片的主題相關(guān)。設(shè)計(jì)一張卡片時(shí)可以包含多個(gè)元素,但是每一張卡片應(yīng)集中表現(xiàn)一個(gè)信息或者內(nèi)容,這樣用戶在使用時(shí)就有機(jī)會(huì)選擇你所表達(dá)內(nèi)容的某些部分進(jìn)行使用或者分享。
一個(gè)格子(卡片)即為一個(gè)交互區(qū)域
2.使整個(gè)卡片可被點(diǎn)擊
遵循費(fèi)茨定律并允許用戶點(diǎn)擊/輕擊卡片的任何位置,而不是其上面的文本鏈接或者圖片。更大的點(diǎn)擊區(qū)域可以顯著的提升觸摸屏及使用鼠標(biāo)設(shè)備的可用性。
小技巧:使卡片在視覺(jué)上看起來(lái)可點(diǎn)擊很重要,給它加上輕微的投影來(lái)表現(xiàn)它的深度是個(gè)不錯(cuò)的方法。
給卡片加上輕微的投影以提示整個(gè)卡片是可以點(diǎn)擊的 。引用:nngroup的研究
3.使卡片視覺(jué)上看起來(lái)賞心悅目
能使卡片成為好的設(shè)計(jì)并具有良好的可用性,需運(yùn)用一點(diǎn)美學(xué)知識(shí)來(lái)優(yōu)化卡片,使卡片看起來(lái)似曾相識(shí)但卻不乏創(chuàng)意。
引用:Piper Lawson
在實(shí)際設(shè)計(jì)卡片時(shí),請(qǐng)注意以下內(nèi)容:
圖片
強(qiáng)調(diào)圖片是卡片設(shè)計(jì)的重點(diǎn),研究表明,圖片可以提升設(shè)計(jì)。因此,使用圖片可以使卡片的設(shè)計(jì)更加吸引用戶。
引用:Dave Gamache
陰影與漸變
投影與漸變的使用能夠大大幫助用戶將卡片與實(shí)際物理認(rèn)知的卡片產(chǎn)生聯(lián)系, 但要謹(jǐn)慎使用:如果將投影與漸變運(yùn)用到卡片的各個(gè)角落,那卡片的物理實(shí)體感覺(jué)便被毀了。
與撲克牌相似的圓角卡片設(shè)計(jì)。引用:Material Design
文字
也可以通過(guò)運(yùn)用文字來(lái)吸引用戶??ㄆ系乃袃?nèi)容都應(yīng)易讀且容易理解,保證設(shè)計(jì)最大程度的可讀性,可通過(guò):
·選用簡(jiǎn)單的字體以及容易閱讀的配色方案(文字在純色背景上以足夠的對(duì)比度顯示時(shí)最易讀)。
·字體也應(yīng)有所限制,對(duì)于大多數(shù)卡片設(shè)計(jì)來(lái)說(shuō),一種字體就足夠了。
小技巧:無(wú)襯線字體與正常字體一起可以很好的展示卡片內(nèi)容。
引用:maconprinting
4.限制卡片上的內(nèi)容
一張卡片通常擁有簡(jiǎn)短內(nèi)容并作為提供更多信息的入口,而不是將所有細(xì)節(jié)都暴露于卡片之上。若將大量?jī)?nèi)容嘗試放置在一張卡片上時(shí),卡片則要么變得更寬,要么變得更長(zhǎng),如此卡片便看起來(lái)不再像卡片了,它也失去了作為卡片的喻意。
下圖是基于卡片的界面設(shè)計(jì)舉例。界面中央的那張卡片的問(wèn)題便是內(nèi)容過(guò)多,導(dǎo)致很難對(duì)卡片內(nèi)容進(jìn)行快速掃描。
引用:Piotr Adam Kwiatkowski
5. 運(yùn)用動(dòng)畫及動(dòng)效的優(yōu)勢(shì)
正確合理的使用動(dòng)畫可以很大程度的提高用戶體驗(yàn)。它能夠幫助用戶適應(yīng)卡片類的界面并對(duì)不同狀態(tài)的卡片從視覺(jué)上建立關(guān)聯(lián)。
視覺(jué)提示
視覺(jué)上的提示能夠幫助用戶更好的理解如何與他們的界面進(jìn)行交互。這類型的動(dòng)畫可以被運(yùn)用來(lái)展示設(shè)計(jì)的某些特定功能的操作方法。
導(dǎo)航功能的提示展示。引用:Barthelemy Chalvet
視覺(jué)反饋
視覺(jué)反饋在界面設(shè)計(jì)中極其重要,因?yàn)樗c用戶潛在的預(yù)期相符。在實(shí)際生活中,當(dāng)我們與實(shí)際物體交互,我們會(huì)收到來(lái)自他們的反饋,這與人們的期望是一致的。對(duì)于桌面類應(yīng)用或者網(wǎng)站,可通過(guò)提供鼠標(biāo)懸停時(shí)的視覺(jué)反饋來(lái)表示當(dāng)前這個(gè)元素是被激活的,而動(dòng)畫則增加了元素的可發(fā)現(xiàn)性,同時(shí)也使體驗(yàn)變得更有趣。
給卡片運(yùn)用鼠標(biāo)懸停的動(dòng)畫。 引用:uxpin
鼠標(biāo)懸停也可以提供一些功能選項(xiàng)。如下圖,鼠標(biāo)懸停時(shí)添加了彩色邊框,進(jìn)行回復(fù)、轉(zhuǎn)發(fā)或者刪除該信息的功能。
引用:Roman Shkolny
放大
放大的動(dòng)效提供了在詳情視圖與縮略圖直接的切換:用戶選擇一張卡片,可以馬上看到與其相關(guān)的具體信息。該動(dòng)效的難點(diǎn)是讓用戶感知到他們當(dāng)前停留的頁(yè)面。
動(dòng)效可以幫助你將詳情頁(yè)面與縮略圖關(guān)聯(lián)起來(lái)。引用:Charies Patterson
結(jié)語(yǔ)
卡片是新的具有創(chuàng)造性的畫布,它不僅僅是看起來(lái)的樣子,它是一種能夠創(chuàng)造豐富內(nèi)容的非常靈活布局模式。
-完-