卡片是一個(gè)承載著圖片、文字、提示信息和一些交互動(dòng)作的圖形，作為指向更多詳細(xì)信息的一個(gè)入口，執(zhí)行相應(yīng)的操作（點(diǎn)擊或者一些手勢(shì)）就可以進(jìn)入到另一個(gè)詳情或者分類(lèi)信息集合頁(yè)面。那在電視端，卡片設(shè)計(jì)如何進(jìn)行？

什么是卡片？

在日常生活中，一些常用的銀行卡、名片、VIP卡、撲克牌等就是一張卡片，這些卡片主要是用來(lái)傳遞卡片本身的一些信息。例如：使用者可以從銀行卡上獲取卡片的所屬銀行、卡號(hào)等信息，可以從名片中知道卡片所屬人以及此人的一些基本信息等。

那么在日常使用的App、web、電視中，卡片是什么？

卡片是一個(gè)承載著圖片、文字、提示信息和一些交互動(dòng)作的圖形，作為指向更多詳細(xì)信息的一個(gè)入口，執(zhí)行相應(yīng)的操作（點(diǎn)擊或者一些手勢(shì)）就可以進(jìn)入到另一個(gè)詳情或者分類(lèi)信息集合頁(yè)面。

一些常見(jiàn)的卡片如下圖：

卡片式設(shè)計(jì)是如何進(jìn)入大眾視野的？

首先，卡片式設(shè)計(jì)流行起來(lái)主要是得益于圖片分享網(wǎng)站Pinterest首先在其App上采用卡片式設(shè)計(jì)。不久后，F(xiàn)acebook和Twitter在自己的桌面端和移動(dòng)網(wǎng)站都采用了卡片式布局，很快這種設(shè)計(jì)方式被大眾所熟知。

在2006年微軟設(shè)計(jì)團(tuán)隊(duì)，受到交通局巴士站牌機(jī)場(chǎng)和地鐵的指示牌的啟發(fā)，設(shè)計(jì)了基于卡片式設(shè)計(jì)的最早代表metro UI。

卡片式設(shè)計(jì)的優(yōu)勢(shì)

1. 能將不同大小、不同媒介形式的內(nèi)容單元以統(tǒng)一的方式進(jìn)行混合呈現(xiàn)，并且在一個(gè)界面中可以完美的契合，并且整齊有規(guī)律。最常見(jiàn)的就是圖文混排，既要做到視覺(jué)上盡量一致，又要平衡文字和圖片的強(qiáng)弱，這時(shí)卡片設(shè)計(jì)經(jīng)常有奇效。
2. 能在屏幕尺寸雜多的情況下和響應(yīng)式設(shè)計(jì)完美配合，配合響應(yīng)式的斷點(diǎn)設(shè)計(jì)，能夠在不同屏幕之間完美的展示信息。
3. 在一張卡片能承載更多的信息，包括圖片、人物信息、提示信息等，并且卡片與之間有很好的分割作用，不再需要線或者是空間來(lái)區(qū)分不同信息部分。
4. 自由組合，特別是在瀑布流的盛行的時(shí)代，不同大小的卡片可以完美放在頁(yè)面中展示。
5. 同一部分內(nèi)容承載更多的操作。

前文初步的了解了卡片的是什么以及有什么優(yōu)勢(shì)，接下來(lái)主要是介紹卡片在電視中運(yùn)用和卡片的設(shè)計(jì)方法。

首先來(lái)了解一下國(guó)內(nèi)的主流電視廠商的launcher頁(yè)設(shè)計(jì)，下圖主要是小米、樂(lè)視、康佳、微鯨、創(chuàng)維、海信等6家電視的主界面，可以看到系統(tǒng)中的信息呈現(xiàn)都是采用卡片的設(shè)計(jì)方式，選中卡片后按【OK】鍵跳轉(zhuǎn)到相應(yīng)內(nèi)容的詳情頁(yè)。

