一、卡片投影

在做卡片投影時(shí)將原本卡片復(fù)制一層，把底層卡片縮小之后（大概90%）使用高斯模糊（10px左右），適當(dāng)調(diào)整模糊數(shù)值和不透明度，可以把投影做到更加精致美觀，并且操作起來調(diào)節(jié)的數(shù)字也比較少，有利于整個(gè)項(xiàng)目投影的統(tǒng)一（注意蒙版的組不能直接模糊，需要點(diǎn)擊圖層—將所選拼合為位圖）

二、圖片的比例

不同板塊的圖片根據(jù)各自功能遵循一定的比例，即有利于產(chǎn)品的轉(zhuǎn)化也可以使項(xiàng)目更加規(guī)范。常見的比例有16:9、1:1、3:2、4:3、3:1。

16:9 - 視頻類尺寸多采用該尺寸

1:1 - 個(gè)人圖像一般采用1:1尺寸；想在一排展示更多產(chǎn)品時(shí)一般采用該尺寸，既可以突出主體，又可以充分利用750的寬度

3:2 - 是膠卷的比例，所以一些app采用相機(jī)拍攝的照片時(shí)，可以考慮這個(gè)尺寸

4:3 - 圖片展示的信息更加多，所以一些側(cè)重展示圖片的app使用該尺寸比較合適

3:1 - 這個(gè)尺寸比較特殊，一般用在對話框的圖片里（對話框的圖片尺寸比例大于等于3:1時(shí)縮略圖統(tǒng)一采用3:1的尺寸顯示）

三、卡片細(xì)節(jié)添加

添加細(xì)節(jié)可以把設(shè)計(jì)立馬從平淡無趣變得耐看起來，平時(shí)多在花瓣、追波收集卡片上的背景紋理，多去臨摹，自己設(shè)計(jì)的時(shí)候就會發(fā)現(xiàn)細(xì)節(jié)其實(shí)并不難。

四、頁面的分割感

現(xiàn)在越來越流行用大留白代替分割線的設(shè)計(jì)，弱化分割線的使用，可以使用戶在瀏覽時(shí)在視覺上更加流暢。

五、圖標(biāo)細(xì)節(jié)

圖標(biāo)可以分為面性圖標(biāo)、線性圖標(biāo)、線面結(jié)合圖標(biāo)。

面性圖標(biāo)可以添加細(xì)節(jié)例如：白色面性微漸變、色塊不透明等。

白色面性微漸變：圖標(biāo)一邊顏色為白色，另一邊則微微映襯出環(huán)境色。

色塊不透明：指的是同緯度的色系不透明，但不透明的面積占比較少。

線性圖標(biāo)應(yīng)該注意統(tǒng)一線段粗細(xì)和圓角，一般粗細(xì)使用4px，年輕化產(chǎn)品可以使用稍微粗一些。

線面結(jié)合類圖標(biāo)應(yīng)該注意每個(gè)圖標(biāo)面的比重應(yīng)該相對均衡一些。

圖標(biāo)顏色應(yīng)該統(tǒng)一漸變的方向和飽和度。并且金剛區(qū)圖標(biāo)顏色不宜過多（不能超過4個(gè)顏色）圖標(biāo)設(shè)計(jì)完成記得使用圖標(biāo)盒子進(jìn)行視覺上的統(tǒng)一

六、使用數(shù)字字體

遇到字號較大的數(shù)字時(shí)，考慮使用數(shù)字字體，可以很明顯的和其余文字區(qū)分開，提高界面的美觀程度也能突出要表現(xiàn)的數(shù)字，用了就會發(fā)現(xiàn)有多香了～（對了，推薦的數(shù)字字體：lato、din。嗯…找不到字體可以下載“字由”，鏈接：http://www.hellofont.cn）

七、對齊

一般借助軟件自帶的對齊都很簡單，但是設(shè)計(jì)是給人看的，所以我們更要講究視覺上的對齊。

圖標(biāo)采用圖標(biāo)盒子對齊，上文已經(jīng)說過了。

方和圓的對齊：相同直徑的正方形和圓，正方形的視覺占比（面積）大于圓。所以一般我們用軟件上下對齊沒毛病后視覺上看起來還是別扭的，這時(shí)候，適當(dāng)?shù)陌颜叫慰s小一點(diǎn)點(diǎn)就可以了。

按鈕里包含圖標(biāo)的對齊：一般情況下按鈕里只是文字，我們只要把文字上下左右居中就行，有圖標(biāo)的話如果把圖標(biāo)和文字打個(gè)組再上下左右居中一下好像沒什么問題，但是一般來講文字都會比圖標(biāo)復(fù)雜，也就是視覺占比大，單純打組左右居中視覺上看起來會顯得左右距離不相等，所以居中后，把圖標(biāo)和文字的組向圖標(biāo)方向挪一挪即可。

八、文字和背景之間的對比度

“W3C測試”前景色/背景色大于等于4.5:1，強(qiáng)光下視覺比較好。具體數(shù)值直接點(diǎn)擊下面網(wǎng)址輸入色值就可以得到。尤其碰到亮色背景而字體是白色時(shí)，覺得看起來不舒服了，就在下面網(wǎng)址測試一下。網(wǎng)站是：https://webaim.org/resources/contrastchecker/

謝謝閱讀～