1、善用黑白

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

讓我們快速看一個例子，黑白的運(yùn)用對作品的展示簡單而有效，看起來就很高級。

2、保持畫面平衡

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

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

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

我現(xiàn)在在設(shè)計之前不用去計算，經(jīng)過多年的練習(xí)，這種意識就變成了自然而然的事情，因為你的眼睛會感覺到不平衡。

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

3、給作品增加背景

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

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

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

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

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

上面的尺寸看起來太小，這也正常，因為你在手機(jī)上看到的圖，在電腦上全屏看就是正常的。

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

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

（彩云注：我建議剛?cè)胄胁痪玫男』锇?，比如不知道網(wǎng)頁規(guī)范，移動端規(guī)范，一個比較快且行之有效學(xué)習(xí)規(guī)范的方法就是去截圖大廠的應(yīng)用，網(wǎng)頁和APP都可以。然后，對著截圖直接量就好了，記住人家在做界面的時候，字體用多大，什么顏色，間距，字號等等。記住這些參數(shù)，至少不容易出錯了。之后，在自己項目中自定義規(guī)范，關(guān)于設(shè)計規(guī)范如何制定我之前也專門寫過文章，想了解這塊知識的一定要去看看《原來設(shè)計規(guī)范要這樣理解，早知道就好了！》）

5、增加z軸

如果你有一些透明的圖片，可以利用它們來設(shè)計一些3D圖層。如果你沒有，你可以使用remove.bg ，網(wǎng)頁版AI自動摳圖，神器！

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

讓我們看看我使用這種技術(shù)的一個簡單設(shè)計。

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

6、 使用高級淺色

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

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

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

7、打造呼吸感

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

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

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

8、加入噪點(diǎn)

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

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

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

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

9、使用漂亮的字體

其實有很多設(shè)計的比較糟糕的字體，尤其是那些預(yù)裝在我們電腦上的字體。可以從網(wǎng)上找到很多優(yōu)秀的第三方字體，但是要小心:很多字體都不是免費(fèi)的，沒有授權(quán)就使用它們可能會給你帶來麻煩。不過，別擔(dān)心，可以從這個網(wǎng)站中找到很多免費(fèi)的字體 https://alternatype.net

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

1. 襯線字體
2. 無襯線字體
3. 正文字體

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

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

10、使用幾何圖形

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

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

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

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

原文地址：medium

作者：Lorenzo Doremi

譯文地址：彩云譯設(shè)計（公眾號）

譯者：彩云Sky

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》老板說作品沒有設(shè)計感，這10個優(yōu)化技巧簡單有效，你一定要知道

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)