正確認識卡片式設計，什么是卡片、總結卡片優(yōu)勢渠脉、卡片正確設計知識通過設計兩個案例進行講解，卡片在運用時的技法瓶佳，望能幫助大家

無論是WEB還是APP卡片式設計運用的比較多芋膘，很多UI設計師比較偏愛這樣的表現(xiàn)，卡片式設計會給人一種視覺上的享受霸饲，也能對于界面具有層次感为朋。但往往在卡片設計中有一些技法還是需要了解，不能因為卡片式設計而卡片式設計厚脉，要能更好的應用到界面場景中潜腻。希望在這次分享中一些知識點能幫助到大家，之后的幾篇系列文章中器仗，順叔會從界面中比較趨勢的設計技法進行分析，希望能幫助到一些設計的小伙伴童番。

教程前的引言

卡片式設計這幾年比較流行精钮，同樣這樣的設計表達也是個趨勢，應用在APP PC界面中至今還流行著剃斧，從事UI設計的都會知道卡片式設計轨香，具有把內(nèi)容整合模塊化，從視覺幼东，個性化體驗上進行呈現(xiàn)臂容，是設計師在設計時常用的一種表現(xiàn)，同樣也具有獨特的創(chuàng)新概念根蟹。

在一些項目中脓杉，一些客戶會說這個設計的APP界面有點太白，沒有層次感怎么辦简逮，那這時你應該和客戶說在APP設計中運用了現(xiàn)在比較流行的一個表現(xiàn)手法球散，卡片式設計，可以解決在畫面中有個性化 散庶、變化蕉堰、 層次感的設計凌净。那客戶又問什么是卡片式設計呢？

一屋讶、什么是卡片

無處不在的卡片設計具有個性的美感和很好的易用性冰寻，是以文字標題，小標題皿渗， 圖形或圖片組成的模塊化斩芭，以塊狀形式規(guī)整的整合內(nèi)容，讓內(nèi)容更規(guī)整化羹奉，視覺上更個性化秒旋，也是操作上快捷的內(nèi)容信息入口。更直觀的表達內(nèi)容信息和快捷跳轉(zhuǎn)操作诀拭。成為當今在設計中一個比較流行趨勢迁筛，而卡片在設計中也占用一定的優(yōu)勢，讓整體更加的有層次感耕挨，在運用起來也比較方便细卧，從視覺、體驗筒占、交互都具有不錯的優(yōu)點

設計效果圖展示

為了這個文章特意設計了兩個案例贪庙，通過這兩個案例進行一些講解。請見下圖：

二翰苫、卡片設計優(yōu)勢

1.趨勢

無論是大平臺 還是小平臺的產(chǎn)品都會運用這樣的卡片式止邮，跟風式設計趨勢，也讓卡片式設計成為了一個現(xiàn)在常用的優(yōu)勢奏窑，不過卡片式設計的確有很好的效果

2. 層次感

具有一定的層次感导披，能在頁面版式中起到設計上的不同，個性化變化埃唯，頁面層次感區(qū)分強烈撩匕，能更好的體現(xiàn)提煉出內(nèi)容

3. 規(guī)整化

卡片式設計以圖片、 圖標 墨叛、LOGO止毕、 標題、 整合到一起 以塊狀的形式在界面中展示漠趁，更規(guī)整的排版呈現(xiàn)扁凛。雖然內(nèi)容多會導致頁面亂，一個模塊包含內(nèi)容之后就會規(guī)整不少棚潦，也給頁面設計上帶來了更好的視覺

4. 視覺體驗

卡片式給整個頁面會增加視覺上的體驗令漂，特別那種大圖片卡片式更具有視覺上的沖擊力，背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感叠必〖苑酰卡片式設計還是需要根據(jù)整個布局、 產(chǎn)品需求 纬朝、功能進行設計收叶。以達到最好的用戶體驗、視覺體驗共苛。

不要為了卡片設計而卡片設計判没。

5. 易用性

卡片式設計在易用性和靈活性上比較高，在響應式設計中同樣應用的也比較多一些隅茎。能更好的有序排列澄峰。

6.簡約設計

簡約設計會更顯得品質(zhì)，不需要過多的進行裝飾辟犀，哪怕就是一個白色的色塊俏竞，上面點綴有色彩的圖標和標題 副標的變化，也會覺得顯得高大上堂竟，就算是一個帶有顏色的色塊卡片魂毁，也無須過多的設計 內(nèi)容上的標題 、圖標出嘹、 按鈕就足以支撐起卡片

7. 交互效果

