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