使用空白如何改善您的網(wǎng)站設(shè)計

時間：2023-10-10 12:18:01 | 來源：網(wǎng)站運營

時間：2023-10-10 12:18:01 來源：網(wǎng)站運營

使用空白如何改善您的網(wǎng)站設(shè)計：聽到“空白”一詞時，您可能會想到空白的側(cè)邊欄，將內(nèi)容夾在中間。但是，除了標題和文本中的內(nèi)容之間的間隔外，空白還表示圖像或頁面上其他元素周圍的空白區(qū)域。

幾乎每個網(wǎng)站的設(shè)計都必須留有一定的空白。正確完成后，它可以使您的網(wǎng)站看起來更加優(yōu)美，而不會犧牲太多寶貴的屏幕空間。

您可能會說：“我不會為空白空間付款?！辈环鈫?？好吧，這是您可能要改變主意的四個原因。

1、吸引注意力

讓我們從最簡單的一個開始。最佳的在線注意力吸引策略尚有很多爭論，但我們大家都可以就無法吸引注意力的問題達成共識-什么也沒有。這就是使空白成為吸引注意力和吸引注意力的有效方法的原因，因為您可以使用它更快地將注意力吸引到關(guān)注點。







例如，您可以使頁面上的文本和圖像混亂，并突出顯示重要的頁面元素?；蛘?，您可以在關(guān)鍵圖像周圍留出更多空間，或者使字體變大（增加字母和行距的空白），以使它們以更加整潔的方式在查看器中脫穎而出。

而且，您可以在各種頁面上執(zhí)行此操作，例如您的主頁，登錄頁面，轉(zhuǎn)換渠道，案例頁面等。

關(guān)鍵原理很簡單：關(guān)鍵對象周圍的空白區(qū)域吸引了觀眾的注意力，因為周圍沒有分散注意力或混亂的元素。

2、建立視覺秩序

您如何知道徽標和網(wǎng)站首頁標記之間的區(qū)別？顯而易見的是元素的大小。從設(shè)計的角度來看，元素周圍的空白空間的大小也許不那么明顯，但非常重要。優(yōu)先級較高的元素在其周圍具有更多的空白空間，這就是使它們彈出并引起觀眾注意的原因。

這是一個演示視覺層次結(jié)構(gòu)的簡潔設(shè)計。







請注意，沒有任何線條，顏色或分隔線將不同的部分分開嗎？但是，除了屏幕上的選項，標題，社交分享按鈕和聯(lián)系信息之外，您仍然能夠分辨出導(dǎo)航元素。怎么樣？一個字：空白。

通過實現(xiàn)視覺優(yōu)先級的這種層次結(jié)構(gòu)并利用空白，您的設(shè)計將展現(xiàn)出消除歧義的流暢視覺流。觀眾知道什么是重要的，下一步該怎么做。

著陸頁面通常是一個很好的例子。您有一個較大的標題，其中包含比后面的文本更多的空白。按鈕周圍有最多空白。這是一個相當普通的示例，可以在日常瀏覽體驗中看到。

讓我們看一下GTmetrix。







GTmetrix主頁利用空白來建立強大的視覺秩序。當您登陸該網(wǎng)站時，您會立即被其標題和“分析”按鈕吸引。它的對稱布局和大字體鼓勵訪問者使用站點速度分析工具。

3、將群體分開

如果您仍然認為空白與浪費空間是同義詞，那么讓我向您展示如何通過使用它實際上節(jié)省空間。

如果發(fā)現(xiàn)屏幕空間不足，而您的產(chǎn)品，服務(wù)或其他任何您希望引起觀眾注意的東西不斷堆積，那么您可能會冒著將它們排列在剩余空間中并將物品彼此靠近的風險。這會導(dǎo)致該部分中的項目看起來相似或很少引起注意，因為它們已與雜波混合在一起。

一個解決方案可以是，不突出產(chǎn)品，而只是將它們的尺寸設(shè)置為不同，更改其布局和方向或兩者的任意組合。這將在對象之間創(chuàng)建一些空白，將它們彼此分開，并使您的查看者更容易拾取它。

讓我們看看CoSchedule如何設(shè)計其功能部分。







CoSchedule的功能部分遵循一種布局，該布局允許他們一次顯示一個功能。分別由簡要說明和圖像組成。由于您一次只能看到一個功能，因此它會引起您的注意并將其保持在該位置。

您還可以利用空白將相似的字段分組到表單上。它使表格更易于閱讀，并鼓勵訪問者填寫表格。幾乎沒有空格的表格看起來很擁擠，似乎很難填寫。更重要的是，它們還給人一種印象，即表單要求的信息太多，而實際上可能只是要求基本信息。







這是兩種形式的示例-一種有空格，另一種沒有空格。看看帶有分隔符的表單如何具有更多的空白，并使表單的字段分組在一起？

4、更好的可讀性

最后一點是，空白是文本可讀性的基礎(chǔ)。如果所有文字都以最小的間距塞滿，您將無法通讀。







空格太少會使文本顯得局促且難以閱讀。留下太多的空間，除了使文本看起來不連貫，還浪費了空間。這就是為什么世界頂級設(shè)計師如此重視字體和版式的原因。

上面的Google字體示例描述了兩種字體-BioRhyme Expanded和Cookie。BioRhyme Expanded使用過多空格，而Cookie有點難以閱讀，因為其各個字符的間距不夠。

現(xiàn)在讓我們將它們與兩種平衡良好的字體進行比較：







不同的字體根據(jù)樣式使用不同數(shù)量的空格。但是，另一個主要因素是字體大小。標題較大，并占用更多空間以使觀看者突出。使用空白空間來改善和增強閱讀體驗的其他一些區(qū)域包括行距和段落邊距。

結(jié)論

綜上所述，設(shè)計中的白色空間是藝術(shù)與科學相遇的場所之一。該技術(shù)的科學應(yīng)用對于有效的設(shè)計是必要的。這是通過簡化向美化方向邁出的一步；通過更少提供更多。

讓我們快速回顧一下利用空白空間來改善設(shè)計的主要好處：

• 空格使您的設(shè)計混亂，使您可以將用戶的注意力吸引到所需的任何位置。
• 它設(shè)置了視覺順序，使訪問者可以輕松地立即識別您的重要頁面元素，例如號召性用語按鈕。
• 使用空白可以將設(shè)計分組在一起，使您的設(shè)計看起來更整潔，而不是到處都是。
• 字體和排版中的空白可提高您網(wǎng)站的可讀性。

我們希望已經(jīng)能夠說服您，空白空間不會浪費屏幕空間。如果有的話，它就和您網(wǎng)站上的實際內(nèi)容一樣有價值，甚至對于形成其結(jié)構(gòu)和改善可訪問性也沒有什么價值。

您認為可以通過使用空白空間來改善網(wǎng)站的設(shè)計嗎？如果是這樣，怎么辦？馬上聯(lián)系浪知潮，讓我們來為您提供網(wǎng)站優(yōu)化方案！