在卡片式的設計中會有一些動效交互席楚，比如整體卡片放大、 縮小 税稼、左滑烦秩、 右滑，可以整模塊化滑動 縮放郎仆。整體效果增加了不錯的視覺交互體驗

三闻镶、卡片正確設計知識

一般在界面設計中卡片的存在的意義和表現(xiàn)手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設計表達姿勢丸升。希望小伙伴在設計的同時有所靈感和參考，把一些表現(xiàn)手法加入到自己的設計中牺氨，適合才最重要狡耻。卡片式設計還是要根據(jù)整個風格和整個布局而進行展示猴凹，在做進一步的對比和布局中以最好的效果為最終展示方式夷狰，總結分析幾個常見代表例子，如有不全請討論補充郊霎，下面就是一些例子

1.卡片式形式一

以色塊為主體并用現(xiàn)在比較流行的漸變色組成沼头，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個是在卡片中設計比較常見的運用手法进倍，卡片的長高在設計中也是根據(jù)結構土至，內(nèi)容功能而進行設定。正方形猾昆，長方形都是一個表現(xiàn)得手法陶因，在色塊上面標題文字，圖標垂蜗，圖形是整個卡片的布局的形式楷扬，無非就是左右布局和上下布局

應用場景：卡包、天氣贴见、類別烘苹、入口、優(yōu)惠劵片部，卡劵

2. 卡片式形式二

這種形式共同點都是在頭部C位出現(xiàn)的卡片式設計镣衡，其中承載著標題，副標題吞琐，以及圖文版式捆探，不難發(fā)現(xiàn)，如果圖片有顏色黍图，那么下面是白色底，這樣在白底上面色塊的出現(xiàn)還是比較簡約凸顯卡片奴烙，如果背景有顏色助被，卡片也有顏色那么卡片的凸顯程度就不會那么強，圖二很多在會員卡設計中常用的比較多切诀，也比較簡約揩环，另外兩個共同特點背景有顏色，一般底部背景顏色就是整個界面的主色調(diào)幅虑，背景有色塊丰滑，上面就用白色卡片，卡片上方標題倒庵、 文字褒墨、 圖片呈現(xiàn)。只不過排版的方式有所不同而已擎宝，在很多APP設計中郁妈，這樣的表達也很多，通過主色調(diào)可以很融合的把上面的狀態(tài)欄绍申，導航欄融為一體視覺上統(tǒng)一性噩咪，底部背景顏色延續(xù)下來顾彰，上面凸顯白色卡片，這樣更具有視覺感和層次感胃碾。白色的卡片不需要過多的修飾涨享，更能體現(xiàn)的上面的文字和圖片。

應用場景：會員卡书在，滑動卡片灰伟，圖文標題，入口

3. 卡片式形式三

這種形式上圖下文字儒旬，或者是上標題栏账，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要栈源，有視覺效果好的圖片通過剪切挡爵，處理，合成甚垦，攝影茶鹃，插畫等等方式，出現(xiàn)的圖片質(zhì)量上好的話可以帶動整個設計的逼格艰亮，通過有效的圖片傳達闭翩，文字傳達，讓用戶更清晰的了解迄埃。這樣的形似一般在入口或者列表的形式出現(xiàn)的比較多疗韵，同樣也能體現(xiàn)出整體化和視覺化

應用場景：滑動卡片，圖文標題侄非，入口蕉汪，列表

4. 卡片式形式四

大圖卡片式，一般以攝影圖片逞怨，插畫形式者疤，文字壓與圖片之上，這樣的效果更具有沖擊力叠赦，也能顯得出比較潮流驹马。體驗也很不錯，放大視覺除秀，展示內(nèi)容窥翩，圖片相結合漩仙，讓瀏覽者更愿意多看一會岁诉。表達的圖片與文字內(nèi)容相符犹撒，做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的棍好。沒有質(zhì)量的圖效果會降低。

應用場景：列表，說明借笙，入口扒怖，天氣

5.卡片式形式五

列表卡片設計，這種形式一般白色的卡片业稼，上面標題盗痒，頭像，按鈕低散，扁平插畫形式體現(xiàn)俯邓，更多應用在一級頁面的下方內(nèi)容，以及二級頁面的列表頁或者集合頁熔号，整體弱化背景以白色為主稽鞭，給予圓角及陰影承托出層次感同時，體現(xiàn)上面內(nèi)容部分引镊。每個模塊的單元體具有統(tǒng)一的視覺朦蕴。

應用場景：列表，集合頁弟头，入口

6. 卡片式形式六

