通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得發(fā)布者:本站 時(shí)間:2021-12-21 14:12:24
有時(shí)最有效的設(shè)計(jì)技巧,就是什么也沒(méi)有。而且它的目的性非常強(qiáng)。留白是最有力的設(shè)計(jì)方式之一,它使得文字清晰易讀,將注意力吸引至某部分,并且有助于打造整體氛圍。本文中,我們來(lái)看看一些優(yōu)秀的留白使用案例,看看它們?nèi)绾蝿?chuàng)造簡(jiǎn)潔的同時(shí),有效的為不同網(wǎng)站定義別致的設(shè)計(jì)風(fēng)格。
Wholedesignstudios
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
Connectmania
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
Junlu
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
留白和負(fù)空間的術(shù)語(yǔ)近年來(lái)被交替使用,它們指畫(huà)布(或數(shù)碼設(shè)備屏幕)上不包含任何內(nèi)容的空間。簡(jiǎn)而言之,留白就是空白。
但是留白空間不一定要是白色的。這個(gè)術(shù)語(yǔ)指的是任何與背景相同的空間。所以它可以是白色、黑色,甚至包含微妙的紋理。
空間是所有設(shè)計(jì)的重要組成。字間距和行間距決定了文字的易讀性。如果文字靠的太近或太松散,就很難閱讀。關(guān)鍵是找到平衡點(diǎn)。
留白也能把圖片和其他元素區(qū)分開(kāi)?;叵胍幌履阋?jiàn)到過(guò)的雜亂無(wú)章的網(wǎng)站。通常問(wèn)題就在于元素間沒(méi)有足夠的空間。記得在元素和文字間留下足夠的邊距,為了更加專(zhuān)業(yè)的外觀,應(yīng)該進(jìn)一步使用統(tǒng)一的邊距。在設(shè)計(jì)多列網(wǎng)站時(shí)也是同樣的道理(即使只有主欄和邊欄),在垂直元素間加入適當(dāng)?shù)目障叮蛣?chuàng)造出了明顯的劃分。
留白還有助于引導(dǎo)視線(xiàn),為設(shè)計(jì)建立層次,區(qū)分什么是重點(diǎn)和關(guān)鍵點(diǎn)。視線(xiàn)會(huì)立即移動(dòng)到被留白包圍的元素上。留白為其中的元素增添了沖擊力。
留白是創(chuàng)造平衡、協(xié)調(diào)的工具,也是組織網(wǎng)站內(nèi)容的基礎(chǔ)。沒(méi)有留白,如何為元素分組?如何找到導(dǎo)航?你又怎么知道滾動(dòng)有更多內(nèi)容,或是應(yīng)該從左上往右下瀏覽?所有這些視覺(jué)線(xiàn)索,都來(lái)自于設(shè)計(jì)中留白的合理運(yùn)用。
重點(diǎn)使用留白的地方
雖然有效使用留白是任何設(shè)計(jì)的重要部分,還是有些地方值得注意。
請(qǐng)看以下清單:
logo周?chē)?br />
每個(gè)導(dǎo)航按鈕或圖標(biāo)周?chē)@這些元素的“容器”
在兩列文字間,在主體部分與邊欄之間
當(dāng)你使用視覺(jué)差效果時(shí),在每頁(yè)“滾屏”之間
在所有不同的元素之間,比如照片和文字之間,或是主體內(nèi)容與頁(yè)尾之間
—————————— 12例留白的有效運(yùn)用 ——————————
Adhara
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
看看左側(cè)的邊欄和主體內(nèi)容的距離。此處的留白確實(shí)在元素之間創(chuàng)造了很棒的區(qū)分,并使彼此通過(guò)自己獨(dú)有的方式突出展示。
BeoPlay A9
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
背景與中央物體形成簡(jiǎn)潔的對(duì)比,創(chuàng)造了獨(dú)特的視覺(jué)焦點(diǎn)。與優(yōu)秀的對(duì)齊排布結(jié)合時(shí),留白還有助于將注意力從圖片引導(dǎo)至文字段落。
Fixate
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
在一個(gè)像這樣豐富的設(shè)計(jì)中,留白告訴你的眼睛應(yīng)該看哪里(還有點(diǎn)擊哪里)。
Google
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
這個(gè)搜索引擎已經(jīng)使用留白很長(zhǎng)時(shí)間了,白色的海洋中,它只有一個(gè)簡(jiǎn)單的數(shù)據(jù)入口和一個(gè)logo。
Jac in a Box
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
留白在此處的運(yùn)用是如此搶眼,因?yàn)樗娴暮艽竺娣e。將的視線(xiàn)從logo(本身的留白就運(yùn)用非常完美)吸引到另一個(gè)角落的主體文字上。
Lapka
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
這家公司用了一種獨(dú)具創(chuàng)意的方式,通過(guò)陰陽(yáng)式的留白,將視線(xiàn)吸引到這些小物件上。
Leah Haggar
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
白色字體在黑色空間上很突出。精妙的底紋為整體效果增色不少。
Medium
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
這是一個(gè)使用非白色留白的絕佳案例。
Metta Skincare
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
通過(guò)對(duì)圖片進(jìn)行設(shè)計(jì),留白為文字提供了絕佳的展現(xiàn)位置。
PandaWeb
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
留白直接將注意力轉(zhuǎn)移至這家公司的業(yè)務(wù)上。
Square
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
這個(gè)網(wǎng)站將元素間的留白運(yùn)用得很棒,作為圖片和按鈕的視覺(jué)焦點(diǎn),也作為分欄的間隙。每個(gè)細(xì)節(jié)處的留白都精心處理過(guò),創(chuàng)造了視覺(jué)沖擊。
The Mealings
通過(guò)留白打造簡(jiǎn)潔有效的設(shè)計(jì)心得,PS教程,
簡(jiǎn)潔、美觀、舒適。留白——在設(shè)計(jì)與logo中——成就了這些特點(diǎn),看起來(lái)簡(jiǎn)潔得不可思議。
選擇我們,優(yōu)質(zhì)服務(wù),不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源,強(qiáng)大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話(huà):021-58370032
關(guān)鍵詞標(biāo)簽:上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開(kāi)發(fā)