編輯導(dǎo)語(yǔ)：設(shè)計(jì)需要一定的技術(shù)，但如果缺少了審美，作品可能會(huì)因?yàn)槿狈υO(shè)計(jì)感而被忽略。那如何才能夠提升作品的設(shè)計(jì)感呢？在本篇文章中，作者講述了十個(gè)設(shè)計(jì)的技巧，不妨一起來(lái)看看吧！

Hi，我是彩云。

每個(gè)人都是以新手的身份入行設(shè)計(jì)，沒(méi)有人天生就有很好的審美，它也必須像其他事物一樣得到訓(xùn)練。每天看 Dribbble 上的設(shè)計(jì)作品可能是非常有幫助的，但很多時(shí)候你可能只是在欣賞設(shè)計(jì)，卻不明白為什么。

沒(méi)有想法，只會(huì)用素材，不知道該設(shè)計(jì)什么，所有這些都可能是你進(jìn)步路上的阻力并給你帶來(lái)挫敗感。在今天的這篇文章中我將教你 10 個(gè)非常簡(jiǎn)單的設(shè)計(jì)技巧，這些技巧不需要任何特殊的技能，只要用上就能大大提升你作品的設(shè)計(jì)感。

當(dāng)然，這些不是公式定理，而是大多數(shù)情況下行之有效的技巧。

一、善用黑白

沒(méi)有想法？沒(méi)有好的配圖？那么就只需要用到萬(wàn)能的黑色和白色，就可以迅速獲得一個(gè)具有正確構(gòu)圖的“抽象主義設(shè)計(jì)”。在作品中善用黑白將幫助你理解平衡、留白以及如何使用文字和幾何圖形。

讓我們快速看一個(gè)例子，黑白的運(yùn)用對(duì)作品的展示簡(jiǎn)單而有效，看起來(lái)就很高級(jí)。

二、保持畫(huà)面平衡

我喜歡用我自己發(fā)明的“東西”來(lái)測(cè)試我的設(shè)計(jì)，我稱之為“平衡方案”。這是一個(gè)黑白的內(nèi)容塊方法，我會(huì)用簡(jiǎn)單的幾何圖形來(lái)代替內(nèi)容。

我的這個(gè)方法是讓黑色塊蓋住元素，然后計(jì)算左右的黑色面積，大致相等的話，就視為平衡。如果把這個(gè)原理應(yīng)用到界面中，會(huì)得到這樣的結(jié)果：

用黑色矩形替代主要內(nèi)容，灰色是次要內(nèi)容。顯然你必須靠眼睛觀察，但其實(shí)我們也可以直接計(jì)算。左側(cè)區(qū)域的黑色矩形面積之和為（236×138）+(934×132)+(674×44)+(313×69) = 207109px，右邊的大矩形面積為（446×446） = 198916px。他們之間的差別很小，誤差只有 3.9558%

我現(xiàn)在在設(shè)計(jì)之前不用去計(jì)算，經(jīng)過(guò)多年的練習(xí)，這種意識(shí)就變成了自然而然的事情，因?yàn)槟愕难劬?huì)感覺(jué)到不平衡。

（彩云注：關(guān)于視覺(jué)平衡，這里其實(shí)講的是視覺(jué)面積要大致相同，人眼才會(huì)感知到平衡。正好彩云在上一篇文章《為什么你的設(shè)計(jì)總感覺(jué)不舒服？很可能是視覺(jué)平衡沒(méi)有做好》中有分享更全面的畫(huà)面平衡知識(shí)，一定要讀一讀了。）

三、給作品增加背景

我在前面那個(gè)例子中是用了一個(gè)灰色的背景來(lái)展示設(shè)計(jì)作品，但其實(shí)可以嘗試不同的元素，這有助于增加畫(huà)面空間感和背景效果。

但要注意，在一個(gè)真實(shí)的網(wǎng)站中，頁(yè)面周圍可能沒(méi)有有這么多多余空間，所以這只是一個(gè)作品展示技巧。

在上面這個(gè)作品展示中，咖啡豆給人的感覺(jué)是有深度和有品質(zhì)的。

四、使用規(guī)范字體大小

不用浪費(fèi)時(shí)間整天去測(cè)試尺寸。我建議段落文字尺寸大約是 14-18pt，副標(biāo)題是 24-36pt，標(biāo)題可以用更大一些的字號(hào)（我個(gè)人是習(xí)慣用 96-144pt）。Figma 的默認(rèn)大小非常適合排版。

上面的尺寸看起來(lái)太小，這也正常，因?yàn)槟阍谑謾C(jī)上看到的圖，在電腦上全屏看就是正常的。

注意：有些字體比其他字體大或小得多。你應(yīng)該使用像 Roboto 這樣的標(biāo)準(zhǔn)字體，如果字體大小跟 14-18pt 的 Roboto 差不多，那么它是完美的正文字體。

段落 18，導(dǎo)航 24，標(biāo)題 96

彩云注：我建議剛?cè)胄胁痪玫男』锇?，比如不知道網(wǎng)頁(yè)規(guī)范，移動(dòng)端規(guī)范，一個(gè)比較快且行之有效學(xué)習(xí)規(guī)范的方法就是去截圖大廠的應(yīng)用，網(wǎng)頁(yè)和 APP 都可以。然后，對(duì)著截圖直接量就好了，記住人家在做界面的時(shí)候，字體用多大，什么顏色，間距，字號(hào)等等。