電視系統(tǒng)卡片的分類(lèi)

從上圖中可以知道：卡片作為電視系統(tǒng)的主要構(gòu)成部分，并且作為承載電視信息的載體，對(duì)信息的傳達(dá)起到了很大的作用，設(shè)計(jì)的好壞直接影響到了整個(gè)電視系統(tǒng)的質(zhì)量好壞，所以對(duì)于卡片的的表現(xiàn)形式研究是有必要的。

體驗(yàn)了眾多電視之后，進(jìn)行歸納可以將卡片分為以下4種類(lèi)型：

1. 功能入口，包括系統(tǒng)功能（如信源、設(shè)置等）、搜索、歷史記錄；
2. 熱門(mén)推薦，主要包含當(dāng)前熱推的影片和音樂(lè)等，信息集合入口，主要包括排行榜、分類(lèi)入口、專(zhuān)題入口、熱推榜單；
3. 人物介紹入口，如導(dǎo)演、演員信息入口；
4. 應(yīng)用入口，包含了電視內(nèi)置應(yīng)用和第三方應(yīng)用入口。

下方的4個(gè)圖分別為5種類(lèi)型的卡片舉例，分別為本地播放入口、單片推薦、音樂(lè)排行版、演員信息入口、應(yīng)用入口。

卡片形狀

常見(jiàn)的卡片的形狀一般為矩形，比例繁多，此外還有圓形卡片和異形卡片。在電視系統(tǒng)中，2016年之前異形卡片和圓形卡片較少見(jiàn)，異形卡片比較常見(jiàn)與web，自從小米的電視的patchwall上線后，出現(xiàn)了很多異形卡片和圓形卡片。因此很多電視廠商紛紛效仿，預(yù)估2018年很多家的電視將會(huì)出現(xiàn)異形卡片。

異形卡片主要用于運(yùn)營(yíng)想特別推薦的影片上，當(dāng)焦點(diǎn)選中之后，人物和背景同時(shí)放大。但是人物放大的倍數(shù)比背景的高，更加突出人物，在電視端剛開(kāi)始出現(xiàn)這種效果的時(shí)候，從眾多卡片中脫穎而出，驚艷了不少人。

卡片所包含的元素

觀察了國(guó)內(nèi)的電視系統(tǒng)的卡片設(shè)計(jì)，可以發(fā)現(xiàn)：卡片中包含的元素主要有：背景圖片（或背景視頻）、主題元素、標(biāo)題、副標(biāo)題、提示信息（播放日期、更新日期、VIP、免費(fèi)、首播、獨(dú)播、熱播、大結(jié)局、推薦、新片、LOGO、評(píng)分、排名、）、集數(shù)、更新信息、標(biāo)志、圖標(biāo)、操作提示等內(nèi)容。

設(shè)計(jì)師需要根據(jù)卡片的特性（傳達(dá)的信息和執(zhí)行的功能）和運(yùn)營(yíng)需要表現(xiàn)的元素來(lái)設(shè)計(jì)卡片，一般都是選取以上元素的中2~5個(gè)信息來(lái)組成一個(gè)卡片，超過(guò)5個(gè)元素的卡片較少，因?yàn)榭ㄆ笮∮邢蓿绻粋€(gè)卡片內(nèi)承載的信息太多，會(huì)導(dǎo)致沒(méi)有重點(diǎn)，主次難以分開(kāi)，以至于表達(dá)不出實(shí)際要表達(dá)的效果，一般以3~5個(gè)元素為宜。

了解卡片的各項(xiàng)情況之后，接下來(lái)主要分析一下是如何根據(jù)卡片元素來(lái)設(shè)計(jì)卡片的？

功能入口卡片

主要包含系統(tǒng)功能（如信源、設(shè)置等）、搜索、歷史記錄等。入口類(lèi)一般包含的元素有卡片背景、圖標(biāo)、文字提示，下圖為常見(jiàn)的一些功能入口設(shè)計(jì)方式。

