UI界面設(shè)計流行趨勢，卡片式設(shè)計風(fēng)格如何做？

時間：2023-09-27 17:00:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-27 17:00:02 來源：網(wǎng)站運(yùn)營

UI界面設(shè)計流行趨勢，卡片式設(shè)計風(fēng)格如何做？：UI界面設(shè)計中，卡片式設(shè)計已經(jīng)是一種非常常見的設(shè)計形式，這也是當(dāng)下流行的一種設(shè)計風(fēng)格?？ㄆO(shè)計，是針對網(wǎng)頁設(shè)計中的卡片作出分析，設(shè)計卡時，應(yīng)該注意什么？下面就讓我們一起來看看吧~

什么是卡片式設(shè)計？

卡片式設(shè)計是一種UI設(shè)計模式 (UI design pattern)，UI中的卡片借用現(xiàn)實(shí)世界中的卡片的特征和概念。卡片可比作為一個大小可伸縮的容器，通常一個卡片中會集中承載一種或以一種元素為核心的一小組元素。不同的元素在不同的卡片中各司其職，不同的卡片組合到一起，構(gòu)成功能性的頁面或者組合。

卡片式常見形式

卡片是移動端產(chǎn)品常見的設(shè)計形式，承載著圖片、文字、按鈕等內(nèi)容。根據(jù)展現(xiàn)形式，卡片基本可以分為3大類：邊距卡片、懸浮卡片、通欄卡片。





?邊距卡片

邊距卡片通常采用帶圓角形式，利用陰影以及四周的邊距形成頁面留白，提升整體設(shè)計層次感，通過投影、前后顏色的設(shè)定，讓內(nèi)容與背景之間產(chǎn)生視覺空間感，在頁面設(shè)計中應(yīng)用更加廣泛。





?懸浮卡片

懸浮卡片主要用于功能集合或者頁面內(nèi)容擴(kuò)展場景，目的是提升頁面的操作效率。








?通欄卡片

與邊距卡片相比，通欄卡片沒有左右兩端留白，只保留上下邊距，可展示圖片、文字的空間更大。卡片與背景的關(guān)系用一條背景色塊抽象表現(xiàn)，通常不會增加陰影，邊框線等樣式。




它更像一種在極簡列表式和卡片式設(shè)計之間的折中選擇，既保留了卡片式的分層方式和強(qiáng)交互性，又使頁面變得更簡潔。

卡片式設(shè)計原則

卡片設(shè)計的基礎(chǔ)規(guī)則，相信大家多多少少都有所了解，不同平臺的規(guī)范差異性不會有太大本質(zhì)上的區(qū)別，更多的差異主要在處理技巧和方式上。




?圓角的規(guī)則

圓角的設(shè)定實(shí)際上沒有太多的原則問題，只要符合整體的風(fēng)格調(diào)性即可。當(dāng)然不同的圓角也能表達(dá)出不同的質(zhì)感，大圓角表達(dá)柔和、小圓角表達(dá)硬朗。







以卡片的圓角作為基礎(chǔ)的參考值往內(nèi)推算整體的圓角使用規(guī)范，卡片與卡內(nèi)的元素形成合理的比例規(guī)則。







邊距卡片通常采用帶圓角形式，利用陰影以及四周的邊距形成頁面留白，提升整體設(shè)計層次感，通過投影、前后顏色的設(shè)定，讓內(nèi)容與背景之間產(chǎn)生視覺空間感，在頁面設(shè)計中應(yīng)用更加廣泛。




?投影深度

投影的視覺效果會直接影響著整體卡片的質(zhì)感，太深太大的投影會顯得整體卡片過于厚重，太淺太小的投影則顯得過度生硬，因此合理的數(shù)值比例則可以讓卡片看起來自然有質(zhì)感。給同學(xué)們分享一組數(shù)值規(guī)律，我們可以按1:2或1:3，例如Y軸偏移10px，模糊度則設(shè)定為20或30px，這樣成比例的數(shù)值出來的效果會較為自然，如下圖：







?邊距設(shè)定

在設(shè)定卡片式的邊距時可以適當(dāng)應(yīng)用刪格系統(tǒng)，刪格系統(tǒng)解決了一些基礎(chǔ)的板式問題，有助于提升設(shè)計的規(guī)范性，讓設(shè)計更加有跡可循。讓邊距與內(nèi)容形成固定的關(guān)系，這樣可以幫助整體的卡片設(shè)計更加具有細(xì)節(jié)和規(guī)則。