大卡片式設計吩抓，表現(xiàn)為一塊特大的卡片式，上面會有標題赴恨，按鈕等信息疹娶，同樣表現(xiàn)出突出層次感，個性化設計的特質(zhì)嘱支。體現(xiàn)出內(nèi)容蚓胸，一般背景有顏色上面卡片為白色，如下面背景為白色除师，那么卡片的形式也可色塊沛膳，在對比上有個反差，才能突出卡片的作用性汛聚。

應用場景：提示锹安，說明，優(yōu)惠劵倚舀，劵叹哭，入口

以上總結的幾種卡片的形式，在設計中可以根據(jù)情況而設計痕貌，卡片多樣化风罩，布局多樣化，適合自己產(chǎn)品的才最重要舵稠，雖然在界面設計中常用的設計超升，但不要盲目的為了卡片而卡片套用設計入宦，這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家?guī)硪恍╈`感和啟發(fā)室琢。

同樣在這些卡片中會有一些基本的共同的特點

共同的特點是

1. 四個角都是圓角

2. 根據(jù)潮流漸變色或白卡片

3. 色塊下的陰影乾闰，色塊下的陰影更能體現(xiàn)出層次

4. 卡片上面組成部分，標題盈滴，副標題涯肩，圖形，按鈕巢钓，圖片病苗，頭像

5. 字體大小，字體顏色的變化

6. 一般卡片應用在會員竿报，列表铅乡，說明，優(yōu)惠劵烈菌，分類阵幸，類別，集合頁芽世，歡迎頁等場景常見

三挚赊、卡片正確設計知識

為了講解文章，順叔臨時構思一個產(chǎn)品原型济瓢，而快速進行了簡單的設計荠割，一個第一版，一個優(yōu)化版旺矾，主要為了講解一下這個卡片設計一些問題蔑鹦，

以下此圖為構思的原型圖

經(jīng)過分析原型圖之后開始進行設計，首先設計一個版本的箕宙，如果這樣卡片布局設計嚎朽，這樣色彩搭配的情況下，會怎么樣呢柬帕，整體設計用了藍紫色為主色調(diào)哟忍，首先鋪藍紫色的色塊作為背景，然后上面放白色卡片陷寝，以至于卡片上詳細的內(nèi)容锅很，比如數(shù)字，圖形 能更好的豐富支撐卡片凤跑。同樣數(shù)據(jù)流也是比較重要的C位爆安。也是比較重要的位置。接著根據(jù)原型圖下面有兩個卡片仔引，通過扁平化設計扔仓，以色塊為主設計一個藍色致扯，一個橙色的卡片，上面并有圖標当辐，頭像，以及標題鲤看，兩個顏色的對比缘揪，更讓視覺有沖擊力，整體看這個設計并沒有什么义桂，但有個問題在于單個模塊拿出來效果的確都不錯找筝，但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺，當打開這個界面的時候視覺落點在彩色卡片上慷吊，那么這個整體設計上就出現(xiàn)了問題袖裕，上面的數(shù)據(jù)，白色卡片其實是比較重要的溉瓶，而且整個畫面都是卡片毫無設計上的變化急鳄，

那么只能在這個基礎上在進行優(yōu)化，其實大家在做設計的同時也這樣堰酿，在考慮功能模塊前提下疾宏，用戶體驗，也要考慮視覺體驗触创，那么視覺從哪方面來坎藐，色彩、層次哼绑、版式等等方面岩馍。那么能不能在進行一下優(yōu)化呢，其實還是有空間在進行優(yōu)化抖韩。以下圖為第一版

根據(jù)上面的設計在進行優(yōu)化蛀恩，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標帽蝶，這樣更好的給功能上快捷入口赦肋，也能給卡片設計增添了變化。使得整個畫面更靈活

雖然白色卡片励稳，但有一些色彩的點綴佃乘，也讓白色卡片活躍起來，把顏色的卡片改成白色卡片驹尼，從上到下的版式舒服多了趣避，也沒有那么跳。整個風格更簡約新翎，同時功能也更全面程帕。

調(diào)整后

從原型圖住练，在到設計第一版，在到優(yōu)化調(diào)整之后愁拭，證明一點讲逛，卡片不要因為卡片而套設計，反而會失去效果岭埠，考慮功能模塊盏混，用戶體驗，視覺體驗也一定讓整體舒服惜论。一直都說许赃，繪畫中需要有主有次，設計中也一定要有主馆类，有次的進行設計混聊。這樣層級關系才能更清晰。

但這些條件一定是從乾巧，體驗句喜、色彩、布局卧抗、版式等方面進行對比和研究的藤滥。設計不要先著急做設計，前期的進行思考社裆，邏輯清楚了拙绊，在進行設計的時候會更加的順暢∮拘悖卡片式設計标沪，大家都在應用，希望這個文章能給大家?guī)硪稽c點知識點