從圖中可以知道有多種設(shè)計(jì)方式，背景圖可以以純色、漸變色、海報(bào)主體、多內(nèi)容集合、顯示圖標(biāo)的一部分方式體現(xiàn)，文字可以直接顯示在卡片內(nèi)，比較直觀，也可以焦點(diǎn)選中之后才出現(xiàn)文字提示（如上圖無(wú)線投屏），可以根據(jù)上圖中無(wú)線投屏的方式設(shè)計(jì)。

但是在一些功能性較強(qiáng)，但是圖標(biāo)無(wú)法完全體現(xiàn)入口內(nèi)容意思的情況下，字體建議常駐。另外可以在卡片中增加一些背景圖案、漸變?yōu)榭ㄆw增色，如圖1和最后的搜索卡片。

熱門(mén)推薦，主要包含當(dāng)前熱推的影片和音樂(lè)等。

對(duì)于影片和音樂(lè)來(lái)說(shuō)，主要有單片推薦、專(zhuān)題推薦、分類(lèi)推薦等，針對(duì)不同的推薦方式，海報(bào)的表現(xiàn)形式不一致。

接下來(lái)分析單片影片卡片設(shè)計(jì)要點(diǎn)。

背景

卡片的背景通常有視頻截圖、劇照、主角人物的摳圖+自制背景、代表性人物（物品）特征4種，自制背景對(duì)設(shè)計(jì)師要求比較高，對(duì)于截屏、劇照和代表性人物（物品）特征處理難度降了很多。設(shè)計(jì)師可以根據(jù)需要展示的情節(jié)以及需要推廣的主體選擇合適的背景圖。

如下圖所示：

構(gòu)圖

根據(jù)卡片的比例來(lái)進(jìn)行構(gòu)圖，主要是1：1、N：1、1：N，圓形三種，圓形入口主要是作為人物的詳細(xì)入口和專(zhuān)輯入口。

對(duì)于1：1 和1：N卡片的重要人物居中顯示：卡片的主題或者是logo一般會(huì)放在卡片的下方有右邊。

對(duì)于N：1的卡片來(lái)說(shuō)，如果N相對(duì)較大，則主要人物主要是位于左側(cè)或是右側(cè)更多，主題則放在對(duì)應(yīng)位置的另一邊。

如下圖所示：

角標(biāo)

由下圖可知角標(biāo)的表現(xiàn)形式也是非常多的，經(jīng)過(guò)設(shè)計(jì)的字體，例如：紙的折角、矩形的兩端角標(biāo)（可以顯示的信息較多）、異形角標(biāo)、繪畫(huà)氣泡浮在卡片的上方，矩形不貼合疊在卡片的上方，類(lèi)似絲帶綁角效果，其實(shí)還有很多效果，視覺(jué)設(shè)計(jì)師可以根據(jù)要推廣的強(qiáng)度來(lái)做設(shè)計(jì)。

影片集合卡片設(shè)計(jì)要點(diǎn)

影片集合一般會(huì)選取主推影片的人物作為主角，一個(gè)或者多個(gè)主角作為卡片主要組成元素，背景通常為多種元素的復(fù)雜構(gòu)成，顏色會(huì)采用飽和度較高的顏色，比較搶眼，吸引用戶(hù)注意。主推主題的字體一般會(huì)經(jīng)過(guò)設(shè)計(jì)，顯得更加特別并且搶眼。

音樂(lè)卡片設(shè)計(jì)要點(diǎn)

在電視的卡片設(shè)計(jì)中，音樂(lè)的卡片的質(zhì)量相對(duì)于影片來(lái)說(shuō)是比較高的，相對(duì)來(lái)說(shuō)，體現(xiàn)方式也更加多。通常用色大膽，表現(xiàn)形式也相對(duì)特別一些。

主要表現(xiàn)手法有以下幾種方法：

