什麼是網頁設計中的鄰近性以及如何使用它？

人類思維的運作方式令人著迷。 你有沒有想過人們在視覺上看待他們的世界的方式？

20 世紀，德國心理學家 Max Wertheimer、Kurt Koffka 和 Wolfgang Kohler 試圖找到這個問題的答案。 他們進行了一系列研究，結果，他們開發了格式塔原則，這是一套解釋人們如何看待周圍世界的簡單指導方針。

接近被認為是格式塔原則之一。 這一原則對當代用戶界面設計的美學產生了重大影響。 在這篇博客中，我將告訴你在網頁設計中接近度意味著什麼以及如何使用它。

什麼是網頁設計中的接近度？

接近的概念是指需要在視覺上排序的元素以及實現盡可能少的混淆的目標。 將彼此無關的內容分開是很重要的，以突出它們之間缺乏聯繫。

例如，您一定注意到幾個社交媒體平台的圖標已經組合在一起，而不是分散在一個網站上。 它更類似於將所有東西放在一個位置的技術。

使用接近來最小化視覺歧義和促進理解的佈局更容易理解。 接近度還有助於網站佈局的結構。 正確應用鄰近度對用戶體驗具有顯著且有益的影響。

設計師可以從鄰近原則中受益，因為他們能夠實現主要目標，例如使佈局看起來不那麼混亂，並將共同連接的變量組合在一起。

如何在網頁設計中使用接近度？

白色空間

理解留白在設計中的重要性是在設計中成功採用鄰近概念的第一步。

設計中缺乏空白是一個常見問題。 在用戶體驗方面，空白對用戶體驗的影響與頁面上的實際內容一樣大。 白色空間引導用戶的視線，產生對比，並對用戶的思想產生持久的影響。

通過設計，設計師傳達了網站的本質。 它可以通過文本和圖像。 但是有效的設計是具有組織良好的空白空間，可以增強網站中的元素。

創建視覺層次結構

網站的結構以及內容的組織和呈現方式是有效接近的基石。 設計師需要能夠構建吸引人的內容視覺層次結構，以實現有效接近的目標。 必須為您的網站提供清晰的視覺層次結構，因此有效利用空白並將可比較的元素排列在一起非常重要。

對網站部分進行分組和進一步分組是保持層次結構到位的最佳技術。 由於這種層次結構，用戶能夠更好地掌握他們去過的地方和想去的地方，這也有助於表達網站的目標。

用戶能夠看到這一點表明他們知道並理解了相關信息的存儲位置，這表明您已經成功傳達了網站的信息和目標。

提高內容理解力

內容為王。 對於許多產品來說，內容是人類首先開始使用它們的動機。 良好的清晰度（讀者可以方便地識別書面文本內容）和易讀性（讀者可以方便地解碼符號）是產品設計的關鍵所在。

許多元素都有助於提高清晰度和易讀性，包括字體系列、字體大小和文本內容對比。 但是，您在網頁上塑造內容的方式也會立即影響內容的易讀性和清晰度。

當文本內容沒有提供格式時，可讀性可以通過。 通過提供簡短、可輕鬆掃描的塊中的內容——將句子分組到段落或部分中，並用一大塊空格將它們分開——你可以幫助客戶測試和研究文本內容。

具有可掃描的佈局

閱讀和掃描按層次結構並以邏輯方式分類的內容變得更加簡單。 在構建其架構和設計時，網站應利用鄰近性，以免內容過多用戶。

因此，儘管在內容有限的網站上將接近度概念付諸實踐相對簡單，但在具有大量內容的網站上接近度更為重要。 因此，您應該檢查您的佈局是否簡單、用戶可讀和可掃描。

強調某些元素

強調是人體驗 (UX) 設計中最重要的概念之一。 優先考慮網頁上的精確因素或內容是設計師最常見的地方責任之一。

雖然設計師可以使用許多獨特的策略來獲得適當的結果——包括放大細節或包括額外的對比度——但在不改變真實細節的情況下獲得相同的結果是可行的。 相反，您可以在細節中處理貧困區域的數量。

貧困地區和個人利益之間有著直接的聯繫。 您上傳的圓形和細節越差，對觀眾來說就越重要。 這是自然發生的——因為人們的興趣可能會被引導到一個特別貧困地區的細節方向，因為事實上那個地方沒有其他任何東西能引起他們的興趣。

值得一提的是，可能很難識別哪些細節在互聯網頁面上引起了最大的興趣。 因此，鼓勵應用互聯網佈局軟件程序來創建佈局原型並通過 5-2 次測試對其進行驗證。

向構成您的聽眾的個人展示您的原型 5 秒鐘，然後問他們：“您可能記得的主要因素是什麼？” 如果他們調用了您需要他們查看的細節（或因素），那麼您一切都很好。

通過內容引導觀眾的視線

接近原則可以幫助您創造一種很好的方式來引導觀眾的眼睛從一個因素轉移到另一個因素。 通過調整空白，您可以毫不費力地創建明顯吸引用戶注意力的焦點因素或區域。

創建焦點因素開始隨著互聯網佈局網格的發展而發展，這是一種讓您始終在佈局內圍繞佈局因素（以及文本內容、圖像或實用控件）的好方法。

獲得網格後，您希望通過關鍵內容部分為手動客戶設置因素。 正如您在下面看到的，這正是 Evernote 借助將文本內容塊與插圖配對所做的事情。 結果，當他們滾動瀏覽此頁面時，查看者的眼睛會沿著曲折的路線移動。

包起來

在為不同的顯示器和分辨率進行佈局時，關注 UI 因素之間的相對距離至關重要。 出現在大型筆記本電腦顯示器上的設計不會出現在小型蜂窩顯示器上。

當您的佈局縮小以容納較小的顯示器時，因素之間的間距可能會最小化，這可能會破壞 UI 因素的假定關係。 在不同的顯示器和分辨率上檢查您的佈局以查看您的佈局是否可以很好地縮放，這一點很重要。 應用 Google Chrome Dev 設備來模擬蜂窩設備是可行的。

如何改善網站用戶體驗也是您可能想了解的更多內容。 如果您想設計或重新設計您的網頁，請聯繫我們。