編輯導語：設計需要一定的技術，但如果缺少了審美，作品可能會因為缺乏設計感而被忽略。那如何才能夠提升作品的設計感呢？在本篇文章中，作者講述了十個設計的技巧，不妨一起來看看吧！
Hi，我是彩雲。
每個人都是以新手的身份入行設計，沒有人天生就有很好的審美，它也必須像其他事物一樣得到訓練。每天看 Dribbble 上的設計作品可能是非常有幫助的，但很多時候你可能隻是在欣賞設計，卻不明白為什麼。
沒有想法，隻會用素材，不知道該設計什麼，所有這些都可能是你進步路上的阻力并給你帶來挫敗感。在今天的這篇文章中我将教你 10 個非常簡單的設計技巧，這些技巧不需要任何特殊的技能，隻要用上就能大大提升你作品的設計感。
當然，這些不是公式定理，而是大多數情況下行之有效的技巧。
一、善用黑白
沒有想法？沒有好的配圖？那麼就隻需要用到萬能的黑色和白色，就可以迅速獲得一個具有正确構圖的“抽象主義設計”。在作品中善用黑白将幫助你了解平衡、留白以及如何使用文字和幾何圖形。
讓我們快速看一個例子，黑白的運用對作品的展示簡單而有效，看起來就很進階。
二、保持畫面平衡
我喜歡用我自己發明的“東西”來測試我的設計，我稱之為“平衡方案”。這是一個黑白的内容塊方法，我會用簡單的幾何圖形來代替内容。
我的這個方法是讓黑色塊蓋住元素，然後計算左右的黑色面積，大緻相等的話，就視為平衡。如果把這個原理應用到界面中，會得到這樣的結果：
用黑色矩形替代主要内容，灰色是次要内容。顯然你必須靠眼睛觀察，但其實我們也可以直接計算。左側區域的黑色矩形面積之和為（236×138）+(934×132)+(674×44)+(313×69) = 207109px，右邊的大矩形面積為（446×446） = 198916px。他們之間的差别很小，誤差隻有 3.9558%
我現在在設計之前不用去計算，經過多年的練習，這種意識就變成了自然而然的事情，因為你的眼睛會感覺到不平衡。
（彩雲注：關于視覺平衡，這裡其實講的是視覺面積要大緻相同，人眼才會感覺到平衡。正好彩雲在上一篇文章《為什麼你的設計總感覺不舒服？很可能是視覺平衡沒有做好》中有分享更全面的畫面平衡知識，一定要讀一讀了。）
三、給作品增加背景
我在前面那個例子中是用了一個灰色的背景來展示設計作品，但其實可以嘗試不同的元素，這有助于增加畫面空間感和背景效果。
但要注意，在一個真實的網站中，頁面周圍可能沒有有這麼多多餘空間，是以這隻是一個作品展示技巧。
在上面這個作品展示中，咖啡豆給人的感覺是有深度和有品質的。
四、使用規範字型大小
不用浪費時間整天去測試尺寸。我建議段落文字尺寸大約是 14-18pt，副标題是 24-36pt，标題可以用更大一些的字号（我個人是習慣用 96-144pt）。Figma 的預設大小非常适合排版。
上面的尺寸看起來太小，這也正常，因為你在手機上看到的圖，在電腦上全屏看就是正常的。
注意：有些字型比其他字型大或小得多。你應該使用像 Roboto 這樣的标準字型，如果字型大小跟 14-18pt 的 Roboto 差不多，那麼它是完美的正文字型。
段落 18，導航 24，标題 96
彩雲注：我建議剛入行不久的小夥伴，比如不知道網頁規範，移動端規範，一個比較快且行之有效學習規範的方法就是去截圖大廠的應用，網頁和 APP 都可以。然後，對着截圖直接量就好了，記住人家在做界面的時候，字型用多大，什麼顔色，間距，字号等等。
記住這些參數，至少不容易出錯了。之後，在自己項目中自定義規範，關于設計規範如何制定我之前也專門寫過文章，想了解這塊知識的一定要去看看《原來設計規範要這樣了解，早知道就好了！》
五、增加 z 軸
如果你有一些透明的圖檔，可以利用它們來設計一些 3D 圖層。如果你沒有，你可以使用網頁版 AI 自動摳圖神器！
當今的線上去背工具多半會整合 AI 人工智能技術，以機器學習方式去建構出可準确辨識前景和背景的模型，使用機器自動化去除背景的好處是快速、精确而且無需額外編輯，即使沒有專業繪圖軟體一樣可以在浏覽器進行，remove.bg 是線上去背服務最早出現、而且最強大的選擇，後來也有 FocoClip。
作為 CSS 中的 Z-index，你可以将透明圖檔放在其他項目的後面或前面，給人一種三維的錯覺。這對增強設計感來說，是非常有效的。
讓我們看看我使用這種技術的一個簡單設計。
鳥嘴巴從綠色背景中出界到黃色背景中，強化了整體的視覺沖擊力。
六、使用進階淺色
明亮的顔色很棒，但沒用好的話，往往會導緻激進的設計和糟糕的畫面。此外，淺色設計（性冷淡設計）如今非常流行，是以讓我們開始嘗試顔色選擇器的一個新區域。
在這個紅框範圍内可以快速選到一些比較好的顔色
兩種配色都沒有啥問題，這是一個審美的問題，但如果你想要表達一些更進階的設計感覺，可以嘗試淺色。
七、打造呼吸感
在我看來，大的留白比太少的留白要好。雜亂滿檔的設計很糟糕， 呼吸感可以通過多種方式獲得：
讓背景大面積保持可見
善用間距，避免出現文字牆效果
使用不會引起太多關注的圖檔
精簡文字，保留朗朗上口的短語
更大的留白（在上圖中指的是黑色區域）會顯得更加進階。
八、加入噪點
通常當我們思考設計時，我們想到的是幹淨、流暢、清晰的概念。但太幹淨的畫面會讓人感到不真實，缺乏質感。
在設計中，噪點是一個很好的朋友，尤其是當你想給你的網站有一個優雅或藝術的外觀時。此外，應用一個微妙的噪點讓畫面能有一個電影級的外觀，這種處理手法非常适合用在視訊和動态網站中。
你可以使用 Photoshop 在白色背景上建立 2-4K 大小的雜色-高斯分布的紋理，然後将它放到頁面的最上層。
整個網頁中都增加了一些噪點，這讓畫面整體擁有更強的質感。（這裡噪點的效果比較微妙，小圖可能看不清，點看大圖可以看到噪點效果）
九、使用漂亮的字型
有很多不同的字族和風格，但總的來說，我把它們分為三大類:
襯線字型
無襯線字型
正文字型
常用的襯線字型，如 Abril Fatface, Playfair Display, Volux, Chalga 等。
無襯線字型包括 Metropolis、ITC Avant Garde、Redwing、Takota、Gotham….
十、使用幾何圖形
這可能是最難使用的技巧，但如果使用正确，它定會大放光彩。
使用幾何圖形有助于加強概念和布局中的順序，甚至不需要配圖。找到合适的幾何形狀是困難的，我至今仍然不能很好地掌握它。
一個好用的技巧是将文案中的字母、數字和标題作為幾何形狀:讓它們變得巨大而巧妙，或者使用一些特殊的字母作為形狀(A 很管用)。（這個技巧非常實用，彩雲經常在一些視覺内容較少的頁面，用一個大的幾何圖形比如大寫的字母作為底部背景，用很淺的顔色，看起來視覺上就能更豐富了。）
#專欄作家#
彩雲sky，騰訊進階視覺設計師；公衆号：彩雲譯設計
本文原創釋出于人人都是産品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協定