首頁 >
熱門文章 >
UI設(shè)計(jì) > UI設(shè)計(jì)中卡片式應(yīng)如何設(shè)計(jì)
UI設(shè)計(jì)中卡片式應(yīng)如何設(shè)計(jì)
時(shí)間:2020-12-09來源:m.5wd995.cn點(diǎn)擊量:次作者:Gella
時(shí)間:2020-12-09點(diǎn)擊量:次作者:Gella
卡片設(shè)計(jì)在界面中已經(jīng)是非常常見的一種設(shè)計(jì)形式,大家做設(shè)計(jì)時(shí)幾乎都會用到。關(guān)于卡片設(shè)計(jì)的文章網(wǎng)上已經(jīng)有很多了,今天我想從我自己的經(jīng)驗(yàn)來總結(jié)卡片設(shè)計(jì)的細(xì)節(jié)要點(diǎn),期望能給大家總結(jié)一些快速提升卡片設(shè)計(jì)效果的方法。
1、卡片的造型
1)圓角不同的圓角,所帶來的氣質(zhì)是不同的。圓角很小,視覺印象是硬朗,高冷,具有攻擊性的,多用于嚴(yán)肅、高端、沖突感強(qiáng)烈的設(shè)計(jì)中;而更大的圓角給人的感覺是有親和力,柔軟,安全的,多用于兒童產(chǎn)品、娛樂性強(qiáng)的設(shè)計(jì)中。
在設(shè)計(jì)的時(shí)候,根據(jù)自己的產(chǎn)品屬性選擇氣質(zhì)相符的圓角設(shè)計(jì)很有必要。
常見的卡片弧度形式有4類:直接、小圓角、大圓角、特殊圓角
我一般喜歡用4的倍數(shù)來設(shè)置圓角,比如圓角大小為4px、8px、12px之類的。要注意的是,圓角越大,可用面積會越小,需要根據(jù)實(shí)際場景進(jìn)行平衡,以視覺上舒服為宜。
2)比例卡片的比例,我習(xí)慣遵循一些美感規(guī)律,比如黃金比例(1.618),白銀比例(1.414),青銅比例(1.732),正方形之類的比例。當(dāng)然,實(shí)際設(shè)計(jì)需求中的比例,還是要結(jié)合內(nèi)容的多少具體分析。
我的經(jīng)驗(yàn)是,當(dāng)比較接近這些美感比例其中之一時(shí),就直接優(yōu)化到這個(gè)比例。比如做了一個(gè)卡片,寬高比是1.5,比較接近于黃金比例,我就干脆讓它等于黃金比例。
3)異型除了正常的卡片樣式,還可以做一些異型的卡片設(shè)計(jì)。異型卡片具有較強(qiáng)的形式感和視覺沖擊力,所以會比較多的用在游戲或者運(yùn)營相關(guān)的界面中,吸引用戶的注意力。缺點(diǎn)是批量化設(shè)計(jì)成本略高且因?yàn)檫^于風(fēng)格化而不夠耐看。
2、卡片的效果
1)顏色卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對比要符合界面對比度標(biāo)準(zhǔn),以免影響內(nèi)容本身的閱讀。如果拿不準(zhǔn)的話,可以多用一些白色,比較不容易出錯。
純色卡片設(shè)計(jì)會讓界面顯得冷靜高級,但對配色的要求相對較高,用不好的話會顯得單調(diào),沉悶。如果你堅(jiān)持要用這種卡片配色的話,建議搭配一些圖形紋理,會更容易把控,還能提升畫面細(xì)節(jié)。
純色卡片設(shè)計(jì)
漸變色的卡片設(shè)計(jì)目前較為常見,層次細(xì)節(jié)更加豐富,畫面也顯得更活潑一些。
有些朋友經(jīng)常因?yàn)榕渖缓枚l(fā)愁,其實(shí)是需要多去找一些參考來看的,實(shí)在擔(dān)心配色不好,直接去吸優(yōu)秀的配色方案也是OK的,但要注意搭配合理。
-
圖案卡片的設(shè)計(jì)還可以結(jié)合輔助圖形,以圖案的形式與卡片進(jìn)行結(jié)合。這些輔助圖形可以來源于品牌符號的延伸,讓品牌有更多的露出機(jī)會。
也可以是運(yùn)用一些簡單的圖形,提升卡片的設(shè)計(jì)細(xì)節(jié),以下是一些還不錯的設(shè)計(jì)案例。這些卡片上的圖形都有借鑒參考的價(jià)值,自己平時(shí)有時(shí)間的話,也可以多做一些作為圖形的儲備。強(qiáng)烈建議收藏,真的可以很有用。
這里彩云給大家找了非常多的卡片設(shè)計(jì)形式,可以從中參考學(xué)習(xí)配色和紋理造型。
-
圖片、視頻卡片背景也可以用圖片和視頻的形式進(jìn)行設(shè)計(jì),圖片和視頻的選擇一般會偏暗色,以不影響內(nèi)容閱讀為準(zhǔn)。
3、卡片的內(nèi)容
1)文字卡片上的文字不要太長,我的經(jīng)驗(yàn)是橫向不要超過42字(關(guān)于這個(gè)字?jǐn)?shù),有資料可以查,感興趣的可以找找看),縱向不要超過5行。過多的文本不建議使用卡片形式。
2) 內(nèi)容出界只在卡片的框框里做設(shè)計(jì),有時(shí)候未免顯得太呆板,破開卡片的邊界可以讓卡片本身更具形式感。如果被人說你的設(shè)計(jì)沒啥亮點(diǎn),那內(nèi)容出界的設(shè)計(jì)就是一個(gè)很好的提升設(shè)計(jì)亮點(diǎn)的手法。
4、卡片的細(xì)節(jié)
1)光感卡片中的光感細(xì)節(jié)能提升設(shè)計(jì)的質(zhì)感。下面這張圖是我最近做的一張會員卡的背景設(shè)計(jì),大家對比下,在卡片頂部加了1px高光線和斜面反光的細(xì)節(jié)前后的質(zhì)感區(qū)別。
這個(gè)小細(xì)節(jié),我經(jīng)常會用到,執(zhí)行簡單又容易出效果。
2)投影投影的細(xì)節(jié),不要過重,但又要能與背景分離開。有2個(gè)小技巧:1.在取色的時(shí)候,可以選擇背景顏色的色相,然后略微加深一些,不要用純黑色來做投影,會顯臟。2.投影的距離不要太小,太小的投影會顯得不夠自然;也不能太大,太大會很浪費(fèi)界面資源。
3)3D效果3D卡片的設(shè)計(jì),因?yàn)椴槐阌趦?nèi)容編排和閱讀,所以帶透視的卡片在實(shí)際UI中并不太常用。但在作品集包裝和運(yùn)營頁面中,則可以帶來比較好的視覺沖擊力,可以嘗試運(yùn)用。
小結(jié)以上就是今天關(guān)于卡片設(shè)計(jì)的一些經(jīng)驗(yàn)總結(jié),卡片設(shè)計(jì)的應(yīng)用已經(jīng)如此廣泛,我們有必要利用它來提升自己的界面設(shè)計(jì)細(xì)節(jié)。