1. 將主要人物放在一個(gè)特殊圖形中，例如字母、或者是自己設(shè)計(jì)的圖形；
2. 將主要人物、如影視劇照、截圖、主創(chuàng)人物作為背景，然后再添加一個(gè)彩色漸變；
3. 插畫(huà)的方式描繪主題要表現(xiàn)的元素，配上文藝的字體，這種卡片走文藝類(lèi)型；
4. 常規(guī)卡片：選取主創(chuàng)位于畫(huà)面中，增加設(shè)計(jì)過(guò)的字體，左右排版，這種卡片要點(diǎn)在于字體的設(shè)計(jì)和選擇人物的角度；
5. 榜單來(lái)的，一般會(huì)增加一個(gè)裝飾性圖，如Billboard卡片，然后根據(jù)這個(gè)裝飾圖標(biāo)衍生卡片。

下圖是一些音樂(lè)卡片設(shè)計(jì)：

分類(lèi)入口卡片的設(shè)計(jì)

分類(lèi)卡片組成元素相對(duì)于其他的卡片來(lái)說(shuō)較簡(jiǎn)單一些，設(shè)計(jì)樣式也是各式各樣，如下圖所示，總結(jié)常見(jiàn)的幾種方式：

1. 圖標(biāo)+文字，圖標(biāo)有幾種處理方式：一是直接放在界面中一邊，文字位于另外一邊；二是在背景卡片中增加和主題相對(duì)應(yīng)的圖標(biāo)疊加在卡片中，文字位于最上層；三是只顯示圖標(biāo)的部分，主要是有代表性的部分，可以通過(guò)部分辨別出圖標(biāo)代表的含義。
2. 將主要人物放到卡片中，添加飽和度較高的顏色遮罩遮罩，這種做法也挺常見(jiàn)的。
3. 提取主題的部分字體放大，部門(mén)疊加在背景中，卡片最上層擺放入口名稱(chēng)。

應(yīng)用入口卡片的設(shè)計(jì)

對(duì)于應(yīng)用入口來(lái)說(shuō)，設(shè)計(jì)相對(duì)簡(jiǎn)單，主要元素為應(yīng)用圖標(biāo)和應(yīng)用名稱(chēng)，排版方式主要是橫版、豎版和單個(gè)圖標(biāo)顯示。

下圖是一些App入口的設(shè)計(jì)方式，經(jīng)過(guò)分析可知，主要以下幾種方式：

1. 將圖標(biāo)放在卡片中央，焦點(diǎn)選中后出現(xiàn)應(yīng)用名稱(chēng)；
2. 將應(yīng)用放在放在卡片的中上方，應(yīng)用名稱(chēng)放在應(yīng)用圖標(biāo)下方居中對(duì)齊；
3. 和手機(jī)系統(tǒng)桌面的設(shè)計(jì)方式相似，將應(yīng)用圖標(biāo)作為卡片顯示在界面中，這種方式是相對(duì)美觀的，而且簡(jiǎn)潔，空間利用較充分；
4. 將圖標(biāo)和應(yīng)用信息放在一張卡片上，左右排版，左邊為應(yīng)用圖標(biāo)，右邊為卡片，適合應(yīng)用推廣頁(yè)的設(shè)計(jì)。

以上就是電視端卡片設(shè)計(jì)的分析，希望對(duì)這一塊薄弱的設(shè)計(jì)師有一點(diǎn)點(diǎn)的幫助。

總結(jié)

卡片的設(shè)計(jì)方式多種多樣，需要根據(jù)不同卡片入口設(shè)計(jì)不同的樣式，不要采用同一種設(shè)計(jì)方式，對(duì)于需要特別搶眼的卡片，顏色需要使用飽和度較高。不斷看一些好的作品，提升要做的就是不斷嘗試，才能知道什么才是最合適的方式。

感謝每一位觀看到此處的人，文章有點(diǎn)長(zhǎng)了。

作者：一戈何處，微信公眾號(hào)：一戈何處

本文由 @一戈何處 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議