2020-12-10 前端達(dá)人
1. 圓角
不同的圓角，所帶來(lái)的氣質(zhì)是不同的。圓角很小，視覺(jué)印象是硬朗，高冷，具有攻擊性的，多用于嚴(yán)肅、高端、沖突感強(qiáng)烈的設(shè)計(jì)中；而更大的圓角給人的感覺(jué)是有親和力，柔軟，安全的，多用于兒童產(chǎn)品、娛樂(lè)性強(qiáng)的設(shè)計(jì)中。
在設(shè)計(jì)的時(shí)候，根據(jù)自己的產(chǎn)品屬性選擇氣質(zhì)相符的圓角設(shè)計(jì)很有必要。
△ 常見(jiàn)的卡片弧度形式有4類(lèi)：直接、小圓角、大圓角、特殊圓角
我一般喜歡用4的倍數(shù)來(lái)設(shè)置圓角，比如圓角大小為4px、8px、12px之類(lèi)的。要注意的是，圓角越大，可用面積會(huì)越小，需要根據(jù)實(shí)際場(chǎng)景進(jìn)行平衡，以視覺(jué)上舒服為宜。
2. 比例
卡片的比例，我習(xí)慣遵循一些美感規(guī)律，比如黃金比例（1.618），白銀比例（1.414），青銅比例（1.732），正方形之類(lèi)的比例。當(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)的形式感和視覺(jué)沖擊力，所以會(huì)比較多的用在游戲或者運(yùn)營(yíng)相關(guān)的界面中，吸引用戶(hù)的注意力。缺點(diǎn)是批量化設(shè)計(jì)成本略高且因?yàn)檫^(guò)于風(fēng)格化而不夠耐看。
1. 顏色
卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對(duì)比要符合界面對(duì)比度標(biāo)準(zhǔn)（ https://contrast-grid.eightshapes.com/，這個(gè)網(wǎng)站可以直接查到可用性數(shù)值，只要不是DNP就是可以用的配色），以免影響內(nèi)容本身的閱讀。如果拿不準(zhǔn)的話(huà)，可以多用一些白色，比較不容易出錯(cuò)。
純色卡片設(shè)計(jì)會(huì)讓界面顯得冷靜高級(jí)，但對(duì)配色的要求相對(duì)較高，用不好的話(huà)會(huì)顯得單調(diào)，沉悶。如果你堅(jiān)持要用這種卡片配色的話(huà)，建議搭配一些圖形紋理，會(huì)更容易把控，還能提升畫(huà)面細(xì)節(jié)。
△ 純色卡片設(shè)計(jì)
漸變色的卡片設(shè)計(jì)目前較為常見(jiàn)，層次細(xì)節(jié)更加豐富，畫(huà)面也顯得更活潑一些。
△ 漸變色卡片設(shè)計(jì)https://dribbble.com/shots/12284120-Wallet-Design-App
有些朋友經(jīng)常因?yàn)榕渖缓枚l(fā)愁，其實(shí)是需要多去找一些參考來(lái)看的，實(shí)在擔(dān)心配色不好，直接去吸優(yōu)秀的配色方案也是OK的，但要注意搭配合理。
教大家一個(gè)方法，去dribbble上搜color或直接打開(kāi) → https://dribbble.com/search/color這個(gè)鏈接，就可以看到非常多的優(yōu)秀配色方案了。
2. 圖案
卡片的設(shè)計(jì)還可以結(jié)合輔助圖形，以圖案的形式與卡片進(jìn)行結(jié)合。這些輔助圖形可以來(lái)源于品牌符號(hào)的延伸，讓品牌有更多的露出機(jī)會(huì)。
也可以是運(yùn)用一些簡(jiǎn)單的圖形，提升卡片的設(shè)計(jì)細(xì)節(jié)，以下是一些還不錯(cuò)的設(shè)計(jì)案例。這些卡片上的圖形都有借鑒參考的價(jià)值，自己平時(shí)有時(shí)間的話(huà)，也可以多做一些作為圖形的儲(chǔ)備。強(qiáng)烈建議收藏，真的可以很有用。
△ 來(lái)源：https://dribbble.com/shots/10513966-Gradient-Bank-cards
△ 來(lái)源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design
△ 來(lái)源：https://dribbble.com/shots/11313260-Finance-App-Exploration
△ 來(lái)源：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)。
△ 來(lái)源：https://dribbble.com/shots/5717917-Travel-Article-Application
1. 文字
卡片上的文字不要太長(zhǎng)，我的經(jīng)驗(yàn)是橫向不要超過(guò)42字（關(guān)于這個(gè)字?jǐn)?shù)，有資料可以查，感興趣的可以找找看），縱向不要超過(guò)5行。過(guò)多的文本不建議使用卡片形式。
其實(shí)這張卡片的設(shè)計(jì)中，我也用到了黃金比例來(lái)指導(dǎo)自己的設(shè)計(jì)，方便快速確定文字比例關(guān)系。
2. 間距（網(wǎng)格法）
卡片上的文字間距最好有一定的規(guī)律，這里可以按網(wǎng)格法來(lái)規(guī)劃，比如8px網(wǎng)格，10px網(wǎng)格等等。網(wǎng)格的使用其實(shí)可以很靈活，比如我這里的卡片其實(shí)就用到了8px網(wǎng)格，各間距就會(huì)用8的倍數(shù)來(lái)做。大小比例就盡量用黃金比例來(lái)處理，這樣做目的一方面是為了讓界面有秩序，另一方面是提升決策效率。秩序產(chǎn)生美，而效率讓你早點(diǎn)下班。
3. 減少線(xiàn)框
卡片中盡量減少線(xiàn)框，多用留白來(lái)進(jìn)行內(nèi)容劃分。
4. 層次清晰
卡片中的內(nèi)容層級(jí)要做好，標(biāo)題和內(nèi)容之間的差異要明顯。這里的層次主要是通過(guò)對(duì)比拉開(kāi)的，做好對(duì)比的關(guān)鍵就是對(duì)比效果要強(qiáng)烈，決不能模棱兩可。
比如下圖中左邊的案例只是在文字的字號(hào)上有一定的對(duì)比，但字號(hào)間相差不大，效果不明顯，就會(huì)讓人第一時(shí)間不知道看哪。而右側(cè)的案例則用了加粗，大字號(hào)，大留白等，讓畫(huà)面有了強(qiáng)烈的對(duì)比，從而產(chǎn)生更好的信息層級(jí)。
5. 內(nèi)容出界
只在卡片的框框里做設(shè)計(jì)，有時(shí)候未免顯得太呆板，破開(kāi)卡片的邊界可以讓卡片本身更具形式感。如果被人說(shuō)你的設(shè)計(jì)沒(méi)啥亮點(diǎn)，那內(nèi)容出界的設(shè)計(jì)就是一個(gè)很好的提升設(shè)計(jì)亮點(diǎn)的手法。
△ 彩云曾經(jīng)做的一張banner就是運(yùn)用了出界的手法
△ 來(lái)源：dribbble。界面上的天氣圖標(biāo)也用了出界的手法，讓畫(huà)面顯得更有亮點(diǎn)
1. 光感
卡片中的光感細(xì)節(jié)能提升設(shè)計(jì)的質(zhì)感。下面這張圖是我最近做的一張會(huì)員卡的背景設(shè)計(jì)，大家對(duì)比下，在卡片頂部加了1px高光線(xiàn)和斜面反光的細(xì)節(jié)前后的質(zhì)感區(qū)別。
這個(gè)小細(xì)節(jié)，我經(jīng)常會(huì)用到，執(zhí)行簡(jiǎn)單又容易出效果。
2. 投影
投影的細(xì)節(jié)，不要過(guò)重，但又要能與背景分離開(kāi)。有2個(gè)小技巧：
3. 3D效果
3D卡片的設(shè)計(jì)，因?yàn)椴槐阌趦?nèi)容編排和閱讀，所以帶透視的卡片在實(shí)際UI中并不太常用。但在作品集包裝和運(yùn)營(yíng)頁(yè)面中，則可以帶來(lái)比較好的視覺(jué)沖擊力，可以嘗試運(yùn)用。
△ 圖片來(lái)自：Cradle
以上就是今天彩云關(guān)于卡片設(shè)計(jì)的一些經(jīng)驗(yàn)總結(jié)，卡片設(shè)計(jì)的應(yīng)用已經(jīng)如此廣泛，我們有必要利用它來(lái)提升自己的界面設(shè)計(jì)細(xì)節(jié)。
轉(zhuǎn)自：優(yōu)設(shè)網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com