通過(guò)留白打造簡(jiǎn)潔有效的設計心得發(fā)布者：本站     時(shí)間：2021-12-21 14:12:24

有時(shí)最有效的設計技巧，就是什么也沒(méi)有。而且它的目的性非常強。留白是最有力的設計方式之一，它使得文字清晰易讀，將注意力吸引至某部分，并且有助于打造整體氛圍。本文中，我們來(lái)看看一些優(yōu)秀的留白使用案例，看看它們如何創(chuàng )造簡(jiǎn)潔的同時(shí)，有效的為不同網(wǎng)站定義別致的設計風(fēng)格。

Wholedesignstudios

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

Connectmania

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

Junlu

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

留白和負空間的術(shù)語(yǔ)近年來(lái)被交替使用，它們指畫(huà)布(或數碼設備屏幕)上不包含任何內容的空間。簡(jiǎn)而言之，留白就是空白。

但是留白空間不一定要是白色的。這個(gè)術(shù)語(yǔ)指的是任何與背景相同的空間。所以它可以是白色、黑色，甚至包含微妙的紋理。

空間是所有設計的重要組成。字間距和行間距決定了文字的易讀性。如果文字靠的太近或太松散，就很難閱讀。關(guān)鍵是找到平衡點(diǎn)。

留白也能把圖片和其他元素區分開(kāi)?；叵胍幌履阋?jiàn)到過(guò)的雜亂無(wú)章的網(wǎng)站。通常問(wèn)題就在于元素間沒(méi)有足夠的空間。記得在元素和文字間留下足夠的邊距，為了更加專(zhuān)業(yè)的外觀(guān)，應該進(jìn)一步使用統一的邊距。在設計多列網(wǎng)站時(shí)也是同樣的道理(即使只有主欄和邊欄)，在垂直元素間加入適當的空隙，就創(chuàng )造出了明顯的劃分。

留白還有助于引導視線(xiàn)，為設計建立層次，區分什么是重點(diǎn)和關(guān)鍵點(diǎn)。視線(xiàn)會(huì )立即移動(dòng)到被留白包圍的元素上。留白為其中的元素增添了沖擊力。

留白是創(chuàng )造平衡、協(xié)調的工具，也是組織網(wǎng)站內容的基礎。沒(méi)有留白，如何為元素分組?如何找到導航?你又怎么知道滾動(dòng)有更多內容，或是應該從左上往右下瀏覽?所有這些視覺(jué)線(xiàn)索，都來(lái)自于設計中留白的合理運用。

重點(diǎn)使用留白的地方

雖然有效使用留白是任何設計的重要部分，還是有些地方值得注意。

請看以下清單：

logo周?chē)?br />
每個(gè)導航按鈕或圖標周?chē)?，并圍繞這些元素的“容器”

在兩列文字間，在主體部分與邊欄之間

當你使用視覺(jué)差效果時(shí)，在每頁(yè)“滾屏”之間

在所有不同的元素之間，比如照片和文字之間，或是主體內容與頁(yè)尾之間

—————————— 12例留白的有效運用 ——————————

Adhara

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

看看左側的邊欄和主體內容的距離。此處的留白確實(shí)在元素之間創(chuàng )造了很棒的區分，并使彼此通過(guò)自己獨有的方式突出展示。

BeoPlay A9

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

背景與中央物體形成簡(jiǎn)潔的對比，創(chuàng )造了獨特的視覺(jué)焦點(diǎn)。與優(yōu)秀的對齊排布結合時(shí)，留白還有助于將注意力從圖片引導至文字段落。

Fixate

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

在一個(gè)像這樣豐富的設計中，留白告訴你的眼睛應該看哪里(還有點(diǎn)擊哪里)。

Google

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

這個(gè)搜索引擎已經(jīng)使用留白很長(cháng)時(shí)間了，白色的海洋中，它只有一個(gè)簡(jiǎn)單的數據入口和一個(gè)logo。

Jac in a Box

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

留白在此處的運用是如此搶眼，因為它真的很大面積。將的視線(xiàn)從logo(本身的留白就運用非常完美)吸引到另一個(gè)角落的主體文字上。

Lapka

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

這家公司用了一種獨具創(chuàng )意的方式，通過(guò)陰陽(yáng)式的留白，將視線(xiàn)吸引到這些小物件上。

Leah Haggar

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

白色字體在黑色空間上很突出。精妙的底紋為整體效果增色不少。

Medium

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

這是一個(gè)使用非白色留白的絕佳案例。

Metta Skincare

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

通過(guò)對圖片進(jìn)行設計，留白為文字提供了絕佳的展現位置。

PandaWeb

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

留白直接將注意力轉移至這家公司的業(yè)務(wù)上。

Square

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

這個(gè)網(wǎng)站將元素間的留白運用得很棒，作為圖片和按鈕的視覺(jué)焦點(diǎn)，也作為分欄的間隙。每個(gè)細節處的留白都精心處理過(guò)，創(chuàng )造了視覺(jué)沖擊。

The Mealings

通過(guò)留白打造簡(jiǎn)潔有效的設計心得,PS教程,

簡(jiǎn)潔、美觀(guān)、舒適。留白——在設計與logo中——成就了這些特點(diǎn)，看起來(lái)簡(jiǎn)潔得不可思議。