20 個改善網站設計的簡單技巧

英文 | https://uxplanet.org/10-easy-tricks-to-improve-your-website-design-part-2-fde7f4ef41cd

每個想開始他的網站設計旅程的人，都必須訓練審美能力。

我們經常上 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、三種顏色合理分配

在前面，我談到了黑白設計，但從長遠來看，這是極其有限的。

基本上，每個設計師也都知道這一點，但是，下一步就是利用一種最常見的設計策略：僅使用三種顏色。

顯然，這三種顏色不是隨機使用的。他們每個人都有特定的角色，你必須知道：

讓我們來看看這種技巧的具體示例，即使是室內設計師，這個也是一條通用規則！並且還需要知道加以利用。

你可以清楚地看到三色組合的方式和顏色。

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 設計。

結論

這個些設計技巧已經分享完畢，除了這些技巧外，你還可以從美學的角度嘗試並改進網站設計。

一旦掌握了這些知識，接下來的步驟，就是網站的動畫，信息架構和用戶行爲心理學方面的知識，你也可以嘗試着學習瞭解一下。

最後，感謝你的閱讀！

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/fp8eNkYHdjSVUR60Olj9DQ

猜你喜歡