記住這些參數(shù)，至少不容易出錯(cuò)了。之后，在自己項(xiàng)目中自定義規(guī)范，關(guān)于設(shè)計(jì)規(guī)范如何制定我之前也專門寫(xiě)過(guò)文章，想了解這塊知識(shí)的一定要去看看《原來(lái)設(shè)計(jì)規(guī)范要這樣理解，早知道就好了！》

五、增加 z 軸

如果你有一些透明的圖片，可以利用它們來(lái)設(shè)計(jì)一些 3D 圖層。如果你沒(méi)有，你可以使用網(wǎng)頁(yè)版 AI 自動(dòng)摳圖神器！

當(dāng)今的在線去背工具多半會(huì)整合 AI 人工智能技術(shù)，以機(jī)器學(xué)習(xí)方式去建構(gòu)出可準(zhǔn)確辨識(shí)前景和背景的模型，使用機(jī)器自動(dòng)化去除背景的好處是快速、精確而且無(wú)需額外編輯，即使沒(méi)有專業(yè)繪圖軟件一樣可以在瀏覽器進(jìn)行，remove.bg 是在線去背服務(wù)最早出現(xiàn)、而且最強(qiáng)大的選擇，后來(lái)也有 FocoClip。

作為 CSS 中的 Z-index，你可以將透明圖片放在其他項(xiàng)目的后面或前面，給人一種三維的錯(cuò)覺(jué)。這對(duì)增強(qiáng)設(shè)計(jì)感來(lái)說(shuō)，是非常有效的。

讓我們看看我使用這種技術(shù)的一個(gè)簡(jiǎn)單設(shè)計(jì)。

鳥(niǎo)嘴巴從綠色背景中出界到黃色背景中，強(qiáng)化了整體的視覺(jué)沖擊力。

六、使用高級(jí)淺色

明亮的顏色很棒，但沒(méi)用好的話，往往會(huì)導(dǎo)致激進(jìn)的設(shè)計(jì)和糟糕的畫(huà)面。此外，淺色設(shè)計(jì)（性冷淡設(shè)計(jì)）如今非常流行，所以讓我們開(kāi)始嘗試顏色選擇器的一個(gè)新區(qū)域。

在這個(gè)紅框范圍內(nèi)可以快速選到一些比較好的顏色

兩種配色都沒(méi)有啥問(wèn)題，這是一個(gè)審美的問(wèn)題，但如果你想要表達(dá)一些更高級(jí)的設(shè)計(jì)感覺(jué)，可以嘗試淺色。

七、打造呼吸感

在我看來(lái)，大的留白比太少的留白要好。雜亂滿檔的設(shè)計(jì)很糟糕， 呼吸感可以通過(guò)多種方式獲得：

1. 讓背景大面積保持可見(jiàn)
2. 善用間距，避免出現(xiàn)文字墻效果
3. 使用不會(huì)引起太多關(guān)注的圖片
4. 精簡(jiǎn)文字，保留朗朗上口的短語(yǔ)

更大的留白（在上圖中指的是黑色區(qū)域）會(huì)顯得更加高級(jí)。

八、加入噪點(diǎn)

通常當(dāng)我們思考設(shè)計(jì)時(shí)，我們想到的是干凈、流暢、清晰的概念。但太干凈的畫(huà)面會(huì)讓人感到不真實(shí)，缺乏質(zhì)感。

在設(shè)計(jì)中，噪點(diǎn)是一個(gè)很好的朋友，尤其是當(dāng)你想給你的網(wǎng)站有一個(gè)優(yōu)雅或藝術(shù)的外觀時(shí)。此外，應(yīng)用一個(gè)微妙的噪點(diǎn)讓畫(huà)面能有一個(gè)電影級(jí)的外觀，這種處理手法非常適合用在視頻和動(dòng)態(tài)網(wǎng)站中。

你可以使用 Photoshop 在白色背景上創(chuàng)建 2-4K 大小的雜色-高斯分布的紋理，然后將它放到頁(yè)面的最上層。

整個(gè)網(wǎng)頁(yè)中都增加了一些噪點(diǎn)，這讓畫(huà)面整體擁有更強(qiáng)的質(zhì)感。（這里噪點(diǎn)的效果比較微妙，小圖可能看不清，點(diǎn)看大圖可以看到噪點(diǎn)效果）

九、使用漂亮的字體

有很多不同的字族和風(fēng)格，但總的來(lái)說(shuō)，我把它們分為三大類:

1. 襯線字體
2. 無(wú)襯線字體
3. 正文字體

常用的襯線字體，如 Abril Fatface, Playfair Display, Volux, Chalga 等。

無(wú)襯線字體包括 Metropolis、ITC Avant Garde、Redwing、Takota、Gotham….

十、使用幾何圖形

這可能是最難使用的技巧，但如果使用正確，它定會(huì)大放光彩。

使用幾何圖形有助于加強(qiáng)概念和布局中的順序，甚至不需要配圖。找到合適的幾何形狀是困難的，我至今仍然不能很好地掌握它。

一個(gè)好用的技巧是將文案中的字母、數(shù)字和標(biāo)題作為幾何形狀:讓它們變得巨大而巧妙，或者使用一些特殊的字母作為形狀(A 很管用)。（這個(gè)技巧非常實(shí)用，彩云經(jīng)常在一些視覺(jué)內(nèi)容較少的頁(yè)面，用一個(gè)大的幾何圖形比如大寫(xiě)的字母作為底部背景，用很淺的顏色，看起來(lái)視覺(jué)上就能更豐富了。）

#專欄作家#

彩云sky，騰訊高級(jí)視覺(jué)設(shè)計(jì)師；公眾號(hào)：彩云譯設(shè)計(jì)

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議