8個(gè)成功使用自由空間技術(shù)的站點(diǎn)，讓網(wǎng)站設(shè)計(jì)更舒服

用戶(hù)需要幾秒鐘來(lái)評(píng)估站點(diǎn)。在這段時(shí)間里，他設(shè)法翻閱頁(yè)面，瀏覽文本。但是，如果頁(yè)面上的信息和設(shè)計(jì)繁重，那么注意力就會(huì)分散。在這種情況下，重要的是要了解網(wǎng)絡(luò)上的可用空間以及為什么需要它。

最近，一種特殊的技術(shù)在網(wǎng)站設(shè)計(jì)中變得很流行，它為您的內(nèi)容添加了空白。簡(jiǎn)約和簡(jiǎn)約可以吸引用戶(hù)對(duì)內(nèi)容的關(guān)注。這種設(shè)計(jì)技術(shù)稱(chēng)為自由空間技術(shù)。

在HubSpot的這篇文章中，我們將研究網(wǎng)絡(luò)上的可用空間，它如何影響轉(zhuǎn)化以及如何在網(wǎng)站上使用。

什么是自由空間技術(shù)？

這是當(dāng)您在各個(gè)元素之間留出足夠的空間時(shí)，有助于保持用戶(hù)的注意力并專(zhuān)注于內(nèi)容元素。

要了解使用空閑空間的重要性，請(qǐng)考慮一下電話(huà)簿的外觀。無(wú)休止的行合并成列，很難找到所需的數(shù)字。但是我們不希望電話(huà)簿中有其他任何內(nèi)容，著陸頁(yè)和網(wǎng)站旨在讓人們理解它們。

數(shù)字墨水示例

您注意到差異了嗎？左側(cè)的示例中文字過(guò)多。它看起來(lái)非常擁擠而艱難，根本無(wú)法長(zhǎng)時(shí)間閱讀。

右邊的示例使用更寬的列和段落之間的更多空白。這是一個(gè)簡(jiǎn)單的設(shè)計(jì)技巧。它使文章看起來(lái)友好，并且使您想回到它。

借助自由空間，您可以選擇一些內(nèi)容元素，并將用戶(hù)的注意力吸引到所需的信息上。視覺(jué)上劃分頁(yè)面，平衡元素-您可以達(dá)到平衡和精致的效果。

來(lái)自Printwand的樣本名片

如果沒(méi)有正確分配元素，這些電話(huà)號(hào)碼實(shí)際上是不可讀的。

用空格隔開(kāi)它們使它們易于閱讀

名片的左側(cè)有一些可用空間，但是所有元素都聚集在一個(gè)區(qū)域中。布局看起來(lái)過(guò)于飽和且不專(zhuān)業(yè)。
在右邊的名片上，設(shè)計(jì)人員使用了可用空間將元素彼此分開(kāi)。構(gòu)圖更容易察覺(jué)。

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)，可用空間對(duì)于獲得所需的轉(zhuǎn)換率至關(guān)重要。如果您有效地使用可用空間，則站點(diǎn)導(dǎo)航將更加容易。用戶(hù)將更容易感知并平穩(wěn)地引導(dǎo)他朝著目標(biāo)動(dòng)作邁進(jìn)。

根據(jù)國(guó)際人為因素的研究，網(wǎng)站設(shè)計(jì)中的自由空間可將信息感知提高20％。

比較兩個(gè)網(wǎng)頁(yè)選項(xiàng)：

右側(cè)的按鈕周?chē)潜恐氐姆指舴臀谋?。有太多分散注意力的信息，而不是按鈕周?chē)目捎每臻g。用戶(hù)很難專(zhuān)注于頁(yè)面的主要消息。

在右圖中，按鈕周?chē)凶銐虻目捎每臻g，它可以成為整個(gè)頁(yè)面的主要焦點(diǎn)。

由于這一突出之處，CTA不得不在下面省略其他信息。但這是正?，F(xiàn)象-您不應(yīng)一次在第一個(gè)屏幕（不向下滾動(dòng)顯示的屏幕）中包含所有內(nèi)容。

8個(gè)成功使用自由空間技術(shù)的站點(diǎn)

1. Shopify

Shopify平臺(tái)的主頁(yè)牢記一個(gè)目標(biāo)-讓訪(fǎng)問(wèn)者注冊(cè)使用該服務(wù)的測(cè)試期。

為了引導(dǎo)用戶(hù)執(zhí)行此操作，他們圍繞一種簡(jiǎn)單的形式來(lái)收集電子郵件，其中一個(gè)字段具有可用空間。因此，用戶(hù)絕對(duì)不會(huì)錯(cuò)過(guò)此元素。該站點(diǎn)菜單以較小的字體顯示，并且不會(huì)分散主窗體的注意力。

2. Everlane

自由空間技術(shù)并不意味著完全沒(méi)有圖像。這意味著頁(yè)面元素的排列方式應(yīng)避免混亂。

