加勒比无码专区中文字幕,最新精品国偷自产在线,国内精品久久久久尤物,91精品国产免费久久久久久,日本精品有码在线观看

国产精品美女久久久浪潮AV,国产精品三级一二三区,久久精品国产一区二区小说 ,依依成人影视国产精品,全部无卡免费的毛片在线看,日本一区二区三深夜不卡,国产精品女同一区二区久久,国产精品夜色一区二区三区

想做好卡片設(shè)計(jì)，原來要注意這么多細(xì)節(jié)

2022-9-26 純純

1、卡片的造型

1）圓角

不同的圓角，所帶來的氣質(zhì)是不同的。圓角很小，視覺印象是硬朗，高冷，具有攻擊性的，多用于嚴(yán)肅、高端、沖突感強(qiáng)烈的設(shè)計(jì)中；而更大的圓角給人的感覺是有親和力，柔軟，安全的，多用于兒童產(chǎn)品、娛樂性強(qiáng)的設(shè)計(jì)中。

在設(shè)計(jì)的時(shí)候，根據(jù)自己的產(chǎn)品屬性選擇氣質(zhì)相符的圓角設(shè)計(jì)很有必要。

undefined

常見的卡片弧度形式有4類：直接、小圓角、大圓角、特殊圓角

我一般喜歡用4的倍數(shù)來設(shè)置圓角，比如圓角大小為4px、8px、12px之類的。要注意的是，圓角越大，可用面積會(huì)越小，需要根據(jù)實(shí)際場(chǎng)景進(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，比較接近于黃金比例，我就干脆讓它等于黃金比例。

undefined

3）異型

除了正常的卡片樣式，還可以做一些異型的卡片設(shè)計(jì)。異型卡片具有較強(qiáng)的形式感和視覺沖擊力，所以會(huì)比較多的用在游戲或者運(yùn)營(yíng)相關(guān)的界面中，吸引用戶的注意力。缺點(diǎn)是批量化設(shè)計(jì)成本略高且因?yàn)檫^于風(fēng)格化而不夠耐看。

undefined

2、卡片的效果

1）顏色

卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對(duì)比要符合界面對(duì)比度標(biāo)準(zhǔn)（ https://contrast-grid.eightshapes.com/，這個(gè)網(wǎng)站可以直接查到可用性數(shù)值，只要不是DNP就是可以用的配色），以免影響內(nèi)容本身的閱讀。如果拿不準(zhǔn)的話，可以多用一些白色，比較不容易出錯(cuò)。

純色卡片設(shè)計(jì)會(huì)讓界面顯得冷靜高級(jí)，但對(duì)配色的要求相對(duì)較高，用不好的話會(huì)顯得單調(diào)，沉悶。如果你堅(jiān)持要用這種卡片配色的話，建議搭配一些圖形紋理，會(huì)更容易把控，還能提升畫面細(xì)節(jié)。

undefined

純色卡片設(shè)計(jì)

漸變色的卡片設(shè)計(jì)目前較為常見，層次細(xì)節(jié)更加豐富，畫面也顯得更活潑一些。

undefined

漸變色卡片設(shè)計(jì)https://dribbble.com/shots/12284120-Wallet-Design-App

有些朋友經(jīng)常因?yàn)榕渖缓枚l(fā)愁，其實(shí)是需要多去找一些參考來看的，實(shí)在擔(dān)心配色不好，直接去吸優(yōu)秀的配色方案也是OK的，但要注意搭配合理。

教大家一個(gè)方法，去dribbble上搜color或直接打開https://dribbble.com/search/color這個(gè)鏈接，就可以看到非常多的優(yōu)秀配色方案了。

undefined

2）圖案

卡片的設(shè)計(jì)還可以結(jié)合輔助圖形，以圖案的形式與卡片進(jìn)行結(jié)合。這些輔助圖形可以來源于品牌符號(hào)的延伸，讓品牌有更多的露出機(jī)會(huì)。

undefined

也可以是運(yùn)用一些簡(jiǎn)單的圖形，提升卡片的設(shè)計(jì)細(xì)節(jié)，以下是一些還不錯(cuò)的設(shè)計(jì)案例。這些卡片上的圖形都有借鑒參考的價(jià)值，自己平時(shí)有時(shí)間的話，也可以多做一些作為圖形的儲(chǔ)備。強(qiáng)烈建議收藏，真的可以很有用。

undefined

來源：https://dribbble.com/shots/10513966-Gradient-Bank-cards

undefined

來源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design

undefined

來源：https://dribbble.com/shots/11313260-Finance-App-Exploration

undefined

來源：https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD

這里彩云給大家找了非常多的卡片設(shè)計(jì)形式，可以從中參考學(xué)習(xí)配色和紋理造型。

3）圖片、視頻

卡片背景也可以用圖片和視頻的形式進(jìn)行設(shè)計(jì)，圖片和視頻的選擇一般會(huì)偏暗色，以不影響內(nèi)容閱讀為準(zhǔn)。

undefined

來源：https://dribbble.com/shots/5717917-Travel-Article-Application

3、卡片的內(nèi)容

1）文字

卡片上的文字不要太長(zhǎng)，我的經(jīng)驗(yàn)是橫向不要超過42字（關(guān)于這個(gè)字?jǐn)?shù)，有資料可以查，感興趣的可以找找看），縱向不要超過5行。過多的文本不建議使用卡片形式。

undefined

其實(shí)這張卡片的設(shè)計(jì)中，我也用到了黃金比例來指導(dǎo)自己的設(shè)計(jì)，方便快速確定文字比例關(guān)系。

undefined

2）間距（網(wǎng)格法）

卡片上的文字間距最好有一定的規(guī)律，這里可以按網(wǎng)格法來規(guī)劃，比如8px網(wǎng)格，10px網(wǎng)格等等。網(wǎng)格的使用其實(shí)可以很靈活，比如我這里的卡片其實(shí)就用到了8px網(wǎng)格，各間距就會(huì)用8的倍數(shù)來做。大小比例就盡量用黃金比例來處理，這樣做目的一方面是為了讓界面有秩序，另一方面是提升決策效率。秩序產(chǎn)生美，而效率讓你早點(diǎn)下班。

undefined

3）減少線框

卡片中盡量減少線框，多用留白來進(jìn)行內(nèi)容劃分。

undefined

4）層次清晰

卡片中的內(nèi)容層級(jí)要做好，標(biāo)題和內(nèi)容之間的差異要明顯。這里的層次主要是通過對(duì)比拉開的，做好對(duì)比的關(guān)鍵就是對(duì)比效果要強(qiáng)烈，決不能模棱兩可。

比如下圖中左邊的案例只是在文字的字號(hào)上有一定的對(duì)比，但字號(hào)間相差不大，效果不明顯，就會(huì)讓人看第一時(shí)間不知道看哪。而右側(cè)的案例則用了加粗，大字號(hào)，大留白等，讓畫面有了強(qiáng)烈的對(duì)比，從而產(chǎn)生更好的信息層級(jí)。

undefined