UI界面設(shè)計(jì) 卡片式設(shè)計(jì)

流行的界面布局

卡片式設(shè)計(jì)匯報(bào)人：某某某

匯報(bào)時(shí)間：2025.X.XAPP設(shè)計(jì)中運(yùn)用比較流行的表現(xiàn)手法?？ㄆ皆O(shè)計(jì)，可以解決在畫面中有個(gè)性化、變化、層次感的設(shè)計(jì)?？ㄆ皆O(shè)計(jì)是一個(gè)承載著圖像、文本、按鈕、提示信息和一些交互動(dòng)作等的矩形區(qū)塊，作為指向更多詳細(xì)信息的功能入口，能有效區(qū)分不同信息的層級(jí)，兼容性強(qiáng)，不管是App還是Web，都能夠有效適應(yīng)響應(yīng)式設(shè)計(jì)；同時(shí)在視覺上可塑性很高，能使用圖片來強(qiáng)調(diào)，變得更加吸引人。無處不在的卡片設(shè)計(jì)具有個(gè)性的美感和很好的易用性，是以文字標(biāo)題，小標(biāo)題，圖形或圖片組成的模塊化，以塊狀形式規(guī)整的整合內(nèi)容，讓內(nèi)容更規(guī)整化，視覺上更個(gè)性化，也是操作上快捷的內(nèi)容信息入口。更直觀的表達(dá)內(nèi)容信息和快捷跳轉(zhuǎn)操作。01成為當(dāng)今在設(shè)計(jì)中一個(gè)比較流行趨勢(shì)，而卡片在設(shè)計(jì)中也占用一定的優(yōu)勢(shì)，讓整體更加的有層次感，在運(yùn)用起來也比較方便，從視覺、體驗(yàn)、交互都具有不錯(cuò)的優(yōu)點(diǎn)。02二、卡片設(shè)計(jì)優(yōu)勢(shì)1.趨勢(shì)無論是大平臺(tái)，還是小平臺(tái)的產(chǎn)品都會(huì)運(yùn)用這樣的卡片式，跟風(fēng)式設(shè)計(jì)趨勢(shì)，也讓卡片式設(shè)計(jì)成為了一個(gè)現(xiàn)在常用的優(yōu)勢(shì)，不過卡片式設(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.簡(jiǎn)約設(shè)計(jì)簡(jiǎn)約設(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ì)中卡片的存在的意義和表現(xiàn)手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設(shè)計(jì)表達(dá)姿勢(shì)?？ㄆ皆O(shè)計(jì)還是要根據(jù)整個(gè)風(fēng)格和整個(gè)布局而進(jìn)行展示，在做進(jìn)一步的對(duì)比和布局中以最好的效果為最終展示方式。三、卡片正確設(shè)計(jì)知識(shí)1.卡片式形式一以色塊為主體并用現(xiàn)在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個(gè)是在卡片中設(shè)計(jì)比較常見的運(yùn)用手法，卡片的長(zhǎng)高在設(shè)計(jì)中也是根據(jù)結(jié)構(gòu)，內(nèi)容功能而進(jìn)行設(shè)定。正方形，長(zhǎng)方形都是一個(gè)表現(xiàn)得手法，在色塊上面標(biāo)題文字，圖標(biāo)，圖形是整個(gè)卡片的布局的形式，無非就是左右布局和上下布局。應(yīng)用場(chǎng)景：卡包、天氣、類別、入口、優(yōu)惠劵，卡劵。2.卡片式形式二這種形式共同點(diǎn)都是在頭部C位出現(xiàn)的卡片式設(shè)計(jì)，其中承載著標(biāo)題，副標(biāo)題，以及圖文版式，不難發(fā)現(xiàn)，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現(xiàn)還是比較簡(jiǎn)約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會(huì)那么強(qiáng)。應(yīng)用場(chǎng)景：會(huì)員卡，滑動(dòng)卡片，圖文標(biāo)題，入口。3.卡片式形式三這種形式上圖下文字，或者是上標(biāo)題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺效果好的圖片通過剪切，處理，合成，攝影，插畫等等方式，通過有效的圖片傳達(dá)，文字傳達(dá)，讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現(xiàn)的比較多，同樣也能體現(xiàn)出整體化和視覺化。應(yīng)用場(chǎng)景：滑動(dòng)卡片，圖文標(biāo)題，入口，列表。4.卡片式形式四大圖卡片式，一般以攝影圖片，插畫形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗(yàn)也很不錯(cuò)，放大視覺，展示內(nèi)容，圖片相結(jié)合，讓瀏覽者更愿意多看一會(huì)。表達(dá)的圖片與文字內(nèi)容相符，做到圖文交融的程度。一般這樣對(duì)于圖片的選擇上還是比較要求嚴(yán)格的。沒有質(zhì)量的圖效果會(huì)降低。應(yīng)用場(chǎng)景：列表，說明，入口，天氣。5.卡片式形式五列表卡片設(shè)計(jì)，這種形式一般白色的卡片，上面標(biāo)題，頭像，按鈕，扁平插畫形式體現(xiàn)，更多應(yīng)用在一級(jí)頁面的下方內(nèi)容，以及二級(jí)頁面的列表頁或者集合頁，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時(shí)，體現(xiàn)上面內(nèi)容部分。每個(gè)模塊的單元體具有統(tǒng)一的視覺。應(yīng)用場(chǎng)景：列表，集合頁，入口。6.卡片式形式六大卡片式設(shè)計(jì)，表現(xiàn)為一塊特大的卡片式，上面會(huì)有標(biāo)題，按鈕等信息，同樣表現(xiàn)出突出層次感，個(gè)性化設(shè)計(jì)的特質(zhì)。體現(xiàn)出內(nèi)容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對(duì)比上有個(gè)反差，才能突出卡片的作用性。應(yīng)用場(chǎng)景：提示，說明，優(yōu)惠劵，劵，入口。同樣在這些卡片中會(huì)有一些基本的共同的特點(diǎn)：01020304四個(gè)角都是圓角色塊下的陰影，色塊下的陰影更能體現(xiàn)出層次05字體大小，字體顏色的變化根據(jù)潮流漸變色或白卡片卡片上面組成部分，標(biāo)題，副標(biāo)題，圖形，按鈕，圖片，頭像一般卡片應(yīng)用在會(huì)員，列表，說明，優(yōu)惠劵，分類，類別，集合頁，歡迎頁等場(chǎng)景常見06卡片設(shè)計(jì)作業(yè)要求：在XD中，設(shè)計(jì)五種不同的卡片式設(shè)計(jì)效果（例如，F(xiàn)