?標(biāo)題文字大小和重量

標(biāo)題主要用于簡短的說明每個模塊的內(nèi)容，并且在長頁面瀏覽中起到引導(dǎo)和定位的作用。但當(dāng)字體較小時，用戶會傾向于“細(xì)讀”；而字體較大時，用戶更傾向于“跳讀”。如果字體粗細(xì)使用錯誤，會影響可用性和美觀性。





標(biāo)題與正文字號大小差異建議在6-10px，這樣可以更好的拉開差異，讓標(biāo)題更具有標(biāo)題感。

卡片式設(shè)計特征

?反應(yīng)迅速

為了滿足各種屏幕尺寸的需求，卡片設(shè)計可以幫助用戶非常方便地專注于特定內(nèi)容，還允許我們在設(shè)計過程中合理，簡潔地布置內(nèi)容。




?井然有序

混亂的網(wǎng)站令人頭疼。當(dāng)我們在頁面上組織各種元素時，卡片設(shè)計可以為這些內(nèi)容的布局提供出色的順序。







?易讀性

卡片設(shè)計的一個非常重要的特征是它們所包含的信息非常簡潔，這使它們變得有趣而引人入勝，但同時也使網(wǎng)站的內(nèi)容相對簡單并快速瀏覽一目了然。




?受社交媒體平臺青睞

想想如何建立社交媒體網(wǎng)站？他們需要的是清晰，易讀且快速的顯示。再次考慮卡設(shè)計，您沒有找到連接嗎？卡設(shè)計最著名的例子是Pinterest和Dribbble。







?平等

卡設(shè)計的另一個特點(diǎn)是平等。當(dāng)然，這里的平等不是絕對的。也就是說，每個卡片在整個網(wǎng)頁的卡片設(shè)計中的重要性幾乎是相同的。這省去了所有人對內(nèi)容進(jìn)行排名的麻煩。




?多功能性

名片設(shè)計可用于任何行業(yè)的幾乎任何目的，并且其創(chuàng)作靈活性非常好。可以說，設(shè)計風(fēng)格還沒有定論，這給了設(shè)計師很大的創(chuàng)作空間。

卡片式設(shè)計的注意事項

?避免過多層級

從整體來說，卡片式的設(shè)計本身就是增加了基礎(chǔ)背景的層級表現(xiàn)，為了保證內(nèi)容展示和瀏覽體驗(yàn)，不建議在卡片上再二次疊加塊狀式設(shè)計。特別是單個卡片中，避免多個卡片并排展示，造成內(nèi)容展示過于碎片化，增加用戶的瀏覽負(fù)擔(dān)。




如果在項目中遇到內(nèi)容層級需要多層級的表現(xiàn)，我們可以通過利用拉通分割線和利用淺色背景底色，這兩種方法來區(qū)分內(nèi)容層級。







?造成縱向空間浪費(fèi)

由于卡片必須要增加上下間距形成獨(dú)立空間，會導(dǎo)致頁面的長度增加。因此對于內(nèi)容結(jié)構(gòu)相似的模塊，如非必須，不要盲目采用卡片形式。例如通訊錄，微信朋友圈、商品搜索列表頁面等，采用了簡單的分割線進(jìn)行內(nèi)容區(qū)分。既避免了頁面空間的浪費(fèi)，又提高了用戶的瀏覽效率。




?信息要簡單

當(dāng)你想到卡片式設(shè)計時，簡潔一定是其精髓?！懊繌埧ㄆ怀休d一個信息”你可以把卡片設(shè)計囊括了各種元素，但每張卡片只能包含一個信息或者內(nèi)容，這可以讓用戶選擇自己想要的內(nèi)容去閱讀或者分享 。





?把握好界面的分區(qū)，避免過于擁擠的排版

卡片設(shè)計具有獨(dú)特的視覺空間感，但卡片與卡片之間也會有分隔，因此在設(shè)計時更應(yīng)該對內(nèi)容進(jìn)行歸納，避免產(chǎn)生過多的小塊卡片而導(dǎo)致排版過于擁擠、凌亂或者內(nèi)容不夠?qū)挾日宫F(xiàn)的情況。