英文 | https://uxplanet.org/10-easy-tricks-to-improve-your-website-design-part-2-fde7f4ef41cd
翻譯 | web前端開發
每個想開始他的網站設計旅程的人，都必須訓練審美能力。
我們經常上Dribbble設計網站，看各種好的設計，這樣會對我們提升設計非常有幫助，但是有時，你隻能是欣賞設計，卻不明白為什麼要這麼設計。
今天，我将向你分享20個極其簡單的設計技巧，這些技巧不需要任何特殊技能，但是，可以幫助你如何改善醜陋的設計，提升你的審美。
但是，請記住，這些不是規則，而是在大多數情況下使用的有效技巧。
01、黑白相間
沒有主意嗎？沒有好的圖像？那就黑白相間。你就可以獲得具有正确構圖的野獸派設計。這可以幫助你了解平衡空白以及如何使用文本和幾何形狀。
讓我們看一個簡單的例子。這個例子簡單有效。
02、建立一個“平衡方案”。
我喜歡使用我可能發明的“事物”來測試我的設計。我稱其為“平衡方案”，它是概念的黑白版本，其中，我使用簡單的幾何圖形代替内容。
目标是在左右，上，下都帶來相同數量的黑色。如果将原理應用于簡單設計組合，則會得到以下資訊：
用黑色矩形替換項目，灰色的放柔軟物體。
你必須多加注意，但讓我們看一下一些計算。
左側區域黑色矩形的總和約為：
（236 * 138）+（934 * 132）+（313 * 69）+（674 * 44）= 207109像素
當右大矩形數不勝數：
446 x 446 = 198916像素。
它們的差異很小，隻有3.9558％！
注意：是的，墨水點比矩形小，但是非常清晰銳利的細節吸引了更多的注意力。
我在設計之前沒有計算過它。經過多年的實踐，由于你的眼睛會感覺到它好像是平衡的，這個是一種錯覺。
03、設計背景
我之前介紹的示例以灰色背景顯示，但你可以嘗試其他操作。這有助于你的設計建立一些深度和上下文。
但要注意：在真實的網站中，你将沒有多餘的空間，是以，這隻是一個示範技巧！
04、使用尺寸指南。
你不必浪費一整天的時間來設計測量尺寸。隻要最後，你的段落文本将在14–18pt左右即可，你的小标題需要大一些，可以為24–36pt之間，并且你的大标題還要更大一點，我個人為它們可以使用96-144pt。而Figma的預設大小非常适合排版。
它們看起來太小了，但這是正常的：你無法全屏工作。
注意：某些字型比其他字型小或大。你應該以Roboto作為标準字型的基礎：如果字型較大，如14–18pt Roboto，則非常适合段落。
05、使用Z-Index，分層設計
如果你有一些具有透明性的圖像，則可以利用它們來建立一些分層。如果沒有，則可以使用remove.bg
作為CSS中的Z-index，n可以将圖像置于其他項目的前面或後面，進而産生三維感。這是非常有效的。
讓我們來看看我使用這個技巧後的簡單設計效果。示例如下：
06、嘗試使用柔和的顔色
鮮豔的色彩很棒，但常常導緻激進的設計和糟糕的組合。此外，如今柔和的設計非常流行，是以，我們可以多嘗試使用柔和的顔色選擇器。
07、使用空白設計
在我看來，空白多比空白少要好。雜亂無章的設計真的很糟。不過，你可以通過多種方式獲得：
- 保持大背景圖可見。
- 避免帶有間隔的文本牆。
- 不要使用不會吸引太多注意力的圖像。
- 減少文本的内容，并保留醒目的短語即可。
08、發現噪點的力量
通常，當我們想到設計時，就會想到幹淨，平滑，清晰的概念。但是，完美在于缺陷。
噪音是你設計中的堅強朋友，尤其是當你要使網站外觀優雅或藝術化時。
此外，施加細微的噪點會使你的構圖具有電影效果，這非常适合視訊和動态網站。
你可以使用Photoshop并在白色背景上建立2–4K高斯噪波，然後将其應用到畫闆上，進而獲得一些噪波紋理。
09、尋找并使用好的字型
有很多可怕的字型，尤其是我們計算機上預裝的字型。要找到好的字型，請開始浏覽網絡或觀看youtube視訊，以了解出色的字型。
但請注意：許多字型不是免費的，并且在沒有許可的情況下使用它們可能會給你帶來麻煩。不過，也不用擔心：大多數字型都有免費版本！
有許多不同的風格，但總的來說，我将其分為三個主要類别：
- 優雅的字型
- 現代字型
- 正文的字型
通常，前兩個也是顯示字型 ：其建立者希望你将它們用作标題。
你可以尋找優雅的字型，例如，Abril Fatface，Playfair Display，Volux，Chalga等。
現代字型包括，Metropolis，ITC Avant Garde，Redwing，Takota，Gotham…。
10、使用幾何體
這可能是最難使用的技巧，但如果正确應用，它會幫助你提升設計效果。
使用幾何圖形有助于增強布局中的概念和順序，甚至不需要圖像。找到正确的幾何形狀很困難，但我仍然無法很好地掌握它。
一個非常實用的技巧是，将文案中的字母，數字和标題變換成作幾何體圖形，使其巨大而微妙，或者将某些特定的字母用直接當作形狀使用，像下面示例中的A字母，就應用的很好。
11、單色圖像背景
一種極其簡單但有效的技巧是使用單色圖像作為背景，而不是使用純色。
這個技巧可以幫助你将設計圖的紋理增強，同時還留出一些空間。
具怎麼做？
這個過程也非常簡單：你可以在圖像上方放置一個簡單的填充層，然後将其混合模式更改為“顔色”。
在Figma，Photoshop和所有其他不錯的圖形軟體中都可以得到相同的效果。
找到正确的色調後，請記住嘗試圖像不透明度！
在此示例中，我可以同時增強“空間”和“技術”的概念，同時，使讀者有品嘗美味的漢堡的感覺。
12、利用圖像中的顔色進行設計
我見過很多不知道如何使用圖像本身調色闆的初學者設計師。
從你正在處理的圖像中找到所需的每種顔色。
有時，立即找到顔色可以幫助你提出新的想法。讓我們以圖像色調決定樣式的示例為例。
使用常見的顔色有助于減輕對比度，并保持設計流程的順暢。
13、三種顔色合理配置設定
在前面，我談到了黑白設計，但從長遠來看，這是極其有限的。
基本上，每個設計師也都知道這一點，但是，下一步就是利用一種最常見的設計政策：僅使用三種顔色。
顯然，這三種顔色不是随機使用的。他們每個人都有特定的角色，你必須知道：
- 主要背景。占填充圖像的60％。
- 主體顔色。占填充圖像的30％。
- 強調色。占填充圖像的10％。
讓我們來看看這種技巧的具體示例，即使是室内設計師，這個也是一條通用規則！并且還需要知道加以利用。
你可以清楚地看到三色組合的方式和顔色。
- 藏青色适合作為背景。
- 白色與背景形成鮮明對比，并發揮了車身顔色的作用。
- 在紅色色調口音引人關注設計的重要部分，如商品交易顧問，大字型文本等。
14、對數字和文本使用不同的字型
一個常見的錯誤就是強迫自己把數字和文本使用相同的字型。盡管這通常可以工作，但某些字型不是為數字設計的。
如果要在數字中使用它，請不要害怕在設計中使用第三個字型。當你正在使用的兩種字型應用于你正在設計的具有百年曆史的公司網站的漂亮日期覆寫物中時，可能會很爛。
讓我們看一個示例，其中，我使用了3種不同的字型。
15、注意黃色或避免黃色
黃色，是一種漂亮的顔色，但是，它帶有一系列你可能不想面對的問題。
簡而言之，黃色是我們眼睛最敏感的顔色，這使它非常明亮：由于你不想使客戶蒙蔽，是以，你可能會使用黃色作為強調色。
在現代網頁設計中，強調色通常必須與白色配合使用，就像下面示例中的按鈕一樣，由于其亮度，它的對比度過低，而造成文本可讀性偏低。
為避免對比度問題，當使用較大的文本時（如我在模型中所做的那樣），黃色的常見用法是黑色和白色。
黃色的另一個問題是，在他的柔和色版本中效果不佳：柔和的黃色變成棕色或金色，示例如下：
16、使用網格參考線
你可能知道960網格系統或Twitter的Bootstrap，并且已經多次使用12列網格布局進行設計。
但是，你是否曾經嘗試過讓這些網格可見？使用網格通常會增強精确度和專業精神。
這是偉大的網頁設計師Shashank ，直接将其用于構圖的一個很好的例子。@holy_architect。
你唯一要注意的是對比度：對比度太高的線條會分散注意力，會讓使用者從版面中更有意義的部分中将注意力分散開來。
17、不對稱性
一旦知道了規則，我們有時候也需要打破它們。現代藝術設計包含很多不對稱性。嘗試四處移動并破壞标準的網格布局。但是，這是最難把握的技巧之一，而建立不平衡的合成非常容易。
這是幾分鐘内進行的兩次設計的嘗試。
對齊仍然是基本的，但是，你可以看到還有更多的事情要做。嘗試通過添加相反的内容來保持不對稱的平衡，并引起注意。
讓我們看一下第一個設計的“平衡方案”。
我想讓使用者的眼睛直接進入菜單，為此，我做了兩件事：
- 有一個從左到右的假想箭頭，箭頭的形狀和角度與圖檔和文字的角度相似。
- 突出菜單上的主要選項。
我可以假設使用者的眼光是這樣的：
這僅僅是一個理論，我的設計可能會有缺陷。
18、設計有用的元件
人們認為可用的網站更令人愉悅。設計使用者所需的一切，并快速完成每項任務。
如果你要設計一個網站，人們會經常使用它，那麼，請不要看上那些花哨的美感，而要嘗試引入一些有用的元件。讓我們看看，我為網站設計和開發的兩個示例。
這個網站不漂亮，但是非常有用。
在此螢幕快照中，你可以在右側看到我如何實作一個舒适的按字母搜尋小部件，因為該頁面非常長，包含300多種不同的蝴蝶種類。
如果沒有此功能，滾動将非常繁瑣，人們會讨厭它。
讓我們看看另一個螢幕截圖。
此功能也得到了極大的贊賞：使用者發現能夠同時檢視蝴蝶的圖像和文本非常實用。
19、同時考慮設計PC端和移動端
設計移動版和桌上型電腦版對于每種設計都是必須的，但經常在教育訓練時，我們隻專注于一個架構，而全神貫注于此。
通過将兩個版本添加到相同的組成中，你将至少獲得三個有益的效果：
- 在設計時，考慮網頁的響應式設計。
- 設計時，看看這樣設計是否更明智，更專業
- 你也可以玩分層設計
舉個例子：我做過的這種速度設計，有一個非常糟糕且不完整的移動應用程式版本，但是，即使很糟糕，它也使完整的設計更加完整和專業。
20、将其設為3D
自從我與Blender和Maya一起玩了兩年以來，這是我最喜歡的藝術技巧之一。
通過使用Blender，可以将有效的SVG導入，你可以通過幾個步驟将2D設計轉換為3D模型。
盡管它不是“純”設計，但你可以将其發送給開發人員，将其轉換為3D，可能會在示範和營銷階段非常有用。
我目前正在設計和開發健身應用程式，在業餘時間，我将其轉變為堅固的手機！
如果你不想學習Blender，但你又想将你的設計帶入3D中，則可以使用Vectary或Threed.io！
如果你對此有興趣的話，我後面可以寫一篇文章，介紹如何使用Blender在2D模式下轉換3D設計。
結論
這個些設計技巧已經分享完畢，除了這些技巧外，你還可以從美學的角度嘗試并改進網站設計。
一旦掌握了這些知識，接下來的步驟，就是網站的動畫，資訊架構和使用者行為心理學方面的知識，你也可以嘗試着學習了解一下。
最後，感謝你的閱讀！