用戶需要幾秒鐘來評估站點(diǎn)。在這段時間里，他設(shè)法翻閱頁面，瀏覽文本。但是，如果頁面上的信息和設(shè)計繁重，那么注意力就會分散。在這種情況下，重要的是要了解網(wǎng)絡(luò)上的可用空間以及為什么需要它。
最近，一種特殊的技術(shù)在網(wǎng)站設(shè)計中變得很流行，它為您的內(nèi)容添加了空白。簡約和簡約可以吸引用戶對內(nèi)容的關(guān)注。這種設(shè)計技術(shù)稱為自由空間技術(shù)。
在HubSpot的這篇文章中，我們將研究網(wǎng)絡(luò)上的可用空間，它如何影響轉(zhuǎn)化以及如何在網(wǎng)站上使用。
什么是自由空間技術(shù)？
這是當(dāng)您在各個元素之間留出足夠的空間時，有助于保持用戶的注意力并專注于內(nèi)容元素。
要了解使用空閑空間的重要性，請考慮一下電話簿的外觀。無休止的行合并成列，很難找到所需的數(shù)字。但是我們不希望電話簿中有其他任何內(nèi)容，著陸頁和網(wǎng)站旨在讓人們理解它們。
數(shù)字墨水示例
您注意到差異了嗎？左側(cè)的示例中文字過多。它看起來非常擁擠而艱難，根本無法長時間閱讀。
右邊的示例使用更寬的列和段落之間的更多空白。這是一個簡單的設(shè)計技巧。它使文章看起來友好，并且使您想回到它。
借助自由空間，您可以選擇一些內(nèi)容元素，并將用戶的注意力吸引到所需的信息上。視覺上劃分頁面，平衡元素-您可以達(dá)到平衡和精致的效果。
來自Printwand的樣本名片
如果沒有正確分配元素，這些電話號碼實(shí)際上是不可讀的。
用空格隔開它們使它們易于閱讀
名片的左側(cè)有一些可用空間，但是所有元素都聚集在一個區(qū)域中。布局看起來過于飽和且不專業(yè)。
在右邊的名片上，設(shè)計人員使用了可用空間將元素彼此分開。構(gòu)圖更容易察覺。
對于網(wǎng)頁設(shè)計，可用空間對于獲得所需的轉(zhuǎn)換率至關(guān)重要。如果您有效地使用可用空間，則站點(diǎn)導(dǎo)航將更加容易。用戶將更容易感知并平穩(wěn)地引導(dǎo)他朝著目標(biāo)動作邁進(jìn)。
根據(jù)國際人為因素的研究，網(wǎng)站設(shè)計中的自由空間可將信息感知提高20％。
比較兩個網(wǎng)頁選項：
右側(cè)的按鈕周圍是笨重的分隔符和文本。有太多分散注意力的信息，而不是按鈕周圍的可用空間。用戶很難專注于頁面的主要消息。
在右圖中，按鈕周圍有足夠的可用空間，它可以成為整個頁面的主要焦點(diǎn)。
由于這一突出之處，CTA不得不在下面省略其他信息。但這是正?，F(xiàn)象-您不應(yīng)一次在第一個屏幕（不向下滾動顯示的屏幕）中包含所有內(nèi)容。
8個成功使用自由空間技術(shù)的站點(diǎn)
1. Shopify
Shopify平臺的主頁牢記一個目標(biāo)-讓訪問者注冊使用該服務(wù)的測試期。
為了引導(dǎo)用戶執(zhí)行此操作，他們圍繞一種簡單的形式來收集電子郵件，其中一個字段具有可用空間。因此，用戶絕對不會錯過此元素。該站點(diǎn)菜單以較小的字體顯示，并且不會分散主窗體的注意力。
2. Everlane
自由空間技術(shù)并不意味著完全沒有圖像。這意味著頁面元素的排列方式應(yīng)避免混亂。
時裝零售商Everlane使用最少的元素來展示其新的服裝系列。來自駱駝收藏的照片被用作網(wǎng)站主頁的背景。在頁面中心，有一個小的CTA，其中有一個電話可以繼續(xù)從該系列中購買產(chǎn)品。這是一個能夠在沒有任何壓力的情況下指導(dǎo)用戶進(jìn)行購買的好例子。
3.愛彼迎
通過良好的內(nèi)容，Airbnb可以在其主頁上包含許多元素。但是，它使用了一個簡單而有效的設(shè)計。它鼓勵客戶立即嘗試該服務(wù)。
數(shù)量有限的圖像和其他視覺元素將用戶的注意力吸引到搜索欄。
簡單的文字邀請您嘗試尋找公寓。徽標(biāo)和導(dǎo)航元素的位置遠(yuǎn)遠(yuǎn)超出了主要內(nèi)容（搜索欄和橫幅）的范圍。
4.智慧
戰(zhàn)略性地使用空白技術(shù)的另一種方法是將表格和CTA與其他內(nèi)容明顯地分開。對所有內(nèi)容的感知發(fā)生巨大變化的一種簡單方法。
視頻內(nèi)容平臺Wistia在首頁上提出了一個友好的問題，一個下拉列表和一個按鈕。此形狀是整個頁面的重點(diǎn)，與導(dǎo)航欄和橫幅明顯分開。
5. Welikesmall
數(shù)字代理機(jī)構(gòu)Welikesmall通過其網(wǎng)站的設(shè)計證明，自由空間技術(shù)不一定是無聊的，空的和靜態(tài)的。在他們的主頁上，全屏顯示動態(tài)圖片-摘自該機(jī)構(gòu)的視頻項目。圖片令人著迷，情節(jié)相互替換，引起了用戶的注意。
在任何其他情況下，全屏視頻頁面可能看起來不堪重負(fù)且精力充沛。但是，由于頁面的靜態(tài)元素緊湊且有界，因此整個頁面看起來完美無缺。頁面的焦點(diǎn)在視頻上，因此文本使用最少?；諛?biāo)在左上角，漢堡菜單圖標(biāo)在右上。在中心-公司和CTA的口號，您可以根據(jù)此口號來介紹公司。
6. Simpla
Simpla的頁面演示了幾乎整個第一個屏幕上空白的力量。這個簡單而簡約的解決方案鼓勵用戶向下滾動到頁面底部。
徽標(biāo)和菜單下沒有任何內(nèi)容。然后是一個簡短的文本，橫幅的上部和傳達(dá)信息的箭頭：“您想進(jìn)一步了解公司嗎？向下滾動?！?/p>
通常，設(shè)計看起來很復(fù)雜，并且可以完成其主要功能-指導(dǎo)用戶瀏覽整個站點(diǎn)。
7.哈佛美術(shù)館
哈佛藝術(shù)博物館陳列著過去幾個世紀(jì)的畫作，而且該地點(diǎn)看上去很現(xiàn)代?？瞻资撬囆g(shù)品的絕佳背景。多余的元素會分散圖片本身的注意力。
設(shè)計使用砌體布局，并以磚塊狀順序排列元素。此技術(shù)鼓勵您向下滾動頁面，還可以避免圖片擁擠。導(dǎo)航菜單將完全隱藏，直到用戶將鼠標(biāo)懸停在頁面頂部為止。因此，保留了畫廊的美學(xué)。
8. Burnkit
如果您決定在網(wǎng)站設(shè)計中使用空白技術(shù)，則必須決定最重要的內(nèi)容和需要刪除的內(nèi)容。Burnkit的網(wǎng)站設(shè)計證明，即使使用簡約的設(shè)計，您也可以在頁面上放置很多內(nèi)容，而且仍然可以避免擁擠。
Burnkit的主頁包含博客條目，項目組合中的工作示例以及網(wǎng)站的各個部分。他們?nèi)绾卧O(shè)法適應(yīng)所有需求？自由空間，大量自由空間！每個塊都有令人印象深刻的縮進(jìn)。如果用戶想查看更多內(nèi)容，請讓他繼續(xù)滾動。
