1、善用黑白
沒有想法？沒有好的配圖？那么就只需要用到萬能的黑色和白色，就可以迅速獲得一個(gè)具有正確構(gòu)圖的“抽象主義設(shè)計(jì)”。在作品中善用黑白將幫助你理解平衡、留白以及如何使用文字和幾何圖形。
讓我們快速看一個(gè)例子，黑白的運(yùn)用對(duì)作品的展示簡(jiǎn)單而有效，看起來就很高級(jí)。
2、保持畫面平衡
我喜歡用我自己發(fā)明的“東西”來測(cè)試我的設(shè)計(jì)，我稱之為“平衡方案”。這是一個(gè)黑白的內(nèi)容塊方法，我會(huì)用簡(jiǎn)單的幾何圖形來代替內(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)過多年的練習(xí)，這種意識(shí)就變成了自然而然的事情，因?yàn)槟愕难劬?huì)感覺到不平衡。
（彩云注：關(guān)于視覺平衡，這里其實(shí)講的是視覺面積要大致相同，人眼才會(huì)感知到平衡。正好彩云在上一篇文章《為什么你的設(shè)計(jì)總感覺不舒服？很可能是視覺平衡沒有做好》中有分享更全面的畫面平衡知識(shí)，一定要讀一讀了。）
3、給作品增加背景
我在前面那個(gè)例子中是用了一個(gè)灰色的背景來展示設(shè)計(jì)作品，但其實(shí)可以嘗試不同的元素，這有助于增加畫面空間感和背景效果。
但要注意，在一個(gè)真實(shí)的網(wǎng)站中，頁面周圍可能沒有這么多多余空間，所以這只是一個(gè)作品展示技巧。
在上面這個(gè)作品展示中，咖啡豆給人的感覺是有深度和有品質(zhì)的。
4、使用規(guī)范字體大小
不用浪費(fèi)時(shí)間整天去測(cè)試尺寸。我建議段落文字尺寸大約是14-18pt，副標(biāo)題是24-36pt，標(biāo)題可以用更大一些的字號(hào)（我個(gè)人是習(xí)慣用96-144pt）。Figma的默認(rèn)大小非常適合排版。
上面的尺寸看起來太小，這也正常，因?yàn)槟阍谑謾C(jī)上看到的圖，在電腦上全屏看就是正常的。
注意：有些字體比其他字體大或小得多。你應(yīng)該使用像Roboto這樣的標(biāo)準(zhǔn)字體，如果字體大小跟14-18pt的Roboto差不多，那么它是完美的正文字體。
段落18，導(dǎo)航24，標(biāo)題96
（彩云注：我建議剛?cè)胄胁痪玫男』锇椋热绮恢谰W(wǎng)頁規(guī)范，移動(dòng)端規(guī)范，一個(gè)比較快且行之有效學(xué)習(xí)規(guī)范的方法就是去截圖大廠的應(yīng)用，網(wǎng)頁和APP都可以。然后，對(duì)著截圖直接量就好了，記住人家在做界面的時(shí)候，字體用多大，什么顏色，間距，字號(hào)等等。記住這些參數(shù)，至少不容易出錯(cuò)了。之后，在自己項(xiàng)目中自定義規(guī)范，關(guān)于設(shè)計(jì)規(guī)范如何制定我之前也專門寫過文章，想了解這塊知識(shí)的一定要去看看《原來設(shè)計(jì)規(guī)范要這樣理解，早知道就好了！》）
5、增加z軸
如果你有一些透明的圖片，可以利用它們來設(shè)計(jì)一些3D圖層。如果你沒有，你可以使用remove.bg ，網(wǎng)頁版AI自動(dòng)摳圖，神器！
作為CSS中的Z-index，你可以將透明圖片放在其他項(xiàng)目的后面或前面，給人一種三維的錯(cuò)覺。這對(duì)增強(qiáng)設(shè)計(jì)感來說，是非常有效的。
讓我們看看我使用這種技術(shù)的一個(gè)簡(jiǎn)單設(shè)計(jì)。
鳥嘴巴從綠色背景中出界到黃色背景中，強(qiáng)化了整體的視覺沖擊力。
6、 使用高級(jí)淺色
明亮的顏色很棒，但沒用好的話，往往會(huì)導(dǎo)致激進(jìn)的設(shè)計(jì)和糟糕的畫面。此外，淺色設(shè)計(jì)（性冷淡設(shè)計(jì)）如今非常流行，所以讓我們開始嘗試顏色選擇器的一個(gè)新區(qū)域。
在這個(gè)紅框范圍內(nèi)可以快速選到一些比較好的顏色
兩種配色都沒有啥問題，這是一個(gè)審美的問題，但如果你想要表達(dá)一些更高級(jí)的設(shè)計(jì)感覺，可以嘗試淺色。
7、打造呼吸感
在我看來，大的留白比太少的留白要好。雜亂滿檔的設(shè)計(jì)很糟糕， 呼吸感可以通過多種方式獲得：
-
讓背景大面積保持可見 -
善用間距，避免出現(xiàn)文字墻效果 -
使用不會(huì)引起太多關(guān)注的圖片 -
精簡(jiǎn)文字，保留朗朗上口的短語
更大的留白（在上圖中指的是黑色區(qū)域）會(huì)顯得更加高級(jí)。
8、加入噪點(diǎn)
通常當(dāng)我們思考設(shè)計(jì)時(shí)，我們想到的是干凈、流暢、清晰的概念。但太干凈的畫面會(huì)讓人感到不真實(shí)，缺乏質(zhì)感。
在設(shè)計(jì)中，噪點(diǎn)是一個(gè)很好的朋友，尤其是當(dāng)你想給你的網(wǎng)站有一個(gè)優(yōu)雅或藝術(shù)的外觀時(shí)。此外，應(yīng)用一個(gè)微妙的噪點(diǎn)讓畫面能有一個(gè)電影級(jí)的外觀，這種處理手法非常適合用在視頻和動(dòng)態(tài)網(wǎng)站中。
你可以使用Photoshop在白色背景上創(chuàng)建2-4K大小的雜色-高斯分布的紋理，然后將它放到頁面的最上層。
整個(gè)網(wǎng)頁中都增加了一些噪點(diǎn)，這讓畫面整體擁有更強(qiáng)的質(zhì)感。（這里噪點(diǎn)的效果比較微妙，小圖可能看不清，放大可以看到噪點(diǎn)效果）
9、使用漂亮的字體
其實(shí)有很多設(shè)計(jì)的比較糟糕的字體，尤其是那些預(yù)裝在我們電腦上的字體。可以從網(wǎng)上找到很多優(yōu)秀的第三方字體，但是要小心:很多字體都不是免費(fèi)的，沒有授權(quán)就使用它們可能會(huì)給你帶來麻煩。不過，別擔(dān)心，可以從這個(gè)網(wǎng)站中找到很多免費(fèi)的字體 https://alternatype.net
有很多不同的字族和風(fēng)格，但總的來說，我把它們分為三大類:
- 襯線字體
- 無襯線字體
- 正文字體
常用的襯線字體，如Abril Fatface, Playfair Display, Volux, Chalga等。
無襯線字體包括Metropolis、ITC Avant Garde、Redwing、Takota、Gotham….
10、使用幾何圖形
這可能是最難使用的技巧，但如果使用正確，它定會(huì)大放光彩。
使用幾何圖形有助于加強(qiáng)概念和布局中的順序，甚至不需要配圖。找到合適的幾何形狀是困難的，我至今仍然不能很好地掌握它。
一個(gè)好用的技巧是將文案中的字母、數(shù)字和標(biāo)題作為幾何形狀:讓它們變得巨大而巧妙，或者使用一些特殊的字母作為形狀(A很管用)。（這個(gè)技巧非常實(shí)用，彩云經(jīng)常在一些視覺內(nèi)容較少的頁面，用一個(gè)大的幾何圖形比如大寫的字母作為底部背景，用很淺的顏色，看起來視覺上就能更豐富了。）
本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）
原文地址：medium
作者：Lorenzo Doremi
譯文地址：彩云譯設(shè)計(jì)（公眾號(hào)）
譯者：彩云Sky
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》老板說作品沒有設(shè)計(jì)感，這10個(gè)優(yōu)化技巧簡(jiǎn)單有效，你一定要知道
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.shtzxx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)