極簡UI界面的15個白色空間設計技巧

Sponsor

擁有一個有吸引力和用戶友好的網站是每個網站所有者的目標，而對于企業來說，網站的外觀和感覺至關重要。這就是訪問者給人留下第一印象的地方——在那短短的幾秒鐘里，用戶可能會接受或拒絕。網站設計還負責吸引訪問者的注意力，并引導他們瀏覽內容。接下來，我們來看看使用留白設計的技巧，以及一些成功案例。

使用空白的提示

元素的位置對設計師和營銷人員來說非常重要，因為訪問者對網絡資源的印象取決于他們的進一步行動。讓我們來看看在設計網站時如何使用白色空間。

Call to action?(簡稱CTA，一般指按鈕)

用戶關注按鈕只是因為旁邊什么都沒有。因此，空間可以作為一個獨立的工具來增加按鈕的重要性。

空白用于跟繁雜隔開

如何吸引用戶對產品的注意力？將其放置在中心，遠離其他圖元。除了吸引眼球之外，留白還可以從各個方面評估產品，而不會被其他因素分散注意力。

簡單而不是單調

白色空間不一定要單調。比如你可以使用產品照片作為背景圖像，并在中心放置標題和按鈕。

建立要素之間的關系

任何頁面都被訪問者視為元素的組合。這是因為如果對象組彼此靠近，我們能夠將它們連接在一起。由于相同的縮進，我們在心理上對對象進行分組，并理解它們屬于不同的類別。

簡化頁面結構

Web設計人員經常使用分隔線將元素分開。然而，這往往會打亂布局?？梢允褂每瞻讈泶婢€條進行分隔。

用戶很欣賞與界面交互的便捷性?？瞻资谷藗兡軌蛄鲿扯恢碌馗兄畔?，并消除了豐富的裝飾元素：額外的線條、塊、框架等。

空白設計案例

讓我們來看看使用空白的一些案例。

#1

如果你正在設計一個網站，那么在構建線框時劃定空白區域是有意義的。

DESIGNED BY?RAFAL CYRNEK

#2

你也可以注意這個選項，它非常適合移動版的網站。

DESIGNED BY?DMITRY LAURETSKY

#3

只要看看這部動畫中顯示的帶有空白的作品。同時，網站本身由結構明確的元素組成。

DESIGNED BY?DANIEL MONTGOMERY

#4

在這里，我們可以清楚地跟蹤定義頁面內容的網格。此外，當使用空白時，考慮不同屏幕的響應性很重要，讓內容在不同的設備上看起來都很好。

DESIGNED BY?HRVOJE GRUBISIC

#5

在這個例子中，白色空間的有效利用在景觀方向上尤其明顯?？纯催@個解決方案有多么出色。

DESIGNED BY?PAULA ?OBAT

#6

如果你正在尋找一種能有效適應任何屏幕尺寸的響應式設計解決方案，強烈建議看看這個設計。

DESIGNED BY?HAPPY TRI MILLIARTA

#7

這里是另一個很酷的例子，它使用了分布良好的白色空間。

DESIGNED BY?TARAS MIGULKO

#8

如果界面假設沒有用戶將來制作的內容，請注意此設計。只要注意空白區在這里是如何正確實現的。

DESIGNED BY?ADRIEN ROCHET

#9

在下面的示例中，你可以看到白色空間如何與放置文本的UI元素無縫融合。

DESIGNED BY?LAURENT NDG

#10

如果你打算使用多色界面元素，請注意極簡主義和簡潔性，就像下圖。

DESIGNED BY?VICE RUKAVINA

#11

如果未來的應用程序或網站涉及從亮主題切換到暗主題，我們建議分析兩種模式下的設計效果。下面的例子演示了白色空間在明暗主題中的正確使用。

DESIGNED BY?ADRIEN ROCHET

#12

這里是另一個處理黑暗主題的不平凡的例子。盡管有大量的白色空間，但這個設計看起來并沒有空洞和未完成的感覺。

DESIGNED BY?HRVOJE GRUBISIC

#13

如果項目涉及某種類型的用戶入職，那么確保您所使用的設計盡可能簡單直觀是很重要的。這可以使用空白來完成，如下圖。

DESIGNED BY?EMMANUELLE BORIES

#14

此外，不要忘記界面的所有元素都必須相互協調?？纯匆韵略O計的作者是如何專業地完成這一點的。

DESIGNED BY?DANIEL MONTGOMERY

最后

在設計中，白色空間是負空間（留白）。這不是一個空的地方，因為它有自己的目標。特別是，它平衡了設計的其余部分，突出顯示了頁面（或屏幕）上的內容。白色空間有助于集中用戶的視覺注意力。希望這篇文章對你有幫助！

原文鏈接：https://medium.com/@FlowMapp/clean-ui-guide-15-white-space-design-tips-c5320e248a26
原作者：FlowMapp
譯者：lauren來源：彩虹BOOK （ID：a3020180906）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。