時(shí)裝零售商Everlane使用最少的元素來(lái)展示其新的服裝系列。來(lái)自駱駝收藏的照片被用作網(wǎng)站主頁(yè)的背景。在頁(yè)面中心，有一個(gè)小的CTA，其中有一個(gè)電話(huà)可以繼續(xù)從該系列中購(gòu)買(mǎi)產(chǎn)品。這是一個(gè)能夠在沒(méi)有任何壓力的情況下指導(dǎo)用戶(hù)進(jìn)行購(gòu)買(mǎi)的好例子。

3.愛(ài)彼迎

通過(guò)良好的內(nèi)容，Airbnb可以在其主頁(yè)上包含許多元素。但是，它使用了一個(gè)簡(jiǎn)單而有效的設(shè)計(jì)。它鼓勵(lì)客戶(hù)立即嘗試該服務(wù)。

數(shù)量有限的圖像和其他視覺(jué)元素將用戶(hù)的注意力吸引到搜索欄。

簡(jiǎn)單的文字邀請(qǐng)您嘗試尋找公寓?；諛?biāo)和導(dǎo)航元素的位置遠(yuǎn)遠(yuǎn)超出了主要內(nèi)容（搜索欄和橫幅）的范圍。

4.智慧

戰(zhàn)略性地使用空白技術(shù)的另一種方法是將表格和CTA與其他內(nèi)容明顯地分開(kāi)。對(duì)所有內(nèi)容的感知發(fā)生巨大變化的一種簡(jiǎn)單方法。

視頻內(nèi)容平臺(tái)Wistia在首頁(yè)上提出了一個(gè)友好的問(wèn)題，一個(gè)下拉列表和一個(gè)按鈕。此形狀是整個(gè)頁(yè)面的重點(diǎn)，與導(dǎo)航欄和橫幅明顯分開(kāi)。

5. Welikesmall

數(shù)字代理機(jī)構(gòu)Welikesmall通過(guò)其網(wǎng)站的設(shè)計(jì)證明，自由空間技術(shù)不一定是無(wú)聊的，空的和靜態(tài)的。在他們的主頁(yè)上，全屏顯示動(dòng)態(tài)圖片-摘自該機(jī)構(gòu)的視頻項(xiàng)目。圖片令人著迷，情節(jié)相互替換，引起了用戶(hù)的注意。

在任何其他情況下，全屏視頻頁(yè)面可能看起來(lái)不堪重負(fù)且精力充沛。但是，由于頁(yè)面的靜態(tài)元素緊湊且有界，因此整個(gè)頁(yè)面看起來(lái)好無(wú)缺。頁(yè)面的焦點(diǎn)在視頻上，因此文本使用最少。徽標(biāo)在左上角，漢堡菜單圖標(biāo)在右上。在中心-公司和CTA的口號(hào)，您可以根據(jù)此口號(hào)來(lái)介紹公司。

6. Simpla

Simpla的頁(yè)面演示了幾乎整個(gè)第一個(gè)屏幕上空白的力量。這個(gè)簡(jiǎn)單而簡(jiǎn)約的解決方案鼓勵(lì)用戶(hù)向下滾動(dòng)到頁(yè)面底部。

徽標(biāo)和菜單下沒(méi)有任何內(nèi)容。然后是一個(gè)簡(jiǎn)短的文本，橫幅的上部和傳達(dá)信息的箭頭：“您想進(jìn)一步了解公司嗎？向下滾動(dòng)?！?/p>

通常，設(shè)計(jì)看起來(lái)很復(fù)雜，并且可以完成其主要功能-指導(dǎo)用戶(hù)瀏覽整個(gè)站點(diǎn)。

7.哈佛美術(shù)館

哈佛藝術(shù)博物館陳列著過(guò)去幾個(gè)世紀(jì)的畫(huà)作，而且該地點(diǎn)看上去很現(xiàn)代?？瞻资撬囆g(shù)品的好背景。多余的元素會(huì)分散圖片本身的注意力。

設(shè)計(jì)使用砌體布局，并以磚塊狀順序排列元素。此技術(shù)鼓勵(lì)您向下滾動(dòng)頁(yè)面，還可以避免圖片擁擠。導(dǎo)航菜單將完全隱藏，直到用戶(hù)將鼠標(biāo)懸停在頁(yè)面頂部為止。因此，保留了畫(huà)廊的美學(xué)。

8. Burnkit

如果您決定在網(wǎng)站設(shè)計(jì)中使用空白技術(shù)，則必須決定最重要的內(nèi)容和需要?jiǎng)h除的內(nèi)容。Burnkit的網(wǎng)站設(shè)計(jì)證明，即使使用簡(jiǎn)約的設(shè)計(jì)，您也可以在頁(yè)面上放置很多內(nèi)容，而且仍然可以避免擁擠。

Burnkit的主頁(yè)包含博客條目，項(xiàng)目組合中的工作示例以及網(wǎng)站的各個(gè)部分。他們?nèi)绾卧O(shè)法適應(yīng)所有需求？自由空間，大量自由空間！每個(gè)塊都有令人印象深刻的縮進(jìn)。如果用戶(hù)想查看更多內(nèi)容，請(qǐng)讓他繼續(xù)滾動(dòng)。

當(dāng)前文章：8個(gè)成功使用自由空間技術(shù)的站點(diǎn)，讓網(wǎng)站設(shè)計(jì)更舒服
分享路徑：http://www.bm7419.com/news19/80919.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)