Laurent Baumann：給非設計師的設計技巧

好的設計一部分在於創造易於理解的視覺效果，但要如何在簡潔和精美之間取得平衡卻是一大挑戰，尤其對非設計師來說更是如此。多年來，我發現與非設計師分享簡單的平面設計規則可以幫助他們在製作簡報、簡單模型，甚至偶爾製作卡片時感到更自在。

看到這些技巧如此有效，我決定將這些規則編譯成 Twitter 討論串。現在，我借用 Sketch 的平台，將這個討論串變成一個更完整的指南，希望它比我在 280 個字元內所能提供的內容更容易瀏覽，並提供更多上下文。

讓我們開始吧。

提升任何設計的快速調整

您是否曾看著一個設計，想知道為什麼如此基本的設計看起來卻如此出色？您可能甚至嘗試過自己複製它，卻發現您的方法中似乎少了「某個東西」。缺少的關鍵可能就是以下其中之一：

• 巢狀邊框半徑。邊框可能很棘手，因為它不僅僅是遵循對稱規則。想像一下，您在一個較大的圓角正方形中有一個帶有圓角的正方形。（我們將第一個正方形稱為「巢狀正方形」，因為它在另一個形狀內）。因此，當我們考慮巢狀正方形的邊框時，直覺可能是使邊框半徑等於較大正方形的半徑。但這實際上不會創造統一的邊框。訣竅是使內半徑小於外半徑。
• 匹配粗細。使用文字和字形（小型單色圖像）可能會造成視覺上的誤判，即使對設計師來說也是如此。將文字與字形配對時，請務必確保文字的粗細與圖像的粗細相符。這樣，兩個元素看起來就會像屬於同一個整體。
• 堆疊陰影。作為設計師，我們經常使用陰影來使我們的設計更具動態感。陰影透過創造深度感，有助於賦予任何元素 3D 效果。為了使這看起來逼真，我們必須遵循物理規則。元素越遠，它的 投影 就越小。當然，元素越多，這就越具有挑戰性——但花時間將陰影調整到位，將會真正改變您的整體設計。

如何掌握間距

我們都需要一些空間，您的設計也是如此。雖然適當的間距絕對是美學問題，但它同樣也是語義問題。元素之間的距離傳達的資訊比您想像的要多得多，如下所示。

• 巢狀間距。設計的終極目標，無論如何，都是反映真實生活。談到間距，我們通常會將彼此靠近的事物視為一個群組或集群。根據您在設計中放置元素的位置，也會發生同樣的事情。只要您有意識地使用它，透過將元素彼此靠近來創建「視覺區塊」就是一個很棒的工具。
• 文字周圍的間距。這是一個小而強大的修正，可以快速提升您的設計。在形狀（例如按鈕）中排版文字時，請確保文字周圍的間距在小寫字母周圍形成均勻的帶狀。仔細想想，使用大寫字母或撇號作為對齊參考，肯定會導致大部分文字錯位。
• 字母間距。對於新手來說，通常會認為在處理文字時，只能編輯字體、大小和粗細。但實際上，您可以運用一整套間距選項，讓您的文字更易於閱讀。一個好的經驗法則是，文字越小，需要的字母間距就越大。

成為對齊專業人士

在討論間距時，我們已經涵蓋了一些關鍵的對齊原則，現在是時候更上一層樓了。

• 對齊文字和圖像。垂直置中文字和圖片時，請使用小寫字母的高度進行置中，而不是大寫字母的高度。如果您有注意到的話，這與我們用於文字周圍間距的原則相同。所以，這就是您的第一條設計黃金法則！
• 置中多邊形。在設計中，您經常會發現正確的對齊與我們的眼睛如何感知圖像有關，而不是與數學上的實際中心位置有關。對於多邊形，邏輯方法是置中其邊界框（形狀容器的邊界）。但是，要使其看起來正確對齊，您必須想像一個圓圈穿過多邊形中的每個點。然後，使用該圓圈來對齊您的多邊形。

使用對比

最後但同樣重要的是，讓我們來談談對比。對比的關鍵在於有效地使用它來創造差異化。這可以是顏色之間或文字之間的差異化。以下是處理這兩者的方法

• 顏色對比度。我們選擇顏色通常是因為語義（例如我們如何理解交通號誌中的顏色）或因為我們遵循品牌規範。雖然這些都是決定使用哪些顏色的好方法，但重要的是要仔細檢查選擇是否會影響可讀性。為了使文字易於閱讀，背景和文字之間需要有足夠的對比。在彩色背景上使用文字時，請確保對比度大於 4.5:1。
• 文字粗細對比。對比很重要的另一個例子是嘗試區分不同的文字。例如，您可能正在使用一兩種字體，但發現需要區分不同的標題或「視覺區塊」。為此，請嘗試調整粗細（粗體、細體、淺色等）。如果您的字體有很多種粗細，請至少跳過一種以創造足夠的對比。例如：從細體改為中等粗細，而不是從細體改為淺色。

就是這樣！希望這些技巧能幫助您在設計時更加得心應手。如果您還有其他想讓我涵蓋在技巧串中的內容，隨時可以透過Twitter 聯繫我。

Laurent Baumann是PopStage的創辦人兼執行長，PopStage 是一個線上平台，用於舉辦互動式工作坊、訓練營、網路研討會和培訓課程。過去，他曾與 Sketch、Upthere、Apple、Sandisk、Western Digital 等公司合作，打造了數百萬人使用的產品。