淺談電視端卡片設計
什麼是卡片
在日常生活中，一些常用的銀行卡、名片、VIP卡、撲克牌等就是一張卡片，這些卡片主要是用來傳遞卡片本身的一些信息。例如使用者可以從銀行卡上獲取卡片的所屬銀行、卡號等信息；可以從名片中知道卡片所屬人以及此人的一些基本信息等。
那麼在日常使用的App、web、電視中，卡片是什麼？卡片是一個承載著圖片、文字、提示信息和一些交互動作的圖形，作為指向更多詳細信息的一個入口，執行相應的操作（點擊或者一些手勢）就可以進入到另一個詳情或者分類信息集合頁面。一些常見的卡片如下圖：
卡片式設計是如何進入大眾視野的？
首先，卡片式設計流行起來主要是得益於圖片分享網站Pinterest首先在其App上採用卡片式設計。不久後，Facebook和Twitter在自己的桌面端和移動網站都採用了卡片式布局，很快這種設計方式被大眾所熟知。在2006年微軟設計團隊受到交通局巴士站牌機場和地鐵的指示牌的啟發，設計了基於卡片式設計的最早代表metro
UI。卡片式設計的優勢
1、能將不同大小、不同媒介形式的內容單元以統一的方式進行混合呈現，並且在一個界面中可以完美的契合，並且整齊有規律。最常見的就是圖文混排，既要做到視覺上盡量一致，又要平衡文字和圖片的強弱，這時卡片設計經常有奇效。
2、能在屏幕尺寸雜多的情況下和響應式設計完美配合，配合響應式的斷點設計，能夠在不同屏幕之間完美的展示信息。
3、在一張卡片能承載更多的信息，包括圖片、人物信息、提示信息等，並且卡片與之間有很好的分割作用，不再需要線或者是空間來區分不同信息部分。
4、自由組合，特別是在瀑布流的盛行的時代，不同大小的卡片可以完美放在頁面中展示。
5、同一部分內容承載更多的操作。
前文初步的了解了卡片的是什麼以及有什麼優勢，接下來主要是介紹卡片在電視中運用和卡片的設計方法。首先來了解一下國內的主流電視廠商的launcher頁設計，下圖主要是小米、樂視、康佳、微鯨、創維、海信等6家電視的主界面，可以看到系統中的信息呈現都是採用卡片的設計方式，選中卡片後按【OK】鍵跳轉到相應內容的詳情
頁。
電視系統卡片的分類
從上圖中可以知道，卡片作為電視系統的主要構成部分，並且作為承載電視信息的載體，對信息的傳達起到了很大的作用，設計的好壞直接影響到了整個電視系統的質量好壞，所以對於卡片的的表現形式研究是有必要的。體驗了眾多電視之後，進行歸納可以將卡片分為以下4種類型：
1、功能入口，包括系統功能（如信源、設置等）、搜索、歷史記錄;
2、熱門推薦，主要包含當前熱推的影片和音樂等，信息集合入口，主要包括排行榜、分類入口、專題入口、熱推榜單;
3、人物介紹入口，如導演、演員信息入口;
4、應用入口，包含了電視內置應用和第三方應用入口;
下方的4個圖分別為5種類型的卡片舉例，分別為本地播放入口、單片推薦、音樂排行版、演員信息入口、應用入口
卡片形狀
常見的卡片的形狀一般為矩形，比例繁多，此外還有圓形卡片和異形卡片，在電視系統中，2016年之前異形卡片和圓形卡片較少見，異形卡片比較常見與web，自從小米的電視的patchwall上線後，出現了很多異形卡片和圓形卡片，因此很多電視廠商紛紛效仿，預估2018年很多家的電視將會出現異形卡片。
異形卡片主要用於運營想特別推薦的影片上，當焦點選中之後，人物和背景同時放大，但是人物放大的倍數比背景的高，更加突出人物，在電視端剛開始出現這種效果的時候，從眾多卡片中脫穎而出，驚艷了不少人。
卡片所包含的元素
觀察了國內的電視系統的卡片設計，可以發現卡片中包含的元素主要有：背景圖片（或背景視頻）、主題元素、標題、副標題、提示信息（播放日期、更新日期、VIP、免費、首播、獨播、熱播、大結局、推薦、新片、LOGO、評分、排名、）、集數、更新信息、標誌、圖標、操作提示等內容設計師需要根據卡片的特性（傳達的信息和執行的功能）和運營需要表現的元素來設計卡片，一般都是選取以上元素的中2~5個信息來組成一個卡片，超過5個元素的卡片較少，因為卡片大小有限，如果一個卡片內承載的信息太多，會導致沒有重點，主次難以分開，以至於表達不出實際要表達的效果，一般以3~5個元素為宜。
了解卡片的各項情況之後，接下來主要分析一下是如何根據卡片元素來設計卡片的？
功能入口卡片
主要包含系統功能（如信源、設置等）、搜索、歷史記錄等。入口類一般包含的元素有卡片背景、圖標、文字提示，下圖為常見的一些功能入口設計方式。
從圖中可以知道有多種設計方式，背景圖可以以純色、漸變色、海報主體、多內容集合、顯示圖標的一部分方式體現，文字可以直接顯示在卡片內，比較直觀，也可以焦點選中之後才出現文字提示（如上圖無線投屏），可以根據上圖中無線投屏的方式設計。但是在一些功能性較強，但是圖標無法完全體現入口內容意思的情況下，字體建議常駐。另外可以在卡片中增加一些背景圖案、漸變為卡片整體增色，如圖1和最後的搜索卡片。
熱門推薦，主要包含當前熱推的影片和音樂等
對於影片和音樂來說，主要有單片推薦、專題推薦、分類推薦等，針對不同的推薦方式，海報的表現形式不一致
接下來分析單片影片卡片設計要點
背景
卡片的背景通常有視頻截圖、劇照、主角人物的摳圖+自製背景、代表性人物（物品）特徵4種，自製背景對設計師要求比較高，對於截屏、劇照和代表性人物（物品）特徵處理難度降了很多。設計師可以根據需要展示的情節以及需要推廣的主體選擇合適的背景圖。如下圖所示
構圖
根據卡片的比例來進行構圖，主要是1:1，N：1，1:
N，圓形三種，圓形入口主要是作為人物的詳細入口和專輯入口。對於1:1 和1: N卡片的重要人物居中顯示，卡片的主題或者是logo一般會放在卡片的下方有右邊。對於N：1的卡片來說，如果N相對較大，則主要人物主要是位於左側或是右側更多，主題則放在對應位置的另一邊。如下圖所示：
角標
由下圖可知角標的表現形式也是非常多的，經過設計的字體、例如紙的折角、矩形的兩端角標（可以顯示的信息較多）、異形角標、繪畫氣泡浮在卡片的上方，矩形不貼合疊在卡片的上方，類似絲帶綁角效果，其實還有很多效果，視覺設計師可以根據要推廣的強度來做設計。
影片集合卡片設計要點
影片集合一般會選取主推影片的人物作為主角，一個或者多個主角作為卡片主要組成元素，背景通常為多種元素的複雜構成，顏色會採用飽和度較高的顏色，比較搶眼，吸引用戶注意。主推主題的字體一般會經過設計，顯得更加特別並且搶眼。
音樂卡片設計要點
在電視的卡片設計中，音樂的卡片的質量相對於影片來說是比較高的，相對來說，體現方式也更加多。通常用色大膽，表現形式也相對特別一些。主要表現手法有以下幾種方法：
1、將主要人物放在一個特殊圖形中，例如字母、或者是自己設計的圖形；
2、將主要人物、如影視劇照、截圖、主創人物作為背景，然後再添加一個彩色漸變；
3、插畫的方式描繪主題要表現的元素，配上文藝的字體，這種卡片走文藝類型；
4、常規卡片：選取主創位於畫面中，增加設計過的字體，左右排版，這種卡片要點在於字體的設計和選擇人物的角度；
5、榜單來的，一般會增加一個裝飾性圖，如Billboard卡片，然後根據這個裝飾圖標衍生卡片。
下圖是一些音樂卡片設計
分類入口卡片的設計
分類卡片組成元素相對於其他的卡片來說較簡單一些，設計樣式也是各式各樣，如下圖所示，總結常見的幾種方式：
1、圖標+文字，圖標有幾種處理方式，一是直接放在界面中一邊，文字位於另外一邊；二是在背景卡片中增加和主題相對應的圖標疊加在卡片中，文字位於最上層；三是只顯示圖標的部分，主要是有代表性的部分，可以通過部分辨別出圖標代表的含義；2、將主要人物放到卡片中，添加飽和度較高的顏色遮罩遮罩，這種做法也挺常見的；
3、提取主題的部分字體放大，部門疊加在背景中，卡片最上層擺放入口名稱。
應用入口卡片的設計
對於應用入口來說，設計相對簡單，主要元素為應用圖標和應用名稱，排版方式主要是橫版、豎版和單個圖標顯示。下圖是一些App入口的設計方式，經過分析可知，主要以下幾種方式：
1、將圖標放在卡片中央，焦點選中後出現應用名稱；
2、將應用放在放在卡片的中上方，應用名稱放在應用圖標下方居中對齊；
3、和手機系統桌面的設計方式相似，將應用圖標作為卡片顯示在界面中，這種方式是相對美觀的，而且簡潔，空間利用較充分；
4、將圖標和應用信息放在一張卡片上，左右排版，左邊為應用圖標，右邊為卡片，適合應用推廣頁的設計。
以上就是電視端卡片設計的分析，希望對這一塊薄弱的設計師有一點點的幫助
總結
卡片的設計方式多種多樣，需要根據不同卡片入口設計不同的樣式，不要採用同一種設計方式，對於需要特別搶眼的卡片，顏色需要使用飽和度較高。不斷看一些好的作品，提升要做的就是不斷嘗試，才能知道什麼才是最合適的方式。
閱讀原文
推薦閱讀：
TAG:UI設計師 |