2022-4-19 博博
好久沒有發(fā)文章了，今天順叔和大家一起聊一聊卡片式設(shè)計，無論是WEB還是APP卡片式設(shè)計運用的比較多，很多UI設(shè)計師比較偏愛這樣的表現(xiàn)，卡片式設(shè)計會給人一種視覺上的享受，也能對于界面具有層次感。但往往在卡片設(shè)計中有一些技法還是需要了解，不能因為卡片式設(shè)計而卡片式設(shè)計，要能更好的應(yīng)用到界面場景中。希望在這次分享中一些知識點能幫助到大家，之后的幾篇系列文章中，順叔會從界面中比較趨勢的設(shè)計技法進(jìn)行分析，希望能幫助到一些設(shè)計的小伙伴。
教程前的引言
卡片式設(shè)計這幾年比較流行，同樣這樣的設(shè)計表達(dá)也是個趨勢，應(yīng)用在APP PC界面中至今還流行著，從事UI設(shè)計的都會知道卡片式設(shè)計，具有把內(nèi)容整合模塊化，從視覺，個性化體驗上進(jìn)行呈現(xiàn)，是設(shè)計師在設(shè)計時常用的一種表現(xiàn)，同樣也具有獨特的創(chuàng)新概念。
在一些項目中，一些客戶會說這個設(shè)計的APP界面有點太白，沒有層次感怎么辦，那這時你應(yīng)該和客戶說在APP設(shè)計中運用了現(xiàn)在比較流行的一個表現(xiàn)手法，卡片式設(shè)計，可以解決在畫面中有個性化 、變化、 層次感的設(shè)計。那客戶又問什么是卡片式設(shè)計呢？
一、什么是卡片
無處不在的卡片設(shè)計具有個性的美感和很好的易用性，是以文字標(biāo)題，小標(biāo)題， 圖形或圖片組成的模塊化，以塊狀形式規(guī)整的整合內(nèi)容，讓內(nèi)容更規(guī)整化，視覺上更個性化，也是操作上快捷的內(nèi)容信息入口。更直觀的表達(dá)內(nèi)容信息和快捷跳轉(zhuǎn)操作。成為當(dāng)今在設(shè)計中一個比較流行趨勢，而卡片在設(shè)計中也占用一定的優(yōu)勢，讓整體更加的有層次感，在運用起來也比較方便，從視覺、體驗、交互都具有不錯的優(yōu)點
設(shè)計效果圖展示
順叔為了這個文章特意設(shè)計了兩個案例，通過這兩個案例進(jìn)行一些講解。請見下圖：
二、卡片設(shè)計優(yōu)勢
1.趨勢
無論是大平臺 還是小平臺的產(chǎn)品都會運用這樣的卡片式，跟風(fēng)式設(shè)計趨勢，也讓卡片式設(shè)計成為了一個現(xiàn)在常用的優(yōu)勢，不過卡片式設(shè)計的確有很好的效果
2. 層次感
具有一定的層次感，能在頁面版式中起到設(shè)計上的不同，個性化變化，頁面層次感區(qū)分強(qiáng)烈，能更好的體現(xiàn)提煉出內(nèi)容
3. 規(guī)整化
卡片式設(shè)計以圖片、 圖標(biāo) 、LOGO、 標(biāo)題、 整合到一起 以塊狀的形式在界面中展示，更規(guī)整的排版呈現(xiàn)。雖然內(nèi)容多會導(dǎo)致頁面亂，一個模塊包含內(nèi)容之后就會規(guī)整不少，也給頁面設(shè)計上帶來了更好的視覺
4. 視覺體驗
卡片式給整個頁面會增加視覺上的體驗，特別那種大圖片卡片式更具有視覺上的沖擊力，背景襯托出前景卡片式設(shè)計。同樣對卡片式也感覺到舒適感?？ㄆ皆O(shè)計還是需要根據(jù)整個布局、 產(chǎn)品需求 、功能進(jìn)行設(shè)計。以達(dá)到最好的用戶體驗、視覺體驗。
不要為了卡片設(shè)計而卡片設(shè)計。
5. 易用性
卡片式設(shè)計在易用性和靈活性上比較高，在響應(yīng)式設(shè)計中同樣應(yīng)用的也比較多一些。能更好的有序排列。
6.簡約設(shè)計
簡約設(shè)計會更顯得品質(zhì)，不需要過多的進(jìn)行裝飾，哪怕就是一個白色的色塊，上面點綴有色彩的圖標(biāo)和標(biāo)題 副標(biāo)的變化，也會覺得顯得高大上，就算是一個帶有顏色的色塊卡片，也無須過多的設(shè)計 內(nèi)容上的標(biāo)題 、圖標(biāo)、 按鈕就足以支撐起卡片
7. 交互效果
在卡片式的設(shè)計中會有一些動效交互，比如整體卡片放大、 縮小 、左滑、 右滑，可以整模塊化滑動 縮放。整體效果增加了不錯的視覺交互體驗
三、卡片正確設(shè)計知識
一般在界面設(shè)計中卡片的存在的意義和表現(xiàn)手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設(shè)計表達(dá)姿勢。希望小伙伴在設(shè)計的同時有所靈感和參考，把一些表現(xiàn)手法加入到自己的設(shè)計中，適合才最重要?？ㄆ皆O(shè)計還是要根據(jù)整個風(fēng)格和整個布局而進(jìn)行展示，在做進(jìn)一步的對比和布局中以最好的效果為最終展示方式，總結(jié)分析幾個常見代表例子，如有不全請討論補(bǔ)充，下面就是一些例子
1.卡片式形式一
以色塊為主體并用現(xiàn)在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個是在卡片中設(shè)計比較常見的運用手法，卡片的長高在設(shè)計中也是根據(jù)結(jié)構(gòu)，內(nèi)容功能而進(jìn)行設(shè)定。正方形，長方形都是一個表現(xiàn)得手法，在色塊上面標(biāo)題文字，圖標(biāo)，圖形是整個卡片的布局的形式，無非就是左右布局和上下布局
應(yīng)用場景：卡包、天氣、類別、入口、優(yōu)惠劵，卡劵
此圖片來自于網(wǎng)絡(luò)
2. 卡片式形式二
這種形式共同點都是在頭部C位出現(xiàn)的卡片式設(shè)計，其中承載著標(biāo)題，副標(biāo)題，以及圖文版式，不難發(fā)現(xiàn)，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現(xiàn)還是比較簡約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會那么強(qiáng)，圖二很多在會員卡設(shè)計中常用的比較多，也比較簡約，另外兩個共同特點背景有顏色，一般底部背景顏色就是整個界面的主色調(diào)，背景有色塊，上面就用白色卡片，卡片上方標(biāo)題、 文字、 圖片呈現(xiàn)。只不過排版的方式有所不同而已，在很多APP設(shè)計中，這樣的表達(dá)也很多，通過主色調(diào)可以很融合的把上面的狀態(tài)欄，導(dǎo)航欄融為一體視覺上統(tǒng)一性，底部背景顏色延續(xù)下來，上面凸顯白色卡片，這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾，更能體現(xiàn)的上面的文字和圖片。
應(yīng)用場景：會員卡，滑動卡片，圖文標(biāo)題，入口
此圖片來自于網(wǎng)絡(luò)
3. 卡片式形式三
這種形式上圖下文字，或者是上標(biāo)題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺效果好的圖片通過剪切，處理，合成，攝影，插畫等等方式，出現(xiàn)的圖片質(zhì)量上好的話可以帶動整個設(shè)計的逼格，通過有效的圖片傳達(dá)，文字傳達(dá)，讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現(xiàn)的比較多，同樣也能體現(xiàn)出整體化和視覺化
應(yīng)用場景：滑動卡片，圖文標(biāo)題，入口，列表
此圖片來自于網(wǎng)絡(luò)
4. 卡片式形式四
大圖卡片式，一般以攝影圖片，插畫形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗也很不錯，放大視覺，展示內(nèi)容，圖片相結(jié)合，讓瀏覽者更愿意多看一會。表達(dá)的圖片與文字內(nèi)容相符，做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴(yán)格的。沒有質(zhì)量的圖效果會降低。
應(yīng)用場景：列表，說明，入口，天氣
此圖片來自于網(wǎng)絡(luò)
5.卡片式形式五
列表卡片設(shè)計，這種形式一般白色的卡片，上面標(biāo)題，頭像，按鈕，扁平插畫形式體現(xiàn)，更多應(yīng)用在一級頁面的下方內(nèi)容，以及二級頁面的列表頁或者集合頁，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時，體現(xiàn)上面內(nèi)容部分。每個模塊的單元體具有統(tǒng)一的視覺。
應(yīng)用場景：列表，集合頁，入口
此圖片來自于網(wǎng)絡(luò)
6. 卡片式形式六
大卡片式設(shè)計，表現(xiàn)為一塊特大的卡片式，上面會有標(biāo)題，按鈕等信息，同樣表現(xiàn)出突出層次感，個性化設(shè)計的特質(zhì)。體現(xiàn)出內(nèi)容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對比上有個反差，才能突出卡片的作用性。
應(yīng)用場景：提示，說明，優(yōu)惠劵，劵，入口
此圖片來自于網(wǎng)絡(luò)
以上總結(jié)的幾種卡片的形式，在設(shè)計中可以根據(jù)情況而設(shè)計，卡片多樣化，布局多樣化，適合自己產(chǎn)品的才最重要，雖然在界面設(shè)計中常用的設(shè)計，但不要盲目的為了卡片而卡片套用設(shè)計，這樣起不到作用反而效果達(dá)不到理想程度。希望幾個卡片形式總結(jié)能給大家?guī)硪恍╈`感和啟發(fā)。
同樣在這些卡片中會有一些基本的共同的特點
共同的特點是
1. 四個角都是圓角
2. 根據(jù)潮流漸變色或白卡片
3. 色塊下的陰影，色塊下的陰影更能體現(xiàn)出層次
4. 卡片上面組成部分，標(biāo)題，副標(biāo)題，圖形，按鈕，圖片，頭像
5. 字體大小，字體顏色的變化
6. 一般卡片應(yīng)用在會員，列表，說明，優(yōu)惠劵，分類，類別，集合頁，歡迎頁等場景常見
三、卡片正確設(shè)計知識
為了講解文章，順叔臨時構(gòu)思一個產(chǎn)品原型，而快速進(jìn)行了簡單的設(shè)計，一個第一版，一個優(yōu)化版，主要為了講解一下這個卡片設(shè)計一些問題，
以下此圖為構(gòu)思的原型圖
經(jīng)過分析原型圖之后開始進(jìn)行設(shè)計，首先設(shè)計一個版本的，如果這樣卡片布局設(shè)計，這樣色彩搭配的情況下，會怎么樣呢，整體設(shè)計用了藍(lán)紫色為主色調(diào)，首先鋪藍(lán)紫色的色塊作為背景，然后上面放白色卡片，以至于卡片上詳細(xì)的內(nèi)容，比如數(shù)字，圖形 能更好的豐富支撐卡片。同樣數(shù)據(jù)流也是比較重要的C位。也是比較重要的位置。接著根據(jù)原型圖下面有兩個卡片，通過扁平化設(shè)計，以色塊為主設(shè)計一個藍(lán)色，一個橙色的卡片，上面并有圖標(biāo)，頭像，以及標(biāo)題，兩個顏色的對比，更讓視覺有沖擊力，整體看這個設(shè)計并沒有什么，但有個問題在于單個模塊拿出來效果的確都不錯，但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺，當(dāng)打開這個界面的時候視覺落點在彩色卡片上，那么這個整體設(shè)計上就出現(xiàn)了問題，上面的數(shù)據(jù)，白色卡片其實是比較重要的，而且整個畫面都是卡片毫無設(shè)計上的變化，
那么只能在這個基礎(chǔ)上在進(jìn)行優(yōu)化，其實大家在做設(shè)計的同時也這樣，在考慮功能模塊前提下，用戶體驗，也要考慮視覺體驗，那么視覺從哪方面來，色彩、層次、版式等等方面。那么能不能在進(jìn)行一下優(yōu)化呢，其實還是有空間在進(jìn)行優(yōu)化。以下圖為第一版
設(shè)計第一版
根據(jù)上面的設(shè)計在進(jìn)行優(yōu)化，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標(biāo)，這樣更好的給功能上快捷入口，也能給卡片設(shè)計增添了變化。使得整個畫面更靈活
雖然白色卡片，但有一些色彩的點綴，也讓白色卡片活躍起來，把顏色的卡片改成白色卡片，從上到下的版式舒服多了，也沒有那么跳。整個風(fēng)格更簡約，同時功能也更全面。
調(diào)整后
從原型圖，在到設(shè)計第一版，在到優(yōu)化調(diào)整之后，證明一點，卡片不要因為卡片而套設(shè)計，反而會失去效果，考慮功能模塊，用戶體驗，視覺體驗也一定讓整體舒服。一直都說，繪畫中需要有主有次，設(shè)計中也一定要有主，有次的進(jìn)行設(shè)計。這樣層級關(guān)系才能更清晰。
但這些條件一定是從，體驗、色彩、布局、版式等方面進(jìn)行對比和研究的。設(shè)計不要先著急做設(shè)計，前期的進(jìn)行思考，邏輯清楚了，在進(jìn)行設(shè)計的時候會更加的順暢?？ㄆ皆O(shè)計，大家都在應(yīng)用，希望這個文章能給大家?guī)硪稽c點知識點，那就不枉費我在熬夜寫這篇文章。
不為別的，只是一個喜歡分享的肉團(tuán)子。這篇文章就寫到這里，如果喜歡請給個贊吧。如內(nèi)容有沒說到的地方，各位可以進(jìn)行補(bǔ)充，以上兩個圖你稀罕哪個呢？
藍(lán)藍(lán)設(shè)計的小編 http://www.cqzjtgb.com