在網頁設計中使用“參差不齊”的背景來吸引註意力
已發表: 2020-04-15一個好的網站都是關於小事的。 每個細節都很重要，儘管看起來它應該發揮的唯一作用就是留在陰影中。 今天，我們的聚光燈照在背景上。
自從我們談論趨勢方面的背景以來已經有一段時間了。 創意者癡迷於佔據前景的事物，因為它們有助於給人留下第一印象。 但是，界面的核心元素始終很重要。 每次我們構建新事物時，它們都會提醒我們自己。 他們再次成為關注的焦點只是時間問題。
所以，終於到了用唯一的背景做一些有趣的事情的時候了。 主要癥結在於它為整個項目提供了堅實的基礎，因此採取嚴厲措施具有挑戰性。 你需要在實用性和娛樂性部分之間取得平衡，以創造一些奢侈的東西，同時又不破壞一切。
下面的設計師似乎找到了一個完美的解決方案——斑點背景。 它們滿足了這兩個要求，並且在宣稱自己是一個小趨勢時看起來像是一股新鮮空氣。 讓我們仔細看看。
耐心的
這是移動應用程序的標準促銷網站。 本質上，這裡並沒有什麼特別之處。 您將找到一組標準技巧來展示產品，例如在自然環境中展示應用程序的 iPhone 模型。 此外，還有幾個生動的號召性用語按鈕和基本結構。
然而，立即引起注意的是背景。 它看起來像是一個自然將視線推向應用程序的大點。 而且，與此同時，它給整體美學帶來了可愛的熱情。 由於平滑的曲線和柔和的色彩，它給人一種優雅和精緻的感覺，讓標準網站看起來不那麼瑣碎。
請注意，這只是一個很小的細節，但它肯定會在這裡有所作為。 它是靜態的，僅佔屏幕的三分之一，但足以在人群中脫穎而出。
經濟
與前面的示例非常相似，這是一個簡單的網站。 然而，這一次它代表了一家數字機構。 網站的結構是傳統的，設計也是如此。 沒有奇特的細節，也沒有戲劇性的插圖。
這裡唯一的亮點是背景。 它具有兩個中等大小的白色水滴，從上到下平穩移動。 它們位於側面，因此不會分散主要標語和 CTA 的注意力。 但他們仍然為界面增添了一些趣味。
更重要的是，您可以在頁腳之前的部分和一些內頁上看到相同的方法。 這樣一來，一切都聯繫在一起，創造了一個和諧的設計。
動態斑駁的背景完美地融入了網站的商務氛圍。 它與項目的基調相匹配，與標識相呼應，也支持品牌標識。
數碼熊貓
雖然前面提到的兩個示例使用了多個位置，但 The Digital Panda 的創意團隊更喜歡只使用一個（但相當大）。 美麗的紫色斑點支持前景元素，同時避免了乾淨的白色界面看起來過於簡單。 它與插圖、CTA 和排版完美搭配。
您可能會注意到這個技巧在整個網站上都有追踪。 各個部分都受益於參差不齊的背景，帶來了連貫的用戶體驗。
Art4Web
Art4Web 背後的團隊強烈依賴視差方法來打動在線訪問者。 它位於英雄區域的核心，將模型粘合在一起。 參差不齊的背景具有幾個緩慢移動的斑點，以模仿液體表面。 它還與標識保持一致，將品牌標識帶入整體設計。
該解決方案像手套一樣合身。 它突出了前景的構圖，並為項目增添了一絲活力，使過度使用的視差方法得到了很好的轉折。
Bodymovin 解決方案
Bodymovin Solutions 押注於一種圖解方法，該方法迫使英雄區域名副其實。 與前面的示例非常相似，參差不齊的背景是部分動畫的。 而且由於這些斑點具有類似斑點的形狀，它們的行為可以預見地讓人想起液體的溫和運動。 它為小型人類插圖奠定了堅實的基礎 - 完美地補充了它們。
請注意，這裡的參差不齊的背景被用作啟動畫面的一部分，以誘人的方式打開網站。 它從一開始就創造了一致的體驗。
擴大你的圈子
正如您可能從銘牌中猜到的那樣，這裡的圓圈是該項目的核心和靈魂。 因此，在主頁上看到這種形狀也就不足為奇了。 背景也不例外。
背面的畫布上有幾個大而模糊的圓圈，顏色很漂亮。 與前面的示例非常相似，它們也開始運行。 它們有助於視覺識別並加強品牌識別，更不用說使頁面看起來很出色了。
格里弗蘭設計
雖然我們通常認為 Blob 運行節目的背景參差不齊，但事實上，沒有人能阻止您採用其他形狀，就像 Griflan Design 背後的團隊所做的那樣。
原始的參差不齊的背景標誌著他們官方網站的英雄區域。 兩個幾何形狀（一個矩形和半個圓環）以及帶有輪廓的小圖標為內容創建了基礎。 恰如其分，一切都在移動。 雖然大的形狀移動緩慢，但小的移動非常快，使畫布看起來非常令人興奮。
發現
當涉及到參差不齊的背景時，首選的形狀似乎是一個斑點。 有幾個原因。
首先，平滑的曲線不會分散注意力，從而形成完美的背景。 一方面，這樣的背景豐富了設計。 另一方面，它不與前台的內容競爭。 其次，blob 非常適合應用當今非常流行的液體行為。
然後，它們也非常適合實驗。 您可以強制它們向各個方向移動，或者相反，將它們合併在一起，仍然看起來很有趣。
最後，即使在靜態模式下，它們也看起來很棒，給乾淨的白色表面帶來了特殊的味道。